Visual Hierarchy
จัดให้สายตาผู้ใช้เห็นสิ่งสำคัญก่อน ด้วยขนาด น้ำหนัก สี และตำแหน่ง
เริ่มอ่านตรงนี้ก่อน
อธิบายแบบง่าย
Visual Hierarchy คือเรื่องที่ช่วยให้เราใช้ทำหน้าจอให้อ่านง่าย ใช้ง่าย และไม่สับสนได้ถูกทางขึ้น
ระดับ
เหมาะกับคนเริ่มต้น
ใช้เมื่อไหร่
หน้าจอมีของเยอะ ผู้ใช้ไม่รู้จะเริ่มมองตรงไหน
อ่านแล้วทำอะไรต่อ
ให้ตัวเลขผลลัพธ์ใหญ่และหนาที่สุด ป้ายชื่อ KPI เล็กลงและสีจางลง ส่วนการเปลี่ยนแปลงเทียบช่วงก่อนใช้สีบอกทิศทาง ตาจะเห็นตัวเลขก่อนเสมอ
ใช้ตอนไหน?
- หน้าจอมีของเยอะ ผู้ใช้ไม่รู้จะเริ่มมองตรงไหน
- ปุ่มหรือตัวเลขสำคัญถูกกลืนไปกับเนื้อหารอบข้าง
- อยากนำสายตาให้ไปจบที่ปุ่มหรือ action ที่ต้องการ
ความหมาย
ลำดับความสำคัญทางสายตา (visual hierarchy) คือการออกแบบให้ตาคนกวาดเห็นของสำคัญก่อนของรอง โดยอาศัยขนาดตัวอักษร น้ำหนัก (ความหนา) ของฟอนต์ สี ระยะห่าง และตำแหน่งบนหน้าจอ คนเราอ่านหน้าจอแบบกวาดสายตา ไม่ได้อ่านทุกคำ การจัดลำดับจึงเป็นตัวบอกว่าควรมองตรงไหนก่อน
เครื่องมือสร้างลำดับชั้น
เลือกของชิ้นเดียวให้เด่นที่สุดต่อหนึ่งหน้าจอ แล้วลดความเด่นของส่วนที่เหลือลงเป็นชั้นๆ ใช้ขนาด น้ำหนัก สี และที่ว่างร่วมกัน อย่าพึ่งอย่างเดียว
ของเด่นสุด (1 ชิ้น) → ใหญ่ + หนา + สีตัด
ระดับรอง → ขนาดกลาง น้ำหนักปกติ
รายละเอียด → เล็ก สีจาง
ที่ว่าง (whitespace) = แยกกลุ่ม ไม่ต้องตีเส้นตัวอย่างการใช้
การ์ด KPI บนแดชบอร์ด
ให้ตัวเลขผลลัพธ์ใหญ่และหนาที่สุด ป้ายชื่อ KPI เล็กลงและสีจางลง ส่วนการเปลี่ยนแปลงเทียบช่วงก่อนใช้สีบอกทิศทาง ตาจะเห็นตัวเลขก่อนเสมอ