Web3 UI UX Tasarım Ajansı: Ürün Görevlerine Göre Kullanıcı Arayüzü Tasarımı

Web3 görev haritası, ekranlar çizilmeden önce neyi ortaya çıkarır?

Bir görev haritası, kullanıcıların nerede karar verdiğini, bilgi sağladığını veya üründen ayrıldığını gösterir. Ekibe, tel çerçeveler ve görsel stil başlamadan önce incelenebilir bir yapı sunar.

Hedef kitle, ürün hedefi ve mevcut kanıtlarla başlıyoruz. Bu, mevcut ekranları, bir prototipi, destek sorularını ve bilinen teknik kısıtlamaları içerebilir. Bir akış haritası 4 kontrol noktası kullanır: giriş, karar, yanıt ve kurtarma. Her görev için 6 alan kaydederiz: kullanıcı hedefi, başlangıç noktası, gerekli bilgi, cüzdan eylemi, arayüz yanıtı ve çözülmemiş varsayım. Bu kayıtlar, blockchain bilgisini verili kabul etmeden eksik adımları ortaya çıkarır.

Harita, yeni bir dApp için olduğu kadar mevcut bir arayüz için de kullanışlıdır. Bir yeniden tasarımda, kafa karıştırıcı etkileşimi bir ürün kuralından ayırır. Bu kural bir ekip kararı gerektirebilir. Yeni bir ürün için, paydaşların ilk kez kullanan bir kullanıcının devam etmeden önce neyi anlaması gerektiği konusunda anlaşmasına yardımcı olur.

Kısa bir ürün açıklaması, hedef kullanıcılar, öncelikli görevler ve varsa kullanıcı geri bildirimi getirin. Halka açık görsellerin de iyileştirilmesi gerekiyorsa, arayüz kapsamını tasarım ve görseller ile bağlayın.

Hangi cüzdan ve işlem durumları arayüz kararları gerektirir?

Bir cüzdan durumu incelemesi, kullanıcı tarafından görülebilir sırayı netleştirir: istek, karar, bekleyen yanıt, onay veya hata. Tasarım, kullanıcıya ne olduğunu ve hangi eylemin kullanılabilir olduğunu söylemelidir.

Bağlantı adımlarını ürün göreviyle birlikte haritalandırıyoruz. Ardından, ilgili olduğunda işlem ayrıntılarını, gaz mesajlaşmasını, bekleyen geri bildirimi, başarı onayını ve hata kurtarmayı inceliyoruz. Ekran, istenen kullanıcı eylemini belirtmelidir. Arayüzün şu anda ne bildiğini göstermelidir. Bir sonraki kullanılabilir eylemi göstermelidir. Ürün metninin veya teknik davranışın henüz kararlaştırılmadığı boşlukları işaretliyoruz.

İnceleme için ekranları 3 gruba ayırın: bir cüzdan eyleminden önce, bir yanıt sırasında ve yanıttan sonra. Bu, ürün ve mühendislik ekiplerinin eksik durumları tespit etmesini kolaylaştırır. Kullanılabilirlik testi daha sonra gözlemleyeceği somut bir göreve sahip olur. Arayüz hakkında genel görüşlere güvenmekten kaçınır.

Varsa, bilinen cüzdan davranışını, mevcut işlem dilini ve hata senaryolarını paylaşın. Bu girdiler eksikse, hangi akışların şimdi tasarlanabileceğini ve hangi kararların onay gerektirdiğini belirleriz. Arayüz dili, Web3 metin yazarlığı ile koordine edilebilir.

Figma dosyası ekibinizin neleri incelemesine izin vermelidir?

Kullanışlı bir Figma dosyası, paydaşların temel görevleri takip etmesine ve geliştiricilerin amaçlanan arayüz durumlarını incelemesine olanak tanır. Yapıyı, görsel kuralları ve etkileşim örneklerini incelenebilir bir teslimde birbirine bağlar.

Kararlaştırılan teslimatlar; araştırma bulguları, kullanıcı akışları, tel çerçeveler, görsel tasarım, bir UI kiti, bir bileşen kütüphanesi ve tıklanabilir bir prototip içerebilir. Dosya, tekrarlanan desenlerin tanımlanmasını kolaylaştırmalı ve ekranların nasıl bağlandığını göstermelidir. Teslim sırasında ilgili ekranları ve bileşenleri düzenleriz. Etkileşim durumlarını netleştirir ve deneyimi etkileyen uygulama sorularını işaretleriz.

Prototipi, bir görevi girişten tamamlamaya kadar incelemek için kullanın. Bir sonraki eylemin görünür olduğunu, geri bildirimin doğru noktada göründüğünü ve hataların anlaşılır bir ilerleme yolu sunduğunu kontrol edin. Kullanılabilirlik testi, kararlaştırılan görevleri gözlemler. Bulgular daha sonra tasarım revizyonları veya ürün ekibi için açık sorular haline gelir. Teknik inceleme veya üretim uygulamasının yerini almaz.

Tasarım onayından önce, ürün kararlarından sorumlu kişiyi ve işi uygulayacak kişiyi belirtin. Bu ayrım, görsel geri bildirimi teknik fizibiliteden ayrı tutar. Arayüzün kanallar arasında destekleyici açıklamalara da ihtiyacı varsa, bunu Web3 içerik oluşturma ile koordine edin.

Bir dApp tasarım incelemesi teslimata nasıl ilerler?

İnceleme sırası, ekip ayrıntılı ekranlara yatırım yapmadan önce açık ürün sorularını kararlara dönüştürür. Kapsamı, mevcut girdileri, inceleyenleri ve arayüzün desteklemesi gereken görevleri onaylarız.

İlk olarak, araştırma ve rakip incelemesi görev haritasını oluşturur. Tel çerçeveler daha sonra ekibin gezinme ve bilgi sırasını kontrol etmesine olanak tanır. Bu seçimler hizalandıktan sonra görsel sistemi, temel ekranları ve tıklanabilir prototipi geliştiririz. Kullanılabilirlik testi ve revizyonlar, kararlaştırılan kapsama dahil edildiğinde takip eder. Nihai Figma teslimi, geliştiricilerle ilgili etkileşim durumlarını ve uygulama sorularını kaydeder.

Pratik bir inceleme ritmi, görsel tasarımdan önce 2 karar noktasına sahiptir: görev akışının onayı ve tel çerçeve yapısının onayı. Daha sonraki geri bildirim, yalnızca tercih edilen bir stil değişikliğini değil, etkilenen görevi veya ürün kuralını belirtmelidir. İnceleyenlerden yorumları birleştirmelerini ve gerekli düzeltmeleri isteğe bağlı tercihlerden ayırmalarını isteyin.

Zamanlama, kapsam incelemesinden sonra belirlenir. Akışların sayısı ve karmaşıklığı programı şekillendirir. Ayrıca ürün materyallerinin hazır olması ve inceleyenlerin müsaitliği de etkilidir. Çalışma başlamadan önce sırayı onaylarız, ardından her incelemeyi o anda tartışılan esere odaklı tutarız. Daha geniş sosyal ve içerik çalışmaları için Sosyal medya ve içerik bölümüne bakın.

Mühendislik hangi cüzdan davranışını doğrulamalıdır?

Bir teslim, tasarlanmış arayüz geri bildirimini uygulama ekibi tarafından doğrulanan davranıştan ayırmalıdır. Bu ayrım, geliştiricilerin statik bir ekrandan teknik davranış çıkarmak yerine doğru koşulları test etmesine yardımcı olur.

Ürün brifinginde sağlanan cüzdan ve işlem durumlarını belgeliyoruz. Ekip daha sonra hangi yanıtların temsil edildiğini, kullanıcıların hangi ifadeleri gördüğünü ve bir hatadan sonra hangi kurtarma seçeneğinin göründüğünü kontrol edebilir. Bir durumun onaylanmış bir ürün davranışı yoksa, bunu kesin olarak sunmak yerine açık bir soru olarak işaretleriz. Bu, özellikle tasarım bağlantı istekleri, gaz açıklamaları, bekleyen geri bildirim veya işlem onayı içerdiğinde kullanışlıdır.

Cüzdan sağlayıcıları ve ağ yanıtları değişebilir, bu nedenle bir Figma prototipi her harici istemin veya işlemin nasıl davranacağını belirleyemez. Belirtilen durumları ve çözülmemiş bağımlılıkları mühendislik incelemesi için kaydederiz; uygulama, gerçek yanıtları doğrulamalıdır.

Başlamak için ürün genel bakışınızı, hedef kullanıcılarınızı, mevcut arayüzünüzü veya prototipinizi ve öncelikli görevlerinizi gönderin. GeoMarketing Experts, bu materyalleri inceleyecek, eksik kararları belirleyecek ve kapsamlı bir tasarım sırası önerecektir. Arayüz etiketleri veya onboarding açıklamaları ayrı bir yazma çalışması gerektiriyorsa, bunu tartışmaya dahil edin.

Nasıl çalışır

1. 1. Ürün bağlamını paylaşınÜrün genel bakışını, hedef kitleyi, mevcut arayüzü ve öncelikli görevleri gönderin. Teknik kısıtlamaları ve varsa kullanıcı geri bildirimlerini ekleyin.
2. 2. Kapsamı ve girdileri onaylayınHangi akışların, araştırmanın, ekranların ve prototip çalışmasının gerektiğini netleştiririz. Kararları kimin inceleyeceği ve hangi materyallerin mevcut olması gerektiği konusunda anlaşırız.
3. 3. Akışları ve tel çerçeveleri inceleyinKullanıcı yolculuğunu haritalandırır ve görsel tasarım başlamadan önce geri bildirim için arayüz yapısını sunarız.
4. 4. Tasarlayın ve test edinGörsel sistemi ve prototipi oluşturur, ardından kararlaştırılan görevleri test eder ve bulgulara dayanarak deneyimi iyileştiririz.
5. 5. Geliştirici teslimini hazırlayınFigma teslimatlarını düzenler ve ürüm ekibiniz için etkileşim durumlarını ve açık uygulama sorularını netleştiririz.