Lebih Sedikit Kepercayaan, Lebih Banyak Kebenaran: Praktik dan Pola Terbaik Desain Web3

Diterbitkan: 2022-07-22

Pengembang memiliki impian internet baru. Web3 adalah model terdesentralisasi yang memberi pengguna kepemilikan penuh atas platform dan konten yang mereka buat secara online. Tetapi mencoba merevolusi internet menghadirkan berbagai tantangan desain—terutama, membangun antarmuka pengguna yang mengatasi kebingungan dan masalah keamanan yang disebabkan oleh fitur-fitur berbeda dari Web3.

Web3 Dijelaskan

Untuk memahami Web3, ada baiknya mengetahui sejarah singkat internet:

  • Web 1.0 terdesentralisasi, artinya kepemilikan dan kontrol konten dan platform didistribusikan di antara banyak individu dan bisnis.
  • Web 2.0, iterasi internet saat ini, berkembang berkat sejumlah kecil perusahaan perangkat lunak dengan platform yang mudah digunakan, seperti Apple, Google, Facebook (sekarang Meta), dan Twitter. Karena semakin banyak orang menjadi pencipta dan konsumen aktif secara online, web tumbuh lebih terpusat, sebagian besar dimiliki dan dikendalikan oleh beberapa perusahaan.

Dengan Web3, pengembang membuat internet terdesentralisasi lagi. Monopoli teknologi tidak akan lagi memiliki dan menguasai konten dan platform yang dibuat pengguna. Web3 juga bertujuan untuk memecahkan masalah keamanan dan privasi internet.

Web3 adalah:

  • Tanpa Kepercayaan: Pengembang, pembuat konten, dan pengguna lain mempertahankan kendali atas cara platform Web3 dan DApps—aplikasi terdesentralisasi—dibangun dan dipelihara, serta konten apa yang dapat diposting. Mereka memiliki visibilitas penuh ke dalam kode dan cara layanan dijalankan. Ini berbeda dengan web 2.0, di mana perusahaan dan pemerintah memiliki kontrol dan pengguna tidak dapat memverifikasi informasi secara independen tentang bagaimana aplikasi dikembangkan dan dikelola.
  • Tanpa izin: Pengguna dapat memasuki aplikasi Web3 apa pun tanpa izin dari perusahaan atau lembaga pemerintah. Mereka masuk dengan dompet kripto digital yang menyimpan kunci pribadi mereka, kata sandi yang mereka gunakan untuk mengakses mata uang digital. Dompet dapat berupa perangkat keras yang mirip dengan drive USB atau aplikasi seluler seperti MetaMask dan TrustWallet.
  • Terdistribusi: Kekuasaan dan kontrol atas produk dan layanan internet tidak terkonsentrasi di tangan investor atau CEO, tetapi tersebar secara adil di antara pengguna, yang memperoleh kepemilikan saham berdasarkan kontribusi mereka pada pengembangan dan pemeliharaan platform Web3.
  • Terbuka: Web3 berjalan di blockchain, yang menyimpan data dalam kelompok individu, yang dikenal sebagai blok. Setelah blok diisi dengan informasi, itu terkait dengan yang sebelumnya, membentuk rantai dalam urutan kronologis. Blockchain adalah buku besar terbuka yang paling umum digunakan untuk mencatat transaksi keuangan.

Banyak aplikasi Web3 dibuat oleh tim kecil yang sebagian besar terdiri dari dan dipimpin oleh pengembang. Beberapa tim independen; lainnya dipekerjakan oleh perusahaan, termasuk pasar NFT (nonfungible token) dan pertukaran kripto. Seringkali, pengembanglah yang mempekerjakan desainer untuk mengerjakan produk Web3. Dalam banyak kasus, desainer dengan pengalaman Web3 sebelumnya lebih disukai karena kurva pembelajaran yang curam di ruang yang berubah dengan cepat ini.

Web3 Gunakan Kasus dan Hambatan untuk Ekspansi

Web3 didominasi oleh aplikasi keuangan: cryptocurrency, pertukaran crypto untuk perdagangan (pertukaran terdesentralisasi, atau DEX), dan NFT, yang digunakan untuk menandakan kepemilikan barang digital atau fisik yang unik. Selain itu, keuangan terdesentralisasi, atau DeFi, memungkinkan pengguna untuk melewati bank dan mengakses layanan keuangan peer-to-peer, seperti meminjam, meminjamkan, mendapatkan bunga, dan memperdagangkan aset.

Memperluas Web3 ke sektor lain terbukti sulit. Misalnya, tidak ada cara untuk membedakan situs Web3 yang sah dari penipuan—masalah yang diperbesar karena pengguna harus memasukkan kredensial dompet kripto mereka untuk mendapatkan akses ke platform Web3. Jika situs Web3 adalah scam, setiap pengguna yang masuk berpotensi kehilangan semua uang mereka.

Masalah lainnya adalah bahwa blockchain tidak mengizinkan pengunggahan gambar atau video. Pengguna dapat menyimpan media di jaringan kripto seperti Ethereum, tetapi harganya mahal.

Dalam video game Web3, NFT dapat mewakili avatar pemain dan item yang dibeli—tetapi seringkali tidak mungkin untuk mentransfer aset ini ke game atau aplikasi lain, mengurangi investasi pemain dan menghalangi mereka dari game Web3.

Apa yang Harus Diketahui Desainer

Memanfaatkan pola UI dan prinsip desain UX berikut dapat memajukan pertumbuhan platform Web3:

Berikan Prompt yang Jelas dan Informasi Lengkap

Banyak aplikasi Web3 secara keliru mengasumsikan pengalaman yang cukup besar di pihak pengguna. Sebaliknya, desainer harus mengklarifikasi implikasi dari fitur dan tindakan Web3 yang tidak dikenal. Misalnya, sebelum menyetor dana kripto ke dalam kumpulan likuiditas, investor baru perlu mengetahui bahwa uang mereka mungkin kehilangan nilai—peringatan yang dapat disampaikan dengan pesan pop-up di layar setoran.

Aktivitas pada aplikasi DeFi diatur oleh standar yang dikenal sebagai protokol. Sebagian besar aplikasi DeFi melakukan audit keamanan rutin dan mendokumentasikan temuan kunci, termasuk kerentanan dan masalah serta perbaikan kode. Desainer dapat memastikan bahwa aplikasi DeFi memberi tahu pengguna saat laporan audit baru tersedia, dan mereka dapat membantu membuat audit lebih mudah dipahami dengan meringkas bagian kompleks dalam teks yang jelas.

Demikian pula, banyak orang membaca dokumentasi produk Web3 untuk memahami mekanisme protokol dan membuat keputusan berdasarkan informasi tentang penggunaan aplikasi. Sebagian besar materi ini terdiri dari jargon teknis yang sulit dipahami.

Di sini sekali lagi, desainer dapat memastikan konten yang ramah pengguna dengan memberikan ringkasan percakapan di awal bagian dokumentasi, bersama dengan tautan ke konten yang lebih teknis. Glosarium pop-up dapat disematkan sebagai ikon tautan dalam teks, memungkinkan pengguna mempelajari arti istilah dengan klik mouse atau ketukan jari. Dan salinan dapat dipisahkan dengan gambar yang mengilustrasikan konsep penting Web3.

Gunakan Mata Uang yang Dikenali untuk Mengkomunikasikan Nilai Tukar

Karena cryptocurrency seperti bitcoin menjadi lebih populer dan harganya berfluktuasi, mungkin sulit untuk melacak berapa nilainya. Dalam dompet digital dan aplikasi e-niaga tempat token ini dibeli, dijual, dan diperdagangkan untuk aset seperti NFT, desainer harus menunjukkan kepada pengguna konversi harga dari kripto ke mata uang asli mereka dan menghindari penggunaan lebih dari beberapa tempat desimal.

Jadikan Dompet dan Hash Transaksi Mudah Dibaca

Secara default, setiap alamat di blockchain adalah string karakter yang panjang—hingga 42—dikenal sebagai ID atau hash. Saat mengirim dana, orang harus memeriksa seluruh string. Sangat mudah untuk membuat kesalahan, dan taruhannya tinggi: Semua transaksi blockchain bersifat final. Jika aset dikirim ke alamat dompet yang salah, tidak ada cara untuk memulihkannya. Di perusahaan investasi tempat saya bekerja, kami menengahi penawaran ICO (penawaran koin awal), mengirimkan transfer besar ke bisnis yang berpartisipasi — dan kami memiliki enam orang yang memeriksa alamat dompet penerima setiap saat.

Layanan Nama Ethereum (ENS) memungkinkan orang untuk mengubah hash mereka menjadi sesuatu yang lebih mudah dibaca dan diingat, seperti nama mereka ditambah .eth . Namun, tidak semua orang menggunakan ENS karena mahal.

Desainer Web3 UX dapat membuat transaksi tidak terlalu menegangkan dengan hanya menampilkan empat karakter pertama dan terakhir dari hash agar pengguna dapat memverifikasinya tanpa memeriksa seluruh string. Desainer juga dapat membuat persyaratan bagi pengguna untuk memeriksa ulang hash sebelum transaksi apa pun, dan mereka dapat menyertakan logo pengenal di samping setiap alamat penerima. Lapisan verifikasi ekstra ini harus disertai dengan pengingat bahwa mengirim aset ke alamat yang salah akan mengakibatkan hilangnya dana sepenuhnya.

Klarifikasi Waktu Tunggu Transaksi

Saat mentransfer dana secara online melalui bank, Anda langsung menerima pembaruan status atau konfirmasi bahwa transaksi telah berhasil. Tidak demikian halnya dengan Web3 DEX. Waktu pemrosesan minimum untuk transaksi blockchain adalah sekitar tiga menit—tetapi saya harus menunggu selama dua jam. Saya telah menggunakan teknologi ini selama enam tahun, dan saya masih panik ketika uang keluar dari dompet saya dan saya tidak menerima konfirmasi pengiriman tepat waktu.

Lebih banyak DEX harus menunjukkan status transaksi melalui teks atau animasi, baik di bilah status atau notifikasi. Jika tidak memungkinkan untuk menampilkan pembaruan di UI, menyediakan tautan ke penjelajah blok sumber terbuka—seperti Etherscan di Ethereum—adalah alternatif yang baik.

Tangkapan layar menunjukkan pemberitahuan setoran Tether (USDT), mata uang kripto yang dihosting di jaringan Ethereum. Sebuah pesan berbunyi, "Jika deposit Anda tidak tiba dalam jangka waktu yang diperkirakan, periksa kemajuannya dengan Deposit Self Help" dan berikan tautan. Ada juga teks yang menunjukkan bahwa waktu kedatangan rata-rata adalah tiga menit dan koin akan disetorkan setelah 12 konfirmasi jaringan. Selain itu, saldo pengguna saat ini sebesar 0 USDT ditampilkan.
Pemberitahuan deposit cryptocurrency Tether (USDT) di jaringan Ethereum. Lebih banyak pertukaran Web3 perlu menampilkan status transaksi dan waktu pengiriman rata-rata untuk meningkatkan kenyamanan dan kepercayaan pengguna. (Sumber: Shetcoiner.com)

Terapkan Tombol "Kirim Maks"

Bitcoin, eter, dan cryptocurrency lainnya sering dinyatakan dalam banyak tempat desimal, misalnya 0,0000085191. Sulit untuk mengetikkan jumlah total secara akurat dan efisien saat mengirim uang ke individu atau bisnis untuk membeli aset, seperti NFT, atau saat menyetor dana ke kontrak pintar. Saya merekomendasikan agar desainer membuat tombol "Kirim Maks" di aplikasi, memungkinkan pengguna untuk mentransfer seluruh saldo dompet mereka ke alamat lain dengan satu klik.

Ini nyaman ketika saldo dompet seseorang sama dengan atau sedikit lebih tinggi dari jumlah yang harus mereka transfer; beberapa pengguna memiliki banyak dompet, yang meningkatkan kemungkinan kejadian ini. Mereka dapat mengirim saldo penuh, dan fungsinya secara otomatis mengubahnya menjadi bitcoin atau eter. Fitur ini tidak melakukan penghitungan apa pun saat saldo dompet lebih besar dari total yang harus dibayar, jadi desainer harus menyertakan dialog konfirmasi untuk memastikan pengguna tidak salah mengirim lebih dari yang mereka inginkan.

Jelaskan Bagaimana Harga Gas Bekerja

Gas mungkin adalah hal yang paling menjengkelkan dan membingungkan di Web3, terutama bagi seseorang yang baru mengenal kripto. Harga gas adalah biaya tambahan yang dibayarkan pengguna untuk menutupi biaya daya komputasi yang diperlukan untuk memproses transaksi. Pengguna dapat memilih untuk membayar biaya yang lebih tinggi untuk mempercepat transfer.

Desainer perlu menjelaskan apa itu gas dan bagaimana cara kerjanya. Jika memungkinkan, mereka harus menunjukkan harga gas dalam mata uang fiat asli yang paling umum di antara pengguna (biasanya USD). Desainer juga dapat menyarankan kombinasi harga gas yang layak dan kecepatan transfer yang dihasilkan; jika transaksi terhenti atau gagal karena pembayaran gas yang rendah, perancang harus mengizinkan pengguna membayar biaya yang lebih tinggi untuk mempercepat transfer.

Jadikan Riwayat Transaksi Pengguna Mudah Diakses

Hampir semua situs web e-niaga terpusat (web 2.0) mengizinkan pengguna untuk memeriksa riwayat pembelian mereka yang komprehensif. Sulit untuk mengakses catatan seperti itu pada pertukaran yang terdesentralisasi: Dompet menyediakan riwayat transaksi, tetapi hanya untuk satu akun pada satu waktu, dan sulit atau tidak mungkin untuk memfilter oleh DApps. Untuk mendapatkan jenis riwayat yang tersedia di platform terpusat, pengguna Web3 harus pergi ke penjelajah blok seperti Etherscan, yang tidak ramah pengguna dan menyulitkan untuk menemukan transaksi tertentu.

Desainer Web3 harus memberi orang cara sederhana untuk meninjau transaksi on-chain yang mereka lakukan dalam masing-masing DApps. Ini harus ditempatkan di lokasi yang mudah ditemukan, seperti panel samping atau menu. Pilihan lain adalah membuat mode "tampilan rantai" yang diaktifkan oleh sebuah tombol: Setelah diklik, itu akan menempatkan filter di seluruh UI, yang menunjukkan semua konten dalam DApp yang disimpan di blockchain—termasuk riwayat transaksi . Ini juga akan membantu untuk memungkinkan pengguna memfilter dan mengekspor catatan transaksi mereka dengan mudah.

Tangkapan layar menampilkan bagian dari riwayat transaksi pengguna di Zerion, pertukaran terdesentralisasi di jaringan Ethereum. Dua simpanan cryptocurrency --- BitTorrent dan ether --- ditampilkan, bersama dengan penerimaan NFT gummy bear. Selain itu, gambar menunjukkan saldo $15.023,99 serta opsi untuk harga gas, konversi mata uang, dan pembelian kripto. Menu samping menunjukkan bahwa riwayat mudah diakses seperti tinjauan umum, investasi, transfer, NFT, dan opsi lainnya.
Riwayat transaksi pengguna di platform DeFi Zerion, yang dihosting di jaringan Ethereum. Desainer dapat meningkatkan UI berbagai aplikasi Web3 dengan membuat catatan ini mudah diakses, difilter, dan diekspor. (Sumber: Zerion)

Aktifkan Manajemen Kunci Pribadi yang Mudah

Kunci pribadi yang memungkinkan pengguna mengakses dompet digital mereka tidak mudah disimpan. Orang terkadang lupa untuk mencadangkannya atau tidak tahu bagaimana melakukannya. Kunci-kunci ini tidak dapat dipulihkan setelah hilang: Tidak ada opsi "setel ulang kata sandi". Desainer dapat memecahkan masalah ini dengan mengikuti contoh MetaMask dan memberikan frase awal kepada setiap pengguna, serangkaian kata yang dapat digunakan untuk membuka dompet mereka.

Desainer juga perlu memperingatkan pengguna bahwa dana mereka tidak akan dapat diakses dan rentan terhadap pencurian jika mereka kehilangan kunci pribadi atau frase benih. Pesan seperti itu akan muncul di aplikasi dompet pengguna, pertama sebagai pemberitahuan saat mengatur dompet dan kemudian sebagai pengingat berulang pada jadwal yang telah ditentukan.

Takeaways Kunci

Agar Web3 semakin populer dan berkembang melampaui dompet digital dan platform keuangan, desainer perlu membuat aplikasi Web3 lebih konsisten dan intuitif. Mereka juga harus memberikan pendidikan pengguna yang lebih mudah untuk membantu membiasakan pendatang baru dengan fitur dan interaksi baru yang ditemukan di platform Web3.

Membuat DApps merasa aman juga harus menjadi prioritas utama. Tidak mungkin untuk mengontrol sifat Web3 yang tidak dapat dipercaya dan tidak memiliki izin, tetapi desainer dapat memprediksi apa yang mungkin salah dan membantu mencegah kejadian tersebut. Peringatan yang lebih transparan tentang risiko akan sangat membantu meredakan kekhawatiran orang-orang dan meyakinkan mereka untuk merangkul Web3.

Bacaan Lebih Lanjut di Blog Toptal:

Cara Mendesain untuk Kepercayaan Produk Maksimal

Tingkatkan UX Anda Dengan Prinsip Desain Interaksi yang Sukses Ini

Keuntungan Webflow untuk Desain Web Tanpa Kode: Studi Kasus