Share
Oggi chattiamo con due designer di interfacce utente mobili su come progettano interfacce mobili di successo e soluzioni di navigazione intuitive. Impareremo come funziona Sacha Greif con lo spazio limitato dell'iPad usando UI Elements per il risparmio di spazio. Eryk Pastwa discute come progettare per più dimensioni mobili e come testare correttamente i progetti per il massimo utilizzo nel mondo reale. Dai un'occhiata ai loro flussi di lavoro e alle migliori pratiche che entrambi hanno messo in atto nei loro progetti.
Questo post è il terzo giorno della nostra sessione di design dell'interfaccia. Sessioni creative "Session Day 2Session Day 4"La navigazione è particolarmente importante per le interfacce mobili a causa dello spazio limitato e delle interazioni limitate. Le persone non possono aprire la tua app in più schede, utilizzare scorciatoie da tastiera o creare macro, quindi è fondamentale accedere facilmente a tutte le parti della tua app.
Gli schizzi (mostrati qui per l'app LePost per iPhone) consentono di scorrere rapidamente diverse idee.
Per l'app di Le Monde, la navigazione era una delle maggiori preoccupazioni. Come mantieni la struttura lineare di un quotidiano, ma offri un accesso rapido a qualsiasi singola pagina o articolo? E come approfittare dello splendido layout di un giornale, pur offrendo la massima leggibilità su una superficie fisica più piccola?
Strumenti come Omnigraffle possono aiutarti a pianificare l'architettura generale dell'app.
In primo luogo, sapevamo di voler fornire due modalità di navigazione: una modalità "fisica" che consentisse di esplorare il layout effettivo del quotidiano e una modalità "testo" che contenga solo il contenuto dell'articolo. La sfida era semplificare il passaggio da una modalità all'altra.
La nostra soluzione era creare una relazione spaziale tra ciascuna modalità.
La nostra soluzione era creare una relazione spaziale tra ciascuna modalità. Ad esempio, nell'app per iPhone esiste ogni modalità sulle tracce parallele superiore e inferiore, e il passaggio da uno all'altro attiva un'animazione verticale scorrevole. Ciò garantisce che il modello mentale dell'utente corrisponda all'architettura dell'app. Se lasci le sezioni della tua app come una serie di schermi disgiunti, diventa molto più difficile per l'utente avere un'idea di dove si trova. Questo è il motivo per cui le transizioni delle diapositive orizzontali sono così frequenti su iPhone.
Un grande vantaggio dei giornali e dei libri fisici rispetto alle loro controparti digitali è che puoi aprirli in qualsiasi pagina desideri. Puoi iniziare dalla prima pagina, ma se preferisci leggere prima la sezione sportiva, non c'è niente che ti fermi. Volevamo ricreare quella stessa libertà con un'interfaccia mobile, quindi abbiamo esplorato più opzioni. Innanzitutto, abbiamo aggiunto un sommario accessibile in qualsiasi punto dell'app. È un modo molto veloce per passare a un articolo o una sezione specifica del giornale, ma sapevamo che non era abbastanza. Non volevamo ridurre l'intero giornale a una lista di articoli asciutti.
Lo scrubber pop-over
Così, per l'app per iPad, abbiamo anche utilizzato il nuovo elemento UI pop-over di Apple in combinazione con uno scrubber per visualizzare un'anteprima della pagina quando si "sfrega" l'impaginazione del giornale. E per fare in modo che il giornale fisico non fosse mai troppo lontano, abbiamo aggiunto un navigatore pop-over alla modalità testo. Questo pop-over contiene una versione in miniatura di ogni pagina, che ti consente di toccare un articolo per accedervi senza mai uscire dalla modalità corrente.
La vista divisa
La chiave qui è di toglierle tutte, a patto che siano ancora individuabili.
Infine, abbiamo anche approfittato di un'altra innovazione dell'interfaccia utente Apple, la visualizzazione divisa. In modalità orizzontale, puoi utilizzare il pannello di sinistra per navigare nel sommario mentre leggi nel pannello di destra. Con così tante diverse modalità di navigazione, c'è il rischio che la tua app diventi gonfia e inutilizzabile. La chiave qui è di toglierle tutte, a patto che siano ancora individuabili. Una buona tecnica per raggiungere questo è il sovraccarico di elementi esistenti.
Ad esempio, nei lettori video come YouTube, la linea temporale indica la tua posizione ma agisce anche come scrubber che ti consente di controllarla. Contrastalo con i pulsanti di riavvolgimento e avanzamento rapido, che ti consentono di spostarti nel video ma non ti danno alcuna informazione sulla tua posizione. Se applichi questo principio, quando l'utente è pronto scopriranno naturalmente la funzione che era stata nascosta in bella vista per tutto il tempo, e la transizione tra il nuovo arrivato e l'utente esperto avverrà senza problemi.
Sacha è un designer di interfacce utente e web di 25 anni della Francia, che ha vissuto anche in Cina, Svizzera e Stati Uniti. Visualizza il portfolio, il blog di Sacha o segui @SachaGreif su Twitter.
Il mobile è attualmente uno dei settori in più rapida crescita. Tutti vedono quanto è cambiato nel nostro ambiente quotidiano dopo il rilascio del primo iPhone nel 2007. Qualcuno ha mai pubblicato qualcosa sul Web tramite dispositivi mobili? Questi sono ovviamente cliché, ma mostrano quanto rapidamente le cose stanno cambiando.
Torniamo al 2010. La prima metà dell'anno ha portato l'iPad, il nuovo iPhone con iOS 4, la nuovissima piattaforma Samsung: Bada, una nuova versione del sistema Android e un sacco di nuovi dispositivi per un periodo di sei mesi. Mostra il punto chiave di tutto il design mobile connesso: diversità semplicemente travolgente. Ecco perché amiamo tanto il cellulare.
Quindi ogni progetto deve iniziare con questa domanda fondamentale: per quale dispositivo / i stiamo progettando?
In generale, sul mercato ci sono circa sei sistemi principali, su cui lavorano diversi dispositivi, e per i quali attualmente progettiamo e sviluppiamo. Ognuno di loro può lavorare con metodi di input molto diversi e seguire le altre linee guida dell'interfaccia utente. Quindi ogni progetto deve iniziare con questa domanda fondamentale: per quale dispositivo / i stiamo progettando?
È il primo punto che determina tutto il resto, imposta la gamma di possibilità e tecnologie che possiamo scegliere in seguito e ci mostra i nostri limiti. A prima vista sembra semplice e semplice, ma può facilmente diventare molto difficile, quando devi progettare un'applicazione progettata per molti dispositivi diversi. Cosa è importante allora? Offrire agli utenti un'esperienza più simile indipendentemente dal sistema o, al contrario, sfruttare i dispositivi più avanzati e le loro tecnologie?
La prossima cosa che teniamo in considerazione all'inizio è il numero di risoluzioni che l'applicazione deve supportare. Parlare di risoluzione sembra di recente un po 'sorpassato quando la maggioranza pensa "solo" all'iPhone. Ma tutto torna agli standard mobili: ora pensando a iOS devi pensare alle risoluzioni 320x480, 640x960 e 1024x768. Non è un grosso problema quando paragoni a JAVA ME - se la tua applicazione deve funzionare lì, dovresti supportare almeno venti diverse risoluzioni dello schermo e ancora più dimensioni fisiche!
L'applicazione per Allegro doveva essere distribuita tramite dispositivi bluetooth (bluAir) durante l'evento annuale della compagnia. Abbiamo dovuto raggiungere la maggior parte di tutti i dispositivi presenti nel mercato polacco in quel momento. Abbiamo scelto anche JAVA ME come framework multipiattaforma, ma allo stesso tempo abbiamo dovuto supportare ventuno diverse risoluzioni dello schermo.
Secondo me, provare a pensare dal punto di vista dell'utente è una regola di base, valida per ogni processo di progettazione dell'interfaccia utente e in generale per ogni progetto commerciale, poiché l'obiettivo è semplice: gli utenti devono apprezzare il tuo design. Devi definire qual è il tuo gruppo target, chi utilizzerà la tua applicazione, cosa contiene i contenuti che servi? Le risposte a queste domande possono aiutarti a determinare in che modo puoi migliorare il concetto iniziale e cosa fare per aiutare gli utenti a trovare facilmente il contenuto desiderato o ad eseguire le attività esatte.
Schema colori applicazione Allegro.
L'applicazione Allegro era un programma abbastanza esteso. Conteneva molte informazioni raggruppate in diverse categorie che guidavano gli utenti attraverso un evento.
Conoscere i tuoi utenti aiuta anche a determinare i limiti. È chiaro che ad esempio, gli utenti più giovani imparano più velocemente e sono più aperti alle notizie curiose. Con questo mercato puoi considerare sistemi di navigazione meno comuni o abbastanza innovativi. Ma per le applicazioni bancarie sarei piuttosto prudente e proverò a pensare agli utenti di mezza età con problemi di vista, in quanto questi difetti sono molto comuni nelle popolazioni moderne di quel gruppo di età.
Diventa chiaro che l'architettura delle informazioni nei dispositivi mobili conta ancora di più di come appaiono le cose.
Dopo aver stabilito i requisiti e le limitazioni, disegniamo i primi prototipi. Impostiamo il flusso dell'applicazione e lavoriamo sul layout degli elementi di navigazione. Quindi, in pratica, creiamo uno scheletro, in seguito andremo a dare una skin. È la fase in cui l'applicazione può diventare utilizzabile e intuitiva o meno. La regola di base qui è di mantenere l'intera interfaccia il più semplice possibile. Le GUI mobili devono essere davvero semplici.
Mettiamo alla prova le nostre idee disegnate su fogli di carta e / o semplici wireframe sui dispositivi e proviamo a immaginare il loro "contesto mobile". Quando l'applicazione è abbastanza complessa, creiamo semplici prototipi HTML, che ci danno l'esperienza che può essere molto simile ai prodotti finali.
Iniziamo anche a pensare all'estetica visiva, ma per essere onesti, penso che anche l'applicazione dall'aspetto eccezionale fallirà se la navigazione non è semplice. Ovviamente la progettazione visiva può modificare l'impressione generale di un'applicazione, ma soprattutto in un caso di app di utilità, gli utenti si immergono più a fondo in esse molto velocemente. Diventa chiaro che l'architettura delle informazioni nei dispositivi mobili conta ancora di più di come appaiono le cose.
Navigazione per applicazioni Allegro.
L'applicazione Allegro è stata navigata con pad diretto o tasti di scelta sinistro / destro. Poiché aveva una navigazione gerarchica, abbiamo deciso di utilizzare i breadcrumb che mostravano la posizione corrente in una forma di icone semplici.
La grafica è sicuramente la nostra parte preferita dell'intero processo di sviluppo. Ovviamente il visual design aiuta a costruire una buona prima impressione, ma ci piace soprattutto perché amiamo quando i nostri prodotti sembrano grandiosi. La grafica mobile è una disciplina molto giovane, quindi in realtà stiamo ancora esplorando le sue possibilità. Se lavori con un team di sviluppatori esperti, quasi nulla è impossibile, anche su piattaforme di sviluppo più ostili.
Abbiamo scelto i font Pixel, perché erano leggibili su display sia piccoli che grandi.
La regola più importante qui è testare i progetti su dispositivi reali. C'è una grande differenza tra il display "desktop" e lo schermo mobile, e queste differenze aumentano ancora. E non si tratta solo delle differenze di densità dei pixel, ma anche dei cambiamenti di colore. Persino alcuni dei moderni smartphone non supportano ancora 16 milioni di colori, quindi quando progettiamo per tali dispositivi, siamo sempre consapevoli delle sfumature blu.
Lavorare con le dimensioni del display.
Prendiamo i telefoni e proviamo a guardare i nostri disegni a casa, al pub vicino e sulla strada in tutte le condizioni atmosferiche, specialmente quando c'è molto sole o nuvoloso. Questi sono i luoghi in cui vengono utilizzate le applicazioni mobili. Scopriamo quindi dove regolare il contrasto, cambiare la dimensione del carattere o ingrandire i pulsanti. Questa regola è valida non importa se stai progettando un'applicazione di utilità o solo un semplice gioco. Testiamo sempre in questa fase, perché in seguito durante la codifica a volte è molto difficile riorganizzare le cose. Quindi vai avanti e testalo!
Eryk è un designer di grande esperienza dalla Polonia. Il suo lavoro si concentra sulla progettazione di servizi web e mobili. Sviluppa interfacce utente intuitive e chiare per applicazioni sia piccole che grandi. Visita il portfolio di Eryk, dai un'occhiata all'ottimo lavoro di Mobo Studio e segui @mobostudio su Twitter.
Accentsconagua