Vị trí button trên các form thường bị bỏ qua hoặc ưu tiên dựa trên thẩm mỹ của từng người.

Vị trí của các button có thể tạo nên form hoặc làm hỏng chúng, và một form có thể mang lại cho người dùng một trải nghiệm tốt hoặc đem lại cảm giác khó chịu. Đó là lý do tại sao cần đặt các button sao cho hợp lý.

Việc này rắc rối hơn chúng ta tưởng vì nó phụ thuộc vào mục đích của các button và form.

Nó cũng đòi hỏi chúng ta phải phân tích nhiều form khác nhau một cách tổng thể. Nếu không, cuối cùng chúng ta có thể có một form với cùng một button xuất hiện ở những nơi khác nhau khiến form không nhất quán và khó hiểu.

Sau đây tôi sẽ giải thích nơi đặt các button trên các form khác nhau dựa trên nghiên cứu và thực tiễn.

Căn button chính vào cạnh trái của input

ui/ux align button
Trái: một button được căn phải (không nên). Phải: một button được căn trái (nên).

Trong bài báo cáo của mình về nghiên cứu theo dõi chuyển động của mắt, Luke Classicalblewski nói rằng button chính phải được căn chỉnh với cạnh trái của input:

  • "illuminate a clear path to completion. Aligning inputs and actions with a strong vertical axis clearly communicates how to go about completing a form."

Bố cục này cũng giúp người dùng phóng to màn hình vẫn có thể thấy nó mà không phải kéo sang phải.

ui/ux align button
 Bên trái: button được căn bên phải không thể nhìn thấy khi phóng to. Bên phải: button được căn bên trái vẫn có thể nhìn thấy khi phóng to.

Đặt back button phía trên form

ui/ux back button
Trái: back button bên cạnh button chính (không nên). Phải: back button phía trên form (nên).

Một số form hoặc bảng câu hỏi xuất hiện trên nhiều trang và một số người muốn quay lại để kiểm tra hoặc thay đổi câu trả lời của họ.

Một số người dùng không tin tưởng vào back button của trình duyệt vì những lần mất dữ liệu khi họ ấn quay lại của những form được thiết kế kém. Ta có thể giải quyết vấn đề này bằng back button quay lại một form cụ thể.

Nghiên cứu được thực hiện bởi Mick Couper, Reg Baker và Joanne Mechling cho thấy rằng việc đặt back button ở bên phải của button chính là khó hiểu và thay vào đó, nên đặt sang bên trái hoặc bên dưới.

Bên dưới sẽ thích hợp hơn vì nó giữ button chính nằm ở vị trí nhất quán và cho phép người dùng sử dụng bàn phím chuyển đến button chính từ trường cuối cùng.

Nhưng nghiên cứu của họ không đề cập đến một cách khác với back button được đặt ở  đầu trang.

Joe Lanman, một nhà thiết kế tại Dịch Vụ Kỹ Thuật Số của Chính phủ, đã đặt back button ở đầu trang đăng ký bình chọn Dịch vụ kỹ thuật số. Bây giờ trở thành cách tiếp cận tiêu chuẩn cho tất cả các dịch vụ của chính phủ.

register form
Một trang câu hỏi Đăng ký để bình chọn hiển thị liên kết trở lại ở đầu trang.

Joe chỉ ra rằng việc đặt back button ở phía trên hoạt động tốt bởi vì nó:

  • Ở một nơi tương tự như hầu hết các trình duyệt đặt back button.
  • Rất có thể sẽ cần ngay sau khi người dùng truy cập vào một trang không mong muốn hoặc nếu người dùng muốn kiểm tra những gì họ vừa nhập.
  • Gần như không cần thiết một khi người dùng điền vào form. Nếu họ điền vào form và quay lại, họ sẽ mất toàn bộ những gì đã nhập.
    Phương pháp này phân biệt rõ ràng back button với button chính sẽ làm giảm thời gian người dùng phải tiếp tục đồng thời nó nhường chỗ cho các button khác khi cần mà tôi sẽ đề cập sau.

Đặt button dựa trên các hành động liên quan tới nhau trên form

login button
Phía Trái: Đường đẫn “quên mật khẩu” ở trong form (không nên). Phái Phải: Đường đẫn “quên mật khẩu” ở ngoài form (nên).

Một số form có các hành động không gửi dữ liệu và chỉ liên quan một cách hữu hình với chính form đó.

Ví dụ: liên kết “quên mật khẩu” trên form đăng nhập cho phép người dùng đặt lại mật khẩu của họ, nhưng đó không phải là một phần của quá trình đăng nhập.

Bạn sẽ thường thấy liên kết “quên mật khẩu” bên cạnh trường mật khẩu, nhưng điều này có vấn đề vì người dùng:

  • Nghĩ rằng phím tab sẽ chuyển đến trường / button tiếp theo.
  • Có thể phải cuộn để tìm liên kết.
  • Có thể lãng phí thời gian gõ địa chỉ email của họ trước khi nhấp vào liên kết.

Đặt liên kết trên form sẽ giải quyết tất cả các vấn đề này.

Đặt thêm button tùy theo tác dụng của chúng

Form có nhiều button thường khó hiểu và rắc rối.

Thời gian cần thiết để đưa ra quyết định tăng theo số lượng và độ phức tạp của các lựa chọn, càng nhiều lựa chọn thì càng tốn thời gian của người dùng.

Ngoài ra, người dùng bàn phím không thể chắc chắn hành động nào sẽ được thực thi khi họ nhấn phím enter để gửi form.

Dù vậy, đôi khi việc có nhiều bút là cần thiết.

Sẽ dễ dàng hơn khi đặt button tùy theo tác dụng của chúng.

Hãy cùng xem 3 ví dụ cần những giải pháp khác nhau.

1. Đặt cancel button bên dưới button chính

ui/ux cancel button
Trái: đặt cancel button cùng với button chính (không nên). Phải: cancel button bên dưới button chính (nên).

Nghiên cứu của Luke Classicalblewski cho thấy cancel button nên được đặt bên phải button chính và được tạo kiểu ít nổi bật hơn như một liên kết.

Nhưng đặt cancel button bên dưới button chính có một số lợi thế:

  • Đầu tiên, theo chuyên các gia thiết kế form, quy tắc của Caroline Jarrett, làm cho các cancel button ít nổi bật hơn.
  • Thứ hai, như được giải thích ở phần back button và các phần liên kết bổ sung, cancel button không liên quan trực tiếp đến form nên dễ hiểu hơn khi đặt nó bên dưới button chính.
  • Cuối cùng, nó giải phóng không gian cho các button khác, để các button liên quan trực tiếp ở cùng một hàng. Nếu bạn đặt nhiều button liên tiếp thì người dùng sẽ khó khăn hơn trong việc tìm ra cái nào là quan trọng nhất.

2. Đặt "add another" button phía trên button chính

ui/ux add another button
Trái: "add another" button được đặt cạnh button chính (không nên). Phải: "add another" button được đặt phía trên button chính (nên).

Đôi khi người dùng cần bổ sung thêm thông tin. Ví dụ, nếu họ cần thêm tên của các thành viên gia đình của họ để đặt phòng.

Đặt "add another" button phía trên button chính đem lại những lợi ích sau:

  • Người dùng không cần phải đi qua button chính để chọn button này, tuân thủ quy tắc Caroline Jarrett, hãy đặt các button theo thứ tự hợp lý
  • button chính nằm ở phía bên trái như đã giải thích trước đó
  • như Erik Kennedy giải thích trong The 3 Laws of Locality, nó được đăt ở tại vị trí nơi mà nó thay đổi form - cạnh trường được sao chép.

3. Đặt "save and exit" button cạnh button chính

ui/ux save and exit button
Bên trái: "save and exit" button phía trên button chính (không nên). Phải: "save and exit" button kế bên button chính (nên).

Đôi khi người dùng có thể cần lưu tiến trình của họ trên một form dài.

Đặt "save and exit" button phía trên button chính ám chỉ nó quan trọng hơn trong khi không phải vậy.

Còn lại giải pháp đặt nó cạnh button chính trở nên hợp lý hơn vì nó vẫn liên quan tới form.

Đặt button cạnh cách trường đơn

search
Trái: button bên dưới hộp tìm kiếm (không khuyến nghị). Phải: button bên cạnh hộp tìm kiếm (nên).

Trong các trường hợp hiếm hoi, bạn có thể đặt button bên cạnh input, thường thấy trong các form tìm kiếm toàn cầu ở các tiêu đề trang.

Mặc dù, không có gì đặc biệt sai khi đặt button bên dưới input, đặt nó bên cạnh nó giúp tiết kiệm không gian và trông gọn gàng hơn một chút.

Nhưng đừng làm điều này trên các form đơn giản chỉ có 1 trường. Nó không nhất quán và khác thường.

Đặt button đa lựa chọn ở phía trên form

multi select button
Trái: button đa lựa chọn phía dưới list (không nên). Phải: button đa lựa chọn phía trên list (nên).

Các form đa lựa chọn cho phép người dùng chọn và hành động nhiều mục cùng một lúc. Ví dụ: trong Gmail, bạn có thể chọn nhiều email và lưu trữ chúng trong một lần.

Trong trường hợp đặc biệt này, đặt các button phía trên form.

Đây là một ví dụ khác hoạt động vì quy tắc Erik Kennedy, nếu nó ảnh hưởng cả một vùng dữ liệu lớn, đặt nó phía trên vùng đó.

Đặt các button phía trên danh sách giúp chúng dễ dàng phát hiện hơn và chừa chỗ ở phía dưới cho việc phân trang cần thiết ở một số giao diện.

Tóm Tắt

Trong bài viết này, chúng ta đã xem xét nơi đặt các button trên một loạt các form khác nhau.

Cho dù đó là 1 button trên một form đơn giản hoặc nhiều button trên một form đa lựa chọn, vị trí button là rất quan trọng và cần quan tâm đúng mực.

Checklist

  • Căn button chính vào cạnh trái của input.
  • Đặt back button phía trên form.
  • Đặt các hành động không liên quan phía trên form.
  • Đặt các button phụ dựa trên tác dụng của chúng.
  • Trong một số form có trường đơn, đặt button bên cạnh input.
  • Đặt button đa lựa chọn ở phía trên form.

Bài viết dịch từ đây bởi Cao Trung Kiên - Lớp Web Frontend 9. Hi vọng bài viết hữu ích đối với bạn. 

Thi ngay rinh ngay phần quà

Làm luôn