เหตุใดจึงต้องมีป้ายข้อความ (ไอคอนอย่างเดียวไม่เพียงพอ)

• สนับสนุน ป้ายข้อความ (text labels) อย่างมาก
• อินเทอร์เฟซสมัยใหม่มีไอคอนมากเกินไป ทำให้ผู้ใช้ต้องใช้ทรัพยากรด้านการรับรู้มากเกินควรในการตีความความหมายของไอคอน
• ส่งผลให้ ความเร็วในการทำงานช้าลง และต้องเผชิญกับประสบการณ์ที่ไม่มีประสิทธิภาพ ซ้ำแล้วซ้ำเล่า
• การสื่อความหมายด้วยไอคอนเพียงอย่างเดียวไม่ใช่เรื่องง่าย และไอคอนส่วนใหญ่ ไม่สมบูรณ์หากไม่มีป้ายข้อความ

# ปัญหาที่ไอคอนก่อให้เกิด

1. ไอคอนส่วนใหญ่ไม่ได้สื่อความหมายที่ชัดเจนได้ในทันที

• แม้จะมีคนโต้แย้งว่า “ไอคอนที่ดี” สามารถสื่อความหมายได้เพียงพอ แต่ในความเป็นจริง ไม่ว่าไอคอนแบบใดก็ยังมีภาระด้านการรับรู้ในการตีความ
• ตัวอย่างเช่น “ไอคอนถังขยะ” ค่อนข้างชัดเจนว่าแปลว่า Delete แต่ “ไอคอนดินสอ” นั้นกำกวม
  • เขียน? แก้ไข? วาด? สร้าง?
• บริบท (Context) อาจช่วยเติมเต็มความหมายได้ แต่สิ่งนี้ก็ยังต้องการภาระด้านการรับรู้เพิ่มเติมอยู่ดี

2. ยิ่งมีไอคอนมากในอินเทอร์เฟซ ก็ยิ่งนำทางได้ยากขึ้น

• ยิ่งมีฟังก์ชันมาก ก็ยิ่งทำให้แยกความแตกต่างด้วยไอคอนเพียงอย่างเดียวได้ยาก
• หากมีเพียง 5-7 ฟังก์ชันอาจยังแยกด้วยไอคอนได้ แต่เมื่อมี 15-20 ฟังก์ชัน ไอคอนคล้ายกันอย่างบันทึก/แชร์/แก้ไข/สร้าง มีโอกาสสูงที่จะทำให้สับสนกันเอง
• เมื่อความแตกต่างระหว่างไอคอนของฟังก์ชันที่คล้ายกันลดลง ความอ่านง่ายก็ลดลงตามไปด้วย

3. ไอคอนมีความหมายได้ก็เฉพาะภายในอินเทอร์เฟซบางแบบเท่านั้น

• ผู้ใช้ต้องสลับใช้งานระหว่างสภาพแวดล้อมของอินเทอร์เฟซที่หลากหลาย (เว็บเบราว์เซอร์ ระบบปฏิบัติการ แอป ฯลฯ)
• ไอคอนที่ใช้ในอินเทอร์เฟซหนึ่ง อาจมีความหมายที่ต่างออกไปโดยสิ้นเชิงในอีกสภาพแวดล้อมหนึ่ง
• โดยเฉพาะเมื่อใช้ชุดไอคอนมาตรฐาน (เช่น Google Material Design) หากไอคอนเดียวกันถูกใช้ต่างความหมาย ความสับสนจะยิ่งเพิ่มขึ้น

# ประโยชน์ที่ป้ายข้อความมอบให้กับอินเทอร์เฟซ

1. ข้อความเพียงอย่างเดียวก็มีประสิทธิภาพมากกว่า

• สมองของเราถูกปรับให้เหมาะกับการจดจำคำได้อย่างรวดเร็ว
  • คำที่คุ้นเคยสามารถเข้าใจได้ทันที โดยไม่ต้องอ่านทีละตัวอักษร
  • ในทางกลับกัน ไอคอนส่วนใหญ่ ต้องอาศัยความพยายามมากกว่า เพราะต้องเรียนรู้ภาษาภาพแบบใหม่
• รายการข้อความสามารถอ่านจากบนลงล่างได้ แต่หากมีแต่ไอคอน ผู้ใช้ต้องสแกนสลับทั้งแนวนอนและแนวตั้ง
  • โดยเฉพาะบนมือถือ เมื่อไอคอนที่มีรูปร่างคล้ายกันถูกเรียงกัน ความสับสนทางสายตาจะยิ่งมากขึ้น

2. ข้อความทำให้ไอคอนมีประสิทธิภาพมากขึ้น

• เมื่อเพิ่มป้ายข้อความเข้าไป:
  • ความหมายของไอคอน ชัดเจนขึ้นและค้นหาได้เร็วขึ้น
  • นักออกแบบไม่ต้องแบกรับภาระที่จะต้องทำให้ไอคอนเพียงอันเดียวสื่อความหมายทั้งหมด

3. ไอคอนสามารถเป็นองค์ประกอบภาพที่สำคัญในอินเทอร์เฟซที่เน้นข้อความได้

• ไอคอนทำหน้าที่เป็น จุดยึดทางสายตา (visual anchor) และเมื่อผสานกับข้อความแล้ว จะ มอบอินเทอร์เฟซที่มีประสิทธิภาพที่สุด

การหาสมดุลระหว่างไอคอนกับข้อความ

• เมื่อต้องเลือกระหว่างไอคอนกับป้ายข้อความ ควรคำนึงถึงภาระด้านการรับรู้ของผู้ใช้
• UI ที่ประกอบด้วยไอคอนล้วน อาจดูสะอาดตาในตอนแรก แต่กลับสร้างภาระในการตีความให้ผู้ใช้และทำให้ไม่มีประสิทธิภาพ
• คำตอบไม่ใช่การพยายามหาไอคอนที่สมบูรณ์แบบ
  → สิ่งสำคัญคือการผสานไอคอนกับข้อความเพื่อมอบประสบการณ์ที่ดีที่สุด

# หลักการสำคัญเพื่อการออกแบบ UI ที่เหมาะสมที่สุด

1. อย่าพยายามสื่อทุกอย่างด้วยไอคอนเพียงอย่างเดียว
2. การเพิ่มป้ายข้อความช่วยเพิ่มความอ่านง่ายและการเข้าถึง
3. ไอคอนกับข้อความไม่ใช่คู่แข่งกัน แต่เป็นองค์ประกอบที่เสริมกันและกัน
4. ควรคำนึงถึงว่าแอปหรือเว็บไซต์นั้นถูกใช้งานอย่างไรในสภาพแวดล้อมดิจิทัลโดยรวม
5. ออกแบบให้ผู้ใช้ไม่ต้อง “ตีความ” อินเทอร์เฟซ แต่ “เข้าใจได้ทันที”

บทสรุป: สิ่งสำคัญไม่ใช่ "UI ที่ดูสวย" แต่คือ "UI ที่เข้าใจง่าย"

• ทุกครั้งที่เกิดความยั่วยวนอยากสร้างไอคอนใหม่ หรือลบป้ายข้อความทิ้ง ลองคิดทบทวนอีกครั้ง
• ดีไซน์ที่เรียบสะอาดอย่างแท้จริง ไม่ใช่สิ่งที่ "ดูเรียบง่าย" แต่คือสิ่งที่ "เข้าใจได้ง่าย"

[ndrgrd]

ไอคอนควรใช้เฉพาะในกรณีที่เข้าใจได้ทันทีด้วยการมองแวบเดียว และดูเหมือนว่าจำเป็นต้องมีฟังก์ชันกดค้างเพื่อแสดงข้อความช่วยอธิบายด้วย

[nemorize]

เราใช้ไอคอนอย่างเดียวในกรณีที่จำกัดมากเท่านั้น

• กรณีวางไอคอนที่ชัดเจนในตำแหน่งที่ชัดเจน (วาง ChevronLeft ไว้มุมซ้ายบน, วาง Vertical3Dots ไว้มุมขวาบน)
• กรณีที่การแสดงไอคอนนั้นต้องอาศัยการโต้ตอบจากผู้ใช้ และในพื้นที่การโต้ตอบเดียวกันมีการแสดงไอคอนเดียวกันพร้อมป้ายกำกับอยู่แล้ว (เช่น ไอคอน BellOff บนองค์ประกอบนั้นเมื่อเป็นแอ็กชันปิดการแจ้งเตือน)
• กรณีที่มีข้อมูลตัวเลขที่เข้าใจได้ชัดเจนตามหลังมา (ถูกใจ, ไม่ถูกใจ, เวลา)
• กรณีที่มีฟังก์ชันอธิบาย用途ของไอคอนนั้นหรือชุดไอคอนนั้นผ่านทูลทิป บทสอน ฯลฯ
  ** กรณีที่ลูกค้าร้องขอ 555;

[GN⁺]

ความเห็นจาก Hacker News

• ความสมดุลเป็นสิ่งสำคัญ ถ้าในเมนูมีไอคอนอยู่บ้างก็จะช่วยเป็นจุดยึดและทำให้เมนูมี “รูปทรง” ที่โดดเด่น
  • ถ้าทุกรายการในเมนูมีไอคอนทั้งหมดจะยิ่งทำให้สับสน
• งานวิจัยด้าน UI ตั้งแต่ยุค 1990 แสดงให้เห็นว่าป้ายข้อความช่วยให้จดจำได้ดีกว่าไอคอน
  • ตอนนี้แม้เทคโนโลยีจอแสดงผลจะดีขึ้นแล้ว แต่ก็ยังมีแนวโน้มจะตัดข้อความออกเพราะกระแสดีไซน์และความขี้เกียจในการทำ localization
  • แม้จะมีแนวทางด้าน usability ก็ยังถูกเมิน เพราะการออกแบบ UI กลายเป็นงานที่อาศัยความรู้สึก
  • ตัวอย่างเช่น Human Interface Guidelines ของ iOS จาก Apple ระบุไว้อย่างชัดเจนว่า tab bar ควรมีทั้งไอคอนและป้ายข้อความ
  • ดีไซเนอร์จำนวนมากไม่ได้อ่านแนวทางเหล่านี้
• มีข้อสันนิษฐานว่างานวิจัยจำนวนมากอาจให้ผลซ้ำต่างกันระหว่างยุโรปกับสหรัฐฯ
  • ป้ายถนนในสหรัฐฯ ส่วนใหญ่เป็นข้อความ
  • ยุโรปมีประเทศขนาดเล็กจำนวนมาก จึงใช้ pictogram
  • ชาวยุโรปเข้าใจความหมายจาก pictogram ได้ดีกว่าชาวอเมริกัน
• คนส่วนใหญ่ของโลกเปลี่ยนมาใช้ตัวอักษรแทนเสียงมาตั้งนานแล้ว
  • ตัวอักษรแทนเสียงเหนือกว่า pictogram
  • ไอคอนเป็นสิ่งเสริม แต่ข้อความเป็นสิ่งจำเป็น
• เวลายุ่งอยู่กับหัวข้ออะไรสักอย่าง ก็มักจะเห็นมันไปโผล่บน HN ในวันถัดมา
  • เคยทำแอปวาดรูปเล็ก ๆ ให้ลูกชายวัย 27 เดือน ตอนแรกใช้แต่ไอคอน แต่เขาสับสน
  • พอเพิ่มป้ายข้อความแล้ว ความสับสนทางสายตาก็ลดลง
• ไอคอนไม่ได้แย่ แต่ถ้าไม่มี tooltip เมื่อเอาเมาส์ไปวาง หรือไม่มีป้ายกำกับสไตล์ alt text ก็ชวนให้หงุดหงิด
  • การเรียนรู้ซอฟต์แวร์ใหม่จะช้าลง และต้องไปหาคู่มือหรือวิดีโอสอน
• UX Myth — ความเชื่อผิด ๆ ว่าไอคอนช่วยเพิ่ม usability
• ไม่เคยชอบไอคอนและการแพร่หลายของมันเลย
  • พยายามสนับสนุนข้อความ แต่ไม่ค่อยได้รับการตอบรับ
  • หลายคนจึงตั้งสมมติฐานใหม่ว่าผู้ใช้จำนวนมากอ่านช้า
  • การอ่านข้อความกำกับทั้งหมดในเมนูใช้เวลาประมาณ 1 วินาที
  • ไม่เคยมีกรณีไหนที่การตีความข้อความช้ากว่าไอคอน
  • เลยเริ่มเห็นด้วยว่าต้องคำนึงถึงผู้อ่านช้า
• อยากปกป้องข้อความจากความว่างเปล่า
  • ป้ายข้อความมีขนาดเล็กและมีพื้นที่รอบ ๆ เพียงพอ
  • สามารถเน้นข้อความและช่วยให้กวาดสายตาได้ง่าย
  • ทางออกสูงสุดคือทำให้ผู้ใช้มองข้ามความผิดพลาดของดีไซเนอร์ได้
  • เน้นว่าการรับรู้ข้อความง่ายกว่าการรับรู้ไอคอน
  • ไอคอนใช้พื้นที่น้อยกว่าและมีประสิทธิภาพกว่า
• เคยได้ยินคำพูดว่า “ภาพหนึ่งภาพมีค่าเท่ากับคำพูดนับพัน แต่บ่อยครั้งคำเดียวก็พอ”