Thiết kế button trong một digital product là một thành phần thiết yếu cho việc thiết kế tương tác hiện nay, chúng có vai trò quan trọng cho sự liên kết giữa người dùng và hệ thống sản phẩm. đồ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!
1. Thiết kế button dễ nhận ra
Khi người dùng cần tương tác, họ cần tự xác định được ngay phần nào bấm vào được và phần nào không. Thông thường, người dùng sẽ mất một khoảng thời gian để làm điều đó cho nên để UI có tính hữu dụng cao thì khoảng thời gian nói trên phải được rút ngắn lại. Vậy bằng cách nào người dùng lại hiểu được chính xác phần nào có tương tác được hay không?
Chính bằng những trải nghiệm trước đây với những ký hiệu thị giác (size, shape, màu sắc, shadow…) để lọc ra được ý nghĩa của một đối tượng trong UI. Bởi vậy việc dùng ký hiệu thị giác sát nghĩa nhất có thể vô cùng quan trọng để button dễ được nhận ra giữa hàng loạt các đối tượng khác.
Thiết kế quen thuộc
Dưới đây là một số thiết kế button quen thuộc với hầu hết mọi người:
- Button fill màu với border vuông
- Button fill màu với border bo góc
- Button fill màu với shadows
- Button trong suốt (Ghost button)
Trong tất cả những ví dụ trên thì dạng “Button fill màu với shadows” là quen thuộc với hầu hết người dùng nhất do lớp shadow bên dưới tạo cảm giác ba chiều và người dùng thì lại thường có phản ứng khá tốt với các dạng hình ảnh ba chiều này.
2. Đặt button ở những vị trí quen thuộc
Không ai ép bạn phải đặt button ở đâu cả nhưng tốt hơn hết, như tiêu đề, bạn nên đặt button ở những vị trí mà người dùng có thể đoán được bởi vì như vậy thì khi cần tương tác với giao diện, họ không nhất thiết phải đi tìm chúng nữa nếu không là họ sẽ tự cho rằng button không hiện hữu và đánh giá không tốt.
Layout cơ bản và UI chuẩn
Button được đặt ở những vị trí được quy ước lúc nào cũng dễ dàng tìm thấy cả. Đi kèm với những dạng layout cơ bản, quen thuộc thì người dùng sẽ luôn hiểu được mục đích của từng thành phần – cho dù chúng có khó phân biệt cách mấy đi chăng nữa. Kết hợp layout dạng vừa rồi với lối thiết kế xanh-sạch-đẹp, sử dụng khoảng trắng hợp lý thì tổng thể sẽ vô cùng thân thiện cho người dùng.
3. Gắn nhãn (Label) button đúng với chức năng của nó
Khi nhiều button bị trùng nhau hoặc label sai sẽ rất dễ dàng gây hoang mang cho người dùng. Và để tránh vấn đề này thì bạn nên label button sao cho thật dễ hiểu. Và còn phải khớp với chức năng của chúng nữa.
Một ví dụ dễ hiểu, hãy tự đặt mình vào vị trí người dùng. Và bạn vô tình bấm vô cái nút Delete, dưới đây là cái bảng báo lỗi hiện ra.
“OK” và “Cancel” còn khá là mông lung trong tình huống này. Phần lớn người dùng sẽ thường tự hỏi là “Nếu mình bấm nút Cancel thì sao nhỉ?”
Đừng bao giờ thiết kế hộp thoại (dialog box) mà chỉ chứa hai button OK và Cancel.
Thay vì đặt label là “OK” thì nên đặt là “Remove” sẽ rõ nghĩa hơn nhiều. Ngoài ra, nếu việc Delete là một thao tác có khả năng gây hại thì có thể tô đỏ button lên để biểu thị tốt hơn.
Label “Remove” giúp làm rõ nghĩa cho chức năng của button hơn hẳn.
Button “Disable Card” với ý nghĩa là có khả năng gây hại nên được dùng màu đỏ.
4. Đặt kích thước cho mẫu thiết kế button hợp lý
Kích thước của button nên phản ánh được mức độ ưu tiên của từng phần trong thiết kế. Button to đồng nghĩa với mức độ quan trọng của hành động đi kèm.
Làm nổi bật button
Hãy để những button quan trọng nhất được thể hiện tầm ảnh hưởng của mình. Bằng cách luôn cho chúng thật nổi bật với kích thước to hơn. Và có độ tương phản màu sắc cao. Điều này sẽ giúp button có được sự chú ý cần có từ người dùng.
Dropbox dùng kích thước và độ tương phản màu sắc để hướng sự tập trung của người dùng vào button “Try Dropbox Business free”.
Kích thước button hợp lý
Một số app có button khá nhỏ, điều này hay dẫn đến trường hợp người dùng bị khó bấm và buộc họ phải thử đi thử lại nhiều lần mới đạt được tương tác mong muốn. Đây là điều cũng nên lưu ý và tránh.
Theo nghiên cứu thu được từ MIT Touch Lab thì diện tích trung bình của đốt đầu ngón tay rơi vào tầm từ 10-14mm,. Trong khi đó của đầu ngón tay sẽ là 8-10mm. Do đó, kích thước lý tưởng cho button nên tối thiểu là 10mm x 10mm.
5. Thứ tự sắp đặt
Đây cũng là yếu tố cần thiết để giữ được sự tự nhiên trong việc tương tác của người dùng với hệ thống. Hãy luôn tự hỏi xem thứ tự sắp đặt như nào sẽ là thích hợp cho người dùng và cố gắng thiết kế theo như thế.
Ví dụ đơn giản: Làm sao để sắp xếp thứ tự của nút “Previous/Next” trong việc chuyển trang qua lại? Giải thích có lý nhất chính là button nào hướng về hành động đi tới thì nên đặt bên phải, còn button hướng hành động đi lùi lại thì nên ở bên trái.
6. Tránh thiết kế button quá nhiều
Đây là một vấn đề khá phổ biến mà nhiều app hay website mắc phải. Khi bạn càng đưa ra quá nhiều sự lựa chọn. Thì người dùng càng không thể đưa ra quyết định nên làm cái gì. Cho nên khi thiết kế một trang bất kì cho app hay website. Hãy cân nhắc xem hành động nào là quan trọng nhất mà bạn muốn người dùng thực hiện.
7. Phản hồi lại với tương tác bằng hình ảnh hoặc âm thanh
Khi người dùng click hoặc chạm vào button, họ thường mong đợi rằng hệ thống sẽ có phản hồi lại để biết được là hành động của mình đã được nhận hay chưa. Dựa vào từng loại thao tác mà chúng ta có thể dùng hình ảnh hay âm thanh để tạo ra các phản hồi. Trong trường hợp không có phản hồi thì người dùng hay tự mặc định là hệ thống không nhận được tín hiệu chỉ thị và dẫn tới những điều đáng tiếc.
Tại sao chuyện này xảy ra? Là con người, chúng ta mong đợi một số phản hồi sau khi chúng ta tương tác với một đối tượng. Nó có thể là phản hồi hình ảnh, âm thanh hoặc xúc giác.
Trong một vài quá trình hoạt động, như Downloading thì sẽ thú vị hơn nếu thể hiện được tiến độ download. Thay vì chỉ phản hồi lại với thao tác bấm vào button.
Kết luận
Mặc dù sự thật rằng button chỉ là một yếu tố rất bình thường trong thiết kế tương tác nhưng nó cũng lại rất đáng để lưu tâm để button có thể phát huy hết toàn bộ khả năng của nó. Trong việc thiết kế trải nghiệm cho người dùng, chúng ta nên luôn cân nhắc sao cho button có thể đạt được sự chú ý cần thiết cho chúng. Có như vậy, người dùng mới có thể dễ dàng trong từng thao tác với giao diện cũng như tránh gây ra những thiếu sót ảnh hưởng tới hiệu năng của sản phẩm.
Nguồn: https://alive-web.vn/
Xem thêm:
8 lỗi thiết kế web làm gia tăng tỷ lệ thoát trang nghiêm trọng cho website
Điều hướng website là gì? 7 cách cải thiện điều hướng website tốt nhất
