ปุ่มสลับควรแสดงสถานะปัจจุบัน หรือสถานะที่จะเปลี่ยนไป? (2010)

ปุ่มสลับควรแสดงสถานะปัจจุบัน หรือสถานะที่จะเปลี่ยนไป?

• ปุ่มสลับควรทำหน้าที่บอกผู้ใช้ถึงสถานะปัจจุบันด้วย
• หากปุ่มสลับอยู่ในสถานะ "เปิด" แต่กลับแสดง "ปิด" ก็อาจทำให้สับสนได้
• ควรหลีกเลี่ยงการใช้คอนโทรลแบบ flip-flop ในปุ่มหรือเมนู

สวิตช์แบบสลับสามารถแสดงได้ทั้งสถานะปัจจุบันและสถานะที่จะเปลี่ยนไป

• มีวิธีวางข้อความไว้นอกปุ่มเพื่อแสดงทั้งสถานะปัจจุบันและสถานะที่จะเปลี่ยนไป
• ตัวอย่างเช่น ดีไซน์สวิตช์ของ iOS จะแสดงสถานะ "เปิด" เป็นสีน้ำเงิน และสถานะ "ปิด" จะไม่เป็นเช่นนั้น
• ดีไซน์สวิตช์ของ OS X ไม่มีความกำกวม และผู้ใช้สามารถรู้สถานะปัจจุบันได้อย่างชัดเจน

ควรหลีกเลี่ยงการใช้ปุ่มสลับแบบของ Twitter

• ปุ่มสลับของ Twitter ให้ข้อมูลเมื่อเอาเมาส์ไปชี้ทับ แต่บนหน้าจอสัมผัสอาจทำให้สับสนได้

ในภาษาอังกฤษ คำว่า "on" และ "off" เป็นได้ทั้งกริยาวิเศษณ์และคำคุณศัพท์

• ควรใช้คำกริยาหรือคำคุณศัพท์บนปุ่มเพื่อให้ป้ายกำกับชัดเจน
• ตัวอย่าง: "เปิดใช้งาน/ปิดใช้งาน", "เริ่ม/หยุด"

การแยกความต่างระหว่างสถานะกับการกระทำเป็นสิ่งสำคัญ

• เมื่อปุ่มสลับแสดงการกระทำ (เช่น เล่น/หยุดชั่วคราว) ควรแสดงการกระทำที่จะเกิดขึ้นเมื่อคลิก
• เมื่อปุ่มสลับแสดงตัวเลือก (เช่น สุ่มเพลง/เล่นปกติ) ควรแสดงสถานะปัจจุบัน

อาจพิจารณาใช้ช่องทำเครื่องหมาย

• หากสามารถสรุปการสลับสถานะเป็นคำถามแบบ "ใช่/ไม่ใช่" ได้ การใช้ช่องทำเครื่องหมายอาจเหมาะสมกว่า

ใช้วิธีแสดงทั้งสถานะและการกระทำแทนการใช้ปุ่มสลับอย่างเดียว

• เมื่ออยู่ในสถานะปิดใช้งาน ให้ไม่เน้นปุ่ม และเมื่ออยู่ในสถานะเปิดใช้งาน ให้เน้นปุ่มเพื่อสื่อสถานะ

อาจพิจารณาไม่ใช้ปุ่มสลับเลย

• ตัวอย่างเช่น ในกรณีของ สุ่มเพลง/เล่นปกติ อาจใช้ช่องทำเครื่องหมายที่มีป้ายกำกับว่า "สุ่มเพลง"

ปุ่ม "ถูกใจ" ของ Facebook เป็นตัวอย่างที่ดีของปุ่มสลับ

• ในแอป Android ของ Facebook ปุ่ม "ถูกใจ" จะแสดงเป็นสีเทาเมื่อไม่ทำงาน และเป็นสีน้ำเงินเมื่อทำงานอยู่

การแสดงทั้งสถานะปัจจุบันและการกระทำชัดเจนที่สุด

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

GN⁺ มีความเห็นว่า:

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

[GN⁺]

ความคิดเห็นบน Hacker News

• ความสับสนเกี่ยวกับปุ่มปิดเสียงของ Microsoft Teams

  • ในแอป Teams ปุ่มปิดเสียงแสดงไอคอนไมโครโฟนที่มีเส้นพาด ซึ่งหมายความว่าเมื่อเปิดการปิดเสียงอยู่ ไมโครโฟนจะถูกปิด
  • แต่ในแอปโทรศัพท์ ไอคอนเดียวกันกลับหมายถึงไม่ได้ปิดเสียง และจะเปลี่ยนเป็นมีพื้นหลังทึบเมื่ออยู่ในสถานะปิดเสียง
  • การให้ปุ่มแสดงสถานะปัจจุบันนั้นไม่ใช่ปัญหา แต่ผู้ใช้ต้องรู้ด้วยว่าหากสถานะเปลี่ยนแล้วจะมีหน้าตาอย่างไร
  • ความสับสนแบบนี้อาจเป็นปัญหาที่เกิดจากการออกแบบแบบ 'flat UI' ซึ่งทำให้ต้องตีความองค์ประกอบการออกแบบโดยไม่มีจุดอ้างอิงจากโลกจริง

• ปัญหาปุ่มสลับที่ไม่สอดคล้องกันใน UI รถ Tesla

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

• กลไกการตอบกลับสถานะของสวิตช์ปุ่มกดของ NASA

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

• ความเสียดายที่ช่องทำเครื่องหมายกำลังหายไป

  • ช่องทำเครื่องหมายนั้นสมบูรณ์แบบและไม่กำกวม แต่ดีไซเนอร์สมาร์ทโฟนไม่ชอบมัน

• ดีไซน์ที่ชวนสับสนของ UI หน้าจอแดชบอร์ด Tesla

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

• ปัญหาของปุ่มสลับและแนวทางแก้ไข

  • ปุ่มสลับมักรวมทั้งสถานะของระบบและการกระทำที่จะเปลี่ยนสถานะนั้นไว้พร้อมกัน จึงอาจทำให้สับสนได้
  • คำว่า 'ON' ที่แสดงสถานะปัจจุบัน อาจจริง ๆ แล้วหมายถึงการกระทำเพื่อเปลี่ยนไปเป็น 'OFF'
  • วิธีแก้คือแยกสถานะออกจากการกระทำ เช่น ใช้ป้ายกำกับไว้นอกปุ่ม หรือคงไอคอนไว้เหมือนเดิมแล้วเปลี่ยนคุณสมบัติอื่นของปุ่มแทน

• ปัญหาความไม่พร้อมกันของปุ่มสลับ

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

• ข้อดีของดีไซน์สวิตช์แบบเลื่อนของ Apple

  • สวิตช์แบบเลื่อนของ Apple แสดงทั้งสถานะปัจจุบันและสถานะที่จะเปลี่ยนไปได้อย่างชัดเจน
  • ฟีเจอร์ที่เปิดใช้งานจะแสดงด้วยพื้นหลังสีน้ำเงิน ส่วนฟีเจอร์ที่ปิดใช้งานจะแสดงด้วยพื้นหลังสีเทา

• ความจำเป็นในการแสดงสถานะปัจจุบันและสถานะที่จะเปลี่ยนไปของปุ่มสลับอย่างชัดเจน

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