Khóa học đã chọn

[Học lập trình] Học UX qua ví dụ - Thiết kế màn hình đăng ký (Sign-up Form)

ngày 01-08-2017

Nếu bạn hỏi người dùng xem họ có thích điền thông tin vào màn hình đăng ký (Sign-up form) không thì câu trả lời thường là không. Tại sao vậy? Đơn giản là vì điều người dùng muốn là nhanh, có ngay, muốn mua vé ngay, tán gẫu ngay…Họ thật sự không thích và ghét điền form đăng ký, nhưng ở góc nhìn kinh doanh thì điều đó là cần thiết, còn công việc của bạn được yêu cầu là xây dựng ứng dụng và thiết kế màn hình đăng ký cho ứng dụng. Bạn sẽ phải …làm thôi!

Nhưng trước hết, chúng ta hãy xét xem vấn đề thật sự với form đăng ký là gì?

1. Mất thời gian.

2. Phức tạp và đôi khi khó hiểu có thể gây khó khăn cho người dùng.

3. Một số form đăng ký còn yêu cầu người dùng đưa ra thông tin cá nhân mà họ ngại chia sẻ - số điện thoại, địa chỉ và đặc biệt là thông tin chi tiết về thẻ tín dụng.

Để chốt đơn hàng thì cần thông tin từ form đăng ký nhưng nếu không khéo thì bạn sẽ mất khách hàng ở bước này vì có nhiều khách hàng từ chối và thoát khi trông thấy màn hình đăng ký. Làm thế nào để có được thiết kế “giữ chân” khách hàng, để họ điền các thông tin cần thiết vào form đăng ký ? Hãy cùng tham khảo các lời khuyên sau khi bạn cần thiết kế một form đăng kí cho ứng dụng của mình.

Nên tích hợp chức năng đăng nhập/đăng ký với tài khoản Google, Facebook…

Học UX qua ví dụ - Thiết kế màn hình đăng ký

Tích hợp đăng nhập ứng dụng của bạn bằng tài khoản mạng xã hội của người dùng là một cách cực kỳ hiệu quả, tạo điều kiện để bạn có thể có nhiều thông tin cần thiết mà không cần yêu cầu người dùng nhập vào. Nhưng bạn phải cam kết với người dùng rằng dữ liệu trên tài khoản mạng xã hội của họ phải được bảo mật và giải thích rõ bạn chỉ dùng những thông tin bạn cần.

Ghi nhớ dữ liệu đã nhập

Một trong những tính năng hữu ích nhất trong các form đăng ký là ghi nhớ dữ liệu mà người dùng đã điền trước đó. Trong trường hợp người dùng đang nhập thông tin để đăng ký thì có lỗi, làm sao để người dùng không phải nhập lại tất cả thông tin một lần nữa. Chức năng này đặc biệt hữu ích nếu form đăng ký yêu cầu khá nhiều thông tin. Tiện ích Garlic.js cho phép bạn tự động lưu lại các giá trị của form đăng ký trên cục bộ máy tính của người dùng cho đến khi form đăng ký được gửi về server để xử lý.

Cố gắng “thu gọn” form đăng ký càng ngắn càng tốt hoặc chia thành nhiều bước

Bạn chỉ nên đưa các thông tin thật sự cần thiết vào form đăng ký. Nếu có thông tin nào đó là có cũng được, không có cũng không sao thì bạn không nên đưa vào form đăng ký. Bạn chỉ nên có 1-2 thông tin là dạng tùy chọn và chắc chắn đó là các thông tin cần thiết. Nếu đã cố gắng, nhưng bạn vẫn phải có xây dựng form đăng ký với nhiều thông tin, nhiều lựa chọn thì tốt nhất là bạn nên chia thành nhiều phần hoặc nhóm các thông tin có liên quan với nhau cho người dùng dễ thao tác hơn.

Auto-focus vào thông tin đầu tiên trong form đăng ký

Bạn nên tự động hướng người dùng đến điểm xuất phát đầu tiên của form đăng ký và bạn cũng có thể gây chú ý ở thông tin đầu tiên bằng đường viền màu sắc, màu nền hoặc cả hai.

Bạn có thể dùng chung một form để đăng ký và đăng nhập – nhưng hãy cẩn thận

Trong một số trường hợp thì bạn có thể dùng chung một form cho đăng ký và đăng nhập. Sau khi nhập email và mật khẩu, ứng dụng sẽ kiểm tra xem email đã có trong cơ sở dữ liệu hay chưa. Nếu có, bạn sẽ đăng nhập, nếu không - ứng dụng sẽ tạo một tài khoản mới với email đó cho bạn. Nhưng trong trường hợp bạn nhập sai email thì sao, dịch vụ cũng sẽ tạo một tài khoản với email sai này.

Cố gắng trình bày các thông tin theo bố cục cột đơn

Bạn nên cố gắng hướng người dùng nhập thông tin lần lượt một cột từ trên xuống để tránh trường hợp người dùng bị rối. Các trường hợp ngoại lệ: các thông tin ngắn và liên quan nhau như: Thành phố, Bang và Mã bưu điện ... thì bạn có thể xếp chung hàng, gần nhau.

Tiêu đề nên rõ ràng – dễ hiểu

Một thiết kế tốt sẽ làm người xem chú ý ngay đến nội dung văn bản, một form đăng ký tốt sẽ làm người dùng đăng ký “ngay và luôn”. Bạn phải làm sao cho người dùng thấy được lợi ích của việc hoàn thành form đăng ký, bắt đầu với một tiêu đề thật rõ ràng, dễ hiểu và khuyến khích người dùng hành động. Ngoài ra, để tạo thêm niềm tin với người dùng, bạn nên cho người dùng hiểu rằng thông tin của họ đã được đảm bảo, bảo mật với các cam kết và chứng nhận an toàn thông tin.

Những lưu ý đối với các ô nhập liệu

Bạn có thể tham khảo các lời khuyên sau khi sử dụng input field, label, placeholder

Input field

Bạn nhớ là Input field sẽ có 6 trạng thái: Default, Hover, Focus, Error, Success và Disabled và hãy lưu ý cách bạn xử lý với các trạng thái này sao cho phù hợp với yêu cầu.

Label

Bạn cần nhớ nguyên tắc quan trọng là các label nên đặt ngay phía trên input field để người dùng hiểu ngay là họ cần nhập vào thông tin gì. Trong các form đăng ký ít thông tin, tốt nhất là bạn nên sử dụng các biểu tượng thay cho label. Label phải ngắn gọn, rõ ràng và dễ hiểu. Label của bạn có thể là một câu hoặc một mệnh đề, không sao cả nhưng bạn cần phải nhất quán. Bạn cũng nên gom nhóm các label và các input field liên quan gần nhau.

Placeholder

Placeholder là những gợi ý giúp người dùng hiểu và định dạng dữ liệu họ có thể nhập vào. Placeholder có hình thức nhỏ gọn hơn label. Bạn có thể dùng Placeholder cho các form ít thông tin, nhưng phải cân nhắc khi form đăng ký của bạn có nhiều thông tin. Khi người dùng nhập thông tin vào các input, Placeholder sẽ biến mất và người dùng không thể kiểm tra xem có nhập đúng loại dữ liệu như yêu cầu hay không.

Thông tin Mật khẩu – Một số lưu ý

Khi thiết kế ô nhập liệu cho thông tin Mật khẩu, bạn nên lưu ý tùy theo ngữ cảnh và đặc điểm ứng dụng, nhu cầu thực tế của người dùng mà cân nhắc chọn ràng buộc cho phù hợp. Bạn có thể tham khảo thêm các lưu ý sau khi thiết kế cho ô thông tin mật khẩu

Cho phép người dùng xem lại mật khẩu

Khi bạn cho phép người dùng xem lại mật khẩu đã nhập sẽ giúp người dùng kiểm tra mật khẩu trước khi gửi xác nhận, nhưng điều này có cần thiết ?

Hiển thị độ “mạnh” mật khẩu

Mật khẩu tốt là mật khẩu khó đoán. Hiển thị cho người dùng biết mật khẩu của họ “mạnh” và an toàn như thế nào và những gợi ý để nếu muốn, họ có thể thay đổi để mật khẩu trở nên phức tạp hơn.

Hiển thị các yêu cầu về mật khẩu trước khi gửi

Nếu ứng dụng của bạn yêu cầu mật khẩu phải đảm bảo an toàn thế nào, hãy hướng dẫn khách hàng biết để họ có thể đảm bảo các yêu trước khi họ gửi form đăng ký.

Cảnh báo người dùng biết Caps Lock có BẬT

Khi bạn cảnh báo, người dùng sẽ đỡ lúng túng nếu hệ thống cứ báo lỗi, thường thì người dùng có thể lỡ bấm phím Caps Lock thay cho phím Shift.

People often forget their password (and so do I), so make it easy to remind or recover the password.

Nên có chức năng 'Quên mật khẩu?' ở màn hình đăng nhập (login form)

Mọi người hoàn toàn có thể quên mật khẩu của họ, vì vậy bạn nên có chức năng “Quên mật khẩu” ở màn hình login và hãy làm cho việc khôi phục lại mật khẩu của người dùng dễ dàng.

Tạo các nút nhấn “quyền lực”

Mỗi khi người dùng nhấn vào các nút tức là người dùng đang tương tác, gửi thông tin và mong muốn nhận được các phản hồi. Do đó, khi thiết kế các nút nhấn, bạn nên lưu ý các điểm sau

Các nút phải rõ ràng

Thay vì sử dụng một nút Submit chung, bạn nên gán tiêu đề cho các nút trên form đăng ký chính xác những gì người dùng cần thực hiện như: Tạo tài khoản, Đăng nhập, ...

Vô hiệu hóa nút đăng nhập cho đến khi người dùng điền đầy đủ thông tin cần thiết

Đây cũng là cách để bạn có thể kiểm tra một cách trực quan thông tin mà người dùng nhập trước khi cho phép người dùng gửi thông tin.

Làm người dùng chú ý đến các nút “chính”

Nếu bạn có hai nút nhấn và bạn muốn người dùng tương tác với nút “chính” hơn là nút phụ, bạn nên phân biệt sự khác nhau giữa hai nút bằng cách làm cho nút “chính” nổi bật và dễ chú ý hơn.

Những lưu ý trong xử lý lỗi nhập liệu

Định dạng các trường của bạn bằng dữ liệu giả

Để khắc phục và hạn chế người dùng nhập bị lỗi bạn có thể đưa ra mẫu dữ liệu hoặc sử dụng dữ liệu giả lập vào các ô nhập liệu để gợi ý cho người dùng.

Thông báo lỗi ngay nơi cần xử lý

Bạn nên tránh các thông báo tóm tắt lỗi mà nên cố gắng hiện các thông báo lỗi ở ô dữ liệu cần cập nhật và chỉ nên mỗi lúc chỉ hiển thị thông báo lỗi ở một ô nhập liệu.

Hướng dẫn rõ ràng cách xử lý lỗi

Bạn nên cho người dùng biết tại sao thông tin của họ bị từ chối và cách khắc phục. Bạn cũng nên lưu ý câu từ trên thông báo lỗi sao cho lịch sự và chuyên nghiệp.

Làm nổi bật các ô nhập liệu lỗi

Bạn nên làm cho thông báo lỗi được hiển thị rõ ràng và có thể sử dụng các cách khác nhau để nhấn mạnh như: màu sắc, văn bản hoặc biểu tượng.

Kết luận

Bạn thấy đấy, màn hình đăng ký tốt không chỉ đơn giản là thiết kế đẹp mà còn phải mang lại nhiều khách hàng. Để giúp người dùng có những trải nghiệm tốt hơn, người thiết kế cần phải suy nghĩ thật kĩ về các quy trình đăng ký và tâm lý của khách hàng khi sử dụng. Màn hình đăng ký rất quan trọng và nhiệm vụ của người làm UX là làm sao tăng tính tương tác và giảm thiểu sự từ chối từ khách hàng.

(Trích uxplanet.org)