Apr 13, 2022

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

Click để đọc tiếp

Các Business Analyst cần trau dồi những công nghệ gì trong năm 2025

Đối với sự phát triển nhanh chóng của công nghệ ngày này, việc không ngừng trau dồi và học hỏi là điều bắt buộc mà các Business Analyst phải làm để phát triển hơn trong lĩnh vực phân tích nghiệp vụ. Trong bài viết này, các bạn hãy cùng BAC tìm hiểu các xu hướng và các kỹ năng mới để làm hành trang trên sự nghiệp Business Analyst nhé!
Sự khác biệt giữa UAT và Usability Testing Business Analyst cần lưu ý

UAT và Usability Testing thường được mang lên bàn cân để so sánh nhưng, đây là 2 phương pháp kiểm thử khác nhau. Trong khi Usability Testing đảm bảo sự hài lòng của người dùng thì UAT lại giúp các Business Analyst xác thực chức năng. Cả hai đều là một phần không thể thiếu để cung cấp một sản phẩm chất lượng cao. Hãy cùng BAC tìm hiểu ngay nhé!
API là gì? Khám phá cầu nối giữa các ứng dụng

API là nền tảng quan trọng kết nối các ứng dụng và dịch vụ trong kỷ nguyên số, tạo ra sự linh hoạt, hiệu quả và mở rộng cho các hệ thống. Bài viết sau giới thiệu API, cách hoạt động, các kiểu kiến trúc phổ biến cùng các công cụ kiểm thử API như Postman.
Meta AI là gì và cách sử dụng Meta AI hiệu quả 2025

Meta AI là một công cụ Trí Tuệ Nhân Tạo do chính công ty mẹ của Facebook, Instagram, WhatsApp ra mắt. Đây được xem là một cuộc cách mạng sẽ làm thay đổi cách mà các doanh nghiệp và người dùng sử dụng mạng xã hội.

Bình luận

Nguyễn Thị Mai Bình

Business Analyst

Với một người ngoại đạo như mình thì những chuyên đề về "kỹ thuật" của BA hết sức quan trọng. Ví dụ như sử dụng các diagram để mô hình hóa requirement, viết User Story/Use case, v...v..

Đến với khóa học Fundamental Business Analysis, mình đã được gặp thầy Lộc, một người người rất nhiệt tình và có tâm. Ngoài việc chia sẻ các kinh nghiệm thực tế trên lớp thì thầy còn dành thời gian ra để tư vấn, hỗ trợ, góp ý CV cho mình. Bên cạnh đó trung tâm và anh Phụng cũng hỗ trợ gửi CV, kết nối học viên tới mạng lưới các công ty đối tác chất lượng, điều này giúp học viên như mình tìm được công việc phù hợp nhất. Cảm ơn BAC.
Xem chi tiết +
Phạm Quế

Business Analyst

Khoá học Product Design của BAC đã cung cấp cho tôi nhiều kiến thức và nền tảng vô cùng hữu ích. Giảng viên giảng dạy rất nhiệt tình, truyền cho chúng tôi ngọn lửa đam mê và nhiệt huyết trong ngành. Đồng thời chia sẻ các kiến thức và kỹ năng cần thiết trong bài giảng một cách dễ hiểu hơn. Số lượng học viên không quá nhiều nên chất lượng giảng giạy vô cùng tốt. Giảng viên sửa bài tập 1-1 nên bài giảng sẽ chuyên sâu hơn.
Xem chi tiết +
Nguyễn Văn Long

Chuyên viên về chế độ kế toán & Giải pháp nghiệp vụ Tài chính kế toán trong ứng dụng CNTT - Tập đoàn Điện lực Việt Nam (EVN)

Tôi đã tham gia khóa Phân tích nghiệp vụ phần mềm cơ bản 3.0 tại BAC. Ở đây, tài liệu đào tạo cung cấp nhiều nội dung bổ ích và trình bày dễ hiểu. Giảng viên rất nhiệt tình, ngoài nội dung giảng dạy theo giáo trình còn chia sẻ nhiều kinh nghiệm thực tiễn, các câu hỏi của học viên đều được giải đáp ngay trên lớp và có minh họa từ các dự án trong thực tế. Sau tất cả, tôi cảm ơn BAC và Thầy giáo Thái Sơn.
Xem chi tiết +