Thiết kế UI/UX Web3 tập trung vào tác vụ sản phẩm

Bản đồ tác vụ Web3 tiết lộ điều gì trước khi vẽ màn hình?

Bản đồ tác vụ cho thấy nơi người dùng đưa ra quyết định, cung cấp thông tin hoặc rời khỏi sản phẩm. Nó cung cấp cho nhóm một cấu trúc có thể đánh giá trước khi bắt đầu wireframe và tạo kiểu hình ảnh.

Chúng tôi bắt đầu với đối tượng, mục tiêu sản phẩm và bằng chứng hiện tại. Điều đó có thể bao gồm màn hình hiện có, prototype, câu hỏi hỗ trợ và các ràng buộc kỹ thuật đã biết. Bản đồ luồng sử dụng 4 điểm kiểm tra: điểm vào, quyết định, phản hồi và khôi phục. Đối với mỗi tác vụ, chúng tôi ghi lại 6 trường: mục tiêu người dùng, điểm bắt đầu, thông tin cần thiết, hành động wallet, phản hồi giao diện và giả định chưa được giải quyết. Các bản ghi này phơi bày các bước còn thiếu mà không coi sự quen thuộc với blockchain là điều hiển nhiên.

Bản đồ hữu ích cho cả dApp mới và giao diện hiện có. Đối với thiết kế lại, nó phân biệt tương tác khó hiểu với quy tắc sản phẩm. Quy tắc đó có thể cần quyết định của nhóm. Đối với sản phẩm mới, nó giúp các bên liên quan thống nhất những gì người dùng lần đầu phải hiểu trước khi tiếp tục.

Mang theo mô tả sản phẩm ngắn, người dùng mục tiêu, tác vụ ưu tiên và bất kỳ phản hồi người dùng nào có sẵn. Nếu hình ảnh công khai cũng cần làm việc, hãy kết nối phạm vi giao diện với thiết kế và hình ảnh.

Trạng thái wallet và giao dịch nào cần quyết định giao diện?

Đánh giá trạng thái wallet làm rõ trình tự hiển thị với người dùng: yêu cầu, quyết định, phản hồi đang chờ, xác nhận hoặc lỗi. Thiết kế phải cho người dùng biết điều gì đang xảy ra và hành động nào còn khả dụng.

Chúng tôi lập bản đồ các bước kết nối cùng với tác vụ sản phẩm. Sau đó, chúng tôi xem xét chi tiết giao dịch, thông báo gas, phản hồi đang chờ, xác nhận thành công và khôi phục lỗi khi có liên quan. Màn hình phải nêu rõ hành động người dùng được yêu cầu. Nó phải hiển thị những gì giao diện biết hiện tại. Nó phải hiển thị hành động khả dụng tiếp theo. Chúng tôi đánh dấu những khoảng trống nơi nội dung sản phẩm hoặc hành vi kỹ thuật vẫn chưa được quyết định.

Để đánh giá, hãy nhóm các màn hình thành 3 bộ: trước hành động wallet, trong khi phản hồi và sau phản hồi. Điều này giúp nhóm sản phẩm và kỹ thuật dễ dàng phát hiện các trạng thái còn thiếu. Kiểm thử khả năng sử dụng sau đó có một tác vụ cụ thể để quan sát. Nó tránh dựa vào các ý kiến chung chung về giao diện.

Chia sẻ hành vi wallet đã biết, ngôn ngữ giao dịch hiện tại và kịch bản lỗi nếu bạn có. Nếu những đầu vào đó chưa đầy đủ, chúng tôi xác định luồng nào có thể thiết kế ngay và quyết định nào cần xác nhận. Ngôn ngữ giao diện có thể được phối hợp với copywriting Web3.

Tệp Figma nên để nhóm bạn kiểm tra những gì?

Một tệp Figma hữu ích cho phép các bên liên quan theo dõi các tác vụ chính và nhà phát triển kiểm tra các trạng thái giao diện dự kiến. Nó kết nối cấu trúc, quy tắc hình ảnh và ví dụ tương tác trong một lần bàn giao có thể đánh giá.

Các sản phẩm bàn giao đã thống nhất có thể bao gồm kết quả nghiên cứu, luồng người dùng, wireframe, thiết kế hình ảnh, bộ UI, thư viện thành phần và prototype có thể nhấp. Tệp nên làm cho các mẫu lặp lại dễ nhận biết và hiển thị cách các màn hình kết nối. Trong quá trình bàn giao, chúng tôi sắp xếp các màn hình và thành phần có liên quan. Chúng tôi làm rõ các trạng thái tương tác và đánh dấu các câu hỏi triển khai ảnh hưởng đến trải nghiệm.

Sử dụng prototype để xem xét một tác vụ từ đầu đến cuối. Kiểm tra xem hành động tiếp theo có hiển thị không, phản hồi xuất hiện đúng điểm và lỗi đưa ra hướng đi dễ hiểu. Kiểm thử khả năng sử dụng quan sát các tác vụ đã thống nhất. Kết quả sau đó trở thành bản sửa đổi thiết kế hoặc câu hỏi mở cho nhóm sản phẩm. Nó không thay thế đánh giá kỹ thuật hoặc triển khai sản xuất.

Trước khi phê duyệt thiết kế, hãy nêu tên người sở hữu quyết định sản phẩm và người sẽ triển khai công việc. Sự phân biệt đó giữ phản hồi hình ảnh tách biệt với khả thi kỹ thuật. Nếu giao diện cũng cần giải thích hỗ trợ trên các kênh, hãy phối hợp với tạo nội dung Web3.

Quy trình đánh giá thiết kế dApp diễn ra như thế nào trước khi bàn giao?

Trình tự đánh giá biến các câu hỏi sản phẩm mở thành quyết định trước khi nhóm đầu tư vào các màn hình chi tiết. Chúng tôi xác nhận phạm vi, đầu vào có sẵn, người đánh giá và các tác vụ mà giao diện phải hỗ trợ.

Đầu tiên, nghiên cứu và đánh giá đối thủ cung cấp thông tin cho bản đồ tác vụ. Wireframe sau đó cho phép nhóm kiểm tra điều hướng và thứ tự thông tin. Khi các lựa chọn đó được thống nhất, chúng tôi phát triển hệ thống hình ảnh, màn hình cốt lõi và prototype có thể nhấp. Kiểm thử khả năng sử dụng và sửa đổi tiếp theo khi được bao gồm trong phạm vi đã thống nhất. Bàn giao Figma cuối cùng ghi lại các trạng thái tương tác và câu hỏi triển khai liên quan đến nhà phát triển.

Một nhịp đánh giá thực tế có 2 điểm quyết định trước thiết kế hình ảnh: phê duyệt luồng tác vụ và phê duyệt cấu trúc wireframe. Phản hồi sau đó nên xác định tác vụ hoặc quy tắc sản phẩm bị ảnh hưởng, không chỉ là thay đổi kiểu dáng ưa thích. Yêu cầu người đánh giá tổng hợp nhận xét và tách biệt các sửa chữa bắt buộc khỏi tùy chọn không bắt buộc.

Thời gian được thiết lập sau khi xem xét phạm vi. Số lượng và độ phức tạp của luồng định hình lịch trình. Sự sẵn sàng của tài liệu sản phẩm và khả năng của người đánh giá cũng vậy. Chúng tôi xác nhận trình tự trước khi bắt đầu công việc, sau đó giữ cho mỗi lần đánh giá tập trung vào tạo phẩm hiện đang thảo luận. Để biết thêm về công việc xã hội và nội dung rộng hơn, hãy xem Mạng xã hội và nội dung.

Hành vi wallet nào mà kỹ thuật phải xác nhận?

Bàn giao nên phân biệt phản hồi giao diện được thiết kế với hành vi được xác nhận bởi nhóm triển khai. Sự tách biệt đó giúp nhà phát triển kiểm tra các điều kiện chính xác thay vì suy luận hành vi kỹ thuật từ một màn hình tĩnh.

Chúng tôi ghi lại các trạng thái wallet và giao dịch được cung cấp trong brief sản phẩm. Nhóm sau đó có thể kiểm tra phản hồi nào được thể hiện, từ ngữ nào người dùng thấy và tùy chọn khôi phục nào xuất hiện sau lỗi. Nếu một trạng thái không có hành vi sản phẩm được xác nhận, chúng tôi đánh dấu nó là câu hỏi mở thay vì trình bày nó như đã được giải quyết. Điều này đặc biệt hữu ích khi thiết kế bao gồm yêu cầu kết nối, giải thích gas, phản hồi đang chờ hoặc xác nhận giao dịch.

Nhà cung cấp wallet và phản hồi mạng có thể khác nhau, vì vậy prototype Figma không thể thiết lập cách mọi lời nhắc hoặc giao dịch bên ngoài sẽ hoạt động. Chúng tôi ghi lại các trạng thái được chỉ định và các phụ thuộc chưa được giải quyết để nhóm kỹ thuật đánh giá; triển khai phải xác nhận các phản hồi thực tế.

Để bắt đầu, hãy gửi tổng quan sản phẩm, người dùng mục tiêu, giao diện hoặc prototype hiện tại và các tác vụ ưu tiên. GeoMarketing Experts sẽ xem xét các tài liệu đó, xác định các quyết định còn thiếu và đề xuất một trình tự thiết kế có phạm vi. Nếu nhãn giao diện hoặc giải thích onboarding cũng cần một lượt viết chuyên dụng, hãy bao gồm điều đó trong cuộc thảo luận.

Cách hoạt động

1. 1. Chia sẻ bối cảnh sản phẩmGửi tổng quan sản phẩm, đối tượng mục tiêu, giao diện hiện tại và các tác vụ ưu tiên. Bao gồm các ràng buộc kỹ thuật và bất kỳ phản hồi người dùng nào có sẵn.
2. 2. Xác nhận phạm vi và đầu vàoChúng tôi làm rõ luồng, nghiên cứu, màn hình và công việc prototype nào là cần thiết. Chúng tôi thống nhất ai đánh giá quyết định và tài liệu nào phải có sẵn.
3. 3. Đánh giá luồng và wireframeChúng tôi lập bản đồ hành trình người dùng và trình bày cấu trúc giao diện để nhận phản hồi trước khi thiết kế hình ảnh bắt đầu.
4. 4. Thiết kế và kiểm thửChúng tôi xây dựng hệ thống hình ảnh và prototype, sau đó kiểm thử các tác vụ đã thống nhất và tinh chỉnh trải nghiệm dựa trên kết quả.
5. 5. Chuẩn bị bàn giao cho nhà phát triểnChúng tôi sắp xếp các sản phẩm bàn giao Figma và làm rõ các trạng thái tương tác cũng như câu hỏi triển khai mở cho nhóm sản phẩm của bạn.