Share
Designer e sviluppatori: è un argomento vecchio come i computer. La verità è che, tuttavia, nessuno dei due può vivere senza l'altro. Un brillante design dell'interfaccia utente è privo di funzionalità senza funzionalità, come è il miglior pezzo di codice con un frontend brutto, inutilizzabile. In questo primo post su UI Nozioni di base per sviluppatori, ho intenzione di provare alcune semplici regole di base che gli sviluppatori possono seguire per assicurarsi che le loro app, modelli e prototipi siano belli come il codice stesso - e utilizzabili per l'avvio.
Pensa: la prima impressione è l'ultima impressione.
L'allineamento si riferisce alla posizione o all'orientamento di un elemento in relazione a un altro elemento oa se stesso. Quando ci riferiamo a due elementi allineati l'uno con l'altro, l'allineamento di solito si riferisce a quale lato di entrambi gli elementi è allineato. Nel contesto del testo, l'allineamento si riferisce al lato a cui il testo è ancorato in una linea retta.
Nell'immagine sopra, il secondo esempio di un semplice design di modulo mostra le etichette allineate a destra con i campi di input allineati a sinistra. Questo assicura che l'associazione tra ogni etichetta e il suo campo di input sia chiara e che l'utente non si confonda se alcune etichette sono troppo piccole mentre altre sono lunghe.
Pensa: assicurati che i campi di input non siano troppo distanti dall'etichetta più lunga. Se la variazione di larghezza è ridotta, prova ad allineare a destra le etichette e i campi di input di allineamento a sinistra.
Per il testo, è ideale utilizzare l'allineamento a sinistra quando si deside- ra lo schermo. Poiché la maggior parte dei metodi di rendering di tipo per schermo non è in grado di distribuire lo spazio in modo appropriato quando si giustifica il testo su entrambi i lati, l'allineamento a sinistra mantiene il testo leggibile e ben organizzato. È possibile, naturalmente, utilizzare l'allineamento centrale e destro in cui il design lo richiede, ma di solito sono riservati per casi speciali e pezzetti di testo più piccoli.
Lo scopo principale di qualsiasi interfaccia utente è di consentire all'utente di interfacciarsi con l'applicazione. Questo, che ci crediate o no, non sarà possibile a meno che non dite all'utente cosa deve fare e in quale ordine. Poiché non ci sarà dietro ogni utente per aiutarlo, l'interfaccia deve fornire tutti gli spunti. Ecco alcune domande da porre quando valuti se il flusso di lavoro previsto è appropriato:
Facciamo l'esempio di una selezione di categorie di ricerca su iStockPhoto. In questo caso, posso cercare tutto o selezionare una categoria specifica per limitare le mie ricerche a quel tipo di informazioni. Poiché l'atto principale è inserire un termine di ricerca e premere Cerca, questi dovrebbero essere abbastanza ovvi. Un possibile passo in mezzo è selezionare una categoria, che può essere un elenco a discesa tra (hai indovinato giusto) il campo di ricerca e il pulsante Cerca.
Un altro esempio è la finestra di dialogo entrate / uscite nell'app di cashbase. I campi sono organizzati in base al flusso di lavoro tipico che verrà utilizzato per registrare tali informazioni: immettere l'importo (che è l'elemento più importante), selezionare una categoria, aggiungere una nota se necessario e fare clic su Aggiungi. Informazioni secondarie che verranno utilizzate molto meno frequentemente - come la data che per impostazione predefinita è oggi e l'opzione per ripetere o annullare - sono disponibili, ma molto più sottili.
Gli elementi correlati in un'interfaccia dovrebbero essere raggruppati insieme. Questo potrebbe sembrare un buon senso quando lo accenno, ma non è sempre ben compreso. Il motivo per cui tutti i link di navigazione della pagina sulla maggior parte dei siti web sono disposti in un'unica barra orizzontale, è così che l'utente può identificare la relazione a prima vista e fare la scelta di interagire con loro senza alcuna confusione.
Diamo un'occhiata a questo esempio da Gmail, un'app che molti usano regolarmente. Questa è la barra degli strumenti che appare in alto quando apri una mail. Sebbene tutti questi pulsanti eseguano un'azione sul messaggio aperto, vengono ulteriormente raggruppati in base a ciò che fanno: azioni che si utilizzerebbero per sbarazzarsi del messaggio (archivio, spam, eliminazione), per modificare l'importanza del messaggio (quando utilizzando la casella di posta prioritaria), le azioni correlate all'etichetta e infine un menu a discesa con opzioni secondarie.
Un altro esempio di buon uso della prossimità è la barra delle opzioni in Zootool. La barra degli strumenti in basso è divisa in tre gruppi, ciascuno corrispondente ai tre riquadri nell'app: l'elenco dei pacchetti sulla sinistra, la finestra della posta al centro che contiene tutti i segnalibri e il riquadro dei dettagli sulla destra.
Non tutto in un'interfaccia utente, o qualsiasi layout per quella materia, ha la stessa importanza di tutto il resto. La gerarchia è la disposizione degli elementi in un modo che denota ciò che è più in alto nell'ordine, ciò che viene dopo, e così via.
Diamo un'occhiata a questo esempio qui e proviamo a identificare quale sia l'ordine di precedenza. Dal momento che tutto - titoli, etichette e testo di paragrafo - sembra lo stesso, bisogna leggere tutto per dare un senso. Se la stessa interfaccia è stata ottimizzata un po 'come in basso, l'impatto complessivo sulla leggibilità e a sua volta l'usabilità dell'interfaccia è enorme.
Come regola generale, l'intestazione della pagina deve essere più grande e più visibile sullo schermo. Questo è seguito da titoli di sezione, sottotitoli e quindi etichette più piccole. Il testo del paragrafo può essere più o meno importante a seconda del suo scopo. Inoltre, non è limitato al testo. I pulsanti di azione primari possono essere differenziati dalle azioni secondarie rendendoli più luminosi, più grandi o più elaborati. I campi di input per gli input obbligatori possono essere resi più evidenti rispetto agli altri. Potrei andare avanti, ma penso che tu abbia l'idea.
Un'altra considerazione molto importante nella progettazione delle interfacce è quella di garantire una chiara differenziazione tra gli elementi. Certo, vuoi che il testo sia leggibile sullo sfondo, ma il contrasto va oltre il semplice utilizzo di testo chiaro su uno sfondo scuro o viceversa. Intestazioni e testo di paragrafo dovrebbero essere chiaramente distinguibili. I pannelli e le barre di navigazione devono essere separati l'uno dall'altro in modo che l'utente sappia cosa è cosa. La lista continua.
Il contrasto può essere stabilito utilizzando una o più delle seguenti caratteristiche:
Questo dovrebbe essere ovvio, ma è sorprendente quanto spesso le persone scivolino su questo punto. Se il tuo sfondo è chiaro, ovviamente vuoi che il testo sia scuro per assicurarti la leggibilità. Anche se in teoria i colori complementari dovrebbero funzionare bene insieme, non è sempre così facile. Prova ad inserire un testo verde brillante su uno sfondo rosso e saprai cosa sto dicendo.
Le possibilità qui sono illimitate, quindi la mia prima raccomandazione a chiunque stia cercando di selezionare i colori è di prendere una popolare tavolozza di colori da siti come Adobe Kuler o ColourLovers. Vengono forniti, valutati e votati da utenti appassionati che di solito conoscono il colore. Tutti i principi di corrispondenza e contrasto dei colori sono generalmente curati, quindi è solo questione di decidere quale combinazione di colori funziona nel contesto dell'app.
Una nota di cautela però - sii molto cauto nell'andare in mare con il colore. Non vuoi che oscurino l'utilità e l'usabilità della tua app.
Un altro buon metodo per differenziare gli elementi, in base a gerarchia, categorizzazione o flusso visivo, consiste nell'utilizzare dimensioni diverse. Questo vale per il testo tanto quanto per immagini, sfondi ed elementi statici o interattivi. Potresti voler dare maggiore enfasi al pulsante di azione principale, ad esempio, e mantenere i pulsanti secondari relativamente meno accessibili. Oppure i prompt facoltativi possono essere più piccoli e più chiari delle etichette principali in un modulo.
L'app TeuxDeux fa un ottimo lavoro utilizzando il colore per distinguere tra passato, presente e futuro. Poiché il layout è orientato verso una settimana lavorativa, vengono utilizzate diverse dimensioni del testo per assicurarsi che i nomi dei giorni siano facili da identificare, mentre le date sono relativamente più sottili.
Poiché lo scopo principale di qualsiasi interfaccia utente è di consentire agli utenti di interagire con l'app, è fondamentale che gli studenti conoscano intuitivamente cosa fare. Come creatori dell'interfaccia, è molto facile dimenticare che non sarai lì per ogni utente a dirgli cosa fare. Gli utenti non hanno più la pazienza di leggere manuali e guide di avvio rapido prima di immergersi nell'uso di un'app. L'interfaccia è necessaria per rendere ampiamente chiaro quali parti di esso sono cliccabili, tangibili, trascinabili - in breve, interattivi.
Tutti sanno come azionare un interruttore elettrico, giusto? Viene chiamata la cosa che rende ovvio a chiunque che uno switch debba essere premuto ad un certo punto per cambiare stato affordance. Sulla superficie piana di uno schermo, desktop, mobile o altro, è possibile utilizzare diverse tecniche per consentire agli utenti di fare clic in modo intuitivo su un pulsante o digitare all'interno di un campo di input. Quando si creano collegamenti ipertestuali di testo, aggiungere una sottolineatura per il collegamento è lo standard più comunemente usato, sebbene ci siano molti altri modi creativi per farlo.
Ecco alcuni esempi:
Andando con l'esempio di passaggio, come fai a sapere se l'interruttore ha fatto quello che avrebbe dovuto fare? La luce si accende o si spegne, o in alcuni casi una luce all'interno dell'interruttore aiuta a chiarire se l'interruttore è acceso o spento.
In un'applicazione, tale feedback può essere molto evidente nei casi in cui un pulsante naviga verso un'altra pagina o apre un popup, ma per quanto riguarda le situazioni in cui tutto viene elaborato alcuni dati in background, come quando si salvano le modifiche alle impostazioni dell'utente? Una sorta di meccanismo di feedback è fondamentale per far sapere agli utenti che la loro azione ha avuto successo. Potrebbe essere semplice come un messaggio "le tue impostazioni sono state salvate", una breve notifica nella parte superiore della pagina o una rapida evidenziazione intorno all'area che è stata aggiornata.
Quando si aggiunge una nuova attività in Ricorda il latte, può essere visualizzato nell'elenco sulla stessa pagina o semplicemente essere aggiunto a un altro elenco in background (se, ad esempio, l'attività è stata assegnata a una categoria diversa). Il feedback per l'azione è quindi fornito a due livelli:
Il testo nella tua app, dal logo ai titoli, etichette e copia, è la tua principale modalità di comunicazione con gli utenti. Poiché è il modo in cui i tuoi utenti accedono alle informazioni sull'app o attraverso di esso, il modo in cui imposti il tipo può significare la differenza tra successo e fallimento. Ovviamente i titoli devono essere più grandi del testo del corpo e la stampa fine deve essere, beh, bene; ma molte altre decisioni influenzano anche il modo in cui gli utenti consumano le informazioni.
Fase uno: definisci i tuoi caratteri. Mi sorprende il fatto che molti sviluppatori semplicemente non si preoccupino di cambiare il tipo di carattere nel quale il testo viene generato. I caratteri predefiniti cambiano da OS a OS e da browser a browser, il che significa che se non si specifica esplicitamente quale font si desidera utilizzare, il testo verrà visualizzato sembra diverso in ogni combinazione di sistema operativo e browser. Inoltre, Times New Roman - che molti browser usano ancora come font predefinito - non è un buon font per la lettura sullo schermo. La mia prima raccomandazione è spesso quella di usare un font sans-serif, anche se Georgia o il nuovo font Cambria in Windows 7 hanno un bell'aspetto.
Se decidi di usare font diversi da quelli sicuri, universalmente disponibili come Arial / Helvetica, Georgia, Tahoma, ecc., Assicurati che ci sia un modo per renderli renderizzati allo stesso modo su tutte le piattaforme. Se Flash è il tuo ambiente di sviluppo preferito, inseriscili dove necessario. Per le app basate su HTML / JS, usa @ font-face nei CSS o in qualsiasi servizio di font web come Typekit o Google WebFonts. Ricorda però che queste tecniche sono accompagnate da un avvertimento di dimensioni extra per i caratteri incorporati. Se la velocità e la reattività sono fondamentali per te, attenersi ai caratteri di base è la soluzione migliore.
disconoscimento: Sì, so che Arial e Helvetica non sono esattamente simili, ma sono abbastanza simili per la maggior parte degli utenti che non notano la differenza.
La quantità di spazio tra due righe di testo è la prima. Si desidera che la parte iniziale del testo del paragrafo (altezza della linea in linguaggio CSS) corrisponda almeno al 140% delle dimensioni del carattere per assicurarsi che sia facilmente leggibile. Qualche cosa in meno e il tuo testo sarà molto più difficile da leggere e - più imporante - da esaminare.
Se hai intenzione di tradurre la tua app in una o due lingue - e dovresti davvero - è meglio testare l'interfaccia in anticipo con diversi script. Per lo meno, la quantità di spazio richiesta da un determinato messaggio può variare drasticamente tra diversi script. Gli script dell'Asia orientale usano meno parole in media ma hanno bisogno di caratteri più grandi, gli script Indiano (Indic) devono anche essere leggermente più grandi per essere leggibili e gli script mediorientali (come l'arabo) vanno da destra a sinistra invece della solita sinistra -a destra.
Questo è tutto per ora. Spero che questi suggerimenti coprano basi sufficienti per iniziare ad applicarli nei tuoi progetti subito. Come per la maggior parte delle discipline legate al design, non ci sono regole dure e veloci da seguire, e ognuno ha le proprie opinioni su come le cose dovrebbero funzionare. Quindi, se non sei d'accordo con nessuno dei miei suggerimenti sopra - o anche se sei d'accordo con loro ma hai una prospettiva diversa - ne parliamo nei commenti.
Quindi, prenderemo tutta questa saggezza e proveremo ad applicarla a un'interfaccia reale. Rimanete sintonizzati!
Accentsconagua