Design UI UX Web3: dal primo clic all'azione

Il design inizia dal momento in cui il tuo prodotto deve essere chiaro

Il design UI UX Web3 collega ciò che il tuo prodotto fa con ciò che una persona deve capire dopo. Iniziamo dal compito dell'utente, poi modelliamo un percorso e un'interfaccia attorno ad esso.

Immagina un lead di un programma ambasciatori che apre una dashboard di progetto dopo un mese tranquillo di post. Vuole vedere cosa richiede attenzione, ma il passo successivo non è ovvio. Noi esamineremmo il compito che è venuto a completare, mappiamo dove inizia la confusione e rendiamo più facili da seguire le scelte importanti.

Lo stesso approccio funziona per una dApp, un wallet, un exchange o un flusso di landing. Esaminiamo il prodotto, i suoi utenti previsti e qualsiasi materiale esistente. La ricerca e la revisione dei concorrenti ci aiutano a notare contesto mancante e passaggi scomodi prima che vengano disegnate schermate dettagliate.

Il punto di partenza dipende da ciò che il tuo team già sa. Se il percorso è chiaro, possiamo concentrarci sul design dell'interfaccia e su un prototipo. Se non lo è, possiamo prima chiarire il flusso. Quando il lavoro richiede anche supporto visivo, possiamo collegarlo con Design e visuali Web3.

Come dovrebbe un'interfaccia Web3 guidare qualcuno attraverso un'azione wallet?

Un flusso wallet utile mostra cosa qualcuno può fare, cosa succede dopo e come risponde l'interfaccia. Mappiamo ogni azione importante prima di rifinire le sue schermate.

Supponiamo che un nuovo utente raggiunga un prompt di connessione wallet e non sia sicuro del perché sia necessario. Esamineremmo quali informazioni appartengono prima del prompt e cosa vede l'utente dopo la connessione. Mapperemmo anche dove il flusso dovrebbe spiegare una transazione o un errore. L'obiettivo è rendere comprensibile la prossima decisione, non nascondere il passo tecnico.

Spesso mappiamo 3 momenti in un percorso di transazione: connessione, revisione e risposta. I wireframe consentono al tuo team di verificare l'ordine e il linguaggio prima che inizi il design visivo. Il prototipo poi rende i percorsi selezionati più facili da discutere come esperienza connessa.

Per una prima revisione utile, porta il compito principale, i requisiti attuali, eventuali schermate esistenti e stati noti di wallet o transazione. Se la scrittura del prodotto richiede attenzione a sé, Copywriting Web3 può aiutare a mantenere coerente il linguaggio dell'interfaccia. Un responsabile del prodotto dovrebbe confermare eventuali regole che il team di design non può dedurre.

I file di lavoro che il tuo team di prodotto può esaminare

Ricevi un set connesso di materiali di design per esaminare il percorso utente e preparare l'implementazione. Concordiamo quali compiti e schermate focalizzare prima che inizi il design dettagliato.

Un set tipico di lavoro può includere:

• Note di ricerca e revisione dei concorrenti.
• Flussi utente e wireframe per i compiti prioritari.
• Un sistema di design visivo e libreria di componenti.
• Un prototipo cliccabile per i percorsi selezionati.
• Test di usabilità e consegna agli sviluppatori in Figma.

Il flusso e i wireframe mostrano come è strutturato un compito. Il sistema di design e i componenti aiutano il tuo team a esaminare il linguaggio visivo su tutte le schermate. Un prototipo cliccabile rende il percorso selezionato più facile da percorrere. I test di usabilità danno al team l'opportunità di osservare dove le persone hanno bisogno di più contesto.

La consegna finale organizza il lavoro Figma concordato per gli sviluppatori. Se l'identità più ampia del prodotto è ancora in fase di definizione, allinea le decisioni sull'interfaccia con Branding per progetti crypto prima di stabilire la direzione visiva. Il tuo team può quindi esaminare linguaggio e design del prodotto insieme.

Dalla prima revisione alla consegna Figma

Il lavoro passa dal contesto del prodotto a flussi, decisioni sull'interfaccia, prototipo e consegna agli sviluppatori. Impostiamo punti di revisione così il tuo team può rispondere prima che venga costruito il livello successivo.

Presso Brand Community, usiamo una checklist di avvio per raccogliere pubblico, compito prioritario, file di design esistenti, requisiti di prodotto e domande note. Poi concordiamo chi può rispondere alle domande sul prodotto e chi esaminerà il lavoro. Due punti di revisione possono aiutare a mantenere chiaro il feedback: uno per flusso e wireframe, un altro per direzione visiva e prototipo selezionato.

I tempi seguono il numero e la complessità dei percorsi, il materiale già disponibile e la rapidità con cui arrivano le decisioni. Il lavoro può anche collegarsi con Creazione contenuti crypto o con il più ampio Team social media e contenuti attraverso un linguaggio di prodotto condiviso.

Porta le decisioni di prodotto che modellano l'interfaccia

La revisione del design è più utile quando il tuo team può spiegare l'utente, il compito e le regole di prodotto dietro di esso. Possiamo rendere visibili le domande senza risposta in un flusso, ma non dovremmo riempirle indovinando.

Un prototipo Figma può mostrare gli stati wallet e transazione previsti, ma non può determinare cosa visualizza un wallet connesso. Non può nemmeno determinare se una transazione di rete viene completata. Questi comportamenti e le regole di prodotto dietro di essi rimangono con la piattaforma e il tuo team di prodotto.

Per far muovere la prima revisione, prepara queste 3 cose:

1. Una breve panoramica del prodotto e le persone che prevedi lo utilizzino.
2. Il percorso che conta di più, più eventuali file Figma o requisiti attuali.
3. Una persona che possa confermare le decisioni di prodotto e raccogliere feedback.

Non serve un brief rifinito. Inviami ciò che hai, incluse le schermate o le domande che sembrano irrisolte. Esamineremo il materiale con te, concorderemo il primo percorso e i punti di revisione, e mapperemo una rotta chiara verso un prototipo e una consegna Figma.

Come funziona

1. Condividi il quadro del prodottoInvia la panoramica del prodotto, gli utenti previsti, il compito prioritario e eventuali file di design o requisiti esistenti.
2. Concorda cosa esaminareConfermiamo su quale percorso concentrarci, chi può rispondere alle domande sul prodotto e quando il tuo team esaminerà le decisioni.
3. Mappa il compito utentePrepariamo il flusso concordato e i wireframe così il tuo team può verificare la struttura prima del design dell'interfaccia.
4. Progetta e testa i percorsi selezionatiCreiamo il sistema visivo e le schermate, costruiamo un prototipo cliccabile e svolgiamo test di usabilità come concordato.
5. Prepara la consegna FigmaOrganizziamo i file di design approvati per gli sviluppatori e guidiamo il tuo team attraverso le scelte di interfaccia pertinenti.