L'ultima guida alla progettazione dell'interfaccia utente

Contenuto

• 01. Scegli la tua tipografia
• 02. Scegli la tavolozza giusta
• 03. Link e pulsanti di stile
• 04. Crea i tuoi componenti
• 05. Documentare e collaborare

Cos'è il design dell'interfaccia utente? Una domanda migliore sarebbe: cosa c'è effettivamente nel design di un'interfaccia utente? Estetica? Usabilità? Accessibilità? Tutti loro? In che modo tutti questi fattori si uniscono per consentire un'esperienza utente ottimale e quale dovrebbe venire prima?

L'accessibilità dovrebbe sempre venire al primo posto, ponendo le basi per un'usabilità ottimale (l'utilizzo di un ottimo costruttore di siti web aiuterà qui). E poi, quando un'interfaccia utente è sia accessibile che utilizzabile, dovrebbe già apparire piuttosto decente in termini di estetica (gli strumenti di progettazione dell'interfaccia utente aiuteranno qui). Quindi, per assicurarti che il tuo design funzioni a tutti i livelli, dovrai testarlo a fondo, cosa che puoi fare con la nostra selezione dei migliori strumenti di test utente. Diamo uno sguardo più da vicino agli elementi fondamentali della maggior parte dei progetti e cosa si può fare per garantire la coerenza visiva.

01. Scegli la tua tipografia

Una buona tipografia (come molti aspetti del design) si riduce all'accessibilità. Il design visivo aggiunge sicuramente all'esperienza complessiva dell'utente, ma alla fine della giornata, gli utenti interagiscono con l'interfaccia utente, non la vedono come arte. Le lettere leggibili danno chiarezza e le parole leggibili sono ciò che aiuta gli utenti a digerire i contenuti in modo efficiente. Entrambi sono più importanti di qualsiasi estetica visiva.

Tuttavia, una tipografia ben progettata può comunque essere esteticamente soddisfacente. L'Helvetica in bianco e nero (o un carattere simile) può essere una cosa di bellezza dopo solo pochi semplici miglioramenti tipografici. Per miglioramenti, intendiamo modificare la dimensione del carattere, l'altezza della linea, la spaziatura delle lettere e così via, non il carattere o il colore del testo.

La tipografia "Bella" è effettivamente brutta quando è illeggibile perché la frustrazione prevale sempre sull'estetica. Il grande design è equilibrato e armonioso.

Come molti aspetti del design dell'interfaccia utente, la messa a punto delle immagini per bilanciare accessibilità ed estetica non è la sfida. La sfida è mantenere la coerenza nell'intero progetto. La coerenza stabilisce una chiara gerarchia tra elementi di varia importanza, che a sua volta aiuta gli utenti a comprendere più rapidamente un'interfaccia utente e persino a digerire i contenuti in modo più efficiente.

Quando si tratta di leggibilità e leggibilità, la dimensione minima accettabile del carattere come definita dalle Linee guida per l'accessibilità dei contenuti Web WCAG 2.0 è 18pt (o 14pt grassetto). La dimensione del carattere migliore da utilizzare dipende in gran parte dal carattere stesso, ma è importante essere consapevoli della gerarchia visiva e del modo in cui questa dimensione di base si distingue dai riepiloghi e dai titoli (ad es. h1>, h2>, h3>).

Con il tuo strumento di progettazione dell'interfaccia utente (utilizzeremo InVision Studio), crea una serie di livelli di testo (T) e quindi regola tutte le dimensioni in modo che siano correlate al seguente modello:

• h1>: 44px
• h2>: 33px
• h3>: 22px
• p>: 18px

Con InVision Studio (e tutti gli altri strumenti di progettazione dell'interfaccia utente), ciò viene eseguito regolando gli stili utilizzando il pannello Inspector sul lato destro.

Quindi scegli il tuo carattere, ma fai attenzione perché quello che potresti notare con alcuni caratteri è quel 18px p> e 22px h3> non sembra poi così diverso. Abbiamo due scelte: modificare le dimensioni dei caratteri o considerare un carattere diverso per i titoli. Vai con quest'ultimo se prevedi che il tuo design sarà ricco di testo.

Tieni presente che:

• Il design dell'interfaccia utente visiva è spesso un approccio istintivo
• Niente è deciso; tutto è soggetto a modifiche

Altezza della linea

L'altezza ottimale della riga garantisce che le righe di testo abbiano una spaziatura sufficiente tra di loro per ottenere livelli decenti di leggibilità. Questo sta diventando sempre più riconosciuto come uno "standard"; Lo strumento Lighthouse Audit di Google lo suggerisce anche come controllo manuale (o anche come flag se il testo contiene link che potrebbero essere troppo vicini tra loro a causa di un'altezza della riga non ottimale).

Ancora una volta, le WCAG ci aiutano con questo, dichiarando che l'altezza delle righe dovrebbe essere 1,5 volte la dimensione del carattere. Quindi, nel tuo strumento di progettazione dell'interfaccia utente in "Linea" (o simile), moltiplica semplicemente la dimensione del carattere per - almeno - 1,5. Ad esempio, se il corpo del testo è 18px, l'altezza della riga sarebbe 27px (18 * 1.5 - puoi anche eseguire l'operazione matematica direttamente nell'Inspector). Di nuovo, però, sii consapevole: se 1,6x si adatta meglio, usa 1,6x. Ricorda che caratteri diversi produrranno risultati diversi.

È troppo presto per pensare di utilizzare dati reali nel nostro progetto ma, per lo meno, dovremmo comunque utilizzare dati in qualche modo realistici (anche lorem ipsum). InVision Studio ha un'app nativa per dati reali che ci aiuta a vedere come potrebbe effettivamente apparire la nostra tipografia.

Spaziatura dei paragrafi

La spaziatura dei paragrafi non è uno stile che possiamo dichiarare utilizzando Inspector di InVision Studio. Invece, dovremo allineare manualmente i livelli utilizzando le guide sensibili (⌥). Simile all'altezza della linea, il moltiplicatore magico è 2x (il doppio della dimensione del carattere). Ad esempio, se la dimensione del carattere è 18 px, dovrebbe esserci almeno uno spazio di 36 px prima di passare al blocco di testo successivo. La spaziatura delle lettere dovrebbe essere almeno 0,12.

Tuttavia, non dobbiamo preoccuparci di questo fino a quando non iniziamo a creare componenti.

Stili condivisi

Se il tuo strumento di progettazione dell'interfaccia utente lo supporta (InVision Studio non lo supporta ancora), valuta la possibilità di trasformare questi stili tipografici in "Stili condivisi" per renderli rapidamente riutilizzabili garantendo al contempo la coerenza visiva. Questo di solito viene eseguito tramite Inspector.

02. Scegli la tavolozza giusta

La selezione dei colori perfetti per il tuo design va ben oltre l'estetica: può informare l'intera gerarchia del tuo sito.

Quando si tratta di progettazione dell'interfaccia utente, il colore è abitualmente una delle prime cose con cui ci piace dilettarci, ma ci viene insegnato che immergersi direttamente nel design visivo è una brutta cosa. Questo è certamente vero, tuttavia, quando si tratta di coerenza visiva, il colore dovrebbe essere una delle principali preoccupazioni perché svolge altri ruoli.

Il colore nella progettazione dell'interfaccia utente può essere molto efficace, ma poiché alcuni utenti (molti, in realtà) soffrono di vari tipi di disabilità visive, non è sempre affidabile. Detto questo, non si tratta necessariamente del colore specifico utilizzato, ma piuttosto del tipo di colore. Questo potrebbe non essere vero quando si tratta di branding poiché il colore è utilizzato per l'impatto emotivo in questo senso, ma, nella progettazione dell'interfaccia utente, il colore viene utilizzato anche per comunicare l'intento, il significato e, ovviamente, la gerarchia visiva.

01. Stark
Il plug-in Stark è compatibile con Sketch e Adobe XD e ti aiuta a controllare il contrasto del colore e a simulare il daltonismo direttamente dalla tela. Il supporto per Figma e InVision Studio sarà presto disponibile.
02.Colori
Colors è un insieme di 90 combinazioni di colori che hanno la quantità appropriata di contrasto cromatico per soddisfare le linee guida WCAG 2.0 - alcune di esse riescono persino a soddisfare lo standard AAA.
03. Progetto A11y
Il progetto A11y è un enorme hub per tutto ciò che riguarda l'accessibilità. Include risorse, strumenti, suggerimenti, tutorial ed è creato dal creatore del plug-in Stark e riceve finanziamenti da InVision.

I tre tipi di colore

I colori hanno un significato, quindi è importante non averne troppi. Troppi significati si traducono in più cose che l'utente deve capire e ricordare, per non parlare di più combinazioni di colori di cui dobbiamo preoccuparci. In generale, questo sarebbe il formato consigliato:

• Un colore di invito all'azione (anche il colore principale del marchio)
• Un colore scuro neutro (meglio per gli elementi dell'interfaccia utente o la modalità scura)
• Per tutto quanto sopra, una variazione leggermente più chiara e più scura

Ciò consente quanto segue:

• La modalità oscura sarà facilmente realizzabile
• Il nostro colore CTA non entrerà mai in conflitto con altri colori
• In qualsiasi scenario saremo in grado di enfatizzare e de-enfatizzare

Imposta la tua tavolozza

Con lo strumento di progettazione dell'interfaccia utente che preferisci, crea una tavola da disegno abbastanza grande (tocca A) per ogni colore (denominata "Marca", "Neutro / Chiaro" e "Neutro / Scuro"). Quindi, in ogni tavola da disegno, crea ulteriori rettangoli più piccoli che mostrano le variazioni più scure e più chiare del colore e anche gli altri colori stessi.

Considereremmo leggermente più chiaro e più scuro rispettivamente il 10% in più di bianco e il 10% in più di nero. Quando hai finito, visualizza una copia degli stili tipografici su ogni tavola da disegno. Il colore di questi livelli di testo dovrebbe essere luce neutra, tranne che sulla tavola da disegno luce neutra dove dovrebbero essere scuri neutri.

Contrasto

Successivamente dovremo controllare i nostri colori per un contrasto cromatico ottimale. Ci sono una varietà di strumenti che possono farlo, ad esempio il plug-in Stark per Sketch e Adobe XD o Contrast per macOS, tuttavia, una soluzione online come Contrast Checker o Color Contrast Checker andrà benissimo.

Controlla il contrasto del colore per ogni combinazione e modifica i colori di conseguenza. Se non sei sicuro di quali colori utilizzare, prova a utilizzare i consigli di Color Safe.

03. Link e pulsanti di stile

Dimensione

Pulsanti e collegamenti, proprio come la tipografia, dovrebbero avere alcune varianti. Dopotutto, non tutte le azioni hanno lo stesso livello di importanza e, come abbiamo discusso in precedenza, il colore è un metodo di comunicazione inaffidabile, quindi non può essere il metodo principale per influenzare la gerarchia visiva. Dobbiamo anche giocare con le dimensioni.

Un test di convenienza visiva è un test di usabilità utilizzato per determinare se i target dei tocchi sembrano essere cliccabili. Sincronizza il design da Studio a Freehand (⌘⇧F), invia l'URL risultante ai tester e chiedi loro di cerchiare gli elementi che ritengono selezionabili.

Anche gli utenti non InVision Studio possono utilizzare Freehand, ma gli utenti di InVision Studio possono avviare i propri progetti in Freehand senza problemi da InVision Studio, che è il modo più veloce ed efficiente per acquisire feedback visivo dagli utenti.

In generale, consigliamo di dichiarare il testo del pulsante come 18px (come il testo del corpo) ma che i pulsanti stessi abbiano tre variazioni di dimensione:

• Normale: 44px di altezza (angoli arrotondati: 5px)
• Grande: 54px di altezza (angoli arrotondati: 10px)
• Extra grande: 64px di altezza (angoli arrotondati: 15px)

Questo ci consente di far sembrare alcuni pulsanti più importanti senza fare affidamento sul colore e anche di annidare pulsanti (ad esempio, utilizzare un pulsante all'interno di un campo modulo dall'aspetto minimale).

Profondità

Indipendentemente dal fatto che la destinazione del tocco sia un pulsante o un campo modulo, le ombre dovrebbero essere utilizzate per aumentare la profondità e quindi suggerire l'interattività. Va bene un unico stile di ombreggiatura per tutte le varianti di pulsanti e campi modulo.

Interattività

Ogni tipo di pulsante necessita di una variazione per indicare il suo stato di passaggio del mouse. Questo chiarisce all'utente che quello che hanno tentato di fare va benissimo e garantisce che vadano avanti senza indugio.

Questo è in realtà uno degli aspetti più complessi del mantenimento della coerenza visiva perché il colore è spesso lo stile preferito da cambiare quando si tratta di creare uno stato. Per fortuna, questi cambiamenti di stato possono essere relativamente impercettibili, quindi va bene cambiare il colore nella sua variazione leggermente più chiara o più scura, ecco a cosa servono. Questo vale anche per i link.

Decidere di non farlo ci indurrà a utilizzare un colore che ha già un significato significativo, con il risultato di confondere gli utenti, oppure decidere di inventare un altro colore. Decidere di utilizzare un colore secondario va benissimo, ma dovrebbe essere salvato per le immagini di marketing piuttosto che per gli elementi dell'interfaccia utente. Meno è meglio (e più facile).

Ricorda di ripetere questo passaggio per ogni tavola da disegno. Non includere i pulsanti CTA con marchio sulla tavola da disegno del marchio: in seguito parleremo di cosa succede quando determinate combinazioni non funzionano.

04. Crea i tuoi componenti

I componenti fanno risparmiare molto tempo e tutti gli strumenti di progettazione dell'interfaccia utente offrono questa funzione (ad esempio in Sketch, sono chiamati Simboli). In Studio possiamo creare componenti selezionando tutti i livelli che dovrebbero costituire il componente e usando il pulsante ⌘K scorciatoia.

Utilizzo di componenti

I wireframe sono molto utili, non solo per progettare interfacce utente ad alta usabilità, ma anche per scoprire cosa richiederà la nostra interfaccia utente a lungo termine. È una specie di protezione per il futuro.

Ciò non significa che dobbiamo progettare un sacco di componenti o essere pronti per qualsiasi scenario possibile, ma significa che dobbiamo adottare un atteggiamento "E se?".

Ad esempio, se il nostro wireframe richiede un componente 3x1 ma sappiamo che il contenuto non è scolpito nella pietra, un po 'di contemplazione potrebbe portarci a chiederci: "E se questi componenti finissero per essere 4x1?". La regola pratica è: progettare solo per le esigenze dell'utente che già esistono, ma cercare di rendere le soluzioni relativamente flessibili. Altrimenti, finiremo con un po 'di "debito di progettazione" molto disordinato più avanti su tutta la linea.

Ora possiamo riutilizzare questo componente trascinandolo nell'area di disegno da Librerie> Documento sul lato sinistro, anche se tieni presente che questo flusso di lavoro può differire a seconda dello strumento dell'interfaccia utente.

Questo metodo per creare guide di stile (e alla fine creare il design stesso) funziona particolarmente bene con layout modulari / basati su carte, sebbene anche le "aree comuni" come intestazioni, piè di pagina e navigazioni siano ottimi candidati per un componente.

Proprio come abbiamo fatto con i nostri stili, colori e pulsanti tipografici, dobbiamo ricordarci di organizzare attentamente i nostri componenti.

Utilizzando le nostre regole

In precedenza abbiamo fatto un'osservazione sul non utilizzare pulsanti CTA con marchio sopra il colore del marchio, poiché i pulsanti CTA con marchio devono ovviamente risaltare tra tutto il resto. Quindi come creiamo un componente con marchio pur essendo in grado di utilizzare un pulsante CTA con marchio? Dopotutto, se utilizziamo pulsanti scuri neutri per, diciamo, pulsanti di navigazione o semplicemente pulsanti meno importanti, questa non sarebbe un'opzione, giusto?

Giusto. Quindi questa sarebbe un'opportunità ideale per creare un componente, in particolare una combinazione di intestazione + testo + pulsante. Nota come ho creato uno sfondo "carta" con luce neutra per abilitare l'uso del pulsante con il marchio. Allo stesso modo, il campo forma luce neutra (i campi modulo sono solitamente bianchi a causa del modello mentale storicamente sinonimo di moduli cartacei) non ha un aspetto sorprendente sullo sfondo chiaro neutro, quindi possono essere utilizzati solo sullo sfondo scuro neutro, direttamente o una componente scura neutra. È così che rendiamo flessibile il nostro design obbedendo alle nostre regole e mantenendo la coerenza.

Test di stress

Idealmente, il modo più rapido ed efficace per garantire la robustezza del nostro design è sottoporlo a stress test. Mettere alla prova un design significa essere crudeli. Supponiamo di avere una navigazione con un numero X di elementi di navigazione perché questo era il requisito; per garantire davvero la flessibilità, prova a modificare questi requisiti aggiungendo più elementi di navigazione o, per lanciare davvero una chiave nel lavoro, prova anche ad aggiungere un elemento di navigazione con una gerarchia visiva più alta rispetto agli altri. Le nostre regole di taglia, tipografia e colore consentono qualcosa del genere? Oppure per offrire un'usabilità ottimale abbiamo bisogno di un'altra regola?

Tieni presente che c'è una differenza tra l'aggiunta di regole e la modifica delle regole. Più casi limite significano meno coerenza, quindi la maggior parte delle volte è meglio, per motivi di usabilità, ripensare semplicemente al componente.

05. Documentare e collaborare

Come possiamo rendere i nostri file di progettazione più facili da usare sia per noi stessi che per qualsiasi altro designer che potrebbe utilizzare il nostro file di progettazione? Ebbene, tenerli al sicuro in un archivio cloud condiviso e affidabile è importante, come scoprirai.

Colori

Il primo passaggio consiste nel salvare tutti i colori nel campione "Colori documento", se non lo abbiamo già fatto, in questo modo sarà più facile accedervi quando sarà necessario applicarli nel nostro progetto.Per fare ciò, apri il widget di selezione dei colori dall'Inspector, scegli "Colori documento" dal menu a discesa e quindi fai clic sull'icona + per aggiungere il colore al campione. Funziona allo stesso modo nella maggior parte degli strumenti dell'interfaccia utente.

Librerie condivise

Successivamente, dobbiamo convertire il nostro documento, completo di stili tipografici, colori, pulsanti, aree comuni e componenti di base, in una libreria condivisa.

Essenzialmente questo significa che ogni elemento deve essere un componente, anche se è costituito da un solo strato. Fai clic sul pulsante + ‌ nella barra laterale di sinistra delle Librerie e quindi importa questo stesso documento in un nuovo documento. Esatto: il nostro documento è ora una libreria ed è pronto per essere utilizzato per progettare interfacce utente con coerenza garantita.

InVision Studio è in qualche modo limitato nel senso che non si sincronizza ancora con lo strumento Design System Manager ufficiale di InVision, ma è abbastanza facile ospitare la libreria in Dropbox affinché altri designer possano utilizzarla e aggiornarla nel tempo. Quando viene apportata una modifica (in locale o in remoto), ogni file di Studio che utilizza la libreria (di nuovo, in locale o in remoto) chiederà se si desidera aggiornare i colori e i componenti. Questo è il modo in cui le librerie di progettazione vengono mantenute tra i team.

Quando si tratta di progettare interfacce utente visivamente coerenti, riutilizzare tutto. Progettare i pulsanti, quindi utilizzare i pulsanti per creare i componenti dei pulsanti, quindi utilizzare
componenti pulsante per creare altri componenti come avvisi e finestre di dialogo.

Basta non creare componenti che non sono necessari. Ricorda, costruire una biblioteca è uno sforzo continuo e collaborativo. Non deve essere completato tutto in una volta, completato da te da solo o completato mai. Deve solo trasmettere una lingua.

Progettare in scala

Man mano che un progetto si espande, gestirlo diventa più difficile. Ci sono varie regolazioni che potremmo voler apportare per mantenerlo efficiente e manutenibile, soprattutto perché DSM di InVision non funziona ancora con Studio.

Ad esempio, potremmo voler utilizzare i livelli di testo per annotare la nostra libreria come mezzo per spiegare i casi d'uso di vari elementi. Per gli stili tipografici, potremmo anche modificare il testo in modo che sia più descrittivo (ad esempio "h1> / 1.3 / 44px"). Questo dice che h1>s dovrebbe essere 44px e avere un'altezza di riga di 1.3.

Design Handoff

Gli strumenti di trasferimento del design visualizzano i vari stili utilizzati da ogni elemento del design in modo che gli sviluppatori possano creare l'app o il sito Web. Questi strumenti includono una panoramica degli stili e anche una copia del campione dei "colori del documento". Gli sviluppatori possono persino copiare questi stili come codice, il che è eccellente se hai deciso di creare documentazione di progettazione scritta e desideri includere rappresentazioni di frammenti di codice dei componenti.

Se sei preoccupato per la risoluzione dei problemi e la gestione di un sito web, assicurarti di avere il giusto servizio di web hosting ti aiuterà, ma per il tuo sistema di progettazione, lo strumento di trasferimento del design di InVision, Inspect, è la cosa da usare. Per utilizzarlo, fare clic sul pulsante / icona "Pubblica su InVision" in InVision Studio, aprire l'URL risultante e quindi toccare per passare alla modalità di ispezione. È davvero conveniente.

Questo contenuto è originariamente apparso su net magazine.