Thiết kế giao diện Web3 cho dApp, wallet và sàn giao dịch, từng trạng thái một

Thiết kế UI/UX Web3 bao gồm những gì

Kiểm tra nhanh: Nhờ một người mới gửi một giao dịch thử nghiệm bằng nguyên mẫu của bạn. Ghi lại từng khoảnh khắc họ do dự.

Thiết kế UI/UX Web3 giúp con đường qua dApp, wallet, sàn giao dịch hoặc luồng landing dễ hiểu và dễ hoàn thành hơn. Nó kết hợp nghiên cứu và lập kế hoạch tương tác với thiết kế trực quan, để giao diện giải thích những gì người dùng có thể làm và điều gì xảy ra tiếp theo.

Dịch vụ này phù hợp khi bạn đang chuẩn bị một sản phẩm mới, tái cấu trúc một luồng gây nhầm lẫn hoặc căn chỉnh một giao diện hiện có trước khi phát triển. Nó đặc biệt hữu ích khi đối tượng bao gồm những người mới làm quen với crypto và có thể chưa hiểu về kết nối wallet, xác nhận giao dịch hoặc phí gas.

Công việc có thể bao gồm:

• Nghiên cứu người dùng và đánh giá trải nghiệm đối thủ cạnh tranh có liên quan.
• Luồng người dùng cho thấy cách ai đó di chuyển từ điểm vào đến khi hoàn thành tác vụ.
• Wireframe để thống nhất cấu trúc và ưu tiên trước khi trau chuốt trực quan.
• Một hệ thống thiết kế trực quan và thư viện thành phần cho các màn hình nhất quán.
• Một nguyên mẫu có thể nhấp, kiểm thử khả năng sử dụng và bàn giao cho nhà phát triển trong Figma.

Nếu dự án cũng cần một nhận diện trực quan nhất quán, hãy kết hợp công việc giao diện với thiết kế và hình ảnh hoặc xây dựng thương hiệu crypto. Điểm khởi đầu đúng là tác vụ sản phẩm quan trọng nhất—không phải yêu cầu vẽ lại mọi màn hình cùng một lúc.

Làm thế nào để lập bản đồ luồng người dùng Web3?

Một giao diện Web3 mạnh mẽ bắt đầu bằng một bản tường trình rõ ràng về mục tiêu của người dùng, các quyết định họ phải đưa ra và thông tin họ cần ở mỗi bước. Chúng tôi lập bản đồ luồng trước khi cam kết bố cục màn hình, để nhóm có thể giải quyết logic gây nhầm lẫn trong khi các thay đổi vẫn dễ thực hiện.

Chúng tôi xem xét sản phẩm, màn hình hiện có, đối tượng và trải nghiệm đối thủ cạnh tranh của bạn, sau đó xác định các tác vụ và câu hỏi cốt lõi. Đối với wallet hoặc dApp, điều này có thể có nghĩa là theo dõi onboarding, kết nối wallet, một hành động giao dịch và đường dẫn xác nhận hoặc khôi phục. Chúng tôi ghi lại trình tự dưới dạng luồng và chỉ ra các điểm quyết định, thông tin còn thiếu và những nơi người dùng có thể cần được trấn an.

Trước khi chuyển sang thiết kế chi tiết, hãy chuẩn bị:

• Các tác vụ người dùng chính và đối tượng dự kiến của sản phẩm.
• Màn hình hiện có, ghi chú sản phẩm hoặc bản build đang hoạt động, nếu có.
• Các hành động yêu cầu wallet đã kết nối hoặc xác nhận của người dùng.
• Các trạng thái giao dịch đã biết, trường hợp lỗi và hướng dẫn hỗ trợ.
• Bất kỳ ràng buộc kỹ thuật nào mà nhóm phát triển của bạn đã biết.

Chúng tôi sử dụng tài liệu đó để thống nhất luồng nào thuộc kế hoạch và nguyên mẫu cần chứng minh điều gì. Đối với thông điệp sản phẩm phải giải thích các bước này bằng ngôn ngữ đơn giản, thiết kế có thể được phối hợp với tạo nội dung Web3.

Giao diện nên hiển thị những trạng thái wallet và giao dịch nào?

Một giao diện Web3 nên làm cho các trạng thái wallet và giao dịch hiển thị được, không để người dùng đoán xem một hành động có thành công hay không. Thiết kế các trạng thái này cùng với các màn hình chính mang lại cho nhóm sản phẩm một trải nghiệm đầy đủ hơn để xem xét và xây dựng.

Đối với mỗi hành động có liên quan, chúng tôi xem xét người dùng thấy gì trước, trong và sau khi thực hiện. Điều đó bao gồm kết nối wallet, giao dịch đang chờ xử lý, xác nhận, trạng thái thành công rõ ràng và thông báo lỗi hữu ích. Khi gas hoặc một quyết định khác ảnh hưởng đến hành động, giao diện nên giải thích lựa chọn bằng ngôn ngữ phù hợp với đối tượng dự kiến. Onboarding cho người dùng không phải crypto nên giới thiệu các bước không quen thuộc khi chúng trở nên phù hợp, thay vì giả định kiến thức có sẵn.

Một đánh giá thực tế về luồng đặt ra các câu hỏi:

• Người dùng có thể biết khi nào họ cần kết nối wallet không?
• Có rõ ràng hành động nào họ đang xác nhận không?
• Màn hình có giải thích những gì đang chờ xử lý và phải làm gì tiếp theo không?
• Ai đó có thể khôi phục từ lỗi mà không mất vị trí của họ không?
• Nhãn và thông báo có nhất quán trên các màn hình được kết nối không?

Những câu hỏi này định hình wireframe, thiết kế trực quan và hành vi nguyên mẫu. Chúng cũng cung cấp cho nhà phát triển một tài liệu tham khảo chung về các trạng thái cần triển khai. Chúng tôi có thể phối hợp giao diện với copywriter Web3 khi thông báo giao dịch, lời nhắc onboarding hoặc văn bản giải thích cần được viết chuyên biệt.

Nhóm của bạn nhận được gì trong Figma

Nguyên tắc chung: Hiển thị 5 trạng thái cho mỗi giao dịch: sẵn sàng, đang chờ, thành công, thất bại và đã hủy.

Nhóm của bạn nhận được một gói thiết kế được kết nối: một luồng được ghi lại, thiết kế màn hình, các yếu tố giao diện có thể tái sử dụng và một nguyên mẫu cho thấy các tương tác chính khớp với nhau như thế nào. Bộ màn hình chính xác tuân theo kế hoạch đã thống nhất, để mọi người biết những gì đang được thiết kế và xem xét.

Nghiên cứu và đánh giá đối thủ cạnh tranh cung cấp thông tin cho luồng người dùng; luồng cung cấp thông tin cho wireframe; và cấu trúc đã được phê duyệt chuyển vào hệ thống thiết kế trực quan và thư viện thành phần. Sau đó, chúng tôi kết nối các màn hình có liên quan trong một nguyên mẫu có thể nhấp và sử dụng kiểm thử khả năng sử dụng để xác định những nơi cần làm rõ. Bàn giao Figma cuối cùng cung cấp cho nhà phát triển một tài liệu tham khảo có tổ chức cho các màn hình và trạng thái đã thiết kế.

Gói có thể bao gồm:

• Ghi chú nghiên cứu và kết quả đánh giá đối thủ cạnh tranh liên quan đến sản phẩm.
• Luồng người dùng và wireframe cho các luồng đã chọn.
• Thiết kế giao diện trực quan và thư viện thành phần có thể tái sử dụng.
• Các đường dẫn nguyên mẫu có thể nhấp để xem xét và kiểm thử khả năng sử dụng.
• Bàn giao cho nhà phát triển trong Figma, với các màn hình và trạng thái được tổ chức để tham khảo.

Điều này cung cấp cho sản phẩm, thiết kế và phát triển một tạo phẩm chung để thảo luận trước khi triển khai. Nếu dự án của bạn cần một kế hoạch truyền thông rộng hơn xung quanh việc phát hành giao diện, hãy kết nối công việc với mạng xã hội và nội dung. Chúng tôi xác định những gì bạn nhận được ngay từ đầu để độ sâu nguyên mẫu và phạm vi màn hình phù hợp với quyết định tiếp theo của nhóm.

Thiết kế di chuyển từ brief đến bàn giao như thế nào

Công việc di chuyển qua các điểm xem xét đã thống nhất, từ bối cảnh sản phẩm đến nguyên mẫu đã kiểm thử và bàn giao cho nhà phát triển. Tại MarketingExtra, lần xem xét đầu tiên kiểm tra xem brief, tài liệu hiện có và các ràng buộc của nhóm có cung cấp cho chúng tôi đủ bối cảnh để lập bản đồ các luồng người dùng phù hợp hay không.

Sau khi kickoff, chúng tôi xác nhận đối tượng, tác vụ chính, tài liệu nguồn và những người ra quyết định sẽ xem xét công việc. Chúng tôi lập bản đồ luồng và wireframe trước khi tinh chỉnh giao diện, điều này cho phép nhóm của bạn phản hồi về cấu trúc trước khi các chi tiết trực quan được hoàn thiện. Khi hướng trực quan và cách tiếp cận thành phần được phê duyệt, chúng tôi kết nối các màn hình đã chọn thành một nguyên mẫu và kiểm tra các tác vụ có liên quan. Bàn giao cuối cùng được chuẩn bị trong Figma cho nhóm phát triển.

Lịch trình được thống nhất sau khi chúng tôi hiểu kế hoạch. Nó được định hình bởi số lượng và độ phức tạp của các luồng, sự sẵn có của các quyết định sản phẩm và tài liệu nguồn, và tốc độ những người ra quyết định có thể xem xét các điểm kiểm tra thiết kế. Bạn có thể giúp công việc tiến triển bằng cách chỉ định một người ra quyết định, chia sẻ tài liệu sản phẩm hiện có sớm và thu thập phản hồi thành một phản hồi duy nhất tại mỗi lần xem xét.

Gửi tổng quan sản phẩm, màn hình hoặc bản build hiện tại, người dùng mục tiêu và luồng bạn cần cải thiện nhất. Chúng tôi sẽ xem xét các tài liệu đó, làm rõ kế hoạch với bạn và phác thảo công việc thiết kế cần thiết để đạt được một nguyên mẫu sẵn sàng cho nhà phát triển.

Danh sách kiểm tra giao diện Web3 6 điểm của bạn

Kiểm tra 6 điểm này trước khi nhà phát triển bắt đầu. Chúng bao gồm những khoảnh khắc mà người dùng Web3 mất niềm tin, chẳng hạn như đang chờ, thất bại và ký, và chúng làm cho thiết kế dễ xây dựng và dễ kiểm tra hơn. Nếu một dòng khó đánh dấu, đó là tin hữu ích: nó cho thấy những gì cần giải quyết trước khi bất kỳ tiền bạc hay thời gian nào được chi tiêu.

1. Thiết kế tất cả 5 trạng thái giao dịch.
2. Hiển thị phí và mạng trước khi người dùng ký.
3. Viết thông báo lỗi bằng từ ngữ đơn giản.
4. Kiểm tra luồng với một người mới.
5. Kiểm tra bố cục trên điện thoại nhỏ.
6. Bàn giao tệp Figma với các thành phần được đặt tên.

Thuật ngữ trong một dòng

Trạng thái giao dịch có nghĩa là giai đoạn của một khoản thanh toán hoặc hành động, chẳng hạn như đang chờ hoặc thất bại.

Wireframe: một bản phác thảo đơn giản của màn hình hiển thị bố cục trước khi thiết kế trực quan.

Quy trình thiết kế có thể thiết lập những gì

Thiết kế có thể cho thấy cách một sản phẩm truyền đạt các hành động wallet và trạng thái giao dịch, nhưng nó không thể xác định cách một wallet, chain hoặc contract bên ngoài sẽ hoạt động trong mọi tình huống. Các hệ thống đó có thể trả về các trạng thái hoặc thông báo mà nhóm sản phẩm phải xử lý, vì vậy chúng tôi làm cho các trạng thái đã thiết kế trở nên rõ ràng và căn chỉnh chúng với thông tin kỹ thuật mà nhóm của bạn có thể cung cấp. Một nguyên mẫu và kiểm thử khả năng sử dụng giúp đánh giá liệu mọi người có hiểu luồng dự kiến hay không; chúng không đảm bảo việc chấp nhận hoặc giao dịch thành công. Đối với bàn giao, chúng tôi ghi lại các trạng thái dự kiến mà nhóm của bạn xác nhận, chẳng hạn như kết nối không khả dụng, người dùng từ chối, xác nhận đang chờ xử lý và lỗi được trả về, để nhà phát triển có thể phân biệt các phản hồi đã thiết kế với các điều kiện cần quyết định sản phẩm hoặc kỹ thuật.

Gửi 3 thứ: yêu cầu sản phẩm của bạn, màn hình hiện tại của bạn và 3 đối thủ cạnh tranh bạn theo dõi. Với những thứ đó, chúng tôi lập kế hoạch nghiên cứu và luồng và xác nhận chi phí bằng văn bản trước khi thiết kế bắt đầu.

Cách hoạt động

1. Chia sẻ bối cảnh sản phẩmGửi tổng quan sản phẩm, mô tả đối tượng, màn hình hoặc bản build hiện tại và tác vụ người dùng chính bạn muốn cải thiện.
2. Thống nhất luồng và kế hoạchChúng tôi xem xét tài liệu với bạn, xác định luồng ưu tiên và xác định màn hình, trạng thái và độ sâu nguyên mẫu cho sự tham gia.
3. Xem xét luồng và wireframeChúng tôi lập bản đồ luồng và bố trí cấu trúc của nó để nhóm của bạn có thể giải quyết các câu hỏi về sản phẩm trước khi tinh chỉnh trực quan.
4. Thiết kế và kiểm tra giao diệnChúng tôi tạo hệ thống trực quan và các thành phần, kết nối các màn hình đã thống nhất thành một nguyên mẫu và sử dụng kiểm thử khả năng sử dụng để tìm các điểm cần làm rõ.
5. Nhận bàn giao FigmaChúng tôi tổ chức các thiết kế đã được phê duyệt và các trạng thái liên quan trong Figma để nhóm phát triển của bạn có một tài liệu tham khảo triển khai rõ ràng.