ทำไมถึงไม่ควรปล่อยให้ Empty State ว่างเปล่า
เผยแพร่เมื่อ 11 Oct 2022 โพสไปที่หน้าจอ empty state มักถูกมองข้ามไปจน UI เกือบจะเสร็จสมบูรณ์ แล้วจึงตระหนักได้ว่าบางครั้งก็มีหน้าจอที่ต้องปล่อยให้ว่างเหมือนกัน วิธีที่ง่ายที่สุดคือการใส่ข้อความแสดง error บนหน้าจอแล้วก็จบกันไป นอกจากนั้นแล้ว ทำไมต้องเสียเวลากับหน้าจอที่ผู้ใช้แค่ 2% จะมองเห็นแค่ไม่กี่วินาทีด้วยล่ะ เอาเวลาและความพยายามไปใช้กับหน้าจออื่นเสียยังจะดีกว่า จริงไหม
ที่จริงแล้วนั้น 2% ที่คุณเลือกจะมองข้ามไปมีความสำคัญมากกว่าที่คิด อาจมีผู้ใช้ใหม่ที่เพิ่งจะเริ่มใช้ผลิตภัณฑ์เป็นครั้งแรกและกำลังตัดสินใจว่าควรใช้ต่อดีไหม และหากพวกเขาไม่รู้จะทำอย่างไรต่อ ก็อาจจะรู้สึกผิดหวังกับแอปฯ และถ้าไม่รู้ถึงวิธีการใช้ฟีเจอร์ต่างๆ พวกเขาอาจลบแอปฯ ทิ้งไปเลยก็ได้
ในฐานะนักออกแบบ เราควรใช้ทุกโอกาสที่มีในการปรับปรุงประสบการณ์ผู้ใช้ และสร้างคุณค่าให้กับบริษัทมากขึ้นด้วย
ที่มา: Spotify
Empty state ในการออกแบบ UX คืออะไร
Empty state คือหน้าจอที่ไม่มีอะไรแสดงผลหรือยังไม่มีข้อมูลเพียงพอ ตัวอย่างเช่น หน้าจอ Dropbox หน้าใหม่ที่ยังไม่มีไฟล์ หาข้อมูลบน Google แล้วไม่พบผลการค้นหา หรือเมื่อสร้างบัญชี Facebook ขึ้นมาใหม่แล้วยังไม่มีกิจกรรมหรือเพื่อนเลย
Empty state ที่ดีจะบอกผู้ใช้ว่าอะไรกำลังเกิดขึ้น รวมถึงเหตุผลที่เกิดด้วย แต่ empty state ที่ดีที่สุดจะบอกผู้ใช้ว่าควรทำอะไรต่อไป
มี empty state ที่ผู้ใช้มักพบบ่อยอยู่ 4 ประเภทด้วยกัน ได้แก่
First use – เกิดขึ้นกับผู้ใช้ใหม่เมื่อไม่มีอะไรจะแสดงผล
User cleared – เมื่อผู้ใช้เคลียร์ลิสต์หรือกล่องข้อความ ส่งผลให้หน้าจอว่างเปล่า
Errors – เมื่อมีสิ่งที่ไม่คาดคิดหรือปัญหาเกิดขึ้น
No results/data – เมื่อไม่มีอะไรจะแสดงผล เช่น เมื่อไม่พบผลการค้นหา
ข้อดีของ empty state
เราไม่ควรมองข้ามการออกแบบ empty state ที่ดี เพราะไม่ใช่แค่ช่วยให้ประสบการณ์ผู้ใช้ดีขึ้น แต่ยังเป็นโอกาสดีที่ทำให้ผู้ใช้พึงพอใจและใช้งานแอปฯ ได้อย่างเต็มที่
User onboarding – คือโอกาสในการสร้างความน่าเชื่อถือ และแสดงให้เห็นว่าธุรกิจนั้นสามารถมอบอะไรให้แก่ลูกค้าได้บ้าง
การสร้างแบรนด์ – เพิ่มโอกาสที่ผู้ใช้จะเข้าใจแอปฯ และยังส่งเสริมให้บริษัทสร้างคุณค่าของแบรนด์ในสายตาผู้ใช้อีกด้วย
ปรับให้เหมาะกับผู้ใช้ – สร้างคาแรกเตอร์ให้มีความขี้เล่น สนุกสนาน หรือจริงจัง ตามที่บริษัทอยากจะสื่อ
Empty state ที่ดีเป็นอย่างไร
ต่อไปนี้คือเคล็ดลับที่คุณควรรู้ในการออกแบบ empty state ที่มีประสิทธิภาพ
ให้ข้อมูลชัดเจน
เมื่อผู้ใช้พบเจอกับ empty state มีเรื่องที่คุณต้องบอก 2 เรื่อง ได้แก่
จุดประสงค์ของหน้าจอนั้น
เหตุผลที่ผู้ใช้ถึงมองเห็น empty state
ตัวอย่างของ empty state ที่เรานำมาให้ดูนั้นสื่อสารกับผู้ใช้ได้อย่างมีประสิทธิภาพ เมื่ออ่านอย่างละเอียดแล้ว หน้าจอนี้สื่อให้เห็นถึงจุดประสงค์ของการแสดงหน้าจอ และจุดประสงค์ของการบันทึกข้อความเป็นฉบับร่าง
ที่มา: Material.io
รับมือกับ failure state
หากมี error เกิดขึ้น คุณควรบอกผู้ใช้ว่าเกิดอะไรขึ้นและแนะนำวิธีการแก้ไข ต่อไปนี้คือวิธีจัดการกับ empty state ที่แสดง error
แสดงข้อความที่ไม่เป็นเชิงเทคนิค (เพราะผู้ใช้ส่วนใหญ่ไม่เข้าใจว่า 404 คืออะไร)
แนะนำขั้นตอนการแก้ไขปัญหาด้วยข้อความที่สั้นที่สุด
อย่าใช้ศัพท์ทางเทคนิค
อนุญาตให้ผู้ใช้ reload หน้าจอได้
ที่มา: Google Cast
สร้าง call to action
Empty state สร้างโอกาสที่ดีให้เหล่านักออกแบบได้กระตุ้นผู้ใช้ให้ใช้งานผลิตภัณฑ์ คุณสามารถบอกผู้ใช้ถึงฟีเจอร์ของผลิตภัณฑ์รวมไปถึงวิธีใช้งาน แทนที่จะปล่อยให้ผู้ใช้รู้สึกหลงทางอยู่ใน UI นั้น การแก้ไขสถานการณ์นี้ทำได้ง่ายๆ ด้วยการเพิ่มปุ่ม call to action ที่บอกผู้ใช้ว่าขั้นตอนต่อไปควรทำอะไร
มีคาแรกเตอร์
มีเส้นคั่นบางๆ อยู่ระหว่างการสร้างคาแรกเตอร์ให้กับแบรนด์ และการทำให้มันออกมาไม่ตลกและดูพยายามมากเกินตัว empty state เป็นหนึ่งในพื้นที่ที่คุณสามารถเพิ่มคาแรกเตอร์ลงไปได้ แต่ก็ไม่ได้หมายความว่ามันจำเป็นต้องตลกเสมอไป มุกตลกอาจน่าขำในวันนี้ แต่น่าเบื่อในวันต่อมาก็เป็นได้ การเพิ่มความประหลาดใจอาจทำให้ประสบการณ์ผู้ใช้ดีขึ้นได้ แม้ในหน้า empty state ที่ยากจะพบเจอ
ที่มา: Google Chrome
คอนเทนต์หน้าแรก
คุณสามารถใช้ empty state ในการแสดงให้ผู้ใช้เห็นถึงวิธีการใช้ผลิตภัณฑ์และฟีเจอร์ที่สำคัญ การใช้ empty state ในขั้นตอน onboarding นั้นเป็นวิธีที่มีประสิทธิภาพ ซึ่งจะช่วยให้ผู้ใช้ทำความคุ้นเคยกับผลิตภัณฑ์ และยังทำให้ผลิตภัณฑ์นั้นมีประโยชน์ต่อผู้ใช้อีกด้วย
ที่มา: Starbucks app
Empty state ไม่ควรถูกปล่อยให้ว่างเปล่าเนื่องจากเราสามารถใช้มันในการเริ่มสื่อสารกับผู้ใช้ได้ ซึ่งจะนำไปสู่ความสัมพันธ์กับผู้ใช้ในระยะยาว การนำเคล็ดลับข้างต้นไปใช้จะช่วยคุณสร้าง empty state ที่มี call to action ชัดเจน และยังกระตุ้นให้ผู้ใช้ได้ใช้งานผลิตภัณฑ์มากขึ้นด้วย
Taylor Swift เคยกล่าวไว้ว่า “But I’ve got a blank space baby and I’ll write your name” หากนักร้องคนหนึ่งรู้ว่าไม่ควรปล่อยพื้นที่ว่างให้ว่างเปล่า ในฐานะนักออกแบบ เราก็สามารถคิดค้นอะไรที่สร้างสรรค์ออกมาได้เหมือนกัน
เยี่ยมชมหน้าบริการของเราเพื่อเรียนรู้เกี่ยวกับ UX UI design ที่มอร์โฟซิสได้เลย
