Các nút bấm (button) là một thành tố cơ bản trong các giao diện có tương tác giữa sản phẩm và người dùng, điển hình là các chương trình máy tính, trang web hay ứng dụng. Chúng có vai trò quan trọng trong việc thực hiện một tác vụ nào đó trong quá trình tương tác giữa user và hệ thống. Do đó, thiết kế bộ phận này sao cho tối ưu cũng là cách để app của bạn có UI thân thiện hơn. Cùng AppotaX tìm hiểu 6 quy tắc cần thiết để có thể thiết kế những “nút bấm” hiệu quả cho ứng dụng của mình qua bài viết dưới đây nhé!
1. Thiết kế tường minh, rõ ràng
Đã gọi là “giao diện người dùng”, thì UI cũng phải cung cấp cho người dùng biết các thành phần nào có thể tương tác được và thành phần nào là không. Trên lý thuyết, mọi thành tố trong UI sẽ đều tiêu tốn một thời gian nhất định để có thể xác định được nó mang chức năng gì. Và vì thế, những thiết kế UI nào khiến người dùng cảm thấy rối rắm và tốn thời gian để định vị các tính năng sẽ là những giao diện tồi. User thường sẽ sử dụng những hiểu biết và trải nghiệm trước đó của mình để hình dung và nhận ra những biểu tượng có thể tương tác. Đó là lý do vì sao việc design một cách thích hợp ( dùng kích cỡ, hình dạng, màu sắc, đổ bóng ) để làm button (nút ấn) cho ra một chiếc nút ấn.
Đừng mặc định rằng mọi thứ bạn tạo ra trên giao diện đều hiển nhiên đối với người dùng
Trong nhiều trường hợp, những người thiết kế cố tình không đặt các nút tương đương với các yếu tố tương tác. Xảy ra điều này là bởi họ cho rằng các yếu tố tương tác vốn đã quá rõ ràng đối với người dùng. Bởi vậy khi thiết kế giao diện, bạn phải luôn ghi nhớ rằng: khả năng phân biệt các kí hiệu có thể ấn được hay không của bạn và người dùng không hề giống nhau, bởi bạn nhắm rõ vai trò của từng thiết kế còn người dùng thì không.
Một số thiết kế quen thuộc có thể được áp dụng cho các button của bạn :
– Nút tràn và viền vuông
– Nút tràn và bo góc
– Nút tràn có đổ bóng
– Nút không đổ màu
2. Đặt tiêu đề rõ ràng
Người dùng nên được biết rõ điều gì sẽ xảy ra khi họ nhấn vào nút. Các nút bấm được thiết kế sơ sài sẽ gây nên sự nhầm lẫn hoặc những thao tác ngoài ý muốn đối với người dùng. Khi thiết kế nút bấm, bạn nên thêm vào các chú thích để giải thích chức năng của chúng.
Ví dụ như trong hộp thoại này, nút ‘OK, và‘ Hủy’ không biểu thị rõ ràng ý nghĩa của chính nó. Hầu hết người dùng sẽ tự hỏi “Chuyện gì sẽ xảy ra khi tôi nhấn vào nút ‘Hủy’
Ở đây, thay vì sử dụng nút ‘OK’, nút ‘Xóa’ sẽ phù hợp hơn. Điều này sẽ thể hiện rõ hoạt động tiếp theo sẽ xảy ra khi người dùng tương tác với từng nút. Ngoài ra, nếu nút ‘Xóa’ thể hiện một hành động có tính “nguy hiểm tiềm tàng” bạn có thể sử dụng màu đỏ như một cách cảnh báo người dùng.
3. Căn kích thước hợp lý
Đặt thứ tự ưu tiên cho các nút
Dropbox sử dụng nút có kích cỡ lớn và màu tương phản để thu hút sự chú ý của người dùng vào nút CTA ” Dùng thử dịch vụ”
Thường thì kích cỡ của nút cũng sẽ tỷ lệ thuận với mức độ ưu tiện và quan trọng của nút đó đối với ứng dụng.Vì vậy, hãy làm nổi bật những nút bấm có vai trò quan trọng nhất trong ứng dụng của bạn bằng cách làm nó khác biệt hơn các nút khác, tăng kích thước của nút hoặc sử dụng các màu tương phản để thu hút sự chú ý của người dùng.
Đặt kích cỡ thân thiện với thao tác chạm của ngón tay người dùng
Ảnh bên phải minh họa cho kích thước button quá nhỏ đối với ngón tay người dùng ( Ảnh: Apple)
Ở nhiều ứng dụng di động, các nút bấm đôi khi được thiết kế quá nhỏ dẫn đến tình trạng người dùng nhấn trượt ra ngoài và thao tác nhầm. Theo nghiên cứu của MIT Touch Lab, trung bình cho các miếng đệm ngón tay như phím bấm của bàn phím máy tính thường nằm trong khoảng từ 10 – 14mm, trong khi đó kích cỡ các đầu ngón tay của con người là 8 hoặc 10mm. Từ đó có thể suy ra rằng kích thước vùng cảm ứng tối thiểu của nút bấm nên vào khoảng 10 mm x 10 mm.
4. Lưu ý về thứ tự nút
Thứ tự của các nút sẽ phản ánh quá trình tương tác giữa người dùng và hệ thống. Khi thiết kế các nút bấm của ứng dụng, các UI designer nên đặt mình vào vị trí của user và hình dung ra những quy trình thao tác có thể diễn ra đến từ người dùng. Ví dụ, làm thế nào để sắp xếp các nút ‘Previous/Next’ trong từng trang? Theo nguyên tắc logic, nút di chuyển bạn về phía trước nên ở bên phải và một nút di chuyển bạn lùi về phía sau nên ở bên trái.
5. Tránh sử dụng quá nhiều nút ấn
Đây là một hiện tượng rất phổ biến đối với các ứng dụng và website, thậm chí là còn xảy ra trong cuộc sống hằng ngày nữa. Khi bạn được cung cấp quá nhiều sự lựa chọn, bạn thường sẽ cảm thấy “ bối rối” và cuối cùng không chọn phương án nào cả. Khi nhà phát triển ứng dụng đưa vào quá nhiều tùy chọn hay nút bấm vào cùng một trang, đôi khi tình trạng tương tự cũng sẽ xảy ra đối với mỗi người dùng. Hãy tập trung vào các tùy chọn và nút bấm quan trọng mà bạn muốn định hướng cho người dùng.
Đây là người dùng khi gặp phải một ứng dụng đưa vào quá nhiều nút bấm
6. Thêm hiệu ứng hoặc âm thanh để phản hồi tương tác từ người dùng
Khi một người dùng chạm vào một nút ấn trên bề mặt cảm ứng, sẽ thuận tiện hơn nếu giao diện UI đó đáp lại bằng các phản hồi ngay tức thì như rung hay âm thanh. Với một số ứng dụng vận hành chậm, việc không có tín hiệu phản hồi sẽ làm người dùng “mông lung”, không biết là tác vụ mình vừa thực hiện đã được tiến hành hay chưa. Một số người dùng sẽ tiếp tục lặp lại hành động chạm/ấn nhiều lần, gây ra những kết quả ngoài ý muốn
Hinh ảnh minh họa cho cơ chế phản hồi khi người dùng chạm/nhấn nút ( Ảnh: Vadim Gromov )
Là con người, chúng ta luôn mong đợi một số phản hồi sau khi tương tác với một đối tượng. Nó có thể là phản hồi trực quan, âm thanh hoặc xúc giác – bất cứ điều gì thừa nhận là thao tác đã được thực hiện.
Theo uxplanet.org