Một hack UI đơn giản để cải thiện UX nội trú [OCD]

Giao diện người dùng và bản phác thảo giả định rằng dữ liệu người dùng đã có sẵn. Ví dụ: mockup bên dưới giả định rằng người dùng sẽ có các liên hệ để trò chuyện, thông báo và thậm chí các chủ đề trò chuyện.

Trình nhắn tin đơn giản được xây dựng bằng tài nguyên phác thảo miễn phí này

Nhưng điều này không bao giờ là trường hợp khi người dùng đăng ký. Ban đầu, không có dữ liệu, vì vậy một cột danh bạ trống và một cửa sổ trò chuyện trống.

Thiết kế UI sáng bóng giúp dễ dàng tiêu thụ thông tin và không tập trung vào cách tạo thông tin đó.

Tôi đã học được điều này một cách khó khăn khi tôi ngâm càng nhiều Dribbble để thiết kế bảng điều khiển cho ứng dụng b2b. Nó trông tuyệt vời trên Phác thảo, nhưng khách hàng của chúng tôi có thể tìm đường đi.

UX xấu làm tăng chi phí nội trú và hỗ trợ, ảnh hưởng trực tiếp đến doanh thu. Cũng cảm thấy tồi tệ khi xem người dùng đấu tranh để tiêu thụ thiết kế hoàn hảo pixel của bạn. Nhắc nhở bạn rằng bạn đã thất bại.

Giải pháp hiện có

Một giải pháp là có một giao diện trực tuyến bằng cách sử dụng các slide như giao diện. Đây dường như là tiêu chuẩn cho các ứng dụng di động.

Slack trượt dựa trên UX

Vấn đề với cách tiếp cận slide là thiếu bối cảnh. Bạn chỉ có thể truyền tải rất nhiều trên các slide (người dùng giữ lại bao nhiêu là một câu hỏi khác nhau).

Nó rất tuyệt khi đưa ra một cái nhìn tổng quan về sản phẩm, nhưng không hữu ích lắm trong việc giải thích cách thức sản phẩm hoạt động. Nó không liên quan đến trường hợp sử dụng của tôi, vì độ phức tạp của sản phẩm không thể được đun sôi trong một vài slide.

Ngoài ra còn có một giải pháp dựa trên tooltip hướng dẫn người dùng qua các bước cụ thể. Tùy chọn này phổ biến hơn với các ứng dụng web. Có rất nhiều thư viện javascript tốt để giúp bạn xây dựng các luồng này.

Tooltip dựa trên bản demo lên máy bay cho introjs.com/

Theo như một giải pháp dựa trên tooltip, tôi thấy chúng gây phiền nhiễu và hầu như luôn nhấp vào bỏ qua hướng dẫn bỏ qua. Mặc dù các công ty lớn như Canva sử dụng tooltip dựa trên nội trú. Một sản phẩm có tên AppCues cho phép bạn thiết kế các chú giải công cụ này mà không cần mã, gọn gàng.

Cũng tồn tại một cách tiếp cận kiểu đèn hiệu, trong đó các tính năng thường bị hiểu lầm được gắn nhãn với đèn hiệu phát sáng, cung cấp thông tin liên quan khi (nếu) cần thiết.

Đây là cách không phô trương nhất. Không giống như tooltip đẩy hướng dẫn 17 bước xuống cổ họng và biến mất khi bạn thực sự cần nó, phương pháp tiếp cận dựa trên hotspot này cung cấp thông tin khi bạn sẵn sàng.

Điều đáng nói là Slack sử dụng tất cả 3 hình thức. Không có thắc mắc người dùng của họ dính. Điều này cũng bằng cách nào đó gợi ý cho thực tế rằng việc duy trì tỷ lệ thuận với việc lên máy bay.

OCD aka Thiết kế trung tâm trên tàu

Tôi thích đặt tên mọi thứ. Tên giúp cụ thể hóa các ý tưởng trong tâm trí. Vì vậy, hãy để Lừa gọi đây là thiết kế trung tâm Onboarding.

Tôi muốn một giải pháp:

  • Có liên quan đến bối cảnh
  • Không gây phiền nhiễu (không ai thích thực hiện 17 bước để tìm hiểu cách một tính năng hoạt động)
  • Không phô trương (như đèn hiệu)
  • Rất dễ tiêu thụ (chú giải công cụ không dễ tiêu thụ)

Kết quả

Tôi chỉ đơn giản là bắt đầu thiết kế nhà nước. Thiết kế trò chuyện bạn đã thấy trong khi bạn bắt đầu đọc bài viết này có thể được thiết kế với ba trạng thái.

Trạng thái 1: Không có liên hệ nào

Trạng thái 2: Liên hệ có mặt, nhưng không có cuộc trò chuyện

Trạng thái 3: Cả hai cuộc trò chuyện và liên lạc đều có mặt

Mục tiêu của mỗi trạng thái là đưa người dùng đến trạng thái tiếp theo. Khi người dùng đã chuyển sang trạng thái 3, cô ấy đã lên máy bay thành công. Xem xét mockup trò chuyện, mục tiêu cho mỗi tiểu bang như sau:

Mục tiêu của Nhà nước 1: Người dùng chính để thêm một liên hệ

Mockup bên dưới chỉ có một lời kêu gọi hành động, nút dấu cộng màu xanh cho phép người dùng thêm một liên hệ mới. Đồ họa và văn bản đều giúp người dùng thực hiện hành động đó.

Trạng thái 1 - Thủ công người dùng để thêm liên hệ (minh họa bằng undraw.co)

Khi một liên hệ đã được thêm vào, chúng ta có thể bắt đầu mục tiêu thứ hai.

Mục tiêu của Trạng thái 2: Người dùng chính để bắt đầu trò chuyện

Các mockup dưới đây cho thấy có một primer đồ họa để bắt đầu một cuộc trò chuyện. Nó phác thảo rõ ràng các tính năng có sẵn. Một lần nữa, chỉ có một điều bạn có thể làm bây giờ, đó là gửi tin nhắn. Bạn cũng có thể thực hiện cuộc gọi trong Giao diện người dùng này, nhưng cả hai hành động này đều phục vụ cùng một mục đích. Họ đưa người dùng của bạn đến bước 3.

Trạng thái 2 - Đã thêm liên hệ, số nguyên tố để bắt đầu trò chuyện

Mục tiêu của Trạng thái 3: Không, người dùng đã ở trên máy bay - tất cả tín hiệu sẽ biến mất

Và cuối cùng, khi người dùng của bạn đã lặp lại quá trình một vài lần, giao diện người dùng của cô ấy sẽ bắt đầu tìm kiếm theo cách chúng tôi dự định ban đầu.

Trạng thái 3 - Người dùng đã lên máy bay thành công

Lợi ích của phương pháp này

  • So với cách tiếp cận slide trong bước 1, Onboarding Centric Design (OCD) trình bày nội dung theo từng đoạn. Các thông tin có sẵn tại điểm ra quyết định.
  • Cách tiếp cận này có thể được sử dụng trên cả thiết bị di động và máy tính để bàn. Giao diện người dùng này đơn giản, nhưng trong trường hợp giao diện người dùng phức tạp, bạn có thể sử dụng OCD với các điểm nóng để nâng cao CTA.
  • Cách tiếp cận này cải thiện UX của bạn ngay từ đầu, bằng cách buộc bạn phải suy nghĩ về hành trình của người dùng.
  • Nếu bạn tình cờ viết tiền đề của mình bằng React, cách tiếp cận này phù hợp với kiến ​​trúc thành phần của nó.

Vì vậy, như một quy tắc của ngón tay cái:

Thiết kế mockup cho các tiểu bang.
Mỗi tiểu bang có một mục tiêu - tiến tới trạng thái tiếp theo.
Trạng thái cuối cùng là khi người dùng của bạn đã ở trên máy bay.

Cảm ơn vì đã đọc :)

Xin chào, nếu bạn thích bài viết này và muốn tiếp tục cập nhật, hãy theo dõi tôi trên: Medium, Github hoặc Twitter

Tôi điều hành một cộng đồng chậm chạp (có 18 thành viên kể từ ngày 6 tháng 10 năm 2018), nơi bạn có thể giúp đỡ người khác hoặc nhận trợ giúp về lối vào, phụ trợ và phát triển nói chung. Bạn có thể tham gia nó ở đây.