- แนวปฏิบัติการออกแบบที่ใส่ไอคอนให้รายการเมนูเป็นค่าเริ่มต้น กำลังขยายตัว และก่อให้เกิดเสียงรบกวนทางสายตาที่ไม่จำเป็น
- Google Sheets และ ระบบเมนูของ macOS เวอร์ชัน Tahoe เป็นกรณีตัวอย่างที่เด่นชัด โดยมีการเพิ่มไอคอนให้แทบทุกรายการเมนู
- ในบางเมนู เกณฑ์การมีหรือไม่มีไอคอนไม่ชัดเจน และทับซ้อนกับสัญลักษณ์สลับจนทำให้การจัดแนวสับสน
- ในทางกลับกัน ไอคอนที่ช่วยทำความเข้าใจภาพรวมได้ อย่างเมนูจัดเรียงหน้าต่างของ Finder มีความมีประโยชน์ ดังนั้นการใช้ไอคอนจึงควรตัดสินใจตามบริบท
- ปัญหาคือ Apple เคยวางหลักการไว้ใน แนวทางอินเทอร์เฟซของตนเอง ว่า “หลีกเลี่ยงการใช้ไอคอนแบบสุ่ม” แต่กลับละทิ้งหลักการนั้น
การวิจารณ์การใส่ไอคอนในเมนูมากเกินไป
- วิธีการแนบไอคอนให้กับรายการเมนูทั้งหมด กำลังแพร่กระจายเป็นค่าเริ่มต้น ทำให้การออกแบบอินเทอร์เฟซซับซ้อนเกินไป
- เช่นเดียวกับเมนู “File”, “Edit”, “View” ของ Google Sheets ที่มีไอคอนติดกับทุกรายการ
- แนวทางนี้ก่อให้เกิดนิสัยในการสร้าง “ไอคอนเพื่อเติมที่ว่าง”
- เป็นเพียงการใช้เทมเพลตอย่างง่าย โดยไม่คำนึงถึงบริบทของแต่ละเมนูและ ภาระทางความคิด (cognitive load)
- การใช้ไอคอน ควรได้รับการเลือกอย่างระมัดระวังตามบริบท
- ต้องพิจารณาว่าไอคอนช่วยเพิ่มการใช้งานจริงหรือทำให้เกิดความสับสน
- แนวคิด “ใส่ไอคอนให้ทุกเมนู” นั้นคือ การขาดการคิด
การเปลี่ยนแปลงใน macOS Tahoe
- macOS เคยรักษาระยะห่างจากแนวทางนี้มานาน แต่ ใน macOS Tahoe มีการนำไอคอนเข้ามาในเมนูโดยรวม
- ในเมนู Apple, ในเมนู “Safari”, “File”, “View” ของ Safari เป็นต้น มีไอคอนปรากฏเพียงบางรายการเท่านั้น
- “Settings” มีไอคอน แต่ “Privacy Report” ไม่มี สะท้อนว่า ขาดความสม่ำเสมอ
- ในเมนู File ของ Safari มีการใช้ไอคอนและการเยื้องเฉพาะบางกลุ่ม ขณะที่กลุ่มอื่นไม่เช่นนั้น
- ในเมนู “View” มี สัญลักษณ์เครื่องหมายถูก (toggle) ร่วมกับไอคอน ทำให้การจัดแนวผิดพลาด
- ในเมนู “View” ของแอป Mail เช่นกัน ข้อความ, toggle และไอคอนถูกผสมผสานจนเกิดโครงสร้างภาพที่ซับซ้อน
- เหตุผลในการมีอยู่ของไอคอนหรือเกณฑ์ในการเลือกยังไม่ชัดเจน
ข้อยกเว้นที่ไอคอนมีประโยชน์
- ในกรณีเช่นเมนูจัดเรียงหน้าต่างของ Finder ที่ช่วยให้เข้าใจการจัดวางเชิงพื้นที่ได้ทันทีด้วย สัญลักษณ์มองเห็นได้ชัด ไอคอนจึงให้ประสิทธิภาพสูง
- ยิ่งกว่า “Top Left”, “Bottom & Top”, “Quarters” ข้อความต่างๆ ไอคอนการจัดวางเชิงภาพ ช่วยให้เข้าใจได้ทันที
- กรณีเช่นนี้เป็นตัวอย่างการใช้งานเชิงบวกที่ เพิ่มประสิทธิภาพด้านการรับรู้
- กล่าวคือ ไอคอนไม่ควรเป็น ค่าเริ่มต้น แต่ควรเป็น การเลือกตามสถานการณ์
ความขัดแย้งกับแนวทางของ Apple
- ใน Human Interface Guidelines ของ Apple ในปี 992·2005·2020 มีข้อความว่า “อย่าใช้ไอคอนในเมนูแบบสุ่ม”
- พร้อมการเตือนว่าอาจทำให้เกิดความสับสนทางสายตาและทำให้ผู้ใช้สับสนได้
- ตัวอย่างสิ่งที่ ‘ไม่ควรทำ’ ในแนวทางนั้นสอดคล้องกับเมนูของ macOS Tahoe ในปัจจุบัน
- Apple จึงเหมือนกับ ละเมิดหลักการของตนเอง
สรุป
- การแทรกไอคอนอย่างเกินควรอยู่ทั่วเมนูก่อให้เกิด เสียงรบกวนทางสายตา
- เมื่อ Apple เปลี่ยนทิศทางไปสู่การ “ใส่ไอคอนในทุกเมนู” ความพยายามที่จะโน้มน้าวให้ลดการใช้ไอคอนลงยากขึ้น
- “หากไม่มีเหตุผลอันสมเหตุสมผล ค่าเริ่มต้นก็ควรเป็นการไม่มีไอคอน”
- ตอนนี้จึงเป็นยุคที่ ไอคอนปกคลุมเมนู และเรียกเสียงสะท้อนเชิงเสียดสีด้วยคำว่า “ช่วยด้วย”
3 ความคิดเห็น
ก็รู้สึกว่ามันดีตรงที่เป็นข้อมูลแบบไม่ใช้ภาษาอยู่เหมือนกัน..
แต่ก็ให้ความรู้สึกเหมือนประโยคที่ AI สร้างขึ้นมาด้วยเหมือนกัน..
ยิ่งเป็นแอปพลิเคชันที่ใช้งานบ่อย ก็ยิ่งมักมองหารูปภาพหรือสีมากกว่าข้อความเสียอีก ขึ้นอยู่กับขนาดหน้าจอว่าจะใช้ทั้งข้อความควบคู่กันหรือใช้แค่ไอคอน แต่โดยรวมแล้วผมคิดว่ามีไว้จะดีกว่า
ความเห็นจาก Hacker News
ในมุมมองของการเข้าถึงและ การแปลเป็นภาษาท้องถิ่น การใช้ไอคอน+ข้อความร่วมกันคือสิ่งที่เหมาะที่สุด
การใช้ไอคอนเพียงเพื่อเติมพื้นที่เป็นเรื่องมีปัญหา แต่ถ้าไอคอนกับข้อความไม่สอดคล้องกันกลับจะยิ่งเพิ่ม ภาระด้านการรับรู้
แม้ในการทดลองที่ซ่อนข้อความไว้ การใช้ไอคอน+ข้อความร่วมกันก็ยังได้ผลดีที่สุด
การใช้ไอคอนอย่างสม่ำเสมอเป็นประโยชน์ต่อทั้งผู้ใช้ที่พึ่งพาการมองเห็นและภาษา และยังช่วยได้ในสภาพแวดล้อมที่ viewport แคบ
สุดท้ายแล้วผมคิดว่าปัญหานี้คือเรื่องของ “มีความตั้งใจจะจ่ายต้นทุนด้านดีไซน์หรือไม่”
ตอนที่อ่านข้อความได้ยาก ไอคอนช่วยได้มาก
ประชากรราว 20% ของสหรัฐฯ ไม่รู้หนังสือ และคนเหล่านี้ใช้งานเทคโนโลยีด้วยการ จดจำ ไอคอนและตำแหน่งของปุ่ม
ถ้ามีแต่ไอคอนก็เข้าใจความหมายยาก แต่ถ้ามีทั้งสองอย่างจะรู้สึกเหมือนใช้สมองได้ครบทุกส่วน
ผมคิดว่าเหตุผลที่เมนูมีไอคอนก็เพื่อให้ จับคู่ทางสายตา กับฟังก์ชันเดียวกันบน toolbar
ถ้าเมนูไม่มีไอคอน ก็จะส่งสัญญาณว่า toolbar ก็ไม่มีเช่นกัน
ทั้งเมนูและ toolbar ปรับแต่งได้ และแต่ละรายการประกอบด้วยไอคอน+ป้ายชื่อ
ทุกวันนี้มี icon pack (Font Awesome, Material Icons ฯลฯ) เยอะมาก จนนักพัฒนามักเลือกไอคอนที่ “พอคล้ายอยู่บ้าง”
ทีมของเราก็ทำไอคอนแบบสั่งทำเองบ้างเป็นครั้งคราว แต่เพราะมีต้นทุนสูง ส่วนใหญ่จึงแค่หาอันที่พอเหมาะจากไลบรารีขนาดมหึมาของ Google
สำหรับข้อโต้แย้งที่ว่า “ถ้าไม่มีเหตุผลต้องเพิ่มไอคอน ก็ไม่ควรใส่เป็นค่าเริ่มต้น” ผมคิดว่าผู้ใช้ที่มีความจำด้านภาพดีสามารถ จำไอคอน ของเมนูที่ใช้บ่อยและหาเจอได้เร็วขึ้น
ส่วนตัวผมมักจำคีย์ลัดมากกว่า ดังนั้นสิ่งที่กังวลมากกว่าไอคอนคือ การชนกันของ hotkey
ใน Gmail สมัยก่อน ไอคอน ลิงก์ กับ ไฟล์แนบ แทบเหมือนกันจนสับสนบ่อย แต่ช่วงหลังเปลี่ยนเป็นรูปคลิปหนีบกระดาษแล้วดีขึ้นมาก
สิ่งที่รบกวนใจที่สุดในตัวอย่างคือ การเยื้องไม่สม่ำเสมอ ของแต่ละส่วนในเมนู
ถ้ามีไอคอนเฉพาะบางรายการ บรรทัดนั้นก็จะเยื้อง แต่ถ้าไม่มีก็ไม่เยื้อง ขณะที่เวลามีเครื่องหมายถูกกลับทำให้ทั้งแถวถูกเยื้อง จึงดูไม่สมดุล
ถ้าเป็น Apple ก็น่าจะจัดการรายละเอียดแบบนี้ได้เนี้ยบกว่านี้ เลยรู้สึกเสียดาย
เมื่อก่อนนักวาดการ์ตูนคนหนึ่งที่ผมติดตามเคยเน้นย้ำความสำคัญของ การออกแบบ silhouette และไอคอนทุกวันนี้ก็เจอปัญหาเดียวกัน
แดชบอร์ดของ AWS มีไอคอนที่แยกจากกันไม่ออก เต็มไปด้วยแค่ noise ทางสายตา
ในทางกลับกัน ดีไซน์แบบเกมการ์ดที่แยกทั้งสีและรูปทรงเพื่อให้ผู้ใช้ตาบอดสีรับรู้ได้ก็ยอดเยี่ยมมาก
Google Sheets ทำเรื่องนี้ได้ดี แต่ตัวอย่างอื่นไม่เป็นแบบนั้น
ดู บทความที่เกี่ยวข้อง, การพังทลายของแนวทางการออกแบบ, วิธีกู้คืนไอคอน
ทำให้รู้สึกว่าด้าน การใช้งาน ของ macOS แย่ลงมาก
แท็บเบราว์เซอร์ดูเหมือนกันไปหมดจนแยกไม่ออกว่าแท็บไหนคืองานอะไร
ผมชอบตัวอย่างไอคอนของ Google Docs
ต่อให้อ่านข้อความไม่ออกก็ยังหาแอ็กชันอย่าง เพิ่ม/ลบ ได้อย่างรวดเร็ว
ใช้ไอคอนหาตำแหน่งคร่าว ๆ ก่อน แล้วใช้ข้อความยืนยันฟังก์ชันย่อย
ทำให้เวลาในการสำรวจเมนูลดลงและ ภาระด้านการรับรู้ ลดลง
เดาว่าน่าจะมีทิกเก็ต “ปรับปรุงไอคอน” ถูกฝังอยู่ที่ไหนสักแห่ง
ในตัวอย่าง Google Docs การหา ไอคอนลิงก์ เร็วกว่าการหา “Insert Link” มาก
ฟังก์ชันอย่างการเยื้องหรือการจัดแนวก็หาได้ง่ายเพราะมีไอคอนมาตรฐาน
อีกทั้งยังช่วยผู้ใช้ที่ ไม่ได้ใช้ภาษาอังกฤษเป็นหลัก ด้วย
ตัวอย่างเช่น ผู้ใช้ที่ไม่คุ้นกับภาษาญี่ปุ่นก็สามารถหาเครื่องมือที่ต้องการได้ง่ายขึ้นด้วยไอคอน
ผมมักใส่ไอคอนให้กับรายการเมนูแทบทั้งหมด
ผลคือช่วย ลดความเหนื่อยล้าทางจิตใจ และเลือกได้เร็วขึ้น
ยิ่งเมนูซับซ้อนก็ยิ่งคิดว่าการเพิ่มสีก็ช่วยใช้ประสาทสัมผัสได้หลากหลายขึ้น
แต่ไอคอนต้องเป็น รูปทรงที่มีความหมาย เท่านั้น
ต่อให้ไม่มีความหมาย การหา “รายการที่สอง” ในชุดไอคอนเดียวกันก็ยังเร็วกว่าการอ่านข้อความมาก
ถ้ามีไอคอนแค่บางรายการ มันจะดูเหมือนเป็น ฟังก์ชันพิเศษหรือฟังก์ชันที่ใช้บ่อย
รู้สึกว่ามีประโยชน์กว่าการใส่ไอคอนให้ทุกอย่าง
มันทำงานคล้าย reverse tooltip
แต่ถ้าต้องการเน้นเฉพาะบางรายการ ผมคิดว่าการใช้ การแบ่งแยกทางสายตาอย่างสม่ำเสมอ หรือลำดับการจัดวางจะมีประสิทธิภาพกว่าไอคอน
รายการที่ไม่ได้ใช้บ่อยจะค่อย ๆ ไล่ดูช้าหน่อยก็ไม่เป็นไร