การแฮ็ก UI แบบง่ายเพื่อปรับปรุงการลงทะเบียน UX [OCD]

UI Mockups และภาพร่างถือว่าข้อมูลผู้ใช้มีอยู่แล้ว ตัวอย่างเช่นการจำลองด้านล่างถือว่าผู้ใช้จะมีผู้ติดต่อเพื่อแชทด้วยการแจ้งเตือนและแม้กระทั่งการแชทกระทู้

ผู้ส่งสาร UI ที่เรียบง่ายสร้างขึ้นโดยใช้ทรัพยากรร่างฟรีนี้

แต่นี่จะไม่เกิดขึ้นเมื่อผู้ใช้สมัครใช้งาน ในการเริ่มต้นไม่มีข้อมูลดังนั้นคอลัมน์ผู้ติดต่อที่ว่างเปล่าและหน้าต่างการแชทที่ว่างเปล่า

การออกแบบ UI เงางามทำให้ง่ายต่อการใช้ข้อมูลและไม่ได้มุ่งเน้นไปที่วิธีการสร้างข้อมูลนั้น

ฉันเรียนรู้สิ่งนี้ยากเมื่อฉันเปียกแฉะมากเท่าที่ Dribbble ฉันสามารถออกแบบแดชบอร์ดสำหรับแอปพลิเคชัน b2b มันดูดีใน Sketch แต่ลูกค้าของเราไม่สามารถหาทางผ่านได้

Bad UX เพิ่มค่าใช้จ่ายในการขึ้นเครื่องและสนับสนุนซึ่งมีผลกระทบโดยตรงต่อรายได้ นอกจากนี้ยังรู้สึกไม่ดีในการรับชมผู้ใช้ที่พยายามใช้การออกแบบพิกเซลที่สมบูรณ์แบบ เตือนคุณว่าคุณล้มเหลว

โซลูชั่นที่มีอยู่

ทางออกหนึ่งคือให้มีการขึ้นเครื่องล่วงหน้าโดยใช้สไลด์เช่นส่วนต่อประสาน นี่น่าจะเป็นมาตรฐานสำหรับแอพมือถือ

Slack on-boarding UX ของ Slack

ปัญหาเกี่ยวกับวิธีการสไลด์คือการขาดบริบท คุณสามารถถ่ายทอดบนสไลด์ได้มากเพียงใด (ผู้ใช้ยังคงเป็นคำถามที่แตกต่างกันมาก)

เป็นการดีที่จะให้ภาพรวมของผลิตภัณฑ์ แต่ไม่มีประโยชน์ในการอธิบายว่าผลิตภัณฑ์ทำงานอย่างไร มันไม่เกี่ยวข้องกับกรณีการใช้งานของฉันเนื่องจากความซับซ้อนของผลิตภัณฑ์ไม่สามารถต้มลงไปสองสามสไลด์

นอกจากนี้ยังมีโซลูชันที่แนะนำเครื่องมือซึ่งจะนำผู้ใช้ไปยังขั้นตอนเฉพาะ ตัวเลือกนี้ได้รับความนิยมมากขึ้นด้วยเว็บแอป มีไลบรารีจาวาสคริปต์ที่ดีมากมายที่จะช่วยคุณสร้างโฟลว์เหล่านี้

Tooltip อ้างอิงจากการสาธิตการขึ้นเครื่องสำหรับ introjs.com/

เท่าที่เป็นไปตามคำแนะนำของเครื่องมือฉันพบว่ามันน่ารำคาญและคลิก“ ข้ามบทช่วยสอน” เกือบตลอดเวลา แม้ว่า บริษัท ใหญ่ ๆ อย่าง Canva จะใช้คำแนะนำเครื่องมือซึ่งอยู่บนกระดาน ผลิตภัณฑ์ที่เรียกว่า AppCues ช่วยให้คุณสามารถออกแบบเคล็ดลับเครื่องมือเหล่านี้ได้โดยไม่ต้องมีรหัสเรียบร้อย

นอกจากนี้ยังมีแนวทางแบบสัญญาณซึ่งมีคุณสมบัติการเข้าใจผิดทั่วไปที่ติดป้ายบีคอนซึ่งให้ข้อมูลที่เกี่ยวข้องเมื่อต้องการ (ถ้า)

นี่เป็นวิธีที่ไม่เป็นการรบกวน ซึ่งแตกต่างจากเคล็ดลับเครื่องมือที่ผลัก 17 ขั้นตอนการสอนลงลำคอของคุณและหายไปเมื่อคุณต้องการมันวิธีการตามฮอตสปอตนี้ให้ข้อมูลเมื่อคุณพร้อม

เป็นมูลค่าการกล่าวขวัญว่า Slack ใช้ทั้ง 3 รูปแบบ ไม่น่าแปลกใจที่ผู้ใช้ของพวกเขาติด ซึ่งยังมีนัยสำคัญกับความจริงที่ว่าการเก็บรักษาเป็นสัดส่วนโดยตรงเพื่อความสะดวกในการขึ้นเครื่อง

OCD หรือที่รู้จักในการออกแบบออนบอร์ดศูนย์กลาง

ฉันชอบการตั้งชื่อสิ่ง ชื่อช่วยให้ความคิดเป็นจริงในใจ ดังนั้นเราจึงเรียกการออกแบบนี้ว่าเป็นศูนย์กลาง

ฉันต้องการทางออกซึ่ง:

  • มีความเกี่ยวข้องกับบริบท
  • ไม่น่ารำคาญ (ไม่มีใครชอบที่จะทำตาม 17 ขั้นตอนเพื่อเรียนรู้วิธีการทำงานของคุณสมบัติ)
  • ไม่เป็นการรบกวน (เช่นบีคอน)
  • ง่ายต่อการบริโภค (เคล็ดลับเครื่องมือไม่ใช่เรื่องง่ายที่จะบริโภค)

ผล

ฉันเพียงแค่เริ่มออกแบบรัฐ การออกแบบการแชทที่คุณเห็นในขณะที่คุณเริ่มอ่านบทความนี้สามารถออกแบบได้ด้วยสามสถานะ

สถานะ 1: ไม่มีที่อยู่ติดต่อ

สถานะ 2: มีที่ติดต่ออยู่ แต่ไม่มีการแชท

สถานะ 3: มีทั้งการแชทและการติดต่อ

เป้าหมายของแต่ละรัฐคือการพัฒนาผู้ใช้ไปสู่สถานะต่อไป เมื่อผู้ใช้เข้าสู่สถานะ 3 เธอจะขึ้นเครื่องได้สำเร็จ พิจารณาการแชตจำลองเป้าหมายสำหรับแต่ละรัฐมีดังนี้:

เป้าหมายของรัฐ 1: ผู้ใช้งานหลักเพื่อเพิ่มผู้ติดต่อ

mockup ด้านล่างมีคำกระตุ้นการตัดสินใจเพียงปุ่มเดียวปุ่มสีฟ้าที่ให้ผู้ใช้เพิ่มผู้ติดต่อใหม่ กราฟิกและข้อความทำให้ผู้ใช้ดำเนินการนั้น

สถานะ 1 - ทำให้ผู้ใช้เพิ่มผู้ติดต่อ (ภาพประกอบโดย undraw.co)

เมื่อเพิ่มที่อยู่ติดต่อแล้วเราสามารถเริ่มเป้าหมายที่สองได้

เป้าหมายของรัฐที่ 2: ผู้ใช้เฉพาะเพื่อเริ่มการแชท

mockup ด้านล่างแสดงให้เห็นว่ามีไพรเมอร์กราฟิกเพื่อเริ่มการสนทนา มันแสดงคุณสมบัติที่มีอยู่อย่างชัดเจน อีกครั้งมีเพียงสิ่งเดียวที่คุณสามารถทำได้ตอนนี้คือส่งข้อความ คุณสามารถโทรออกได้ใน UI นี้ แต่การกระทำทั้งสองอย่างนี้มีจุดประสงค์เดียวกัน พวกเขานำผู้ใช้ของคุณไปยังขั้นตอนที่ 3

สถานะ 2 - เพิ่มผู้ติดต่อแล้วเพื่อเริ่มการแชท

เป้าหมายของรัฐ 3: ไม่มีผู้ใช้อยู่บนเครื่อง - สัญญาณทั้งหมดควรหายไป

และในที่สุดเมื่อผู้ใช้ของคุณทำกระบวนการซ้ำสองสามครั้ง UI ของเธอจะเริ่มมองตามที่เราตั้งใจไว้

สถานะ 3 - ผู้ใช้สำเร็จบนเครื่อง

ประโยชน์ของวิธีนี้

  • เปรียบเทียบกับวิธีการสไลด์ในขั้นตอนที่ 1 Onboarding Centric Design (OCD) นำเสนอเนื้อหาเป็นชิ้น ๆ ข้อมูลมีอยู่ ณ จุดตัดสินใจ
  • วิธีนี้สามารถใช้กับอุปกรณ์มือถือและเดสก์ท็อป UI นี้เรียบง่าย แต่ในกรณีของ UI ที่ซับซ้อนคุณสามารถใช้ OCD กับฮอตสปอตเพื่อยกระดับ CTA
  • วิธีนี้ช่วยปรับปรุง UX ของคุณตั้งแต่แรกโดยบังคับให้คุณคิดในแง่ของการเดินทางของผู้ใช้
  • หากคุณเขียนส่วนหน้าของคุณโดยใช้ React วิธีนี้จะเข้ากับสถาปัตยกรรมของส่วนประกอบได้อย่างเรียบร้อย

ดังนั้นตามกฎของหัวแม่มือ:

ออกแบบจำลองสำหรับรัฐ
แต่ละรัฐมีหนึ่งเป้าหมาย - ไปสู่สถานะถัดไป
สถานะสุดท้ายคือเมื่อผู้ใช้ของคุณอยู่บนเครื่อง

ขอบคุณที่อ่าน :)

สวัสดีถ้าคุณชอบบทความนี้และต้องการอัปเดตอยู่เสมอติดตามฉันได้ที่: Medium, Github หรือ Twitter

ฉันใช้ชุมชนที่หย่อน (ซึ่งมีสมาชิก 18 คนเมื่อวันที่ 6 ตุลาคม 2018) ซึ่งคุณสามารถช่วยเหลือผู้อื่นหรือรับความช่วยเหลือเกี่ยวกับส่วนหน้าส่วนหลังและการพัฒนาโดยทั่วไป คุณสามารถเข้าร่วมได้ที่นี่