Mẹo thiết kế Button nhanh chóng và thiết thực. Để tránh các vấn đề phổ biến về khả năng sử dụng và khả năng tiếp cận.

Adham Dannaway – Tác giả: Practical UI

Nguồn: https://uxplanet.org/ive-been-doing-buttons-wrong-have-you-2117c0066613 

​​

Tôi đã là một Designer trong gần 2 thập kỷ và sử dụng các button trong nhiều dự án. Nhưng tôi không nghĩ rằng mình đã từng dành thời gian để suy nghĩ về thiết kế button. Mãi cho đến gần đây, tôi mới biết mình đã mắc một số lỗi thiết kế button phổ biến (và tôi không phải là duy nhất).

Nếu bạn lấy điện thoại ra, mở một vài ứng dụng và duyệt qua một vài website. Tôi cá là bạn sẽ gặp khá nhiều button. Tôi cũng cá rằng nhiều button trong số đó mắc một số vấn đề tiềm ẩn nguy cơ ảnh hưởng đến khả năng sử dụng và khả năng truy cập. Có nhiều button có vấn đề ở ngoài đó. Từ những công ty lớn hay những Designer giàu kinh nghiệm. Vì vậy tôi tổng hợp một số mẹo thiết kế button nhanh chóng và thiết thực. Để tránh các vấn đề đó và thiết kế những button tốt hơn. 

Trước tiên, tôi sẽ đi một vòng qua các thiết kế button phổ biến. Làm nổi bật các vấn đề của chúng bằng cách sử dụng các nguyên tắc thiết kế UI khách quan. Tôi sẽ tránh đặt suy nghĩ chủ quan của bản thân dựa trên tính thẩm mỹ, “cảm giác tốt”, hay là cái gì trông đẹp. Tôi cũng sẽ không đi vào việc lập trình ở đây. Vì có nhiều thứ chúng ta có thể làm trước ở bản thiết kế. Tôi sẽ kết thúc với những mẹo thiết kế button và gợi ý cho việc thiết kế button tốt nhất.  

Các lỗi thiết kế button phổ biến

Cho hầu hết các dự án, hệ thống thiết kế của bạn cần 3 dạng button: Primary, Secondary và Tertiary. Chúng cần có hệ thống phân cấp thị giác rõ ràng để hiển thị các hành động theo tầm quan trọng khác nhau. Trong chủ đề này, chúng ta sẽ kết hợp nhóm 3 dạng button này. 

Tôi đã làm nổi bật những vấn đề với vài thiết kế button phổ biến ở dưới. Các vấn đề đó gây ra nguy cơ tiềm ẩn về khả năng sử dụng. Vì vậy an toàn nhất là tránh các vấn đề này nếu có thể. Chúng ta hướng đến mục tiêu ít nhất là đạt được Các yêu cầu truy cập WCAG 2.0 cấp AA. Đây là tiêu chuẩn phổ biến nhất, đủ tốt để khởi đầu. 

Nhóm Button 1

Để giúp người suy giảm thị lực (số người suy giảm thị lực cao gấp 24 lần số người hoàn toàn không nhìn thấy – 2015) phân biệt được sự khác biệt giữa các thành phần trong giao diện người dùng (như là viền của các thành ph​ần trong form, buttons, tabs). Thành phần giao diện cần có độ tương phản màu sắc ít nhất là 3:1. Chỉ những phong cách trang trí không yêu cầu phân biệt giữa các thành phần giao diện thì có thể dùng độ tương phản thấp.

Trong ví dụ, secondary button có tỉ lệ tương phản của khối button với nền trắng < 3:1. Tỉ lệ này quá thấp để chỉ rõ hình dạng nút với người suy giảm thị lực. Vài người cho rằng Secondary button chỉ trang trí, không cần có tỉ lệ tương phản 3:1. Nhưng tôi nghĩ dạng khối là cần thiết để nhận ra secondary button là một Button có thể nhấn vào. Không có dạng khối, đó chỉ là một dòng text có màu xanh. Chúng ta có thể thêm một đường viền xung quanh Secondary button để khắc phục vấn đề này. 

Nhóm button 2

Các button mang trạng thái Disable (bị vô hiệu hóa) thường có màu xám nhạt. Secondary button ở ví dụ này có thể bị hiểu nhầm là trạng thái Disable vì có màu xám nhạt. Tôi nghĩ rằng, an toàn nhất là tránh dùng màu xám nhạt để giảm sự nhầm lẫn tiềm ẩn. Tôi cũng gợi ý bạn tránh dùng button có trạng thái Disable nếu có thể. Nhưng chúng ta sẽ thảo luận chuyện đó trong buổi khác. 

Nhóm button 3

Để chắc ăn rằng nhóm đối tượng rộng hơn có thể đọc được chữ nhỏ (18px trở xuống). Nên thiết kế tỉ lệ tương phản màu ít nhất 4.5:1. Kiểu button trong ví dụ này có các vấn đề sau:

• Chữ của button thứ cấp có độ tương phản quá thấp. Nên thiết kế độ tương phản ít nhất là 4.5:1 để đảm bảo là có thể truy cập. 
• Button chính và phụ xung đột nhau vì chúng có kiểu tương tự và thiếu tương phản nhau. Điều đó sẽ phá vỡ phân cấp thị giác. Mất đi sự rõ ràng để nhận ra hành động nào sẽ là quan trọng nhất. Vì các nút có cùng kiểu dáng. => Cần có sự tương phản ít nhất là 3:1 để phân biệt rõ ràng giữa chúng.

Nhóm button 4

Kiểu button này có vấn đề tương tự với ví dụ trước:

• Button thứ cấp có thể gây hiểu lầm là trạng thái disable do màu xám nhạt của nó
• Button thứ cấp có độ tương phản quá thấp. Cần ít nhất là 4.5:1 để chắc chắn có thể truy cập
• Button chính và thứ cấp cũng bị xung đột nhau. Vì có định dạng tương tự và thiếu sự tương phản

Nhóm button 5

Định dạng những button này quá giống nhau sẽ gây khó khăn cho người bị suy giảm thị lực phân biệt chúng. Độ tương phản giữa các button là cách để chỉ ra sự khác biệt giữa chúng, trong ví dụ này độ tương phản quá thấp (cần ít nhất 3:1). Các button nên có sự phân cấp thị giác rõ ràng không chỉ dựa vào mỗi màu sắc.

Nhóm button 6

Những button này cũng có vấn đề tương tự các ví dụ trước:

• Định dạng button quá giống nhau cả về tương phản lẫn kiểu dáng khiến người suy giảm thị lực khó phân biệt sự khác nhau giữa chúng.
• Tỉ lệ tương phản của đường viền button thứ 3 phải ít nhất là 3:1 để có thể thấy và xác định rõ đó là yếu tố có thể tương tác. 

Nhóm button 7

Khi nói về khả năng tiếp cận, điều quan trọng là chúng ta không chỉ dựa vào màu sắc để phân biệt các yếu tố giao diện. Những người suy giảm thị lực sẽ không phân biệt được sự khác nhau giữa các thành phần. 

Ở ví dụ này, button thứ 3 không có khả năng tiếp cận vì chỉ báo duy nhất mà nó có là màu sắc. Điều này có nghĩa là những người mù màu sẽ không thể phân biệt nó với văn bản thông thường.

Trong một số trường hợp: bối cảnh, vị trí và sự gần gũi của button thứ ba với các button khác có thể giúp phân biệt nó với văn bản thông thường, nhưng vẫn có rủi ro là nó sẽ tạo ra sự nhầm lẫn (hoặc bị bỏ qua)

Nhóm button 8

Mọi chi tiết của một bản thiết kế giao diện cần có mục đích hợp lý. Tại sao hình dạng button chính và phụ lại khác nhau trong ví dụ này ? Chúng phục vụ cho hành động khác biệt nhau sao ? Tránh việc thiết kế thiếu nhất quán về hình dạng button vì nó có thể gây ra bối rối.

Nhóm button 9

Hệ thống phân cấp thị giác là cách chúng ta truyền đạt đâu là thành phần quan trọng trên giao diện. Mục đích của 3 loại button khác nhau chính là cho biết hành động nào quan trọng hơn để người dùng biết phải làm gì tiếp theo. Định dạng button trong ví dụ này có những vấn đề sau:

• Phân cấp thị giác không rõ ràng vì button chính và phụ có trọng lượng tương tự về mặt thị giác.
• Nền button thứ cấp có độ tương phản dưới 3:1, quá thấp để chỉ rõ hình dạng button cho người suy giảm thị lực.

Các mẹo thiết kế button

D​​ựa trên các lỗi thiết kế button ở trên, đây là một vài mẹo thiết kế nhanh và thực tiễn cần khắc cốt ghi tâm cho việc thiết kế những button thân thiện với người dùng và tăng khả năng truy cập.

• Các button nên có sự phân cấp thị giác rõ ràng không chỉ dựa vào mỗi màu sắc
• Tỉ lệ tương phản của hình dạng nút nên ít nhất là 3:1 để chắc chắn rằng người dùng nhận ra được đó là một yếu tố có thể tương tác.
• Chữ trên button phải có độ tương phản ít nhất 4.5:1 đáp ứng yêu cầu về khả năng truy cập theo chuẩn WCAG 2.0 cấp AA.
• Nếu các nút có định dạng giống hệt nhau, độ tương phản giữa các nút phải ít nhất là 3:1 để chắc chắn rằng những người suy giảm thị lực có thể phân biệt chúng.
• Tạo vùng chạm lớn (ít nhất 48pt) để chắc chắn mọi người có thể dễ dàng chạm vào button.
• Đảm bảo khoảng cách hợp lý giữa các button để người dùng không chạm sai button. Tôi thường sử dụng khoảng cách an toàn là 16pt 

Gợi ý cho các button tốt hơn

Tôi gợi ý sử dụng các định dạng button sau đây vì chúng rất thân thiện, dễ truy cập và có phân cấp thị giác rõ ràng không chỉ phụ thuộc vào màu sắc.

Có thể bạn nhận thấy rằng nút thứ 3 trông giống một liên kết văn bản. Nhưng nó có thật sự là vấn đề không? Theo truyền thống, text link được thiết kế để “đi đến đâu đó”. Và button được thiết kế cho việc “thực hiện một hành động”.

Ngày nay, nhiều người không nhìn nhận theo mô hình tương tác này. Nên sẽ không mong đợi click text link để đi đâu đó nữa. Vậy tôi không nghĩ chúng ta cần phải bám theo nguyên tắc đó mãi. Chỉ cần đảm bảo rằng button được lập trình với thẻ button. Liên kết thì được lập trình với thẻ liên kết, bất kể nó trông như thế nào. Điều này sẽ giúp bạn tránh được các vấn đề về khả năng truy cập màn hình. 

Ví dụ

Trong ví dụ ở dưới, đường dẫn kêu gọi hành động quan trọng được làm giống như một button để khiến chúng nổi bật và có sự phân cấp thị giác hơn

Trong bảng thông báo dưới dây, chúng ta có​​ thể thấy cả 3 định dạng button trong thực tế. Dù cho button thứ 3 trông giống một liên kết. Nó vẫn rõ ràng trong ngữ cảnh này là nhấn vào sẽ thực hiện một hành động. Thay vì đưa bạn đến trang khác. 

Tôi không nói rằng những định dạng button này là cách duy nhất để thiết kế các button. nhưng chúng không tiềm ẩn nhiều rủi ro về khả năng tiếp cận và truy cập như ở trên. Nên đây là lựa chọn khá an toàn. Tôi hi vọng bạn thấy các mẹo thiết kế button này hữu ích. Và tôi muốn nghe những suy nghĩ cũng như phản hồi của bạn.

Từ người biên dịch

Việc thiết kế các button tưởng chừng là việc đơn giản nhất trên đời: một dòng text, một mảng màu hoặc border phía dưới là đủ để chúng ta tạo ra một button. Nhưng khi quan tâm nhiều hơn đến trải nghiệm người dùng gồm: 

• Cách họ sẽ tương tác: một hay 2 tay/liên tục hay ngắt quãng/gấp gáp hay từ tốn
• Thiết bị họ sử dụng: mobile/desktop/tablet
• Không gian quanh họ: Trong văn phòng/ quán cafe/ngoài đường 
• Người dùng của chúng ta là ai: Độ tuổi/giới tính/độ thành thạo,…

Việc thiết kế button sẽ cần đầu tư hơn: 

Vị trí đặt, kích thước, khoảng cách nào sẽ giúp người dùng dễ thao tác? 

Ứng dụng thanh toán qua QR thì cần thiết kế button để User bấm bằng 1 tay trái và liên tục để hoàn thành việc thanh toán nhanh nhất có th​ể. Nhưng ứng dụng xem video thì không cần show button mà play/pause video khi touch vào màn hình để tối ưu không gian xem video.

Hình dạng nào sẽ giúp người dùng dễ nhận ra họ có thể thao tác tại điểm đó?

Với ứng dụng chat, User biết click vào một bạn bè trên danh sách để trò chuyện mà không cần tạo card đó thành hình dạng button. Nhưng với các ứng dụng về thông tin việc để thông tin dạng danh sách sẽ khiến User nghĩ đó chỉ là thông tin và không click để thao tác được. 

Khi có nhiều hơn 1 hành động, các button cần kết hợp ra sao để người dùng nhận ra thao tác chính và thao tác phụ? 

Đây là nội dung ở phần trên

Màu sắc nào cần dùng để User với độ tuổi sản phẩm nhắm đến, hoặc ở không gian mà user thường​​ xuyên sử dụng sản phẩm có thể dễ dàng phân biệt và tiếp cận?

Khách hàng sẽ thường xuyên dùng Ứng dụng đặt xe hoặc Bản đồ ở ngoài trời vì vậy màu sắc cần phải có độ tương phản cao hơn một thiết kế mà User sử dụng trong nhà như shopping Tiki.

Ứng dụng cho khách hàng có độ tuổi trên 50 sẽ cần có độ tương phản cao hơn là dành cho khách hàng độ tuổi 16-30 vì thị lực của người lớn tuổi sẽ giảm theo thời gian. Theo thống kê của WHO 80% người suy giảm thị lực có độ tuổi trên 50. Việt Nam có khoảng 2 triệu người suy giảm thị lực và 15 triệu trẻ em từ 6 – 15 tuổi mắc các tật khúc xạ (2020), vậy độ tương phản màu sắc bạn chọn sẽ phụ thuộc vào việc nhóm người dùng này có nằm trong nhóm đối tượng của ứng dụng hay không ?

Nội dung text có ngắn gọn, dễ hiểu, thúc đẩy hành động v​à phù hợp với người dùng ?

Việc viết text ngắn gọn, dễ hiểu vẫn tương đối dễ hơn việc viết theo đúng Voice & Tone mà chúng ta định hình cho sản phẩm. Việc tương tác với ngôn ngữ, văn phong phù hợp với bản thân sẽ tạo sự gần gũi và kết nối cảm xúc của sản phẩm với người dùng. Mang đến niềm vui, sự thú vị và thúc đẩy khách hàng tạo mối quan hệ gắn bó với sản phẩm. Chính vì vậy UX Writing đã được tách ra trở thành một công việc riêng và đó là một công việc thú vị dành cho những bạn yêu thích đan chữ xếp thuyền.

Nếu bạn quan tâm đến thiết kế thúc đẩy trải nghiệm người dùng thì bài viết này sẽ là một món quà nhỏ xíu nhưng đủ dễ thương dành cho bạn. Và hi vọng những nội dung bổ sung của mình sẽ có giá trị để bạn áp dụng phù hợp với dự án của mình. 

From Moonlight with love <3