ออกแบบ UI States อย่างไรให้ครบทุกเคส
สำหรับคนมีเวลาอ่านน้อย 🕒
บทความนี้จะพาไปทำความรู้จักการออกแบบ UI ในแต่ละ states ดังนี้
1. State ในแต่ละประเภท
2. วิธี Export หน้าจอในแต่ละ State ให้เดฟเข้าใจง่าย
3. ประโยชน์ของการแบ่งหน้าจอเป็น State
กด 🔖 (Bookmark) ไว้อ่านทีหลังกันได้ถ้าไม่มีเวลา
ใครอยากเข้าใจมากขึ้น เริ่มอ่านบทความนี้ได้เลย 👇🏻
การออกแบบ Hi-fidelity wireframe หรือ Prototype ให้กับ Developer ที่ดี อยากจะให้เดฟรักเดฟหลง และทำงานง่ายขึ้นกว่าเดิม ก็คือการที่ออกแบบหน้าตาของแอปหรือเว็บไซต์ให้ครบทุก States ให้เดฟได้เห็นว่าหน้าจอในแต่ละสถานะจะเป็นแบบไหน แล้วแต่ละ State มีอะไรบ้างล่ะ? ไปดูกันเลยดีกว่าาาาา
เกริ่น 🧐
ในโลกนี้มีสิ่งที่เรียกว่า “State” เปรียบเสมือนกับสถานะแต่ละแบบของหน้าจอ ที่มีโอกาสจะเกิดขึ้นได้ ถ้าหากว่า UI designer สามารถออกแบบและระบุ States ให้ครบทุกโอกาสที่จะเกิดขึ้นได้ จะทำให้เดฟนึกภาพออกและทำงานได้ง่ายขึ้นอีกเป็นกองเลย!
State แต่ละแบบมันมีอะไรบ้างล่ะ? 🤔
1. Ideal
ทุกสิ่งสวยงาม! Ideal เป็น State ที่หน้าจอที่ข้อมูลทุกอย่างแสดงอย่างถูกต้อง จะเป็นหน้าจอที่เราได้เห็นบ่อยที่สุดตามดีไซน์ทั่ว ๆ ไป เพราะมันเพอร์เฟกต์ไงล่ะ จึงเป็นหน้าจอ State พื้นฐาน ที่ยังไงก็ต้องมี!
2. Empty
โลกที่เต็มไปด้วยสีขาวและความว่างเปล่า… Empty state หรืออาจจะเรียกว่า Blank state ก็ได้ เป็นอีกหนึ่ง State ที่ขาดไปไม่ได้เลย ชื่อก็บอกตรงตัวอยู่แล้วว่า เมื่อข้อมูลว่าง State นี้จะมา! หน้านี้อาจจะเกิดขึ้นได้เมื่อผู้ใช้เข้ามาครั้งแรก หรืออาจจะลบข้อมูลไปจนหน้านี้ว่าง ก็จะต้องออกแบบไว้ว่าถ้าเกิดหน้าว่างแล้ว คอนเทนต์แต่ละอย่างบนหน้าจอจะเป็นแบบไหน ไอคอนจะขึ้นยังไง หรือมีโลโก้อะไรขึ้นมาแทนที่คอนเทนต์นั่นเอง
3. Error
ฟอร์มกรอกข้อมูลของฉันแดงฉาน! เมื่อเรากรอกข้อมูลผิด หรือฟิลด์ถูก Validate แล้วไม่ถูกต้อง ก็จะมี Error state มารองรับนั่นเอง ซึ่ง Error state อาจจะเกิดจากผู้ใช้เองหรือเกิดจากระบบก็ได้ เช่น หากเกิดจากผู้ใช้ อาจจะเป็นการกรอกฟอร์มผิด ซึ่งก็จะต้องบอกและแนะนำผู้ใช้ให้เข้าใจด้วยว่าเขาต้องกรอกยังไงถึงจะถูก ส่วนถ้าหากเกิดจากระบบ อาจจะเป็นเรื่องของการเชื่อมต่อหรือระบบหลังบ้าน ก็จะต้องแสดงให้ผู้ใช้เข้าใจว่าตอนนี้มันเกิดอะไรขึ้นกันแน่
4. Loading
หมุน หมุน หมุน! เมื่อคิดถึงการที่แอปของเรากำลังโหลดอยู่ ก็คงนึกภาพว่ามันกำลังหมุน ๆ เป็นอย่างแรก หรือที่คุ้นเคยกันก็อาจจะเป็น Progress bar ที่เป็นแถบการโหลด เพื่อบอกผู้ใช้ว่าแอปอยู่ในสถานะกำลังโหลดอยู่ ไม่ให้ผู้ใช้รู้สึกว่ารอนานเกินไป ส่วนแอปในยุคใหม่นั้นจะเน้นการใช้ Skeleton ซึ่งมีลักษณะคล้ายเป็น Wireframe layout ที่แอปกำลังโหลดไม่เสร็จอยู่นั่นเอง
5. Interactive
การเคลื่อนไหวและความมีชีวิตชีวา… Interactive state เป็น State ที่ช่วยให้แอปของเราดูมีชีวิตชีวามากยิ่งขึ้น เมื่อผู้ใช้ทำการคลิกอะไรสักอย่างบนหน้าจอ จะมีแอนิเมชันหรือสิ่งต่าง ๆ บนหน้าจอจะเปลี่ยนไปยังไงบ้าง
6. Success
สำเร็จ! ใครได้เห็นคำนี้ก็คงยิ้มแก้มปริ เพราะสิ่งที่เราทำมันได้เสร็จเรียบร้อยแล้ว Success state ที่คุ้นชินตากับไอคอนติ๊กถูกหรือสีเขียว เป็นสิ่งที่ช่วยบอกผู้ใช้ให้รู้ว่าจบสิ้น Flow ที่ทำเรียบร้อยแล้ว ก็จะมีหน้าจอที่จะต้องออกแบบมารองรับว่าถ้าเสร็จแล้วจะเป็นยังไง หรือจะมีปุ่มไปไหนต่อมั้ย
7. Imperfect
สิ่งที่ไม่สมบูรณ์… State นี้จะออกแบบมาเพื่อให้เห็นว่า ถ้าข้อมูลที่จะแสดงนั้นไม่ครบ จะเป็นยังไง, ข้อความที่ยาวมาก ๆ เกินไป จะต้องตัดคำที่ตรงไหน หรือถ้าเกิดรูปหาย เนื้อหาไม่ครบ จะต้องทำยังไงให้ผู้ใช้ไม่รู้สึกว่าแอปเราพังอยู่นั่นเอง
8. Partial
ครั้งแรกที่เราได้พบกัน… จะบอกว่าเปรียบเสมือน First impression ก็ไม่เชิง แต่เป็นการที่ผู้ใช้ได้ Interact กับแอปเราเป็นครั้งแรก ก็จะต้องออกแบบว่าผู้ใช้จะพบเจอกับอะไรบ้าง และจะ Lead ผู้ใช้ให้ทำอะไรต่อบ้าง
Export แบบไหนให้เข้าใจง่ายกันนะ? 🎨
ปกติแล้วหากใช้ Zeplin ในการ Export จะช่วยในการจัด Design system ได้ค่อนข้างดีมาก และทำให้เดฟง่ายต่อการ Filter หน้าจอในแต่ละ State ได้ง่ายขึ้นด้วย!
หากจะระบุ State ได้ง่ายขึ้น มีวิธีง่าย ๆ ตามนี้เลย
1. ชื่อ Artboard จะถูกระบุ State ไว้ต่อท้ายจากชื่อ Screen เช่น
Mobile/Register/General Info — Ideal2. เมื่ออัปโหลดขึ้นบน Zeplin จะระบุ State ไว้เป็น Tags เพื่อที่จะทำให้ Developer สามารถกดเพื่อ Filter เพื่อค้นหาหน้าจอตามต้องการได้เลยทันที
สรุป ✏️
การระบุหน้าจอเป็น State จะช่วยให้เห็นหน้าจอครบทุก ๆ อย่าง ทุก ๆ เคสที่มีโอกาสจะเกิดขึ้นได้ นอกจากจะทำให้ผู้ใช้รู้สึกใช้แอปได้อย่างลื่นไหลตาม Flow แล้ว ยังทำให้ Developer ทำงานได้ง่ายขึ้นอีกด้วย!
