La tab bar inferiore, il cassetto laterale e il Floating Action Button (FAB) sono i modelli più utilizzati per la navigazione mobile di primo livello. Se vuoi progettare percorsi di navigazione chiari e semplici, usa uno di questi pattern nella tua app.
Integrazione del testo reale
Dopo che sei soddisfatto della tua gerarchia visiva, inizia a sostituire i segnaposto e il testo fittizio con il contenuto reale (testo reale o quello che è rilevante per l’utente). C’è una ragione importante per cui dovremmo evitare il testo fittizio in questa fase – Lorem Ipsum non comunica come la pagina supporta gli utenti nel raggiungere i loro obiettivi. Inoltre, molti elementi visivi che creiamo sono basati sul contenuto che abbiamo nei nostri prodotti. Quando inizierai ad aggiungere contenuti reali, ti renderai conto che alcuni elementi UI (o anche sezioni UI) non sono necessari per il tuo prodotto.
A volte, mentre riempi i tuoi wireframe con dettagli reali, potresti notare che il layout che hai non funziona bene. In questo caso, è importante iterare e trovare un modo migliore di rappresentare le informazioni che stai cercando di comunicare.
Dopo aver riempito la pagina con il testo reale, prova se la pagina scorre per l’utente. Alcuni contenuti della tua pagina potrebbero essere fuori ordine. Questo è il momento perfetto per riorganizzare il contenuto della pagina e migliorare la composizione.
Di seguito un esempio del nostro wireframe per la nostra schermata iniziale che ha dati reali. Diverse dimensioni dei caratteri sono usate per dare priorità ad alcuni blocchi UI (come le categorie di cibo).
Assicurati che il tuo contenuto sia ben scalabile
Se il tuo design sembra ottimo su uno schermo di medie dimensioni come quello dell’iPhone XS, non significa che gli utenti di iPhone 5 e iPhone XS Max avranno la stessa grande esperienza. Mentre va assolutamente bene iniziare con uno schermo di medie dimensioni quando si fa il wireframing, è anche essenziale controllare come il contenuto appare su schermi di dimensioni diverse (sia piccoli che grandi) e regolarlo se necessario.
Collega le pagine insieme per creare un flusso
Mentre è possibile spedire il tuo design come una collezione di schermate individuali, è meglio creare un flusso da esse. I flussi UX rendono facile per il team capire i dettagli degli scenari di interazione – comunicano come le persone dovrebbero interagire con un prodotto.
I flussi UX ti faranno anche pensare alla funzionalità dell’app nel suo complesso. Per esempio, dopo aver visualizzato il flusso UX, potresti notare che hai bisogno di introdurre uno stato extra tra la schermata iniziale e una pagina con i risultati della ricerca (perché il backend del tuo sistema impiegherà alcuni secondi per restituire i risultati).
È anche una buona idea dare ad ogni schermata un numero di riferimento. I numeri di riferimento ti renderanno la vita molto più facile quando discuti il progetto con altri membri del team o con le parti interessate.
Testare le tue decisioni di design
Il test è il passo finale (e uno dei più importanti) del wireframing. Il test implica interazioni con l’utente, ecco perché questo termine è spesso usato nel contesto dei prototipi. Ma è possibile condurre semplici test per un flusso creato da wireframes. Usando Balsamiq, è possibile creare semplici prototipi cliccabili collegando insieme i wireframe. L’obiettivo di tali test è vedere se le schermate funzionano insieme.
Conclusione
L’obiettivo finale del wireframing è quello di identificare il contorno del contenuto e creare una solida base per le fasi future del processo di design. Wireframes ben disegnati rendono il design visivo e di interazione molto più facile.
Come per ogni attività di design, trascorri abbastanza tempo a sperimentare con diversi strumenti e processi e troverai il tuo stile personale per il wireframing. La pratica rende perfetti.
Parole di Nick Babich
Originariamente pubblicate sul sito UI Education di Balsamiq