Un framework di progettazione visiva di base

Il Visual Design come set di competenze ha attraversato molte fasi. Per chi è nuovo nel settore, è il manufatto che ha coinvolto molti di noi nel ruolo. Per i designer esperti, è l'espressione fisica del lavoro attento del prodotto. Mentre la sua importanza è controversa, gli aspetti non si escludono a vicenda. Visual Design è complesso. Dovrebbe essere compreso per ampiezza, complessità e flessibilità.

Hai bisogno di un buon occhio per il design visivo.

Il design visivo è unito al concetto di gusto: la capacità di "conoscere" ciò che è buono o no. È un tratto che segue la maggior parte dei designer alle feste di famiglia quando devono decorare il salotto di qualcuno o scattare foto di famiglia.

Il gusto è comunemente pensato come una disposizione, un talento. Le buone capacità visive, di conseguenza, si trovano a cavallo di questa linea, essendo il risultato di "avere un buon occhio" o anni di pratica.

Discutere se il talento è reale o no è una conversazione più ampia da avere. Tuttavia, ciò che è vero è che parti del toolkit di visual design possono essere oggettive. Questa struttura mira a classificare questi aspetti in tre dimensioni, in modo da poter migliorare le nostre braci visive e creare un linguaggio per parlarne meglio.

Quindi, come possiamo ridefinire il visual design?

Un buon design trasmette esattamente ciò che il designer intendeva. Per avvicinarci a una migliore progettazione visiva, diamo un'occhiata a come critichiamo il lavoro visivo. Non chiediamo "sembra buono?". Confrontiamo l'interpretazione di un'interfaccia dell'utente con ciò che era previsto. Chiediamo in che modo il lavoro si collega ai risultati più importanti per il prodotto e i suoi utenti. Diciamo che le interfacce sembrano affollate o non familiari.

Possiamo riassumere che il visual design procede come segue:

  1. Comunica e organizza informazioni importanti e complesse.
  2. Incoraggia i comportamenti previsti e svaluta gli altri.
  3. Mantiene leggibilità e familiarità.

Pertanto, possiamo associare questi obiettivi a tre domande che possiamo porre durante la valutazione del lavoro visivo.

  1. È utile? Il design fornisce valore o utilità all'utente?
  2. È chiaro? Il design incoraggia un comportamento previsto? Segue una narrazione che ha senso.
  3. È piacevole? Il lavoro visivo sembra nativo del prodotto in cui sta lavorando? Gli elementi sono familiari? Ti sembra lucido?

1. è utile?

I prodotti utilizzano rappresentazioni visive per trasmettere informazioni o funzioni. Il gancio di una maniglia della porta consente di tirare o tirare. Le sporgenze sul vano batteria di un telecomando offrono una resistenza.

Anche le interfacce digitali hanno dei vantaggi. In effetti, abbiamo iniziato con simili vantaggi fisici, usando ombre dure e lucentezza su pulsanti e iconografia simili agli oggetti fisici. Nel tempo, gli smussi sono scomparsi e i pulsanti sono diventati piatti. Si sono evoluti in una nuova famiglia di convenienze che differiva nell'aspetto, ma presentava un'utilità simile.

La progettazione per le mappe delle utilità funziona nel modulo. Innanzitutto esaminiamo l'euristica che migliora la velocità con cui ricordiamo cosa farà qualcosa semplicemente guardandolo.

In questo esempio, ecco le convenzioni comuni nelle interfacce utente digitali. Il testo trasmette informazioni sui materiali di consumo. I pulsanti trasmettono le azioni intraprese dagli utenti. La navigazione indica come gli utenti possono spostarsi attraverso un'app. Infine, puoi anche avere delle possibilità per espressioni visive complesse. Un attore è una rappresentazione di una persona, che è comune tra i prodotti che usiamo ogni giorno.

Mentre le convenienze migliorano il modo in cui estrai le aspettative, ti portano solo parzialmente. A livello granulare, ci sono dettagli che articolano meglio la tua interfaccia.

  • Se un pulsante esegue una funzione specifica, è necessario selezionare la lingua che meglio descrive l'azione.
  • Se un'etichetta di testo ha uno stato univoco (ad esempio un messaggio non letto), è possibile utilizzare il colore o lo spessore per differenziarlo.
In questo esempio, Aggiungi al carrello e Acquista ora consentono agli utenti di passare attraverso una pipeline di acquisti. Tuttavia, la lingua implica due risultati diversi. Aggiungi al carrello consente agli utenti di prendere decisioni in seguito e acquistare più articoli contemporaneamente come in un negozio di abbigliamento. Acquista ora consente agli utenti di finalizzare un acquisto come quando acquisti un biglietto aereo.

2. È chiaro?

Barra degli strumenti di Microsoft Word 2010

10 anni fa, strumenti come Microsoft Word e Adobe Photoshop offrivano buoni vantaggi nei loro prodotti. Avevano pulsanti, etichette e iconografia evidenti. Hanno adattato diversi casi d'uso con varie funzionalità. Tuttavia, alcune funzionalità sono state poco utilizzate, ma altre sono state utilizzate continuamente.

I progetti visivi, ora, sono riduttivi e supponente. Consentono alle persone problemi e obiettivi aziendali di potenziare azioni e informazioni specifiche. Associano i componenti a modelli mentali intuitivi, ma incoraggiano anche modelli mentali che sono vantaggiosi per il prodotto.

Al suo centro, la chiarezza intreccia le convenienze in una narrazione. Le narrazioni ti consentono di comprendere più chiaramente un flusso di un'interfaccia e l'intento del prodotto. Alcuni dei più comuni sono tratti dalla psicologia della Gestalt.

  1. Prominenza: usa trattamenti visivi più forti per far sentire i componenti più importanti e trattamenti più leggeri per quelli che sono meno.
  2. Prossimità: avvicina i contenuti correlati.
  3. Somiglianza: mantenere le somiglianze tra i componenti che hanno un comportamento simile.
  4. Chiusura: racchiudere i componenti correlati.
  5. Continuità: posizionare il contenuto in modo lineare (ad es. In un feed) per mostrare la somiglianza tra diversi componenti.
Questo è un esempio di Prominence. Prende il componente di base di un pulsante, ma quindi utilizza un riempimento di sfondo pesante rispetto a un contorno chiaro. Entrambi, attira l'attenzione su ciò che un utente probabilmente farebbe e su ciò che il prodotto vuole che l'utente faccia: completare una transazione.

3. È piacevole?

Componenti utili che sono raggruppati in modo chiaro trasmettono funzione e un'opinione su ciò che un utente dovrebbe fare. Il nostro cervello elabora tali informazioni in ogni caso. Recupera esempi simili dalle interfacce passate e cerchiamo schemi e quelli che li rompono, ciascuno dei quali causa al nostro cervello energia extra per l'elaborazione. Troppi di questi momenti si manifestano come frustrazione o confusione. Vediamo questi problemi anche nella vita reale: quando c'è un piccolo difetto sul nostro viso o quando i capelli sono fuori posto. In un'interfaccia, mentre non possiamo identificare esplicitamente la differenza tra un carattere 24pt e 25pt, possiamo percepirlo. Non possiamo discernerlo esattamente, ma il nostro cervello sa che qualcosa si sente fuori.

Per progettare piacevoli esperienze visive, dobbiamo stabilire regole riduttive e significative su ciò che è diverso e ciò che è simile per creare modelli semplici, riconoscibili e coerenti.

Come possiamo mostrare la differenza?

In psicologia, Just Noticeable Difference (JND) è la quantità di cambiamento per rendere evidente una differenza. Esiste un valore JND per notare un peso più pesante o notare quando un colore ha una tonalità diversa. Mentre possiamo creare dimensioni di passaggio di modifiche per dimensioni e colore che sono leggermente distinte, vogliamo comunque enfatizzare la distinzione senza esagerare.

I differenziatori visivi dovrebbero essere modesti e significativi. Abbiamo davvero bisogno di un altro carattere per indicare contenuti meno importanti? Probabilmente no. Dobbiamo utilizzare un'immagine di profilo circolare e quadrata in tutto il prodotto? Probabilmente no. Con troppi differenziatori visivi, i segnali visivi sono più difficili da notare e attribuire significato.

Questo è un esempio di una disposizione riduttiva di trattamenti e colori del testo. Ogni dimensione del gradino deve essere distinta e unica e attribuire un certo significato.

Come possiamo mostrare somiglianza?

Quando scrivi su carta a fogli mobili, puoi facilmente scrivere sulla riga successiva senza nemmeno guardare. Le linee usano una spaziatura coerente per ridurre lo sforzo di trovare la linea successiva, creando un ritmo visivo. I prodotti digitali fanno la stessa cosa. Creano aspettative ripetendo elementi visivi e organizzazioni come posizionare un'immagine del profilo in alto a sinistra dei tipi di contenuto.

La somiglianza, nel complesso, può essere attribuita ai progettisti che utilizzano trattamenti simili in forme semplici come due diverse dimensioni di intestazione per sezioni e sottosezioni. Possono creare gli stessi comportamenti previsti per forme complesse come persone e aziende.

Anche a livello granulare, può anche essere semplice come usare sempre il rosso in caso di errore o utilizzare un trattamento coerente per i suggerimenti e il testo educativo. Può anche utilizzare regole di spaziatura coerenti tra gli elementi.

Sopra è un esempio di un trattamento visivo che utilizza un passo di 4pt per creare margini e riempimento tra gli elementi. Ti impedisce di essere arbitrario, ma offre anche spazi bianchi coerenti al tuo prodotto.

Mettendolo insieme

Nessun principio può vivere senza gli altri. Sebbene non sia completo, affronta grossi problemi con la progettazione visiva a livello principiante. Combatte l'impulso di riempire lo spazio negativo con informazioni inutili o di creare nuovi paradigmi visivi "perché sembra bello". Mette in guardia contro il sovraccarico decisionale dando a molte azioni lo stesso peso. Incoraggia anche la ponderatezza e la coerenza quando si applicano esadecimali, dimensione del carattere e spaziatura.

La struttura in tre passaggi ti costringe a scorrere ogni principio e immergerti in profondità. Ti consente di identificare in quale parte del design visivo sei più debole e consente agli altri di criticare in modo più esplicito il tuo lavoro. Stiamo tutti cercando di migliorare, ma abbiamo solo bisogno dello stesso vocabolario per farlo. Quindi, la prossima volta che stai valutando il lavoro visivo, fai le domande:

È utile? È chiaro? È piacevole?

___

I frame non prescrivono ciò che è giusto, ma creano invece un vocabolario che allinea i concetti che tutti noi usiamo ma non etichettiamo. Tutti abbiamo qualche opinione su cosa significhi per il lavoro visivo essere utile, chiaro o piacevole. Pertanto, in caso di disaccordo, disimballare le definizioni, avviare una discussione e allinearci. Più velocemente riusciamo a trovare le cose in comune, più facile è disimballare le verità e più persone possiamo formare per costruire esperienze migliori.

Grazie a Brad Birdsall per i suoi pensieri e feedback!