Hướng dẫn thiết kế trải nghiệm Đăng nhập thành công (Phần 1)

Thiết kế cho một trang đăng nhập có vẻ đơn giản. Để đảm bảo đăng nhập thành công và không gây căng thẳng cho người dùng đòi hỏi rất nhiều suy nghĩ và thử nghiệm! Dưới đây là những chia sẻ kinh nghiệm hy vọng sẽ giúp ích cho bạn:

Đăng nhập (login) là gì?

Trải nghiệm đăng nhập là một lối vào ứng dụng, trang web hoặc dịch vụ. Nó giúp người dùng thiết lập danh tính của họ.

Quy trình đăng nhập thường bao gồm trang đăng nhập chính và quy trình khôi phục khá phức tạp, bao gồm ‘quên mật khẩu’, đặt lại mật khẩu và các phương pháp thay thế để đăng nhập.
Mục tiêu chính của trải nghiệm đăng nhập là đảm bảo rằng người dùng đăng nhập thành công vào tài khoản của họ.

Ý định đăng nhập (login intent) là gì?

Hãy dành một chút thời gian để xác định thuật ngữ “login intent” là chìa khóa quan trọng trong khi đưa ra các quyết định thiết kế trong suốt quá trình thực hiện.

Ý định đăng nhập là người dùng sẵn sàng thực hiện quy trình đăng nhập. Nói một cách dễ hiểu, nó có thể giống như “Tôi muốn đăng nhập”, “Tôi muốn kiểm tra email của mình”, “Đưa tôi đến đó”, v.v.

Khi người dùng truy cập vào trang đăng nhập, họ cũng có thể thể hiện sự thiếu ý định. Điều này có thể nghe như: “Hmm, không quan tâm, tôi sẽ làm việc này sau” hoặc “đây là quá nhiều việc” hoặc “ồ không, tôi phải làm gì bây giờ”? Quên mật khẩu, gặp trục trặc trong quá trình sử dụng hoặc chuyển sang tab hoặc thiết bị khác đều có thể là dấu hiệu của sự thiếu ý định.

Bảo toàn hoặc tăng ý định đăng nhập theo quy trình đăng nhập là mục tiêu tốt cần có và các nguyên tắc sau đây đều phù hợp với mục tiêu này.

1. Thiết kế trải nghiệm quen thuộc (Design familiar experiences)

Đây sẽ không phải là phương châm yêu thích của nhà thiết kế, nhưng điều quan trọng là phải phù hợp với những trải nghiệm tốt nhất trong hệ sinh thái. Sử dụng bố cục đơn giản, dễ nhận biết. Sử dụng các thuật ngữ và bản sao phổ biến. Điều này giúp người dùng thực hiện một hành động quen thuộc một cách tự tin và dễ dàng.

Giữ thiết kế đơn giản cũng giúp trải nghiệm dễ dàng mở rộng đến các yếu tố hình thức và thiết bị khác nhau.

Pinterest có form đăng nhập lớp phủ truyền thống, được căn giữa. Nó hiển thị nút chính đăng nhập nổi bật với màu đỏ thu hút sự chú ý, Google và Facebook là các tùy chọn social login bổ sung.

Điều nào đưa chúng ta đến điểm tiếp theo – đâu là chỗ cho sự sáng tạo?

Đăng nhập là một điểm tiếp xúc tuyệt vời để nhấn mạnh thương hiệu của bạn. Về mặt trực quan, điều này có thể chuyển sang sử dụng màu sắc thương hiệu, hình ảnh, hình minh họa hoặc thậm chí là thông điệp tiếp thị. Như hầu hết các vấn đề về thiết kế, vấn đề này là tất cả về nghệ thuật cân bằng. Hành động đăng nhập phải luôn luôn ở giai đoạn trung tâm. Các yếu tố bổ sung trên trang phải được đo lường hết sức cẩn thận và không được làm mất bất kỳ sự chú ý nào khỏi nhiệm vụ đang thực hiện.

Nguyên tắc ngón tay cái: Người dùng dành càng ít thời gian trên trang đăng nhập càng tốt. Giúp họ tiếp tục khám phá giá trị và giá trị thực tế trong sản phẩm càng nhanh càng tốt!

2. Thiết kế cho tiêu điểm (Design for focus)

Tóm tắt nhanh quy tắc ngón tay cái: Người dùng dành càng ít thời gian trên trang đăng nhập càng tốt. Cùng với đó, hành động đăng nhập (hoặc khôi phục) phải thu hút tất cả sự chú ý của người dùng.

Tốt nhất là giữ form đăng nhập ở giữa trang. Nếu bạn định đặt ở một bên, tốt nhất nên xử lý hình ảnh chính cho nó.
Đối với việc viết sao chép, hướng dẫn người dùng chính xác những gì họ cần làm ở một bước cụ thể là một ý tưởng tuyệt vời! Thay vì giải thích dài dòng, một câu đơn giản ‘Nhập mật khẩu của bạn’ sẽ hoàn thành công việc. Hài hước, biệt ngữ phức tạp, thuật ngữ kỹ thuật và ngôn ngữ hoa mỹ không có chỗ trong trải nghiệm đăng nhập.
Trong trải nghiệm khôi phục, sẽ rất hữu ích nếu bạn chia nhỏ một nhóm hành động phức tạp thành nhiều bước. Yêu cầu người dùng làm một việc quan trọng tại một thời điểm! Vd: Nhập điện thoại của bạn và Nhập mã được gửi đến điện thoại của bạn là hai bước riêng biệt.

Facebook giữ lại bối cảnh của người dùng (user context) và chia nhỏ quy trình khôi phục thành nhiều bước hợp lý.

Amazon chia nhỏ quy trình khôi phục thành nhiều bước hợp lý. Amazon phân các tùy chọn khôi phục phụ thành mục có thể mở rộng ‘I need more help’ giúp giữ cho hành động chính được tập trung.

Mẹo để giữ cho nhiệm vụ chính được tập trung:

Login form có thể tồn tại trong một phương thức, một lớp phủ hoặc một trang của chính nó
Sử dụng bố cục thẻ (card layout)
Chia các hành động thành các hành động chính và phụ
Sử dụng nút đăng nhập lớn và nổi bật
Giữ số lượng hành động phụ ở mức tối thiểu – tránh làm lộn xộn trang với bất kỳ thứ gì không phải là trải nghiệm đăng nhập cốt lõi của bạn.

3. Đưa ra phản hồi rõ ràng và giúp đỡ trong trường hợp người dùng đăng nhập thất bại.

Ở mỗi giai đoạn trong quá trình đăng nhập, người dùng có thể không thành công. Địa chỉ email được nhập sai, hoặc quên mật khẩu, sự cố mạng – tất cả những điều này có thể khiến ý định đăng nhập giảm mạnh. Vì lý do này, điều rất quan trọng là giao diện người dùng đăng nhập phải phản hồi người dùng theo cách phù hợp nhất. Các thông báo lỗi rõ ràng, kịp thời, được xây dựng tốt sẽ rất có ích.

Thông báo lỗi chứa những gợi ý hữu ích về những gì bạn có thể làm khi đăng nhập thất bại

Facebook thêm dòng “Login with Google” khi bạn đăng nhập thất bại ở bước mật khẩu, nhưng chỉ đăng nhập được bằng cách này khi bạn có một ID Gmail đã được liên kết.

Một vài mẹo để hướng dẫn người dùng khôi phục:

Thúc đẩy người dùng thử các lựa chọn thay thế phù hợp

Sau khi không thành công, tổ chức các phương thức đăng nhập thay thế trong khi điều hướng người dùng đến một trang riêng biệt.
Hiển thị các phương pháp đăng nhập hữu ích nhất theo ngữ cảnh và phản hồi siêu nhanh cho người dùng trong thời gian khủng hoảng!

4. Giữ lại ngữ cảnh bất cứ khi nào có thể

Điều quan trọng là phải cho người dùng biết rằng nền tảng nhận ra họ – nếu có – và chào đón người dùng quay trở lại. Điều này giúp tăng ý định đăng nhập của người dùng.

Các cách để giữ lại bối cảnh (context):

Các tính năng như “remember me”
Điền trước các trường từ bước trước, ví dụ: điền trước ID email từ bước đăng nhập trong khi chuyển sang quy trình khôi phục
Trong trường hợp đăng nhập hai bước đang được sử dụng, bạn nên hiển thị các phương thức đăng nhập được cá nhân hóa cho người dùng – người dùng có cảm thấy thoải mái hơn với đăng nhập OTP trên điện thoại không? Hoặc email + mật khẩu? Việc ghi nhớ những gì người dùng đã chọn lần trước có thể tăng ý định đăng nhập của người dùng và làm cho họ cảm thấy tự nhiên và liền mạch với trải nghiệm đăng nhập.
Trong thông tin đăng nhập SSO của doanh nghiệp, người dùng có thể đăng nhập vào các nền tảng bằng nhiều tài khoản. Trong trường hợp phát hiện nhiều tài khoản, tốt nhất là hiển thị các tùy chọn này cho người dùng và để họ chọn tài khoản mà họ muốn sử dụng.

Trên đây là 4 chia sẻ đầu tiên để bạn có cái nhìn tổng quan về Thiết kế trải nghiệm đăng nhập thành công, những chia sẻ còn lại sẽ được gửi đến trong phần hai, đừng quên đón đọc.

Tham khảo: Hướng dẫn thiết kế trải nghiệm Đăng nhập thành công (Phần 2)

Nguồn tham khảo:
https://medium.muz.li/

Nhu cầu đào tạo doanh nghiệp

BAC là đơn vị đào tạo BA đầu tiên tại Việt Nam. Đối tác chính thức của IIBA quốc tế. Ngoài các khóa học public, BAC còn có các khóa học in house dành riêng cho từng doanh nghiệp. Chương trình được thiết kế riêng theo yêu cầu của doanh nghiệp, giúp doanh nghiệp giải quyết những khó khăn và tư vấn phát triển.

Tham khảo chương trình đào tạo:

Các bài viết liên quan Power BI:

Các bài viết liên quan:

TABLEAU – Giải pháp BUSINESS INTELLIGENCE (BI) – click vào đây
Hướng dẫn cài đặt và Sử dụng TABLEAU – click vào đây
Tính năng mới trên tableau – verion 2019.1 – click vào đây

BAC – Biên soạn và tổng hợp nội dung