7 Quy tắc thiết kế button cơ bản cho UI/UX Designer

Buttons trong một sản phẩm công nghệ là yếu tố có mối quan hệ vô cùng mật thiết với thói quen của người dùng, đồng thời là “yếu tố” then chốt để sản phẩm tương tác với người dùng. Với yếu tố này, điều quan trọng nhất không phải là tính thẩm mỹ mà là thiết kế của nó có khiến người dùng dễ dàng chú ý và nhấn vào hay không. Tất nhiên, tùy từng sản phẩm, bạn hoàn toàn có thể thỏa sức sáng tạo để phù hợp với tinh thần của tổng thể. Tuy nhiên, để button của bạn trở nên hữu ích và thực hiện đúng chức năng của nó, bạn cần nắm rõ 7 quy tắc thiết kế button cơ bản trong bài viết sau đây!

1. Làm cho các button trông giống như button!

Khi tương tác với giao diện người dùng, người dùng cần biết ngay cái gì “có thể nhấp được” và cái gì không. Mỗi mục trong một thiết kế đòi hỏi nỗ lực của người dùng để giải mã. Nói chung, người dùng càng mất nhiều thời gian để hiểu được ý đồ của UI thì tính khả dụng của UI sẽ giảm đi nhiều đối với người dùng.

Vì vậy, thiết kế button đẹp thôi là chưa đủ. Button cần 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 mà sản phẩm cần truyền tải.

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

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

2. Đặt các button ở nơi người dùng mong muốn tìm thấy chúng

Các button nên được đặt ở những nơi mà người dùng có thể dễ dàng tìm thấy chúng hoặc mong muốn nhìn thấy chúng. Đừng bắt người dùng “săn tìm” các button trong sản phẩm của bạn. Nếu người dùng không thể tìm thấy button. họ sẽ không biết rằng button đó tồn tại. Như vậy thì 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ể.

3. Thể hiện rõ chức năng của button

Các button có nhãn chung chung hoặc gây hiểu lầm có thể là gây thất vọng lớn cho người dùng của bạn. Các nhãn phải giải thích rõ ràng chức năng của từng button. Lý tưởng nhất là nhãn phải mô tả rõ ràng hành động của button đó. Thông qua nhã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 khi họ nhấn vào button đó.

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

Kích thước button phải phản ánh được mức độ ưu tiên của phần tử này trên màn hình. Một button lớn thể hiện nó là một hành động quan trọng hơn. Bạn cũng có thể dùng màu sắc để thu hút sự chú ý của người dùng.

Ưu tiên các button quan trọng nhất

Làm cho button quan trọng nhất khiến người dùng cảm nhận được rằng “À, button này là quan trọng nhất!”. Hãy cố gắng làm cho CTA chính nổi bật hơn. Tăng kích thước của button và sử dụng màu tương phản để thu hút sự chú ý của người dùng.

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.

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.

5. Chú trọng đến thứ tự

Thứ tự của các button phải phản ánh đượ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.

6. Tránh sử dụng quá nhiều button

Đây là một vấn đề phổ biến đối với nhiều ứng dụng và trang web. Khi bạn cung cấp quá nhiều tùy chọn, người dùng của bạn sẽ không làm gì cả. Khi thiết kế các trang trong ứng dụng hoặc trang web của bạn, hãy 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.

7. Cung cấp phản hồ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 button, họ mong đợi giao diện người dùng sẽ phản hồi bằng phản hồi thích hợp, có thể là phản hồi bằng hình ảnh hoặc âm thanh. Nếu người dùng không nhận được bất kỳ phản hồi nào, họ dễ hiểu nhầm rằng hệ thống không nhận được tương tác của họ và sẽ lặp lại hành động. 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.

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ọ.

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!

Tham khảo: linkedin, careerly

Đăng ký tham gia ngay khóa học Thiết kế UI/UX chuyên nghiệp của iDesign tại: https://idesign.edu.vn/cac-khoa-hoc/khoa-hoc-thiet-ke-ui-ux.html