Mobile first ตอนที่ 5 Actions

Mobile first ตอนที่ 5 Actions

หลักพื้นฐานในการออกแบบ User Interface ให้ง่ายต่อการทัช มีดังนี้

- ตรงที่จะให้ User ทัชนั้น (เรียกว่า Touch Target) ควรมีตาแหน่งและขนาดที่เหมาะสม
- เรียนรู้และเข้าใจท่าทางการทัชอย่างเป็นธรรมชาติของมนุษย์เป็น และวิธีการที่มนุษย์จะพาตัวเองไปหาจุดมุ่งหมาย
- ครอบคลุมเรื่องการ hover
- อย่าลืมเรื่องการใช้งานบนโทรศัพท์รุ่นที่ยัง touch ไม่ได้ด้วย

GO SMALL BY GOING BIG
หลักการออกแบบบนหน้าจอเล็กๆ สาหรับ Touch Target คือ ต้องออกแบบ Touch Target ให้มีขนาดอย่างน้อย 44×44 พิกเซล และระหว่าง Touch Target แต่ละอันให้มีระยะห่างประมาณ 2 มิลลิเมตร หรืออย่างน้อย ก็ควรจะให้ Touch Target มีขนาดอย่างน้อยประมาณ 50%-100% ของขนาด 44×44 พิกเซล

WHERE DO WE TOUCH?
จากการสารวจ 70%-90% ของมนุษย์ถนัดมือขวา ถ้ามนุษย์ใช้มือขวาเป็นมือหลักในการ Touch ตาแหน่งบนหน้าจอที่ง่ายต่อการ Touch มากสุดจนถึงยากสุดคือ ซ้ายล่าง (ง่ายสุด)  ซ้ายบน (ยากสุด)

LEARN THE LANGUAGE OF TOUCH

ท่าทางในการ Touch หลักๆ ก็จะมี tap (แตะเบาๆ), double tap (แตะ), drag (ลาก), swipe (ปัด), pinch (หยิก), spread (กระจาย), press (กด), press และ tap (กดและแตะเบา), press และ drag (กดและลาก) และการหมุนในหลากหลายรูปแบบ นักออกแบบ จะนาท่าทางเหล่านี้ มาประกอบการใช้งานบน App หรือ Website ของเขา เช่น tap ปุ่มเปิดปิดเมนูเพื่อเปิดปิดเมนู หรือ ดึงหน้าจอลงมาเพื่อ refresh เป็นต้น

DON’T FEAR THE NUI
อย่ากลัว Natural User Interfaces (NUIs) เนื่องจากมนุษย์มีท่วงท่าการ Touch หน้าจออย่างเป็นธรรมชาติ การเข้าถึงข้อมูลก็จะเป็นไปอย่างเป็นธรรมชาติด้วยเช่นกัน การออกแบบด้วยหลักการของ NUIs คือลดภาพกราฟิกที่ไม่จาเป็น เพื่อให้ User เข้าถึงข้อมูลได้โดยง่ายและเป็นธรรมชาติที่สุด COVER THE HOVER การทดแทน hover เมื่ออยู่ในมือถือ มีดังนี้
1. นาสิ่งที่แสดงตอน hover มาแสดงไว้บนหน้าจอ ไม่ต้องมี action ใดๆ ก็เห็น
2. ใช้วิธีการ tap หรือ swipe แทนการ hover
3. ใช้วิธีการแยกออกมาอีกหน้าจอเมื่อจะ action ใดๆ เช่น tap แล้วเปิดหน้าใหม่
4. ตัดทิ้ง ใช้กรณีที่ hover นั้น ไม่สาคัญ

CANT’T TOUCH THIS
สาหรับมือถือที่ touch ไม่ได้ การใช้ :hover หรือ :focus ก็ยังมีความจาเป็น เพราะว่า มือถือเหล่านี้ใช้ trackball, trackpads, keypads, scrollwheels และ keyboards ซึ่งการ focus ณ จุดใดๆ บนหน้าเว็บควรจะทาให้ User เห็นและเข้าใจให้ง่ายๆ

Leave a Reply