Desain antarmuka Web3 untuk dApp, wallet, dan exchange, satu state pada satu waktu

Apa yang dicakup oleh desain UI/UX Web3?

Tes cepat: Minta seorang pendatang baru untuk mengirim transaksi uji menggunakan prototipe Anda. Catat setiap momen mereka ragu-ragu.

Desain UI/UX Web3 membuat jalur melalui dApp, wallet, exchange, atau alur landing lebih mudah dipahami dan diselesaikan. Ini menggabungkan riset dan perencanaan interaksi dengan desain visual, sehingga antarmuka menjelaskan apa yang dapat dilakukan pengguna dan apa yang terjadi selanjutnya.

Layanan ini cocok ketika Anda sedang mempersiapkan produk baru, merestrukturisasi perjalanan yang membingungkan, atau menyelaraskan antarmuka yang ada sebelum pengembangan. Ini sangat berguna ketika audiens mencakup orang-orang yang baru mengenal kripto dan mungkin belum memahami koneksi wallet, konfirmasi transaksi, atau biaya gas.

Pekerjaan ini dapat mencakup:

• Riset pengguna dan tinjauan pengalaman pesaing yang relevan.
• Alur pengguna yang menunjukkan bagaimana seseorang bergerak dari titik masuk hingga penyelesaian tugas.
• Wireframe untuk menyetujui struktur dan prioritas sebelum polesan visual.
• Sistem desain visual dan pustaka komponen untuk layar yang konsisten.
• Prototipe yang dapat diklik, pengujian kegunaan, dan hand-off pengembang di Figma.

Jika proyek juga membutuhkan identitas visual yang konsisten, padukan pekerjaan antarmuka dengan desain dan visual atau branding kripto. Titik awal yang tepat adalah tugas produk yang paling penting—bukan permintaan untuk menggambar ulang setiap layar sekaligus.

Bagaimana cara memetakan perjalanan pengguna Web3?

Antarmuka Web3 yang kuat dimulai dengan gambaran yang jelas tentang tujuan pengguna, keputusan yang harus mereka buat, dan informasi yang mereka butuhkan di setiap langkah. Kami memetakan perjalanan sebelum berkomitmen pada tata letak layar, sehingga tim dapat menyelesaikan logika yang membingungkan sementara perubahan masih mudah dilakukan.

Kami meninjau produk, layar yang ada, audiens, dan pengalaman pesaing Anda, lalu mengidentifikasi tugas dan pertanyaan inti. Untuk wallet atau dApp, ini berarti menelusuri onboarding, koneksi wallet, tindakan transaksi, dan jalur konfirmasi atau pemulihan. Kami mendokumentasikan urutan sebagai alur dan menyebutkan titik keputusan, informasi yang hilang, dan tempat di mana pengguna mungkin membutuhkan kepastian.

Sebelum beralih ke desain detail, siapkan:

• Tugas pengguna utama produk dan audiens yang dituju.
• Layar yang ada, catatan produk, atau build yang berfungsi, jika tersedia.
• Tindakan yang memerlukan wallet terhubung atau konfirmasi pengguna.
• State transaksi yang diketahui, kasus error, dan panduan dukungan.
• Setiap kendala teknis yang sudah diketahui tim pengembangan Anda.

Kami menggunakan materi itu untuk menyetujui perjalanan mana yang termasuk dalam rencana dan apa yang perlu ditunjukkan oleh prototipe. Untuk pesan produk yang harus menjelaskan langkah-langkah ini dalam bahasa sederhana, desain dapat dikoordinasikan dengan pembuatan konten Web3.

State wallet dan transaksi mana yang harus ditunjukkan oleh antarmuka?

Antarmuka Web3 harus membuat state wallet dan transaksi terlihat, jangan membuat pengguna menebak-nebak apakah suatu tindakan berhasil. Mendesain state ini bersama dengan layar utama memberi tim produk pengalaman yang lebih lengkap untuk ditinjau dan dibangun.

Untuk setiap tindakan yang relevan, kami mempertimbangkan apa yang dilihat pengguna sebelum, selama, dan setelahnya. Itu termasuk koneksi wallet, transaksi pending, konfirmasi, state sukses yang jelas, dan pesan error yang berguna. Di mana gas atau keputusan lain memengaruhi tindakan, antarmuka harus menjelaskan pilihan dalam bahasa yang sesuai dengan audiens yang dituju. Onboarding untuk pengguna non-kripto harus memperkenalkan langkah-langkah yang tidak dikenal ketika langkah tersebut menjadi relevan, daripada mengasumsikan pengetahuan sebelumnya.

Tinjauan praktis dari alur tersebut menanyakan:

• Dapatkah pengguna mengetahui kapan mereka perlu menghubungkan wallet?
• Apakah jelas tindakan mana yang mereka konfirmasi?
• Apakah layar menjelaskan apa yang pending dan apa yang harus dilakukan selanjutnya?
• Dapatkah seseorang pulih dari error tanpa kehilangan posisi mereka?
• Apakah label dan pesan konsisten di seluruh layar yang terhubung?

Pertanyaan-pertanyaan ini membentuk wireframe, desain visual, dan perilaku prototipe. Mereka juga memberi pengembang referensi bersama untuk state yang akan diimplementasikan. Kami dapat mengoordinasikan antarmuka dengan copywriting Web3 ketika pesan transaksi, prompt onboarding, atau teks penjelasan membutuhkan penulisan khusus.

Apa yang diterima tim Anda di Figma?

Aturan praktis: Tunjukkan 5 state untuk setiap transaksi: siap, menunggu, sukses, gagal, dan dibatalkan.

Tim Anda menerima paket desain yang terhubung: perjalanan yang terdokumentasi, desain layar, elemen antarmuka yang dapat digunakan kembali, dan prototipe yang menunjukkan bagaimana interaksi kunci saling terkait. Kumpulan layar yang tepat mengikuti rencana yang disepakati, sehingga semua orang tahu apa yang sedang dirancang dan ditinjau.

Riset dan tinjauan pesaing menginformasikan alur pengguna; alur menginformasikan wireframe; dan struktur yang disetujui bergerak ke sistem desain visual dan pustaka komponen. Kami kemudian menghubungkan layar yang relevan dalam prototipe yang dapat diklik dan menggunakan pengujian kegunaan untuk mengidentifikasi tempat yang membutuhkan klarifikasi. Hand-off Figma akhir memberi pengembang referensi yang terorganisir untuk layar dan state yang dirancang.

Paket dapat mencakup:

• Catatan riset dan temuan tinjauan pesaing yang relevan dengan produk.
• Alur pengguna dan wireframe untuk perjalanan yang dipilih.
• Desain antarmuka visual dan pustaka komponen yang dapat digunakan kembali.
• Jalur prototipe yang dapat diklik untuk tinjauan dan pengujian kegunaan.
• Hand-off pengembang di Figma, dengan layar dan state yang diatur untuk referensi.

Ini memberi produk, desain, dan pengembangan artefak bersama untuk didiskusikan sebelum implementasi. Jika proyek Anda membutuhkan rencana komunikasi yang lebih luas seputar rilis antarmuka, hubungkan pekerjaan dengan media sosial dan konten. Kami mendefinisikan apa yang Anda terima di awal sehingga kedalaman prototipe dan cakupan layar sesuai dengan keputusan tim selanjutnya.

Bagaimana desain bergerak dari brief ke handoff?

Pekerjaan bergerak melalui titik tinjauan yang disepakati, dari konteks produk hingga prototipe yang diuji dan hand-off pengembang. Di MarketingExtra, tinjauan pertama memeriksa apakah brief, materi yang ada, dan kendala tim memberi kami konteks yang cukup untuk memetakan perjalanan pengguna yang tepat.

Setelah kickoff, kami mengonfirmasi audiens, tugas utama, materi sumber, dan pengambil keputusan yang akan meninjau pekerjaan. Kami memetakan alur dan wireframe sebelum menyempurnakan antarmuka, yang memungkinkan tim Anda merespons struktur sebelum detail visual difinalisasi. Setelah arah visual dan pendekatan komponen disetujui, kami menghubungkan layar yang dipilih ke dalam prototipe dan menguji tugas yang relevan. Hand-off akhir disiapkan di Figma untuk tim pengembangan.

Jadwal disepakati setelah kami memahami rencana. Ini dibentuk oleh jumlah dan kompleksitas perjalanan, ketersediaan keputusan produk dan materi sumber, serta seberapa cepat pengambil keputusan dapat meninjau titik pemeriksaan desain. Anda dapat membantu menjaga pekerjaan tetap berjalan dengan menunjuk satu pengambil keputusan, berbagi dokumentasi produk yang ada lebih awal, dan mengumpulkan umpan balik menjadi satu tanggapan di setiap tinjauan.

Kirimkan gambaran produk, layar atau build saat ini, pengguna target, dan perjalanan yang paling perlu Anda tingkatkan. Kami akan meninjau materi tersebut, mengklarifikasi rencana dengan Anda, dan menguraikan pekerjaan desain yang diperlukan untuk mencapai prototipe yang siap pengembang.

Daftar periksa antarmuka Web3 6 poin Anda

Periksa 6 poin ini sebelum pengembang memulai. Mereka mencakup momen-momen di mana pengguna Web3 kehilangan kepercayaan, seperti menunggu, gagal, dan menandatangani, dan mereka membuat desain lebih mudah dibangun dan diuji. Jika suatu baris sulit dicentang, itu adalah kabar baik: itu menunjukkan apa yang harus diselesaikan sebelum uang atau waktu dihabiskan.

1. Rancang semua 5 state transaksi.
2. Tunjukkan biaya dan jaringan sebelum pengguna menandatangani.
3. Tulis pesan error dalam kata-kata sederhana.
4. Uji alur dengan satu pendatang baru.
5. Periksa tata letak di ponsel kecil.
6. Serahkan file Figma dengan komponen bernama.

Istilah dalam satu baris

State transaksi berarti tahap pembayaran atau tindakan, seperti menunggu atau gagal.

Wireframe: sketsa sederhana dari layar yang menunjukkan tata letak sebelum desain visual.

Apa yang dapat ditetapkan oleh proses desain?

Desain dapat menunjukkan bagaimana suatu produk mengomunikasikan tindakan wallet dan state transaksi, tetapi tidak dapat menentukan bagaimana wallet eksternal, rantai, atau kontrak akan berperilaku dalam setiap situasi. Sistem tersebut dapat mengembalikan state atau pesan yang harus ditangani oleh tim produk, jadi kami membuat state yang dirancang menjadi eksplisit dan menyelaraskannya dengan informasi teknis yang dapat diberikan tim Anda. Prototipe dan pengujian kegunaan membantu menilai apakah orang memahami perjalanan yang dimaksud; mereka tidak menjamin adopsi atau transaksi yang berhasil. Untuk hand-off, kami mencatat state yang diharapkan yang dikonfirmasi tim Anda, seperti koneksi tidak tersedia, penolakan pengguna, konfirmasi pending, dan error yang dikembalikan, sehingga pengembang dapat membedakan respons yang dirancang dari kondisi yang membutuhkan keputusan produk atau teknis.

Kirim 3 hal: kebutuhan produk Anda, layar Anda saat ini, dan 3 pesaing yang Anda pantau. Dengan itu, kami merencanakan riset dan alur serta mengonfirmasi biaya secara tertulis sebelum desain dimulai.

Cara kerja

1. Bagikan konteks produkKirim gambaran produk, deskripsi audiens, layar atau build saat ini, dan tugas pengguna utama yang ingin Anda tingkatkan.
2. Setujui perjalanan dan rencanaKami meninjau materi dengan Anda, mengidentifikasi alur prioritas, dan mendefinisikan layar, state, serta kedalaman prototipe untuk keterlibatan.
3. Tinjau alur dan wireframeKami memetakan perjalanan dan menyusun strukturnya sehingga tim Anda dapat menyelesaikan pertanyaan produk sebelum penyempurnaan visual.
4. Desain dan uji antarmukaKami membuat sistem visual dan komponen, menghubungkan layar yang disepakati ke dalam prototipe, dan menggunakan pengujian kegunaan untuk menemukan titik yang membutuhkan klarifikasi.
5. Terima hand-off FigmaKami mengatur desain yang disetujui dan state yang relevan di Figma sehingga tim pengembangan Anda memiliki referensi implementasi yang jelas.