Quy tắc thiết kế button cơ bản 

Các button (nút) trong một digital product là yếu tố có quan hệ cực kỳ mật thiết với thói quen của người dùng, đồng thời đây là một “nhân tố” cốt cán để sản phẩm có thể tương tác được với người dùng. Với yếu tố này, điều quan trọng hơn cả không phải là thẩm mỹ, mà là việc thiết kế của nó có giúp người dùng dễ chú ý và dễ nhấn vào hay không. Tất nhiên, tùy thuộc vào mỗi sản phẩm, các bạn hoàn toàn có thể sáng tạo cho phù hợp với tinh thần của tổng thể. Tuy nhiên, để button của bạn hữu ích và phát huy đúng chức năng của nó, có lẽ bạn cần biết 07 quy luật cơ bản về thiết kế button trong bài viết sau!

Quy luật 1: Hãy làm cho chiếc button của bạn trông giống như một chiếc button!

Bất cứ một tương tác giữa người dùng và sản phẩm được sắp đặt trong UI, người dùng cần nhận thức ngay được đâu là chỗ có thể “nhấn” vào để thực hiện hành động được. Nghe có vẻ hiển nhiên, nhưng trên thực tế nếu người dùng mất kha khá thời gian để hiểu được ý đồ của UI thì có lẽ cũng là lúc tính khả dụng của UI bị giảm đi nhiều chút. 

Vậy, người dùng làm cách nào để phân biệt được đâu là vị trí có thể tương tác, đâu là chỗ không thể? Trên thực tế, người dùng sẽ dựa vào kinh nghiệm sử dụng các sản phẩm khác trước đó hoặc các dấu hiệu thị giác để phán đoán ý nghĩa của các vật thể/yếu tố trong UI. Vì vậy, để một chiếc button có thể làm việc ngon nghẻ, UX Designer cần thiết kế chúng mang những dấu hiệu thị giác phù hợp (từ độ lớn, hình dạng, màu sắc, bóng,…) Những dấu hiệu này sẽ phát huy giá trị của thông tin (các yêu cầu tha thiết gửi đến user) mà product cần truyền tải. 

Tuy nhiên, có nhiều UI lại mang những dấu hiệu thị giác tượng trưng cho interaction yếu, khiến người dùng khó hiểu ý nghĩa mà chúng muốn truyền đạt. Lúc này, người dùng không thể phân biệt được liệu đây có phải là nơi mà mình có thể nhấn vào hay không, như vậy thì dù chiếc nút của bạn có đẹp đến cỡ nào đi nữa thì cũng không có tính khả dụng vì nó đã không làm tròn bổn phận của mình. 

Đặc biệt, vấn đề này còn nghiêm trọng hơn với người dùng mobile. Vì người dùng trên desktop có thể di chuyển chuột vào một yếu tố trên màn hình để xem có thể nhấn vào chúng hay không, trong khi người dùng mobile thì không hề có cơ hội đó, họ chỉ có một cách duy nhất đó là trực tiếp nhấn vào để kiểm tra xem liệu nó có tương tác được hay không. 

Trong nhiều trường hợp designers hay tự cho rằng, button không phải là một yếu tố tương tác vì họ nghĩ rằng các yếu tố tương tác sẽ được truyền đạt rõ ràng đến người dùng. Vì vậy, có một quy tắc để tránh trường hợp này mà các designer non trẻ cần chú ý đó là: 

‘Năng lực nhận ra các dấu hiệu “có thể nhấn vào’ giữa designer và người dùng là khác nhau. Bạn chính là người tạo nên UI với ý đồ như vậy nên đương nhiên bạn sẽ biết các yếu tố đó mang ý nghĩa như thế nào!”

Vì vậy, sáng tạo là tốt nhưng cũng đừng quên nghĩ đến người dùng. Hãy cố gắng xây dựng một thiết kế có thể khiến người dùng cảm thấy thân thuộc nhất. 

Dưới đây là một số loại button quen thuộc với người dùng: 

1. Button với khung hình chữ nhật
2. Button với khung chữ nhật có bo tròn ở 4 góc
3. Button hình chữ nhật và được đổ bóng.
4. Ghost Button

Trong các ví dụ trên thì, button khung hình chữ nhật và có đổ bóng chính là chiếc button rõ ràng nhất. Nổi bật và dễ nhận ra ngay bằng mắt là hai ưu điểm của button kiểu này và chúng giúp người dùng có thể nhận ra ngay đây là nơi mình có thể tương tác với sản phẩm. 

Đừng quên các khoảng trắng xung quanh button!

Không những design của bản thân button cần mang tỉ lệ thị giác rõ ràng mà các khoảng trống xung quanh chúng cũng rất quan trọng, các khoảng trống này sẽ giúp các button đứng biệt lập, giúp người dùng dễ dàng nhận ra và đưa ra phán đoán rằng chúng là những yếu tố có thể click vào được.

Quy tắc 2: Bố trí nút button của bạn tại nơi mà người dùng hi vọng sẽ được nhìn thấy nó

Button luôn phải được bố trí tại vị trí thuận tiện cho người dùng, tức là ở nơi mà người dùng nghĩ rằng sẽ có nút button theo kinh nghiệm của họ. Ví dụ bạn nên đặt button của mình ở vị trí thẳng hàng với các yếu tố còn lại như text, icon, .. chứ không nên để chúng theo hình zigzac hoặc ở một nơi chốn nào đó quá ‘xa xôi’ với nội dung chính 

Đừng để người dùng của bạn phải “đi săn” button trong sản phẩm của bạn và nếu họ không tìm được, thì tất nhiên sự tồn tại của button là vô nghĩa. 

Đó chính là lý do tại sao bạn nên sử dụng một layout mang tính phổ cập đại chúng nhất có thể cùng với pattern UI tiêu chuẩn để giúp người dùng có thể dễ dàng hiểu được mục đích của từng yếu tố cũng như flow của sản phẩm của bạn, đặc biệt, đối với button thì dù cho không quá nổi bật thì người dùng vẫn có thể nhận ra. Sự kết hợp hoàn hảo giữa một layout tiêu chuẩn cùng với thiết kế phần nhìn rõ ràng, bố trí khoảng trắng hợp lý sẽ khiến layout của bạn trở nên dễ hiểu, dễ dùng hơn về mặt tổng thể. 

Quy tắc 3: Thể hiện rõ chức năng của button

Những button được đặt tên quá chung chung hoặc dễ gây hiểu lầm là một điểm trừ vô cùng lớn cho sản phẩm của bạn. Bạn nên biểu thị tên của từng button một cách rõ ràng và thể hiện được đúng chức năng của nó. Thông qua tên của các button, người dùng phải hiểu rõ được điều gì sẽ xảy ra tiếp theo sau khi họ nhấn vào button đó. Ở ví dụ dưới đây, người dùng cần thực hiện hành động xóa nhưng lại gặp phải popup với nội dung như sau: 

Trong dialog popup này, chỉ dùng OK và Cancel để thể hiện ý nghĩa của hai nút button là chưa hề đủ chính xác và rõ ràng. Đại đa số người dùng sẽ cảm thấy lúng túng và phải tự hỏi “Nếu tôi nhấn Cancel thì điều gì sẽ xảy ra tiếp theo?”

Một tip dành cho bạn ở đây, tuyệt đối đừng bao giờ đặt tên cho button là “OK” hoặc “Cancel”. Hai từ này có thể rất phổ biến và được sử dụng rộng rãi nhưng cũng chính chúng là những từ ngữ mang nghĩa chung chung và mơ hồ nhất. 

Thay vì dùng từ “OK”, trong trường hợp này, dùng trực tiếp từ “Remove” sẽ khiến chức năng của button này rõ ràng hơn, và người dùng cũng hiểu rõ điều gì sẽ xảy ra tiếp theo sau khi họ nhấn nút này. Ngoài ra, trong trường hợp muốn nhấn mạnh hơn nữa, có thể thể hiện button “Remove” bằng màu đỏ, nhấn mạnh tính “nguy hiểm” của action mà người dùng sắp thực hiện. 

Quy tắc 4. Thiết kế button với kích thước phù hợp: 

Kích cỡ của button phải tương ứng với độ quan trọng của hành động chúng đại diện. Vì vậy, chúng ta cũng nên xác định mức độ quan trọng và thứ tự ưu tiên của các button trước khi thiết kế. Điều quan trọng là phải làm cho người dùng phải cảm nhận được rằng “À, button này là quan trọng nhất!”. Đặc biệt, bạn cần cố gắng để các nút CTA đại diện cho mục đích business của sản phẩm bạn nổi bật nhất và người dùng có thể thấy được ngay. Bạn có thể dùng kích cỡ, màu sắc để thu hút sự chú ý của người dùng. 

Để có thể khiến người dùng chú ý vào button “Try Dropbox Business Free”, Dropbox đã thiết kế CTA này có kích thước lớn đặc biệt và sử dụng màu để nhấn mạnh.

Và đừng quên một điều rằng, với UI trên các thiết bị di động, kích cỡ button phải vừa đủ lớn để người dùng có thể chạm vào. Nếu kích cỡ button quá nhỏ so với tay người dùng thì rất có thể họ sẽ phải ấn nhầm vào button mà mình không mong muốn. 

Phải: button được thiết kế với kích thước phù hợp

Trái: button có kích thước quá nhỏ không đủ cho người dùng chạm vào

Theo nghiên cứu từ MIT Touch Lab thì kích thước pads của một ngón tay là từ 10-14mm, và kích thước của đầu ngón tay là từ 8-10mm. Do đó, kích cỡ tối thiểu phù hợp để ngón tay có thể chạm vào thoải mái đó là 10x10mm. 

Quy tắc 5: Chú trọng nhiều vào thứ tự

Thứ tự của các button cần thể hiện được “bản chất” của “cuộc trò chuyện” giữa người dùng và hệ thống. Bạn cần tự hỏi bản thân, giả sử bản thân mình là người dùng thì bạn sẽ mong chờ button nào xuất hiện ở màn hình này, để từ đó thiết kế sao cho phù hợp với mong đợi của người dùng. 

UI đóng vai trò như là cuộc trò chuyện giữa bạn và người dùng. 

Một ví dụ đơn giản, với nút “Quay lại / Tiếp theo” bạn sẽ đặt vị trí của hai button này như thế nào? Đương nhiên với suy luận thông thường, chúng ta sẽ đặt nút “Quay lại” ở bên tay trái và đặt nút “Tiếp theo” phía tay phải để có thể di chuyển đến màn hình/ trang tiếp theo. 

Quy tắc 6: Số lượng button không nên quá nhiều

Một lỗi khá phổ biến nhiều trang web/ ứng dụng đang mắc phải. Điều gì nhiều quá cũng không tốt, nếu bạn cung cấp cho người dùng quá nhiều sự lựa chọn thì có thể mang lại tác dụng ngược, đó là người dùng không muốn thực hiện bất cứ hành động nào. (Bạn có thể tham khảo tại video TED sau đây: https://www.ted.com/talks/barry_schwartz_the_paradox_of_choice)

Khi thiết kế app/web, bạn nên suy nghĩ trên lập trường của người dùng, phán đoán xem những hành động mà họ muốn thực hiện nhất, hoặc những hành động quan trọng nhất đối với người dùng. 

Quy tắc 7: Cung cấp tương tác qua lại bằng hình ảnh hoặc âm thanh sau khi người dùng tương tác với hệ thống

Khi người dùng click hoặc chạm vào một button trên UI, họ sẽ mong muốn button cũng tương tác lại với họ một cách phù hợp bằng thị giác hoặc âm thanh. Nếu người dùng không nhận được bất kỳ feedback nào, họ dễ hiểu nhầm rằng hệ thống chưa ghi nhận tương tác từ họ và một cách tự nhiên sẽ lặp lại tương tác này. Những hành vi không cần thiết như vậy từ người dùng sẽ khiến hệ thống thêm quá tải vì bận xử lý những lệnh lặp đi lặp lại không cần thiết. 

Là một con người, sau khi tương tác với một vật thể nào đó, chúng ta tha thiết mong muốn nhận được tương tác ngược lại từ vật thể đó, thật khó chịu khi một ai đó/ cái gì đó cho chúng ta ăn “trái bơ”. Vì vậy, hãy cung cấp một tương tác ngược lại cho người dùng, dù đó là tương tác về âm thanh, hình ảnh, chuyển động hay bất kỳ hình thức nào đó để người dùng biết rằng, hành động của họ đã được hệ thống công nhận. 

Với một số tương tác như tương tác “downloading”, button không những phải thể hiện tương tác lại với hành động của người dùng mà còn phải cho họ thấy được quá trình hệ thống đang thực hiện để “trả lời” cho tương tác của họ. 

Lời kết: 

Mặc dù sự thật là button là một trong những yếu tố cơ bản kinh điển của UI nhưng chúng vẫn xứng đáng được bỏ công sức vào thiết kế. Chúng cũng xứng đáng để trở nên tốt và hữu dụng hơn. Và cuối cùng, hãy nhớ thiết kế button của bạn một cách nổi bật và rõ ràng!

Ref: https://brunch.co.kr/@hyeminimi/25