Web3 UI UX tasarım ajansı: dApp'ler, cüzdanlar ve borsalar için her adımda net arayüzler

Web3 UI/UX tasarımı neleri kapsar?

Hızlı test: Yeni bir kullanıcıdan prototipinizi kullanarak bir test işlemi göndermesini isteyin. Tereddüt ettikleri her anı not edin.

Web3 UI/UX tasarımı, bir dApp, cüzdan, borsa veya iniş akışındaki yolu anlamayı ve tamamlamayı kolaylaştırır. Araştırma ve etkileşim planlamasını görsel tasarımla birleştirir, böylece arayüz kullanıcılara ne yapabileceklerini ve sonra ne olacağını açıklar.

Bu hizmet, yeni bir ürün hazırlarken, kafa karıştırıcı bir yolculuğu yeniden yapılandırırken veya geliştirmeden önce mevcut bir arayüzü uyumlu hale getirirken uygundur. Özellikle hedef kitlenin kriptoya yeni başlayan ve cüzdan bağlantıları, işlem onayları veya gas ücretlerini henüz anlamayan kişileri içerdiğinde faydalıdır.

Çalışma şunları kapsayabilir:

• Kullanıcı araştırması ve ilgili rakip deneyimlerinin incelenmesi.
• Bir kişinin giriş noktasından görev tamamlamaya nasıl geçtiğini gösteren kullanıcı akışları.
• Görsel cilalamadan önce yapı ve öncelik üzerinde anlaşmak için wireframe'ler.
• Tutarlı ekranlar için görsel bir tasarım sistemi ve bileşen kitaplığı.
• Figma'da tıklanabilir bir prototip, kullanılabilirlik testi ve geliştirici teslimi.

Proje ayrıca tutarlı bir görsel kimlik gerektiriyorsa, arayüz çalışmasını tasarım ve görseller veya kripto markalaşması ile eşleştirin. Doğru başlangıç noktası, en önemli ürün görevidir; bir kerede her ekranı yeniden çizme talebi değil.

Bir Web3 kullanıcı yolculuğunu nasıl haritalarız?

Güçlü bir Web3 arayüzü, kullanıcının hedefinin, vermeleri gereken kararların ve her adımda ihtiyaç duydukları bilgilerin net bir şekilde anlaşılmasıyla başlar. Yolculuğu ekran düzenlerine geçmeden önce haritalarız, böylece ekip kafa karıştırıcı mantığı değişiklikler hala kolayca yapılabilirken çözebilir.

Ürününüzü, mevcut ekranlarınızı, hedef kitlenizi ve rakip deneyimlerinizi inceler, ardından temel görevleri ve soruları belirleriz. Bir cüzdan veya dApp için bu, kayıt, cüzdan bağlantısı, bir işlem eylemi ve onay veya kurtarma yolunun izlenmesi anlamına gelebilir. Sırayı bir akış olarak belgeler ve karar noktalarını, eksik bilgileri ve kullanıcıların güvenceye ihtiyaç duyabileceği yerleri belirtiriz.

Detaylı tasarıma geçmeden önce şunları hazırlayın:

• Ürünün birincil kullanıcı görevleri ve hedef kitlesi.
• Varsa mevcut ekranlar, ürün notları veya çalışan bir yapı.
• Bağlı bir cüzdan veya kullanıcı onayı gerektiren eylemler.
• Bilinen işlem durumları, hata durumları ve destek yönergeleri.
• Geliştirme ekibinizin halihazırda bildiği teknik kısıtlamalar.

Bu materyali, hangi yolculukların plana dahil edileceği ve prototipin neyi göstermesi gerektiği konusunda anlaşmak için kullanırız. Bu adımları sade bir dille açıklaması gereken ürün mesajlaşması için tasarım, Web3 içerik oluşturma ile koordine edilebilir.

Arayüz hangi cüzdan ve işlem durumlarını göstermeli?

Bir Web3 arayüzü, cüzdan ve işlem durumlarını görünür kılmalı, kullanıcıları bir eylemin işe yarayıp yaramadığı konusunda tahmin yürütmeye bırakmamalıdır. Bu durumları ana ekranlarla birlikte tasarlamak, ürün ekibine incelemesi ve oluşturması için daha eksiksiz bir deneyim sunar.

İlgili her eylem için, kullanıcının eylemden önce, sırasında ve sonrasında ne gördüğünü düşünürüz. Buna cüzdan bağlantısı, bekleyen bir işlem, onay, net bir başarı durumu ve kullanışlı hata mesajları dahildir. Gaz veya başka bir karar eylemi etkiliyorsa, arayüz seçimi hedef kitleye uygun bir dille açıklamalıdır. Kripto dışı kullanıcılar için kayıt, alışılmadık adımları önceden bilgi varsaymak yerine, alakalı olduklarında tanıtmalıdır.

Akışın pratik bir incelemesi şunları sorar:

• Kullanıcılar bir cüzdan bağlamaları gerektiğini anlayabiliyor mu?
• Hangi eylemi onayladıkları açık mı?
• Ekran, neyin beklemede olduğunu ve sonra ne yapılacağını açıklıyor mu?
• Birisi bir hatadan yerini kaybetmeden kurtulabilir mi?
• Etiketler ve mesajlar bağlı ekranlar arasında tutarlı mı?

Bu sorular wireframe'leri, görsel tasarımı ve prototip davranışını şekillendirir. Ayrıca geliştiricilere uygulanacak durumlar için ortak bir referans verir. İşlem mesajları, kayıt istemleri veya açıklayıcı metinler özel yazma gerektirdiğinde arayüzü Web3 metin yazarlığı ile koordine edebiliriz.

Ekibiniz Figma'da ne alır?

Kural: Her işlem için 5 durum gösterin: hazır, bekliyor, başarılı, başarısız ve iptal edildi.

Ekibiniz bağlantılı bir tasarım paketi alır: belgelenmiş bir yolculuk, ekran tasarımları, yeniden kullanılabilir arayüz öğeleri ve temel etkileşimlerin nasıl bir araya geldiğini gösteren bir prototip. Tam ekran seti, üzerinde anlaşılan planı takip eder, böylece herkes neyin tasarlandığını ve incelendiğini bilir.

Araştırma ve rakip incelemesi kullanıcı akışlarını bilgilendirir; akışlar wireframe'leri bilgilendirir; onaylanan yapı görsel tasarım sistemine ve bileşen kitaplığına geçer. Ardından ilgili ekranları tıklanabilir bir prototipte birleştirir ve açıklama gerektiren yerleri belirlemek için kullanılabilirlik testi kullanırız. Son Figma teslimi, geliştiricilere tasarlanan ekranlar ve durumlar için düzenli bir referans verir.

Paket şunları içerebilir:

• Ürünle ilgili araştırma notları ve rakip incelemesi bulguları.
• Seçilen yolculuklar için kullanıcı akışları ve wireframe'ler.
• Görsel arayüz tasarımları ve yeniden kullanılabilir bir bileşen kitaplığı.
• İnceleme ve kullanılabilirlik testi için tıklanabilir prototip yolları.
• Figma'da geliştirici teslimi, referans için düzenlenmiş ekranlar ve durumlar.

Bu, uygulamadan önce tartışmak için ürün, tasarım ve geliştirmeye ortak bir yapı sağlar. Projeniz arayüz sürümü etrafında daha geniş bir iletişim planı gerektiriyorsa, çalışmayı sosyal medya ve içerik ile bağlayın. Başlangıçta ne alacağınızı tanımlarız, böylece prototip derinliği ve ekran kapsamı ekibin bir sonraki kararıyla eşleşir.

Tasarım brief'ten teslime nasıl ilerler?

Çalışma, ürün bağlamından test edilmiş prototip ve geliştirici teslimine kadar üzerinde anlaşılan inceleme noktalarından geçer. MarketingExtra'da ilk inceleme, brief'in, mevcut materyallerin ve ekip kısıtlamalarının doğru kullanıcı yolculuklarını haritalamak için yeterli bağlamı sağlayıp sağlamadığını kontrol eder.

Başlangıç toplantısından sonra hedef kitleyi, birincil görevleri, kaynak materyalleri ve çalışmayı inceleyecek karar vericileri onaylarız. Arayüzü iyileştirmeden önce akışları ve wireframe'leri haritalarız; bu, ekibinizin görsel detaylar son halini almadan önce yapıya yanıt vermesini sağlar. Görsel yön ve bileşen yaklaşımı onaylandıktan sonra, seçilen ekranları bir prototipe bağlar ve ilgili görevleri test ederiz. Son teslim, geliştirme ekibi için Figma'da hazırlanır.

Takvim, planı anladıktan sonra kararlaştırılır. Yolculukların sayısı ve karmaşıklığı, ürün kararlarının ve kaynak materyallerin mevcudiyeti ve karar vericilerin tasarım kontrol noktalarını ne kadar hızlı inceleyebileceği ile şekillenir. Çalışmanın ilerlemesine yardımcı olmak için bir karar verici belirleyerek, mevcut ürün dokümantasyonunu erken paylaşarak ve her incelemede geri bildirimi tek bir yanıtta toplayarak katkıda bulunabilirsiniz.

Ürün genel bakışınızı, mevcut ekranlarınızı veya yapınızı, hedef kullanıcılarınızı ve en çok iyileştirmeniz gereken yolculuğu gönderin. Bu materyalleri inceleyecek, sizinle planı netleştirecek ve geliştiriciye hazır bir prototipe ulaşmak için gereken tasarım çalışmasını ana hatlarıyla belirteceğiz.

6 maddelik Web3 arayüz kontrol listeniz

Geliştiriciler başlamadan önce bu 6 noktayı kontrol edin. Web3 kullanıcılarının bekleme, başarısız olma ve imzalama gibi anlarda güven kaybettiği anları kapsarlar ve tasarımı oluşturmayı ve test etmeyi kolaylaştırırlar. Bir satırın işaretlenmesi zorsa, bu faydalı bir bilgidir: herhangi bir para veya zaman harcanmadan önce neyin çözülmesi gerektiğini gösterir.

1. 5 işlem durumunun tümünü tasarlayın.
2. Kullanıcı imzalamadan önce ücretleri ve ağı gösterin.
3. Hata mesajlarını sade bir dille yazın.
4. Akışı yeni bir kullanıcıyla test edin.
5. Düzeni küçük bir telefonda kontrol edin.
6. Adlandırılmış bileşenlerle bir Figma dosyası teslim edin.

Terimler tek satırda

İşlem durumu, bir ödeme veya eylemin bekleme veya başarısız gibi aşaması anlamına gelir.

Wireframe: görsel tasarımdan önce düzeni gösteren bir ekranın basit bir taslağı.

Tasarım süreci neleri belirleyebilir?

Tasarım, bir ürünün cüzdan eylemlerini ve işlem durumlarını nasıl ilettiğini gösterebilir, ancak harici bir cüzdanın, zincirin veya sözleşmenin her durumda nasıl davranacağını belirleyemez. Bu sistemler, ürün ekibinin ele alması gereken durumlar veya mesajlar döndürebilir, bu nedenle tasarlanan durumları açık hale getirir ve ekibinizin sağlayabileceği teknik bilgilerle uyumlu hale getiririz. Bir prototip ve kullanılabilirlik testi, insanların amaçlanan yolculuğu anlayıp anlamadığını değerlendirmeye yardımcı olur; benimsemeyi veya başarılı işlemleri garanti etmezler. Teslim için, ekibinizin onayladığı beklenen durumları (bağlantı kullanılamıyor, kullanıcı reddi, bekleyen onay ve döndürülen bir hata gibi) kaydederiz, böylece geliştiriciler tasarlanan yanıtları ürün veya teknik kararlar gerektiren koşullardan ayırt edebilir.

3 şey gönderin: ürün gereksinimleriniz, mevcut ekranlarınız ve takip ettiğiniz 3 rakip. Bunlarla araştırmayı ve akışları planlar ve tasarım başlamadan önce maliyeti yazılı olarak onaylarız.

Nasıl çalışır

1. Ürün bağlamını paylaşınBir ürün genel bakışı, hedef kitle tanımı, mevcut ekranlar veya yapı ve iyileştirmek istediğiniz ana kullanıcı görevini gönderin.
2. Yolculuklar ve plan üzerinde anlaşınMateryalleri sizinle birlikte inceler, öncelikli akışı belirler ve taahhüt için ekranları, durumları ve prototip derinliğini tanımlarız.
3. Akışları ve wireframe'leri inceleyinYolculuğu haritalar ve yapısını ortaya koyarız, böylece ekibiniz görsel iyileştirmeden önce ürün sorularını çözebilir.
4. Arayüzü tasarlayın ve test edinGörsel sistemi ve bileşenleri oluşturur, üzerinde anlaşılan ekranları bir prototipe bağlar ve açıklama gerektiren noktaları bulmak için kullanılabilirlik testi kullanırız.
5. Figma teslimini alınOnaylanan tasarımları ve ilgili durumları Figma'da düzenleriz, böylece geliştirme ekibinizin net bir uygulama referansı olur.