7 Tecniche di progettazione dell'interfaccia per semplificare e disordinare le interfacce
Cos'è la semplicità? La semplicità è la qualità di essere naturale, semplice e facile da capire. Non sorprende quindi che la semplicità sia spesso sfruttata per il design dell'interfaccia utente. La maggior parte delle persone non gradisce la complessità dei dispositivi e del software. Sì, alcune persone trovano gioia nel capire come funziona qualcosa, ma per la maggior parte di noi, l'incapacità di gestire un dispositivo porta a perdite di tempo e frustrazione, e non è una buona cosa.
Se puoi prendere un dispositivo complesso o un software e in qualche modo riorganizzare, riorganizzare e riprogettare l'interfaccia per renderla più facile da usare e comprendere, allora sei sulla buona strada per offrire un'esperienza utente migliore .
In questo articolo parlerò di 7 tecniche pratiche che puoi utilizzare nel web design per rendere i tuoi siti web o le tue applicazioni web più semplici e meno disordinati.
1. Finestre modali.
Sono sicuro che puoi ricordare i giorni prima che i blocchi pop-up venissero introdotti nei browser web, quando dovevi combattere uno sciame di finestrelle che troppo spesso decidevano di apparire sopra la finestra del browser, apparentemente con la suola scopo di infastidirti. A nessuno piacevano quelle finestre pop-up e sono state introdotte tecnologie di blocco per fermarli. Ma oggi stiamo vedendo una nuova serie di finestre pop-up sul web che sono molto più pulite e funzionano molto meglio allo scopo previsto. Queste sono finestre modali.
Le finestre modali sono come finestre popup, ma invece di apparire in una finestra separata del browser, appaiono proprio all'interno di quella corrente, sopra la parte superiore del contenuto. Le finestre modali richiedono l'interazione per procedere, quindi il contenuto sottostante di solito è oscurato per indicare ciò, oltre a bloccare il disturbo del contenuto e spostare il focus visivo sulla finestra in alto .
Allora perché dovresti usare Windows modale e come semplificano la tua interfaccia? Bene, se guardi all'alternativa, il loro scopo diventa molto più chiaro. L'alternativa all'usare qualcosa come una finestra modale di solito è caricare una nuova pagina. Ad esempio, alcuni siti hanno una pagina delle impostazioni per il tuo account. Quando fai clic sul link delle impostazioni, tieni indirizzato a una nuova pagina. Ma cosa succede se ci fossero solo alcune opzioni di impostazione - vale davvero la pena reindirizzare l'utente a una nuova pagina?
In molti casi, cose come impostazioni, caselle di modifica e moduli di accesso possono essere visualizzati in una finestra modale sul contenuto. Questo salva l'utente un viaggio di ritorno su un'altra pagina . Inoltre alleggerisce il carico sul server Web in quanto deve gestire meno richieste.
ActionMethod , un'app di gestione del progetto, visualizza finestre modali in tutta l'applicazione. Ecco il modulo Apprezzamento.
2. Controlli al passaggio del mouse.
Mettere meno cose sul piatto renderebbe il piatto più facile da ingoiare. Se la tua applicazione ha molti controlli, i tuoi utenti dovranno scansionare la maggior parte di essi per trovare quello che stanno cercando. Le probabilità sono che alcuni controlli sono meno importanti di altri e alcuni controlli sono utilizzati molto meno di altri . La cosa più semplice che puoi fare è nascondere e nascondere questi controlli dalla vista predefinita.
Un modo intelligente per farlo è quello di nascondere i controlli, ma poi mostrarli quando l'utente passa con il mouse su determinate aree. Questi sono controlli al passaggio del mouse. Ad esempio, Twitter, una popolare app di micro-blogging, mostra un feed di ciò che tutti nella tua lista di seguito hanno recentemente detto. Ogni messaggio è incapsulato nella sua piccola scatola. Ci sono due azioni che puoi eseguire su ciascun messaggio: aggiungilo ai tuoi preferiti o rispondi ad esso.
La visualizzazione dei pulsanti preferiti e di risposta su tutti i messaggi porterebbe alla confusione. Non è probabile che tu voglia rispondere a tutti i messaggi nel feed, e ancor meno probabile volerli aggiungere a tutti i tuoi preferiti. Quindi, Twitter visualizza solo i controlli nel giusto contesto - quando passi il mouse sopra il messaggio. Questo porta ad un'interfaccia più semplice e nessuna perdita di funzionalità . C'è il pericolo che i nuovi utenti non notino questi controlli quando sono nascosti; tuttavia, molte persone tendono a spostare il mouse sulle cose a cui stanno guardando, quindi, date le aree al passaggio del mouse sono abbastanza grandi, è probabile che questi controlli vengano scoperti rapidamente.
cinguettio mostra l' aggiunta ai preferiti e i pulsanti di risposta per ciascun messaggio mentre ci si passa sopra.
3. Controlli su richiesta.
Un altro modo per nascondere le cose è utilizzare Javascript e visualizzare una serie di controlli quando l'utente fa clic da qualche parte. Ad esempio, potresti avere una casella di ricerca sul tuo sito che consente alcuni filtri personalizzati o ricerche avanzate. Invece di mostrare queste opzioni per impostazione predefinita, puoi nasconderle e renderle accessibili tramite un pulsante alla fine della barra di ricerca. Cliccando su questo pulsante potrebbe rivelare il set di opzioni o filtri. Ciò significa che mantieni le funzionalità avanzate per gli utenti che ne hanno bisogno e allo stesso tempo semplifica l'interfaccia per le persone che hanno solo bisogno di utilizzare la ricerca semplice.
Non tutti utilizzano alcuni dei controlli più avanzati o specializzati sul tuo sito. Li nascondi, rendi l'interfaccia più pulita e più facile da capire perché i nuovi utenti hanno meno elementi da elaborare e capire. Scegliere cosa nascondere e cosa mantenere non è un compito facile, ed è compito del designer trovare un equilibrio adeguato.
Kontain , un'applicazione per blog, fornisce filtri di ricerca avanzati per la loro ricerca, nascosti in un menu a discesa alla fine della barra di ricerca.
4. Forme espandenti.
Sono sicuro che tu abbia familiarità con il campo di caricamento dei file che vediamo spesso nei moduli web. Di solito è una piccola barra con un pulsante di ricerca file di fianco. Immagina una situazione in cui è probabile che l'utente carichi più file contemporaneamente. È possibile visualizzare diversi campi per il caricamento di file, ma non è l'ideale, perché ingombrerà l'interfaccia e non c'è modo di dire quanti campi l'utente avrà bisogno. Un'ottima soluzione in questo caso sarebbe utilizzare una forma espandibile .
Una volta che l'utente ha caricato un file, sotto apparirà un altro campo di caricamento file, pronto ad accettare altro. È possibile implementare la stessa tecnica per qualsiasi altro campo di input. Ad esempio, forse questo modulo ha bisogno di un sacco di indirizzi e-mail per le persone che vuoi invitare in una squadra o per altri scopi. Invece di avere molti campi di testo, potresti averne uno o due, e poi quando l'utente li riempie, ne vengono creati di nuovi sotto . Espandere il modulo in questo modo è un ottimo modo per risparmiare spazio e semplificare l'interfaccia .
Gmail visualizza solo un campo allegato quando si compone un nuovo messaggio. Puoi fare clic sul link "Allega un altro file" per aprirne altri quando ne hai bisogno.
5. Etichette all'interno di moduli di input.
Le forme possono diventare complesse velocemente. Hai campi di testo, etichette, aree di testo, menu a discesa, caselle di controllo e così via e così via. Inoltre, la compilazione di moduli di solito non è molto divertente, quindi accelerare il processo e semplificare le forme li renderà meno scoraggianti e più facili da usare. Una tecnica che è possibile utilizzare per rendere le forme più semplici è spostare le etichette dall'esterno delle aree di input verso l'interno. Quindi, invece di mostrare un'etichetta accanto a quel campo di testo, mostralo come un valore pre-riempito all'interno del campo di testo .
Ciò riduce notevolmente lo spazio, riducendo la dimensione complessiva del modulo. Le cose più piccole appaiono più semplici , quindi la forma dovrebbe apparire più facile da compilare. Potrebbe non essere possibile farlo per forme più complicate in cui sono disponibili vari tipi di input (caselle di controllo, pulsanti di opzione, menu a discesa), ma se si dispone di alcuni campi di testo che vale la pena considerare, ad esempio un modulo di accesso.
Ora, c'è un aspetto negativo di questo metodo, che fortunatamente può essere affrontato con un'implementazione più completa. Quando l'utente carica per la prima volta la pagina, vedrà i campi e sarà in grado di leggere le etichette. Dopo aver fatto clic su un campo, la maggior parte di queste forme nasconderà completamente l'etichetta, consentendo all'utente di digitare il proprio input. Ma cosa succede se l'utente fa clic prematuramente su un campo e poi dimentica che cosa dovevano digitare? Potrebbe essere necessario fare clic di nuovo fuori dal modulo per ottenere l'etichetta di apparire di nuovo (si spera).
Per risolvere questo problema, invece di nascondere completamente l'etichetta, è possibile attenuarlo quando l'utente fa clic su di esso e quindi nasconderlo completamente quando l'utente inizia a digitare.
MobileMe mostra le etichette all'interno dei campi di input nella schermata di accesso e quindi le attenua ulteriormente quando selezioni un campo.
6. Icone anziché testo.
Per ottenere la massima semplicità nella progettazione dell'interfaccia, è necessario ridurre e rimuovere tutte le parti inutili o utilizzate raramente . Questi non includono solo i controlli, ma possono anche essere cose come le etichette di testo. Se la tua interfaccia ha molte etichette, guardala e chiediti: sono necessarie tutte queste etichette? La maggior parte di loro afferma semplicemente l'ovvio? Se un'etichetta indica qualcosa che è ovvio dato il contesto di quell'elemento, allora non hai bisogno di quell'etichetta - è obsoleto.
Per darti un esempio, pensa ai post di un blog. Sotto il titolo di ogni post potresti avere cose come la data e l'autore. L'aggiunta di etichette prima di ognuna come "Autore:" e "Data:" potrebbe non essere necessaria. Quando qualcuno vede un nome e una data sotto il titolo di un articolo, è molto probabile che capisca che questo è l'autore e questa è la data. Il contesto, così come il formato a cui sono abituati leggendo altri blog, offre agli utenti tutti gli indizi necessari per comprendere immediatamente il significato dietro ai dati. Staccare quelle etichette ti darà un'interfaccia più pulita .
In alcuni casi in cui lasciare fuori un'etichetta non funziona, puoi sostituire l'etichetta con un'icona. Un'icona presenta alcuni vantaggi rispetto a un'etichetta di testo. Richiede meno spazio. È più facile concentrarsi su come il suo colore e la sua forma distintiva attraggono l'occhio più facilmente del testo. In alcuni casi il significato può essere trasmesso con la stessa efficacia del testo. Ad esempio, se hai un'etichetta chiamata "Tag:" seguita da un elenco di collegamenti di tag, puoi sostituire l'etichetta con una piccola immagine di un tag. A condizione che tu abbia un pubblico esperto di tecnologia, il significato in questo caso dovrebbe rimanere altrettanto chiaro.
Ovviamente non funzionerà per tutti i casi, e se c'è il rischio di essere ambigui, dovresti giocare sul sicuro e usare un'etichetta di testo. Detto questo, non c'è motivo di scegliere l'uno o l'altro in modo esclusivo : è possibile beneficiare delle interessanti proprietà accattivanti delle icone insieme alla chiarezza del testo usandole insieme; anche se in quel caso ti scambieresti spazio.
Highrise , un'app CRM, utilizza un'icona di tag al posto di un'etichetta di testo prima di un elenco di tag.
7. Controlli basati sul contesto.
Ci sono un paio di approcci che puoi usare nel design dell'interfaccia che si riferiscono al contesto e alla coerenza. Si impone di mantenere i controlli coerenti in tutte le applicazioni o nei siti Web per garantire che le persone sappiano dove è tutto e non si confondono. L'altro approccio consiste nel modificare i controlli o la navigazione in base al contesto di ogni pagina o finestra. L'approccio basato sul contesto è quello in cui si visualizzano solo le cose di cui l'utente ha bisogno per completare l'attività su cui stanno lavorando in quel particolare contesto.
Una buona illustrazione dei due approcci può essere vista nella recente riprogettazione dell'interfaccia di Microsoft Office. Office 2003, così come i suoi fratelli più grandi, hanno seguito il principio di progettazione di mantenere le cose coerenti. Hai avuto un sacco di barre degli strumenti visualizzate sullo schermo in ogni momento, e queste non cambiano se stavi lavorando con tabelle, grafici, testo o immagini. Microsoft ha ridisegnato questa interfaccia per Office 2007 utilizzando un approccio basato sul contesto. Nella parte superiore ora vedi un nastro o una serie di schede. Se selezionata, questa scheda visualizza una serie di controlli relativi a qualsiasi attività specifica , che si tratti di correzione di bozze, di lavoro con la grafica o semplicemente di scrittura.
L'approccio basato sul contesto consente di mostrare meno controlli in un dato momento, ma allo stesso tempo, più controlli rilevanti per l'attività in corso . Non consiglierei di utilizzare un approccio contestualizzato per il web design generale perché per la maggior parte dei siti Web le persone si aspettano di vedere una navigazione coerente a livello di sito. Questo perché ogni sito Web è diverso e renderebbe l'esperienza di navigazione molto più difficile se anche tutte le singole pagine di un determinato sito fossero diverse.
Detto questo, questo può essere utilizzato per le applicazioni web perché non sono solo semplici siti Web: sono pezzi di software che vivono nel cloud. È probabile che le persone trascorrano molto tempo su un'app Web e avranno più opportunità di imparare come funziona . La complessità di alcune applicazioni web significa che è davvero necessario utilizzare l'approccio basato sul contesto, perché se non lo fai, ci sarà troppo sullo schermo in un dato momento per chiunque per elaborare. Mostrando solo alcuni controlli rilevanti per una data attività, i tuoi utenti possono capire cosa fare in molto meno tempo.
Lentiggine , un'app di monitoraggio del tempo, ha uno switcher nella parte superiore della barra degli strumenti principale. Passa tra i controlli di input del tempo e i controlli del report, mostrando solo un set alla volta. Questo ha senso perché stai inserendo il tempo o facendo un rapporto - non due cose allo stesso tempo.
Concludere…
"Il modo più semplice per raggiungere la semplicità è attraverso una riduzione ponderata" - John Maeda, Le leggi della semplicità .
Rendere la tua interfaccia più piccola, nascondere funzionalità avanzate ed eliminare l'ovvio è il percorso verso un'interfaccia più semplice . Lungo questo percorso dovrai affrontare molti ostacoli. Per ogni funzione che nascondi o porti via, ci saranno persone che si lamentano e ti chiedono di riportarlo indietro. Ma ognuno dei tuoi utenti ha esigenze diverse e usa la tua app o il tuo sito web in un modo diverso. Se si ascoltano tutte le richieste e le esigenze di funzionalità, e si arriva al punto di indirizzarle e implementarle tutte, è improbabile che si arrivi allo zenit del design del software. Più probabilmente, ti imbatterai in una profonda voragine di gonfiore da cui è quasi impossibile uscire.
Una volta aggiunta una funzione, è molto difficile eliminarla perché le persone inizieranno ad usarla e alcune dipenderanno da essa. Per questo motivo , assicurarsi che ogni funzionalità e ogni elemento dell'interfaccia che si aggiunge abbia un senso e aggiunga un valore reale al prodotto . Più funzionalità significa più controlli e contenuti. Più controlli e contenuti rendono più difficile rendere l'interfaccia semplice e disordinata.
La semplicità consiste nel ridurre e riorganizzare il complesso in modo piccolo e gestibile. Se mai, dovresti mirare a togliere, piuttosto che a aggiungere. Un prodotto con un minor numero di pulsanti non è necessariamente meno potente, ma è probabilmente progettato meglio .
Scritto esclusivamente per WDD da Dmitry Fadeyev. Gestisce un blog sull'usabilità chiamato Post di usabilità .
Usi qualcuna di queste tecniche nei tuoi progetti? Pensi che aiutino l'esperienza dell'utente? Per favore condividi le tue esperienze con noi.