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

BA là ai? Những sai lầm thường gặp mà Business Analyst hay mắc phải

Trong bất kỳ dự án công nghệ nào, BA có một vai trò “âm thầm mà quan trọng”, đứng giữa khách hàng và đội ngũ kỹ thuật, kết nối tầm nhìn kinh doanh với giải pháp công nghệ. Vậy đâu là những sai lầm mà BA thường mắc phải, khiến dự án đi chệch hướng?
Mục đích chính của phân tích dữ liệu là gì? Ứng dụng thực tế trong công việc

Mục đích chính của phân tích dữ liệu là gì và làm thế nào để ứng dụng trong công việc là những câu hỏi thường gặp. BAC sẽ giúp bạn tổng hợp những kiến thức nền tảng thông qua các ví dụ thực tế, gần gũi.
Bài tập phân tích dữ liệu trong kinh doanh cho người mới bắt đầu có đáp án

Bạn muốn tìm bài tập phân tích dữ liệu trong kinh doanh cho người mới bắt đầu có đáp án? Bạn là người mới và chưa biết phải bắt đầu từ đâu? Hãy để BAC giúp bạn thông qua hướng dẫn chi tiết ở đây.
Dữ liệu thứ cấp là gì? phương pháp phân tích dữ liệu thứ cấp là gì?

Nếu bạn đang tìm hiểu về phân tích dữ liệu và gặp khái niệm dữ liệu thứ cấp thì đây là bài viết dành cho bạn. BAC sẽ giúp bạn tìm hiểu tất cả thông tin như định nghĩa, đặc điểm, ưu và nhược điểm cũng như những phương pháp phân tích.

Bình luận

Lê Anh Tuấn

Chuyên viên HO - Kỹ thuật Ngân hàng số Eximbank

Tôi là nhân sự thuộc Trung tâm Phát triển CNTT – Khối Ngân hàng số, hiện đang đảm nhiệm vai trò kiểm thử phần mềm (tester). Việc tham gia khóa học Business Analyst đã mang lại cho tôi góc nhìn toàn diện và rõ ràng hơn về vai trò của BA trong lĩnh vực ngân hàng.

Khóa học Fundamental Business Analysis tại BAC không chỉ giúp tôi hiểu đúng bản chất công việc BA mà còn hỗ trợ phát triển tư duy nghiệp vụ – từ tiếp cận giải pháp kỹ thuật sang tập trung vào nhu cầu người dùng. Phương pháp giảng dạy kết hợp lý thuyết và thực hành thực tiễn, cùng các hoạt động mô phỏng, thảo luận nhóm đã giúp tôi nâng cao kỹ năng giao tiếp, phân tích và trình bày yêu cầu – những năng lực thiết yếu để phối hợp hiệu quả giữa các bên trong dự án công nghệ.

Xem chi tiết +
Huỳnh Cao Cường

Nhân viên HO - Kỹ thuật Ngân hàng số Eximbank

Tôi hiện đang công tác tại Trung tâm Phát triển CNTT – Khối CNTT, với vai trò là nhân sự chức năng phụ trách mảng Ngân hàng số, chuyên sâu về kiểm thử phần mềm (Tester). Trước khi tham gia khóa học Fundamental Business Analysis do BAC tổ chức, tôi từng hình dung BA chỉ đơn thuần là cầu nối giữa bộ phận kỹ thuật và nghiệp vụ.

Tuy nhiên, quá trình học đã giúp tôi nhận thức rõ hơn về bản chất và tầm quan trọng của vị trí này. BA không chỉ kết nối các bên liên quan, mà còn giữ vai trò định hình yêu cầu, đảm bảo giải pháp được thiết kế đúng mục tiêu và sát với nhu cầu thực tế. Khóa học đã trang bị cho tôi tư duy phân tích bài bản, khả năng diễn đạt yêu cầu rõ ràng, và kỹ năng phối hợp hiệu quả trong môi trường dự án đa chiều.

Với nền tảng công nghệ thông tin sẵn có, khóa học là bước chuyển hướng quan trọng giúp tôi phát triển tư duy nghiệp vụ vững chắc và sẵn sàng theo đuổi lộ trình nghề nghiệp chuyên sâu trong lĩnh vực Business Analysis tại Eximbank.

Xem chi tiết +
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 +

Professional Transfer Services in Batumi

Luxury Georgian Transfer Services – Tbilisi & Batumi

Airport Transfers in Georgia

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

BA là ai? Những sai lầm thường gặp mà Business Analyst hay mắc phải

Mục đích chính của phân tích dữ liệu là gì? Ứng dụng thực tế trong công việc

Bài tập phân tích dữ liệu trong kinh doanh cho người mới bắt đầu có đáp án

Dữ liệu thứ cấp là gì? phương pháp phân tích dữ liệu thứ cấp là gì?

CÔNG TY CỔ PHẦN ĐÀO TẠO VÀ TƯ VẤN BAC