iUXUI Journey XI — UI tips
รวบรวมทริคในการออกแบบ UI เพื่อไว้เป็นแหล่งอ้างอิง ตอนที่เราจะออกแบบบ้าง
7 สิ่งที่ควรทำ จาก designil
- ทำสีของลิงค์ให้เป็นสีที่แตกต่างจาก text ทั่วไป ถ้าสีก่อนคลิกและหลังคลิกเป็นคนละสีด้วยก็ยิ่งดี
- การปิด modal, lightbox หรือ popup ต่างๆ ควรเพิ่มแบบคลิกนอกกรอบก็ปิดได้เข้าไปด้วย
- ตั้งค่าให้ cursor ไปอยู่ที่ช่องแรกที่ต้องกรอก ตอนเปิดหน้าขึ้นมา
- ตั้งให้การกด ENTER เป็นการส่งค่าฟอร์ม
- ใส่ tool tip ที่ไอคอน เพื่อบอกว่ามันคืออะไร
- กรณีที่เว็ปไซด์มีการแยกหน้าเว็ปออกมาจากหน้าเว็ปหลักหรือหน้า home ในหน้าเว็ปที่แยกออกไป ให้มีลิงค์กลับมาที่หน้า home ด้วย
- แสดงภาพใหญ่เมื่อผู้ใช้คลิกที่รูป
- ควรจะให้ผู้ใช้สามารถแก้ไขสิ่งที่ตัวเองโพสได้ (เหมือนใน gitlab ที่แก้ไขในรายละเอียดและ comment ของ issue ได้)
- อย่าใช้ Sign in และ Sign up ด้วยกัน เพราะผู้ใช้จะสับสน ควรใช้ ลงทะเบียน | เข้าสู่ระบบ ไปเลยหรือหากเป็นคำภาษาอังกฤษอาจใช้คำอื่น เช่น Create Account | Log in แยกให้มันชัดเจนไปเลย
10 หลักการออกแบบ UI จาก betteruxui
1. Visibility of system status
พื้นฐานคือการออกแบบที่สื่อสารกับผู้ใช้ ให้รู้ว่าระบบกำลังทำอะไรอยู่ จาก action ของผู้ใช้ ทำแล้วได้ผลลัพธ์เป็นอย่างไร สื่อสารอย่างต่อเนื่อง ไม่ให้ผู้ใช้เกิดความสงสัยว่าระบบค้างไปหรือเปล่า
2. Match between system and the real world
ควรออกแบบ UI โดยยึดตามสิ่งที่ผู้ใช้คุ้นเคยอยู่แล้ว ที่มีอยู่ในโลกแห่งความเป็นจริง เพราะผู้ใช้ไม่ต้องเรียนรู้อะไรใหม่และเข้าใจวิธีการใช้งานได้ทันที
3. User control and freedom
ควรมีฟีเจอร์พวก back/undo/redo/edit ให้ผู้ใช้แก้ไขสิ่งที่ทำไปแล้วได้
4. Consistency and standards
ออกแบบให้เป็นมาตราฐานเดียวกัน เช่น ปุ่มแบบเดียวกัน component แบบเดียวกัน ตลอดทั้งระบบ ถ้ามี platform ที่ใกล้เคียงกับระบบที่จะออกแบบที่ผู้ใช้ใช้งานอยู่ ก็อ้างอิงการวาง template มาซะ ผู้ใช้จะได้ไม่ต้องเรียนรู้ใหม่เหมือนข้อ 2
5. Error prevention
พยายามออกแบบเพื่อดัก error ที่จะเกิด หรือที่ทีมชอบใช้คือ ถ้ากัน error มันยาก เราจำกัดทางเลย ยอมรับเฉพาะเคสที่ทำงานได้พอ 😁
6. Recognition rather than recall
ออกแบบให้ผู้ใช้ไม่ต้องจำเยอะ ไม่จำเลยได้ยิ่งดี
7. Flexibility and efficiency of use
ฟีเจอร์นี้สำหรับพวก pro user เพื่อให้ปรับแต่งหรือเลือกใช้ได้ เพื่อเพิ่มประสิทธิภาพในการใช้งาน
8. Aesthetic and minimalist design
ออกแบบให้ดูเรียบง่าย แสดงเท่าที่จำเป็น แล้วใช้วิธีซ่อนข้อมูลเพิ่มเติม เมื่อผู้ใช้ใช้เมาส์ hover หรือคลิก ค่อยแสดง
9. Help users recognize, diagnose, and recover from errors
กรณีมี error ให้บอกผู้ใช้เลยว่าทำอะไรผิด และต้องแก้ไขอย่างไรบ้าง
10. Help and documentation
ถ้าระบบซับซ้อน ควรมีลิงค์พวก document/help/FAQ ให้ผู้ใช้เข้าไปศึกษา แต่ไม่ควรแสดงถ้าผู้ใช้ไม่ต้องการ
