Share
Questo articolo si basa sul nostro precedente articolo sul processo di progettazione mobile, che approfondisce le fasi di prototipazione cartacea e wireframing dello sviluppo di app. Alla fine, avrò una lista di vari strumenti che puoi usare per creare i tuoi wireframes e prototipi.
Interaction design per dispositivi mobili è un argomento di conversazione comune tra i professionisti di User Experience (UX), ma che dire di quelli di noi che lavorano occasionalmente con UX? A molti designer e sviluppatori vengono assegnati progetti che non hanno il lusso di conservare uno specialista UX, ma sono (ovviamente) ancora attesi per produrre interfacce eleganti e intuitive.
C'è stata una discreta quantità di discussioni nella comunità di esperienza degli utenti riguardo alla necessità di wireframing nel web design in questi giorni, e ho cominciato a chiedermi "questo vale per i dispositivi mobili?" I wireframe sono solo un progetto fatturabile disponibile per far sapere al cliente stiamo "lavorando"? No, penso che sia più di questo. Il wireframing e la prototipazione della carta sono in continua evoluzione in quanto le prodezze e i gusti online degli utenti diventano più raffinati, ma questa pratica è ancora un componente molto prezioso nella progettazione mobile.
Nella mia esperienza, c'è una grande differenza nella forma e nella funzione dei wireframe rispetto ai prototipi di carta, anche se i termini possono essere usati in modo intercambiabile. Nel mio processo di progettazione mobile, la prima cosa che succede dopo aver individuato chi sta usando l'app e come, sono i prototipi di carta: NON i wireframe.
Alcuni affermano che "la carta è morta" e sottolineano i vantaggi della prototipazione digitale. Altri sostengono che la matita e la carta rafforzano il design. Personalmente, trovo layout più fluidi quando non sono di fronte al mio computer. Tuttavia, siamo tutti individui, con diverse preferenze e modi di pensare. Forse puoi essere altrettanto creativo di fronte al tuo computer; è qualcosa che ogni designer deve capire da sé!
Una cosa che amo del prototipo di carta offline è la velocità con cui è possibile iterare il design. Uso note appiccicose su schermo che possono essere rapidamente rimosse, rielaborate, ridisposte, ecc. Una volta stabilito il flusso per l'app, è il momento di inchiodare gli elementi sullo schermo in una versione wireframe.
Anche se si tratta di un'app per il proprio "client" interno, i wireframe fungono da un'altra recensione per assicurarsi che l'app funzioni in un modo che sia al servizio dell'utente e dell'azienda. È possibile saltare il processo e passare direttamente dai prototipi di carta a Photoshop per la progettazione della GUI. So che è allettante, ma non farlo! L'istante in cui inizi a lavorare in una bolla è lo stesso che cedi alla "Maledizione della conoscenza".
Nel libro Made to Stick, gli autori e fratelli Chip e Dan Heath parlano della "Maledizione della conoscenza" e del suo impatto sulla nostra capacità di creare idee nuove, "appiccicose". La premessa che si riferisce al design del mobile è che una volta che inizi a costruire la tua conoscenza del design e della tecnologia mobile, tanto più ti allontani da un "tipico utente di app". Non puoi davvero immaginare cosa significhi essere il tuo pubblico, anche se ti adatti perfettamente al profilo. La tua capacità di mettersi nei panni del pubblico diventa offuscata da tutto ciò che sai già sull'app, come funziona e cosa pensi che il pubblico desideri.
Una volta che sappiamo qualcosa, troviamo difficile immaginare come sarebbe stato non saperlo. La nostra conoscenza ci ha "maledetto". - Made to Stick
Tutto ciò significa che devi collegare e condividere questi wireframe con il pubblico di destinazione della tua app.
Ora che il wireframe e la prototipazione cartacea all'interno del contesto mobile sono stati definiti, vorrei illustrare le cinque cose principali che dovresti fare nelle tue sessioni di wireframing e prototipazione cartacea. È facile dare uno schiaffo a una serie di schizzi e chiamarlo un giorno, soprattutto se il tuo obiettivo principale non è la progettazione dell'esperienza utente.
Il mio augurio è che questi suggerimenti ti incoraggino a dedicare del tempo a riflettere sull'esperienza utente della tua app rendendola un processo semplice e graduale, ripetibile e facile da seguire!
La prima cosa da fare prima ancora di pensare di mettere nero su bianco è porsi questa domanda: qual è il compito principale della tua app? In particolare, scrivi:
(Il tuo differenziatore) (La tua soluzione) per (Il tuo pubblico).
Diamo un'occhiata ad un esempio per l'app Evernote:
"Evernote per iPhone ti consente di creare note, scattare foto e registrare memo vocali che puoi quindi accedere in qualsiasi momento dal tuo iPhone, computer o web".
La copia sul loro sito Web spiega chiaramente l'attività principale per l'app:
(Omni accessibile) (creazione e archiviazione di più tipi di file) per (utenti casuali di iPhone).
Definisci questa affermazione per la tua app e applicala in un punto in cui la vedrai spesso mentre lavori ai prototipi. Ti aiuterà a rimanere concentrato sull'unica cosa che l'app DEVE fare.
Una volta definita l'attività principale, probabilmente avrai anche pensato a chi desidera un'app che esegua questa attività! I casi d'uso sono il modo migliore per avviare il processo di prototipazione della carta. In questo articolo, parlo di come ho definito gli scenari dei casi d'uso per la nostra app Doodle Bright. Ho dato alla "mia gente" un nome, un indirizzo, un'occupazione e uno scenario specifico quando potevano usare un'app come Doodle Bright.
Ecco un esempio:
Jane sta aspettando nell'ambulatorio dei medici l'appuntamento delle 3 con il figlio di 4 anni, Chad. Ha portato l'iPad solo nel caso in cui l'attesa fosse più lunga del previsto e, naturalmente, sono rimasti bloccati nella sala d'attesa per mezz'ora prima di essere chiamati. Jane passa il tempo disegnando camion e treni con Chad mentre aspettano il suo appuntamento.
In questo scenario, Jane e Chad stanno giocando con l'app insieme, il che significa che mamma può suggerirgli come interagire con diversi elementi sullo schermo se non è sicuro del prossimo passo.
Ora diamo un'occhiata a questo esempio:
Jane è nella linea di carpool per prendere la sua figlia maggiore da scuola. Chad è sul sedile posteriore, annoiato dopo una giornata trascorsa a fare commissioni. Jane gli consegna il suo iPad con l'app Doodle Bright. Chad sa quali pulsanti premere perché sono intuitivi per un bambino di 4 anni.
In questo scenario, i controlli devono essere facilmente comprensibili per un bambino non sorvegliato. Questo altera i tipi di prototipi di carta che crei per questa app? Diamine, sì! Ora, invece di progettare per mamma e figlio, per avere un appeal più ampio, vediamo che i prototipi dovrebbero essere orientati principalmente verso il bambino.
Può essere ovvio che un'app di questo tipo richiederebbe "pensare come un bambino" ma senza questo scenario di utilizzo per eseguire il backup di tale affermazione, potresti cadere nella "modalità adulto" predefinita di pensare al design.
Nel suo articolo su "Il segreto per progettare un'interfaccia intuitiva", Susan Weinschenk parla di come abbinare il tuo design a ciò che l'utente si aspetta di vedere. Quanto meglio puoi farlo, tanto più intuitiva sarà la tua interfaccia.
Trovo spesso di avere un flusso perfetto definito per un'app, e poi trovo qualcosa che ho dimenticato. Stato lì? È aggravante, ma una cosa che ho scoperto che può far fronte a molti "lasciapassare" è pensare al di fuori dello scenario "perfetto".
Un esempio dello scenario Doodle Bright è quando Chad crea un'immagine totalmente fantastica che Jane vuole salvare e stampare, ma chiude accidentalmente l'app. Uh Oh. E adesso? Hai tenuto conto di un salvataggio automatico nei tuoi prototipi di carta? lo spero!
Come ho detto prima, ognuno è unico e creativo a modo suo. Devi trovare un metodo che ti spinga al massimo. La prototipazione della carta è uno degli esercizi più creativi nel processo di sviluppo dell'app, devi lavorare su questo nelle ore "prime", sull'ambiente, ecc..
Ci sono molti articoli là fuori con dozzine di risorse e strumenti per la creazione di wireframe. Spero che questo articolo ti abbia convinto che è un compito che puoi affrontare, anche se non sei un esperto dell'esperienza utente. Dai uno sguardo ai seguenti link e ti preghiamo di prendere nota di tutti i commenti che ho lasciato nei commenti qui sotto.
Per un grande articolo sul wireframing in generale, vai ai "Vantaggi del Wireframing" per apprendere i principi che si applicano alle app web e mobile.
Prossimo checkout una panoramica ad alto livello del processo wireframing che si trovava dietro l'app per iPad di Washington Post. Personalmente, mi piacerebbe vedere più informazioni su questo!
Altri riferimenti di nota:
Una serie di modelli di schizzo stampabili per app mobili.
Un vasto elenco di strumenti di wireframe e di prototipazione della carta.
Proprio come dice: "eccellenti risorse wireframing".
Accentsconagua