Thư viện thuật ngữ / UI/UX

Stepper là gì?

Còn gọi: chỉ báo các bước, step indicator, progress stepper, wizard, multi-step form

Stepper là thành phần hiển thị một quy trình được chia thành nhiều bước đánh số, cho người dùng biết họ đang ở bước nào, đã xong bước nào và còn bao nhiêu bước.

Hiểu kỹ hơn

Stepper thường đi với form nhiều bước (wizard) như đăng ký, thanh toán, tạo hồ sơ. Ví dụ thanh toán: 1. Giỏ hàng, 2. Địa chỉ, 3. Thanh toán, 4. Xác nhận. Chia nhỏ giúp mỗi màn hình bớt nặng và tận dụng hiệu ứng gần đích để người dùng muốn đi tiếp. Nên dùng 3 đến 5 bước; nhiều hơn sẽ gây nản. Mỗi bước cần tên rõ nghĩa, không chỉ số. Người dùng nên quay lại được bước trước mà không mất dữ liệu đã nhập. Trên mobile, stepper ngang có thể rút gọn thành dạng 'Bước 2/4' kèm thanh tiến độ. Đừng dùng stepper cho việc chỉ có một bước, và không nên ẩn số bước thật để tạo cảm giác nhanh.