Web3 UI UX tasarım ajansı: ilk tıklamadan işleme kadar net arayüzler

Tasarım, ürününüzün netleştirmesi gereken anla başlar

Web3 UI/UX tasarımı, ürününüzün yaptığı şeyi bir kişinin bir sonraki adımda anlaması gerekenle birleştirir. Kullanıcı göreviyle başlar, ardından bir yolculuk ve arayüz şekillendiririz.

Sessiz bir paylaşım ayının ardından bir proje panosunu açan bir elçi programı sorumlusunu düşünün. Neyin ilgi gerektirdiğini görmek isterler, ancak bir sonraki adım belli değildir. Tamamlamak için geldikleri göreve bakar, karışıklığın nerede başladığını haritalar ve önemli seçimleri takip etmesi kolay hale getiririz.

Aynı yaklaşım bir dApp, cüzdan, borsa veya açılış akışı için de geçerlidir. Ürünü, hedef kullanıcıları ve mevcut materyalleri inceleriz. Araştırma ve rakip incelemesi, ayrıntılı ekranlar çizilmeden önce eksik bağlamı ve zor adımları fark etmemize yardımcı olur.

Başlangıç noktası, ekibinizin halihazırda ne bildiğine bağlıdır. Yolculuk netse, arayüz tasarımına ve bir prototipe odaklanabiliriz. Net değilse, önce akışı netleştirebiliriz. Çalışma ayrıca görsel destek gerektiriyorsa, bunu Web3 tasarım ve görseller ile bağlayabiliriz.

Bir Web3 arayüzü, birini cüzdan işlemi boyunca nasıl yönlendirmeli?

Kullanışlı bir cüzdan akışı, birinin ne yapabileceğini, sonra ne olacağını ve arayüzün nasıl yanıt verdiğini gösterir. Her önemli eylemi, ekranlarını cilalamadan önce haritalarız.

Diyelim ki yeni bir kullanıcı bir cüzdan bağlantı istemine geliyor ve neden gerekli olduğundan emin değil. İstemden önce hangi bilgilerin ait olduğunu ve kullanıcının bağlandıktan sonra ne gördüğünü inceleriz. Ayrıca akışın bir işlemi veya hatayı nerede açıklaması gerektiğini haritalarız. Amaç, teknik adımı gizlemek değil, bir sonraki kararı anlaşılır kılmaktır.

Bir işlem yolculuğunda genellikle 3 anı haritalarız: bağlantı, inceleme ve yanıt. Wireframe'ler, ekibinizin görsel tasarım başlamadan önce sırayı ve dili kontrol etmesine olanak tanır. Prototip daha sonra seçilen yolları bağlantılı bir deneyim olarak tartışmayı kolaylaştırır.

Yararlı bir ilk inceleme için ana görevi, mevcut gereksinimleri, varsa mevcut ekranları ve bilinen cüzdan veya işlem durumlarını getirin. Ürün metni kendi başına ilgi gerektiriyorsa, Web3 metin yazarlığı arayüz dilini tutarlı tutmaya yardımcı olabilir. Bir ürün sorumlusu, tasarım ekibinin çıkaramayacağı kuralları onaylamalıdır.

Ürün ekibinizin inceleyebileceği çalışma dosyaları

Kullanıcı yolculuğunu incelemek ve uygulamaya hazırlanmak için bağlantılı bir dizi tasarım materyali alırsınız. Ayrıntılı tasarım başlamadan önce hangi görevlere ve ekranlara odaklanılacağını kararlaştırırız.

Tipik bir çalışma seti şunları içerebilir:

• Araştırma notları ve rakip incelemesi.
• Öncelikli görevler için kullanıcı akışları ve wireframe'ler.
• Görsel bir tasarım sistemi ve bileşen kütüphanesi.
• Seçilen yollar için tıklanabilir bir prototip.
• Kullanılabilirlik testi ve Figma'da geliştirici teslimi.

Akış ve wireframe'ler bir görevin nasıl yapılandırıldığını gösterir. Tasarım sistemi ve bileşenler, ekibinizin görsel dili ekranlar arasında incelemesine yardımcı olur. Tıklanabilir bir prototip, seçilen yolculuğu adım adım takip etmeyi kolaylaştırır. Kullanılabilirlik testi, ekibe insanların nerede daha fazla bağlama ihtiyaç duyduğunu gözlemleme şansı verir.

Son teslim, kararlaştırılan Figma çalışmasını geliştiriciler için düzenler. Ürünün daha geniş kimliği hala şekilleniyorsa, görsel yönü belirlemeden önce arayüz kararlarını kripto projeleri için markalaşma ile uyumlu hale getirin. Ekibiniz daha sonra ürün dilini ve tasarımı birlikte inceleyebilir.

İlk incelemeden Figma teslimine kadar

Çalışma, ürün bağlamından akışlara, arayüz kararlarına, bir prototipe ve geliştirici teslimine doğru ilerler. Bir sonraki katman oluşturulmadan önce ekibinizin yanıt verebilmesi için inceleme noktaları belirleriz.

Brand Community'da, hedef kitleyi, öncelikli görevi, mevcut tasarım dosyalarını, ürün gereksinimlerini ve bilinen soruları toplamak için bir başlangıç kontrol listesi kullanırız. Ardından, ürün sorularını kimin yanıtlayacağına ve çalışmayı kimin inceleyeceğine karar veririz. İki inceleme noktası, geri bildirimi net tutmaya yardımcı olabilir: biri akış ve wireframe'ler için, diğeri görsel yön ve seçilen prototip için.

Zamanlama, yolculukların sayısına ve karmaşıklığına, halihazırda mevcut olan materyale ve kararların ne kadar hızlı geri geldiğine bağlıdır. Çalışma ayrıca kripto içerik oluşturma veya daha geniş sosyal medya ve içerik ekibi ile paylaşılan ürün dili aracılığıyla bağlanabilir.

Arayüzü şekillendiren ürün kararlarını getirin

Tasarım incelemesi, ekibiniz kullanıcıyı, görevi ve arkasındaki ürün kurallarını açıklayabildiğinde en kullanışlı olur. Cevaplanmamış soruları bir akışta görünür hale getirebiliriz, ancak tahmin ederek doldurmamalıyız.

Bir Figma prototipi, amaçlanan cüzdan ve işlem durumlarını gösterebilir, ancak bağlı bir cüzdanın ne görüntülediğini belirleyemez. Ayrıca bir ağ işleminin tamamlanıp tamamlanmadığını da belirleyemez. Bu davranışlar ve arkasındaki ürün kuralları, platform ve ürün ekibinizle kalır.

İlk incelemeyi başlatmak için şu 3 şeyi hazırlayın:

1. Kısa bir ürün genel bakışı ve kullanmasını beklediğiniz kişiler.
2. En önemli olan bir yolculuk, artı varsa mevcut Figma dosyaları veya gereksinimler.
3. Ürün kararlarını onaylayabilecek ve geri bildirim toplayabilecek bir kişi.

Cilalı bir brifinge ihtiyacınız yok. Elinizde olanı, çözülmemiş hissettiren ekranlar veya sorular da dahil olmak üzere bize gönderin. Materyali sizinle birlikte inceler, ilk yolculuk ve inceleme noktaları üzerinde anlaşır ve bir prototip ve Figma teslimine doğru net bir rota haritalarız.

Nasıl çalışır

1. Ürün resmini paylaşınÜrün genel bakışını, hedef kullanıcıları, öncelikli görevi ve varsa mevcut tasarım dosyalarını veya gereksinimleri gönderin.
2. Neyin inceleneceğine karar verinHangi yolculuğa odaklanılacağını, ürün sorularını kimin yanıtlayabileceğini ve ekibinizin kararları ne zaman inceleyeceğini onaylarız.
3. Kullanıcı görevini haritalayınKararlaştırılan akışı ve wireframe'leri hazırlarız, böylece ekibiniz arayüz tasarımından önce yapıyı kontrol edebilir.
4. Seçilen yolları tasarlayın ve test edinGörsel sistemi ve ekranları oluşturur, tıklanabilir bir prototip yapar ve kararlaştırıldığı gibi kullanılabilirlik testi gerçekleştiririz.
5. Figma teslimini hazırlayınOnaylanan tasarım dosyalarını geliştiriciler için düzenler ve ekibinizi ilgili arayüz seçimleri konusunda yönlendiririz.