Pensa meno. Progettare meglio.

Promuovere un migliore flusso di lavoro nella progettazione dell'interfaccia utente attraverso processi decisionali e di pensiero gestibili.

Un'interfaccia utente ben progettata è il risultato di una serie di decisioni chiave che non solo rendono un'esperienza intuitiva, ma anche esteticamente piacevole per un utente. Rendendo più snello il processo decisionale, può consentire un flusso di lavoro più semplice e maggiori possibilità di produrre il risultato ottimale.

Più possibilità sono disponibili nel processo di progettazione, più pensiero è necessario per eseguire e finezza.

Lo psicologo americano Barry Schwartz ha scritto in The Paradox Of Choice che eliminare le scelte può ridurre notevolmente l'ansia. Ha sostenuto che dovremmo avere standard e criteri, ma non preoccuparti della possibilità che ci possa essere qualcosa di meglio. Era nel contesto dei consumatori, ma credo che si applichi anche alle decisioni di progettazione.

La strategia di massimizzazione è in realtà quella di non essere un perfezionista, ma di rendere disponibili le decisioni più favorevoli che creano collettivamente l'esperienza ottimale.

1. Limitare le variabili

Se consideriamo tutte le potenziali variabili per produrre un concetto di alta fedeltà, e ce ne possono essere molte, diventa chiaro che dobbiamo limitarle e definirle presto. Ridurre la quantità di scelte disponibili renderà più facile essere decisivi.

Con l'esperienza, diventa più facile prevedere come la limitazione di determinati gruppi di variabili abbia un effetto moltiplicatore in una composizione.

La riduzione delle scelte non è correlata alla riduzione dell'originalità. La nostra ipotesi è che la creazione di concetti attorno a regole predefinite sia una limitazione, ma come designer possiamo stabilire le nostre regole ed avere il controllo completo sulla loro formulazione.

Scala e spaziatura

Ogni aspetto della progettazione dell'interfaccia utente dovrebbe ruotare attorno a un sistema che promuove il ritmo e aiuta a mantenere la coerenza in scala e spazio man mano che il progetto cresce. Uno di questi sistemi che amo usare è la scala modulare, che può facilitare una scala da qualsiasi rapporto dato per misurare o impostare la dimensione di un elemento o spazio negativo in una composizione.

Una volta scelto un rapporto, la scala modulare può semplificare la definizione di scala e spaziatura

Mentre può ridurre le variabili su griglie, tipografia, spaziatura verticale e dimensioni complessive di un layout fino a un livello gestibile, fornisce anche piacevole estetica e ritmo. La progettazione dell'interfaccia utente è molto più semplice.

griglie

I sistemi a griglia sono ottimi per limitare l'organizzazione del contenuto all'interno del piano orizzontale e un gioco da ragazzi quando si tratta di UI. Tuttavia, una griglia viene spesso scelta senza pensarci troppo, per essere una taglia unica. Ciò che la maggior parte dei progettisti non capisce è che è meglio creare un sistema a griglia costruito attorno al contenuto.

Un sistema a griglia ridurrà le variabili nel layout

Ciò significa idealmente avere una chiara comprensione degli scenari di contenuto in anticipo in modo che dipinga un'immagine di come servire meglio il contenuto da una particolare griglia. Pensa ai vincoli aziendali con risorse preesistenti e guide del marchio, come un logo con regole e requisiti di spaziatura specifici, o forse annunci con unità fisse specifiche.

Anche il tipo di contenuto è un fattore. C'è una grande differenza tra l'ideazione di un layout per un negozio, la pubblicazione di notizie o un blog o una semplice splash page. Un layout che è pesante per l'immagine e pesante per la parola. Potrebbe essere utile comprendere i modelli di scansione oculare e come hanno un impatto sulla gerarchia visiva.

Maggiore è la comprensione delle restrizioni aziendali e dei contenuti in anticipo, più facile sarà scegliere un sistema a griglia e prendere decisioni in merito al layout.

Tipografia

Direi che la tipografia è l'aspetto più importante della progettazione dell'interfaccia utente, in quanto può costituire fino al 95% del web ed essere la forza trainante della comunicazione.

Mentre sistemi come la scala modulare possono essere applicati a dimensioni e dimensioni iniziali, anche le famiglie e gli stili dei caratteri possono essere limitati. Un'interfaccia utente non dovrebbe mai aver bisogno di superare due famiglie e un paio di pesi. Le regole possono anche essere estese alla gestione della giustificazione e del caso del titolo.

Colore

È facile diventare troppo zelanti con le tavolozze. Una piccola gamma di toni può fare molto per produrre elementi visivi sufficienti e coerenti. Di solito tutto ciò di cui abbiamo bisogno per iniziare è cinque campioni.

Strumenti come Adobe Color CC semplificano la predefinizione di una tavolozza

La maggior parte dei marchi dovrebbe includere un colore primario o accentato e alcuni toni neutri o contrastanti per completarlo. Non abbiamo bisogno di 15 tonalità di un tono, soprattutto all'inizio. È meglio iniziare in piccolo e aumentare una o due tonalità più tardi.

immagini

Il modo in cui incorporiamo le immagini nell'interfaccia utente è in gran parte determinato dal contesto del contenuto. Se abbiamo un'idea approssimativa di ciò che è, possiamo creare un punto di partenza per le nostre immagini con variabili per rapporto, dimensione, forma e trattamento. Potremmo scoprire di non averne bisogno così tanti.

La limitazione delle variabili di immagine imporrà una migliore coerenza e faciliterà la gestione delle risorse di immagine nel lungo periodo. Lo stesso vale per l'iconografia.

Quante variazioni nel rapporto e nella dimensione delle immagini sono effettivamente necessarie?

2. Creazione di una guida di stile in precedenza

Man mano che un progetto di interfaccia utente cresce concettualmente, diventa sempre più importante creare e mantenere una guida di stile o libreria di modelli. Ciò stabilirà principi di progettazione per aiutare la scala del progetto, mantenendo il ritmo e la coerenza. Se stiamo prima definendo le variabili, è un buon modo per documentarle. Il futuro processo decisionale sarà più facile con una guida di stile che senza.

A seconda del progetto, la creazione di una guida di stile è un lusso e abbastanza spesso destinata a riferimento futuro. Ecco perché la maggior parte delle guide di stile vengono messe insieme all'ultimo minuto o dopo il completamento del progetto, e questa è ancora una buona pratica. Ma sebbene ci sia molta post-razionalizzazione e ragionamento per una guida di stile per aiutare la progettazione e lo sviluppo futuri, può effettivamente aiutare a costruire fedeltà nelle prime fasi della concettualizzazione.

La creazione di una guida di stile di base all'inizio non solo stabilirà presto i principi per ridurre le decisioni di progettazione, ma aiuterà anche come infrastruttura per evolversi e aumentare i principi in futuro.

Realizzarne uno all'inizio non significa che debba essere completo, tutt'altro. Gli stili tendono comunque ad evolversi maggiormente nelle prime fasi e più un progetto diventa grande, più i confini diventano più chiari e stretti.

3. Priorità e adattamento modulari

Nei sistemi di progettazione a base modulare, come Atomic Design di Brad Frost, un layout può essere formulato su aree chiave specifiche. I moduli diventano riutilizzabili in vari layout. Le interfacce sono trattate come sistemi e non come pagine, con la progettazione e lo sviluppo basati su modelli che rappresentano una parte importante del processo.

Questa è un'ottima metodologia e rende la progettazione dell'interfaccia utente molto più gestibile, ma per renderla più efficace dobbiamo dare la priorità alle aree chiave e adattare tutto il resto. Questo a sua volta garantirà coerenza visiva.

Identificare le aree chiave

Il nostro design dovrebbe ruotare attorno alle parti importanti. La priorità di ogni area è determinata dal suo contenuto o funzionalità all'interno dell'interfaccia ed è essenzialmente la chiave del puzzle.

Concentrandoci innanzitutto sulle aree importanti, stiamo riducendo le decisioni di progettazione da allora in poi poiché le aree successive devono piegarsi e adattarsi all'ambiente stabilito.

Focus su settori chiave

Una volta identificate le aree ad alta priorità, si tratta di concentrarsi al massimo sulle parti critiche e di completarle fino al completamento. L'idea è garantire che siano intuitivi e soddisfino tutti i requisiti prima di adattare le aree meno importanti.

4. Fallo funzionare per tutti

Per migliaia di anni i progettisti hanno cercato di fare una cosa: comunicare in modo efficace. Stiamo continuamente reinventando e perfezionando i modi per comunicare meglio visivamente e udibilmente a un pubblico.

Con un accesso sempre crescente alle informazioni da parte del pubblico più vasto possibile, è diventato imperativo massimizzare l'accessibilità al maggior numero possibile di persone.

L'accessibilità è una benedizione sotto mentite spoglie

Il catering per un pubblico più vasto sembra più lavoro ed è allettante vedere l'accessibilità come una barriera all'innovazione. Tuttavia, il rispetto degli standard più recenti può essere una benedizione sotto mentite spoglie, soprattutto se diventano una seconda natura.

Esempi di questo in termini di progettazione potrebbero includere la necessità di richiedere una dimensione minima del carattere sulla copia del corpo, o una notevole quantità di contrasto tra copia e sfondo, o aree collegabili più grandi sui dispositivi touch.

Non si tratta solo di disabilità

L'accessibilità non si limita a soddisfare le disabilità come alcuni suggerirebbero, ma anche agli utenti con dispositivi e browser legacy che non supportano tutte le funzionalità e i miglioramenti più recenti. Essere consapevoli di questi standard e osservarli ridurrà naturalmente le decisioni di progettazione.

5. Utilizzo di modelli provati e testati

Il fatto è che gli utenti trovano interfacce intuitive quando si conformano alle centinaia di modelli di design comuni che hanno assorbito da anni di pratica ed esposizione. Non appena iniziamo a staccarci dagli stampi tipici e calpestare nuovi terreni, potremmo scoprire che ci vuole tempo perché un nuovo modello diventi completamente intuitivo per le masse.

C'è un tempo e un posto per creare modelli di interfaccia utente originali, ma non dovremmo rifuggire dalle tecniche comuni: hanno successo per un motivo.

Il rivestimento d'argento è per noi di preoccuparci di meno di reinventare e concentrarci sull'estetica. È ancora possibile creare lavori originali basati su schemi stabiliti.

Più conosciamo e integriamo modelli di design di successo, meno scelte dobbiamo fare come designer. Non stiamo necessariamente considerando cosa potrebbe funzionare, ma cosa funzionerà.

Nota finale

Alcuni di questi approcci potrebbero non ridurre individualmente il nostro modo di pensare e di prendere decisioni, o migliorare i nostri progetti con un margine enorme. Tuttavia, integrarli insieme e ottenere un buon feedback lungo la strada, può semplificare notevolmente la progettazione di un'interfaccia utente migliore.

Seguimi su Twitter