เลิกเลือกไอคอนแดชบอร์ดด้วยคำค้นหา
ปัญหาของแดชบอร์ดส่วนใหญ่ไม่ได้มาจากไอคอนที่ไม่ดี
แต่มาจากไอคอนที่ดีแต่ถูกนำไปใช้ในความหมายที่ผิด
หากคุณค้นหาคำว่า "users" แล้วเลือก SVG ที่ดูสะอาดตา คุณอาจเจอปัญหาในภายหลัง เพราะคุณจะต้องใช้ไอคอนที่แตกต่างกันสำหรับลูกค้า, สมาชิกในทีม, เจ้าของบัญชี และผู้ดูแลระบบ (admins) ในไม่ช้า ไอคอน "user" เพียงอันเดียวจะต้องแบกรับความหมายมากเกินไป ซึ่งจะทำให้แดชบอร์ด SaaS ของคุณดูสับสนและวุ่นวาย
เลิกเลือกไอคอนด้วยคำค้นหา (keyword) แต่เริ่มเลือกด้วยบทบาท (role)
คำค้นหาบอกว่าไอคอนนั้นเกี่ยวข้องกับอะไร แต่บทบาทบอกว่าไอคอนนั้นทำหน้าที่อะไร
จัดหมวดหมู่ไอคอนของคุณออกเป็น 5 ประเภทนี้:
- ไอคอนนำทาง (Navigation icons): ใช้แทนจุดหมายปลายทาง เช่น Dashboard, Billing หรือ Settings ควรมีความเรียบง่ายและคงเส้นคงวา
- ไอคอนสถานะ (Status icons): ใช้ตอบคำถามเช่น "สิ่งนี้กำลังทำงานอยู่หรือไม่?" หรือ "สิ่งนี้ล้มเหลวหรือไม่?" ควรใช้สัญลักษณ์ที่สื่อความหมายโดยตรง เช่น เครื่องหมายถูก, คำเตือน หรือแม่กุญแจ
- ไอคอนการทำงาน (Action icons): ใช้แทนการดำเนินการต่างๆ เช่น แก้ไข (edit), ลบ (delete) หรือส่งออก (export) หลีกเลี่ยงการใช้ไอคอนเหล่านี้โดยไม่มีป้ายกำกับหากการดำเนินการนั้นมีความซับซ้อน
- ไอคอนวัตถุ (Object icons): ใช้ระบุสิ่งต่างๆ เช่น โปรเจกต์, ใบแจ้งหนี้ หรือโฟลเดอร์
- ไอคอนสถานะว่าง (Empty state icons): จะปรากฏขึ้นเมื่อไม่มีข้อมูล ไอคอนกลุ่มนี้สามารถใส่ลูกเล่นหรือบุคลิกได้มากขึ้น
อย่ามองหาแค่ SVG ที่สวยที่สุด แต่จงมองหา "ชุดคำศัพท์ทางภาพ" (visual vocabulary)
ใช้การทดสอบ 3 อย่างนี้ก่อนที่คุณจะตัดสินใจเลือกไอคอน:
- การทดสอบขนาด (The Size Test): ไอคอนยังใช้งานได้ดีหรือไม่เมื่อมีขนาดเพียง 16px ภายในตารางที่มีข้อมูลหนาแน่น? ไอคอนหลายอย่างดูดีที่ขนาด 32px แต่กลับใช้งานไม่ได้เมื่อมีขนาดเล็กลง
- การทดสอบบริบท (The Context Test): ลองวางไอคอนไว้ข้างป้ายกำกับและไอคอนข้างเคียงดูว่า มันสามารถทำให้สับสนกับไอคอนที่อยู่ติดกันได้หรือไม่?
- การทดสอบความหมาย (The Meaning Test): ไอคอนช่วยส่งเสริมป้ายกำกับ หรือป้ายกำกับต้องเป็นฝ่ายอธิบายไอคอน?
หากคุณไม่สามารถหาไอคอนที่ชัดเจนสำหรับฟีเจอร์หนึ่งได้ เป็นไปได้ว่าชื่อฟีเจอร์นั้นอาจคลุมเครือเกินไป ไอคอนมีหน้าที่ช่วยตอกย้ำความหมาย ไม่ใช่มาช่วยแก้ไขภาษาที่ไม่ชัดเจน
แทนที่จะค้นหาคำว่า "user icon" ให้ลองค้นหาด้วยคำว่า "internal collaborator icon" หรือ "customer account icon" ความแม่นยำในการค้นหาจะนำไปสู่ความแม่นยำใน UI ของคุณ
ที่มา: https://dev.to/svgicons/stop-picking-dashboard-icons-by-keyword-ij2