Le app Web stanno diventando sempre più diffuse su Internet. Alcuni potrebbero obiettare che sono semplicemente siti Web più complicati. Indipendentemente dalla loro definizione; cosa succede quando stai progettando grandi quantità di dati costantemente fluttuanti?
Esistono alcuni esempi di interfacce basate sui dati e tutti devono gestire molti dati diversi che cambiano continuamente. Le più comuni sono le aree di amministrazione e i dashboard analitici. I dati possono assumere molte forme; grafici, grafici, tabelle o testo. Ciascuno può essere visualizzato in una varietà di modi diversi a seconda del contesto e del significato che si sta tentando di comunicare con i dati. Una cosa da ricordare è che raramente si può essere sicuri della lunghezza o quantità di dati che devi soddisfare; quindi pensa che sia semplice iniziare?
Coerenza e prevedibilità
Uno degli aspetti più importanti della progettazione di interfacce fortemente basate sui dati è renderli coerenti. La coerenza consente agli utenti di familiarizzare con un'area di un'interfaccia e di essere in grado di utilizzare qualsiasi altra area semplicemente tramite gli schemi creati con l'area precedente. In questo modo si rende prevedibile un'interfaccia; giocare su modelli mentali esistenti e comportamenti appresi.
Per rendere coerenti le aree, è necessario comprendere il contesto più ampio dell'interfaccia e vedere quanto bene le tue idee di interfaccia iniziale possono contenere il controllo di vari dati.
Ad esempio: una tabella potrebbe non aver bisogno di essere filtrata o ordinata in una vista, ma cosa succede quando ti presenti un'altra tabella in un'area diversa? È possibile utilizzare la stessa interfaccia appena creata se è necessario filtrare la seconda tabella e sono presenti evidenziazioni che richiedono una chiave o una legenda?
La coerenza consiste nel consentire al design di adattarsi retrospettivamente, in base alla crescente conoscenza della complessità. Questo è il motivo per cui è meglio iniziare con prototipi lo-fi e testare le tue idee con casi limite (cose che non si verificano molto spesso ma che potrebbero rompere il design).
Il motivo del tavolo verrà utilizzato in altre aree che potrebbero avere funzioni extra? Se la maggior parte dei tavoli deve essere ordinata, quindi progettare con questo in mente. L'obiettivo non è quello di dover "imbullonare" qualsiasi cosa a un componente esistente in modo che si senta fuori posto. È più facile rimuovere un pulsante da una barra degli strumenti piuttosto che capire come incorporarlo senza una barra degli strumenti.
Pattern, stati e componenti resuable
Per rendere la coerenza una realtà, è necessario costruire intelligente. Se non si progetta per ogni singola vista, è possibile invece produrre una serie di regole a cui è possibile applicare qualunque vista. Una pittura per numero, se vuoi. Ciò consente al tuo cliente o altri progettisti di assemblare rapidamente nuove pagine o layout con un problema minimo.
Patterns
Un modello è un piccolo insieme di elementi che vanno insieme. Questa potrebbe essere una sezione di una barra degli strumenti, o forse un insieme di pulsanti di valutazione, e di solito è un modo di organizzare le informazioni connesse. Un'etichetta e un input sarebbero anche un pattern all'interno di un modulo.
Di seguito sono riportati alcuni gruppi di modelli dei prodotti Google:
- Ordina menu a discesa
- Navigazione sinistra e destra
- Selettore dell'intervallo di date
- Casella di controllo a discesa
I modelli provengono da prodotti diversi ma sono coerenti e quindi sono prevedibili per gli utenti. Insieme formano il componente della barra degli strumenti.
stati
I pattern possono avere diversi look visivi a seconda di una serie specifica di circostanze. Forse c'è un errore, un pulsante è disabilitato o un grafico non ha dati. Ognuno deve essere considerato. Generalmente rientrano nelle seguenti categorie (alcuni riconoscerete da diversi pseudo selettori CSS):
- Predefinito
- librarsi
- Attivo
- Messa a fuoco
- Errore
- Disabilitato
- Vuoto
componenti
Un componente è più grande e può contenere più motivi o anche più componenti. Quando si progettano siti fortemente guidati dai dati, l'obiettivo è fornire una serie di componenti flessibili costituiti da modelli riutilizzabili. Di seguito è riportato uno per http://phosho.co su schermi di piccole dimensioni:
Lavorare da un prodotto esistente
Se si sta lavorando da un prodotto esistente e sono limitati dai flussi utente esistenti (e in alcuni casi dal layout), è necessario condurre un "controllo del modello". Elenca alcuni flussi di utenti chiave e fai uno screenshot per ogni passaggio.
- Su un Mac basta premere Comando-Maiuscole-3per salvare la schermata corrente sul desktop.
- Su PC è possibile utilizzare qualcosa chiamato Recorder Problem Steps per registrare i passaggi in un file .mht. È quindi possibile salvare le immagini da quel file. C'è un ottimo tutorial qui.
Una volta completato un flusso di utenti; aggiungi gli screenshot a una cartella che descrive il flusso di utenti come "aggiungi nuovo record". Quindi stampali. Tutti. C'è qualcosa da dire per avere ogni schermo coinvolto in un flusso di utenti di fronte a voi. Puoi facilmente individuare similitudini e differenze.
L'idea di un modello di verifica è di capire quanti modelli ci sono, quanti modelli ci sono su ogni modello (e in che stato sono). Il modo migliore per farlo è appenderli al muro in una griglia e assegnare una lettera per le colonne e un numero per le righe (o qualsiasi altra cosa ti trovi a tuo agio). Questo funge da riferimento quando si annota ciascun componente.
Ad esempio potresti avere:
- Intestazione della tabella (A2)
- Corpo del tavolo (A2)
- Tabella piè di pagina (A2)
- Menu laterale - Chiuso (A1)
- Menu laterale - Apri (B1)
- Calendario (C3)
- Calendario - Disabilitato (C4)
Ciò ti consente di elencare tutti gli schemi esistenti, ma anche di riferirli in modo da poter vedere rapidamente come sono fatti. Un modo per testare se hai elencato tutti i pattern e componenti è quello di scegliere un modello e vedere se è possibile ricrearlo dall'elenco di modelli e componenti che hai appena creato. Se ti imbatti in qualcosa che non è nella lista; aggiungilo.
Lavorando da zero
Quando lavori da zero hai la libertà di creare qualsiasi pattern che ti piace ma non può essere molto più difficile in quanto non hai nulla da fare all'inizio. Come precedentemente affermato; quando progetti componenti riutilizzabili dovresti iniziare lo-fi con gli schizzi. Non devono essere straordinari, ma sono veloci e ti permettono di esplorare facilmente diverse opzioni senza essere catturati nei dettagli che capita spesso in Illustrator o Photoshop.
- Crea un flusso per un'attività che deve essere completato ed elencare il contenuto che può essere incluso nella pagina.
- Disegna alcune direzioni diverse e idee. Più sono e meglio è. Quindi puoi iniziare a vedere se ci sono sovrapposizioni con il contenuto e come potrebbe essere possibile stenderlo.
- Affina loro in wireframe e valutare se ci sono aree che hanno funzioni simili ma soluzioni dissimili. Considera come possono essere combinati per creare un'interfaccia più coerente. Quali sono gli schemi che stai usando?
- Rompilo瘩 瘩 deliberatamente 緘 緘 fai l'avvocato del diavolo e vedi cosa devi fare per rompere la tua interfaccia. Decidi se è probabile che si verifichi l'azione di rottura e se valga la pena di indirizzarsi.
Iconografia
L'iconografia è un modo di comprendere il significato dei contenuti mediante l'uso di un'immagine. Ci sono casi in cui il testo è migliore di un'icona; di solito quando il concetto è astratto e ha un prezzo basso. Non tutte le azioni richiedono un'icona.
Se temi che gli utenti non siano in grado di capire un'icona. Siete probabilmente destra. Un modo rapido per testarlo è isolare l'icona e chiedere alle persone cosa pensano che faccia. Se hanno diverse ipotesi e nessuna di esse è lontanamente lontana, potresti avere un problema. Sieda l'icona nel contesto e ripeti il processo. Se la convenienza del contesto rafforza l'uso corretto dell'icona (ad esempio, le persone possono indovinare cosa fa dalla sua posizione sull'interfaccia), probabilmente è ok. Se le persone non riescono ancora a indovinare, prendi in considerazione la possibilità di cambiare l'icona o aggiungere del testo o microcopia di accompagnamento.
Riduzione progressiva
Esiste un concetto interessante chiamato riduzione progressiva che può essere applicato nelle circostanze in cui si desidera addestrare gli utenti che un'icona insolita si riferisce a un'azione specifica. Iniziando con un'icona accompagnata da un testo (per renderlo evidente al primo utilizzo) e semplificando gradualmente l'interfaccia, più essa viene utilizzata, gli utenti iniziano ad associare l'icona a un'azione che sarebbe impossibile indovinare usando solo l'icona.
Risultati finali
Ora che hai creato dei wireframe raffinati che esprimono flussi di utenti chiave, comprendendo una massa di modelli e componenti riutilizzabili; cosa mostri al cliente?
Ci sono un certo numero di avvertenze che possono influenzare ciò che tu offri, ad esempio se stai facendo tu stesso l'HTML / CSS / JS, o se questo viene gestito da una terza parte. In entrambi i casi, per garantire la longevità del design e, ancora più importante, la coerenza con il lancio di più funzioni, è necessario un qualche tipo di riferimento o guida che chiunque possa guardare e (e persino aggiornare) che è la base per tutte le future decisioni su l'interfaccia.
Il lavandino della cucina
Il Kitchen Sink è HTML / CSS e talvolta JS che mostra tutti i diversi componenti e modelli su una singola pagina, assicurando che non si rompa nulla (design o codice saggio) quando vengono inseriti in vari ordini. Nella sua forma più semplice sono solo gli elementi HTML nativi che assicurano che le basi siano coperte.
- HTML Kitchen Sink 嚙 箭 y 嚙 瞑 aul Randell
- Pattern Primer Jere 箭 y Jeremy Keith
Kit dell'interfaccia utente
I kit di interfaccia utente sono in genere PSD statici e contengono versioni stilizzate di elementi html fondamentali. Di solito includono pulsanti, input, caselle di selezione, cursori e datepicker. Alcuni possono essere molto completi e di solito vengono consegnati quando il processo di compilazione sarà intrapreso da una terza parte. Ti impediscono di produrre un mockup di ogni schermo in ogni stato.
- Kit UI Dribbble
- Kit UI trasparente Victor 箭 y Victor Erixon
- Pulisci il kit dell'interfaccia utente Matt 箭 y Matt Gentile
- UI Light Silky 嚙 箭 y Okidoci
Guida allo stile visivo
Le guide di stile visivo vanno ben oltre i semplici riferimenti visivi a un design. Sono istruttivi e spesso includono linee guida per quando e dove modelli e componenti devono essere visualizzati e in quale stato. Sono prodotti al meglio nel codice e possono essere aggiornati con il passare del tempo.
La chiave per la coerenza e il mantenimento di tale coerenza in un prodotto in espansione e pesantemente basato sui dati sta avendo una base da cui derivano tutte le decisioni di progettazione. Avere una "copia master" e un insieme di regole facili da seguire significa che chiunque può costruire (quasi) qualsiasi cosa e adattarlo al design esistente.
Quando ti imbatti in qualcosa che non è incluso nella guida allo stile, puoi creare una soluzione al tuo problema e aggiungere elementi aggiuntivi, modelli o interi componenti ad esso con alcune istruzioni che lo rendono disponibile a tutti.
Le guide di stile sono evolutive e non sono mai finite. Quindi è necessario mantenere comunque. In caso contrario, gradualmente le persone smetteranno di usarlo man mano che diventerà obsoleto e cioè quando i prodotti iniziano a divergere.
- Twitter Bootstrap
- Google Styleguide
- Paul Robert Lloyd Styleguide
- BBC Global Experience Language
- Linee guida per l'interfaccia umana Apple
Ricordatelo hai impostato le aspettative dei tuoi clienti. Se dici che stai per consegnare prototipi di pixel perfetti, allora è quello che si aspettano.
Conclusione
Gli utenti sono focalizzati sui compiti e spesso si trovano sul "percorso più breve verso il completamento", il che significa che è necessario progettare per loro per completare il loro compito nel miglior modo possibile con il minimo sforzo.I modelli resuable accelerano questo processo consentendo agli utenti di utilizzare ciò che hanno imparato da un aspetto dell'interfaccia e applicarlo a un altro. Diventano veloci nel completare nuovi compiti perché sono più sicuri delle loro azioni.
Una parola di cautela per timore di essere travolto dall'aspetto dell'interfaccia piuttosto che dalla funzione; il modo in cui qualcosa sembra è l'ultima cosa che gli utenti si preoccupano. Quindi, prima di precipitarti in Photoshop, ricordalo prima di tutto; gli utenti si preoccupano se qualcosa lavori. Coerenza e "prevedibilità" hanno un ruolo enorme da svolgere in questo.
Letture aggiuntive
articoli
- Front End Styleguides by Anna Debenham
- Sistemi CSS di Natalie Downe
- Progettare per una gerarchia di bisogni di Steven Bradley
risorse
- Pattern Tap
- Stati vuoti
- Patternry
- Modelli di interfaccia utente
- PTTRNS
- Elements of Design Gallery