Nút chuyển đổi nên hiển thị trạng thái hiện tại hay trạng thái sẽ chuyển sang? (2010)

Nút chuyển đổi nên hiển thị trạng thái hiện tại hay trạng thái sẽ chuyển sang?

• Nút chuyển đổi cũng nên đóng vai trò thông báo cho người dùng về trạng thái hiện tại.
• Khi nút chuyển đổi đang ở trạng thái 'bật' nhưng lại hiển thị 'tắt', điều đó có thể gây nhầm lẫn.
• Nên tránh dùng điều khiển flip-flop trong nút bấm hoặc menu.

Công tắc chuyển đổi có thể hiển thị cả trạng thái hiện tại lẫn trạng thái sẽ chuyển sang

• Có thể đặt văn bản bên ngoài nút để hiển thị cả trạng thái hiện tại và trạng thái sẽ chuyển sang.
• Ví dụ, thiết kế công tắc của iOS hiển thị màu xanh khi trạng thái là 'bật', còn 'tắt' thì không như vậy.
• Thiết kế công tắc của OS X không mơ hồ, giúp người dùng nhận biết rõ trạng thái hiện tại.

Nên tránh cách dùng nút chuyển đổi của Twitter

• Nút chuyển đổi của Twitter cung cấp thông tin khi rê chuột, nhưng trên màn hình cảm ứng có thể gây nhầm lẫn.

Trong tiếng Anh, "bật" và "tắt" có thể vừa là trạng từ vừa là tính từ

• Nên dùng động từ hoặc tính từ trên nút để cung cấp nhãn rõ ràng.
• Ví dụ: "kích hoạt/vô hiệu hóa", "bắt đầu/dừng"

Điều quan trọng là phân biệt giữa trạng thái và hành động

• Khi nút chuyển đổi biểu thị hành động (ví dụ: phát/tạm dừng), nó nên hiển thị hành động sẽ xảy ra khi nhấp vào.
• Khi nút chuyển đổi biểu thị tùy chọn (ví dụ: phát ngẫu nhiên/phát thường), nó nên hiển thị trạng thái hiện tại.

Có thể cân nhắc dùng checkbox

• Nếu có thể tóm tắt việc chuyển đổi trạng thái thành một câu hỏi 'có/không', thì việc dùng checkbox có thể phù hợp.

Thay vì nút chuyển đổi, hãy dùng cách hiển thị cả trạng thái lẫn hành động

• Khi ở trạng thái vô hiệu, không nhấn mạnh nút; khi ở trạng thái kích hoạt, hãy nhấn mạnh để thể hiện trạng thái.

Có thể cân nhắc không dùng nút chuyển đổi

• Ví dụ, với phát ngẫu nhiên/phát thường, có thể dùng checkbox có nhãn 'phát ngẫu nhiên'.

Nút 'Thích' của Facebook là một ví dụ tốt về nút chuyển đổi

• Trong ứng dụng Facebook trên Android, nút 'Thích' có màu xám khi không hoạt động và màu xanh khi hoạt động.

Hiển thị đồng thời cả trạng thái hiện tại và hành động là rõ ràng nhất

• Nên cung cấp nhãn cho trạng thái không hoạt động cùng với một nút có thể nhấp để thay đổi sang trạng thái hoạt động.

Ý kiến của GN⁺:

• Thiết kế nút chuyển đổi có thể ảnh hưởng lớn đến trải nghiệm người dùng, và điều quan trọng là phải hiển thị rõ ràng trạng thái hiện tại cũng như trạng thái sẽ chuyển sang.
• Thiết kế công tắc của OS X là một ví dụ tốt vì nó giúp người dùng hiểu trực quan trạng thái hiện tại mà không gây nhầm lẫn.
• Bài viết này cung cấp những yếu tố quan trọng mà các nhà phát triển phần mềm cần cân nhắc khi thiết kế giao diện người dùng, từ đó giúp tạo ra trải nghiệm người dùng tốt hơn.

[GN⁺]

Ý kiến Hacker News

• Sự nhầm lẫn về nút tắt tiếng trong Microsoft Teams

  • Trong ứng dụng Teams, nút tắt tiếng hiển thị biểu tượng micro bị gạch chéo, và khi tắt tiếng được bật thì điều đó có nghĩa là micro đang tắt.
  • Trong các ứng dụng gọi điện, cùng biểu tượng đó lại biểu thị là chưa tắt tiếng, và trạng thái tắt tiếng được thể hiện bằng việc nền nút được tô màu.
  • Không có vấn đề gì nếu nút biểu thị trạng thái hiện tại, nhưng người dùng cần biết nó sẽ trông như thế nào khi trạng thái thay đổi.
  • Sự nhầm lẫn này có thể là một vấn đề nảy sinh từ thiết kế 'flat UI', nơi người dùng phải tự suy ra các yếu tố thiết kế mà không có tham chiếu từ thế giới thực.

• Vấn đề nút gạt thiếu nhất quán trong UI xe Tesla

  • Các nút của hệ thống HVAC phản ứng khác nhau tùy theo kiểu chạm và thời lượng nhấn.
  • Trong lúc lái xe, khi chỉ có thể liếc màn hình trong chốc lát, những lỗi chạm rất nhỏ cũng có thể gây ra thao tác ngoài ý muốn.
  • UI kết nối Bluetooth của Tesla có thiết kế cực kỳ khó hiểu, và điều này còn tệ hơn khi đang lái xe.

• Cơ chế phản hồi trạng thái của công tắc nút nhấn tại NASA

  • Khi công tắc đang tắt thì mọi đèn đều tắt; khi nhấn công tắc, đèn vàng bật lên; và khi thiết bị mong muốn thực sự được bật, đèn vàng tắt đi và đèn xanh bật lên.
  • Cách này cung cấp cả xác nhận rằng công tắc đã được nhấn lẫn xác nhận rằng hệ thống thực sự đã hoạt động.

• Sự tiếc nuối khi checkbox dần biến mất

  • Checkbox từng hoàn hảo và không mơ hồ, nhưng các nhà thiết kế smartphone lại không ưa chuộng nó.

• Thiết kế gây bối rối của UI màn hình dashboard Tesla

  • Nhãn hiển thị 'Open' có vẻ như cho thấy rõ phần đó đang mở, nhưng thực tế người dùng không thể biết đó là nút dùng để mở một bộ phận.

• Vấn đề của nút gạt và cách giải quyết

  • Nút gạt có thể gây nhầm lẫn vì nó đồng thời bao hàm cả trạng thái của hệ thống lẫn hành động thay đổi trạng thái đó.
  • Trạng thái hiện tại là 'ON' nhưng trên thực tế lại có thể mang nghĩa hành động chuyển sang 'OFF'.
  • Giải pháp là tách trạng thái và hành động ra riêng, chẳng hạn dùng nhãn bên ngoài nút hoặc giữ nguyên biểu tượng và thay đổi các thuộc tính khác của nút.

• Vấn đề bất đồng bộ của nút gạt

  • Khi nhấn nút, trạng thái hệ thống có thể không thay đổi ngay lập tức, nên người dùng có thể phải nhấn nhiều lần để chắc chắn nó chuyển sang trạng thái mong muốn.
  • Nếu mỗi trạng thái có một nút riêng thì việc nhấn nhiều lần cũng không thành vấn đề.

• Ưu điểm trong thiết kế nút gạt dạng trượt của Apple

  • Nút gạt dạng trượt của Apple thể hiện rõ cả trạng thái hiện tại lẫn trạng thái sẽ được chuyển tới.
  • Tính năng đang bật được phân biệt bằng nền xanh dương, còn tính năng đang tắt được phân biệt bằng nền xám.

• Sự cần thiết phải hiển thị rõ trạng thái hiện tại và trạng thái sẽ thay đổi của nút gạt

  • Cần phải làm rõ trạng thái hiện tại là gì, và khi đổi nút gạt thì nó sẽ chuyển sang trạng thái nào.
  • Nút phát/tạm dừng tuân theo tiền lệ của thiết bị vật lý, và vì trạng thái phát media đã rõ ràng nên người dùng vẫn hiểu ngay cả khi biểu tượng không thay đổi.
  • Việc chỉ thay đổi nhẹ màu sắc của nút gạt không giúp ích nhiều; cần có nhãn rõ ràng.