Creazione di una guida allo stile dell'interfaccia utente per una migliore UX

Ascolta la versione audio di questo articolo

Garantire un design del prodotto e un'esperienza utente coerenti

Nel 1976, Johnny Cash pubblicò One Piece at a Time , una canzone che racconta la storia di un lavoratore automobilistico di Detroit che trascorre vent'anni a raccogliere parti di Cadillac rubate dalla catena di montaggio.

Sfortunatamente, quando l'operaio inizia a costruire la sua Cadillac bootleg, scopre che molte parti sono incompatibili perché le caratteristiche chiave del design sono cambiate nel corso degli anni. Con un po' di ingegno, l'auto personalizzata si unisce, ma è un guazzabuglio sgradevole che ispira il ridicolo ovunque vada.

Anche il back-end sembrava piuttosto divertente
Ma l'abbiamo messo insieme e quando abbiamo finito
Bene, è stato allora che abbiamo notato che avevamo solo una pinna caudale.

I progettisti e gli sviluppatori delle esperienze digitali odierne affrontano una sfida simile. Il passare del tempo è un formidabile nemico in grado di devastare la continuità dei prodotti digitali. Con il tempo, i membri del team vanno e vengono, le tendenze si evolvono e le caratteristiche cambiano. Inoltre, il ritmo rapido del nostro panorama digitale moderno significa che l'innovazione dei prodotti avviene in trimestri, non anni.

Se un'azienda o un team di progettazione non dispone di un record condiviso che documenti l'aspetto e la sensazione previsti per un prodotto, si verificheranno incongruenze visive ed esperienziali, gli utenti si sentiranno frustrati e la reputazione del marchio subirà un duro colpo.

Le guide di stile dell'interfaccia utente sono uno strumento di progettazione e sviluppo che apporta coesione all'interfaccia utente e all'esperienza di un prodotto digitale. Al loro interno, essi:

• Registra tutti gli elementi di design e le interazioni che si verificano all'interno di un prodotto
• Elenca i componenti cruciali dell'interfaccia utente come pulsanti, tipografia, colore, menu di navigazione, ecc.
• Documenta importanti componenti dell'esperienza utente come stati al passaggio del mouse, riempimenti a discesa, animazioni, ecc.
• Contengono elementi live e frammenti di codice che gli sviluppatori possono utilizzare come riferimento

Prima di dare un'occhiata più da vicino a come assemblare una guida allo stile dell'interfaccia utente di livello esperto, è importante capire che non esiste un approccio valido per tutti. Il valore delle guide di stile va oltre i grandi marchi con grandi team di prodotti. Anche le aziende di medie e piccole dimensioni che cercano un'esperienza digitale coerente traggono vantaggio quando le guide di stile dell'interfaccia utente sono personalizzate in base alle loro esigenze specifiche.

Includi questi componenti di design cruciali nelle guide di stile dell'interfaccia utente

I designer che hanno familiarità con le linee guida sull'identità del marchio non dovrebbero avere problemi a passare alle Guide di stile dell'interfaccia utente perché c'è un'ampia sovrapposizione con molti dei componenti di progettazione cruciali che devono essere inclusi.

Suggerimento professionale: documenta solo i componenti di progettazione rilevanti. Informazioni estranee rendono le Guide di stile dell'interfaccia utente gonfie e difficili da utilizzare.

Schema tipografico

La tipografia è uno degli elementi di progettazione dell'interfaccia più comuni, quindi non è sufficiente elencare semplicemente i nomi dei caratteri tipografici utilizzati in un prodotto. Dovrebbero essere fornite istruzioni chiare per titoli, sottotitoli, intestazioni (H1, H2, H3), corpo del testo e didascalie.

Inoltre, devono essere fornite le dimensioni dei caratteri, i pesi indicati e gli stili definiti. Sono necessari anche l'altezza della linea e la crenatura ed è una buona idea scegliere un font da utilizzare quando si verificano circostanze speciali.

Layout reattivi

Quando i prodotti digitali sono progettati attorno a sistemi a griglia reattivi, le guide di stile dell'interfaccia utente devono affrontare i layout dell'interfaccia su tutte le dimensioni dello schermo. Ciò significa includere note ed esempi per la spaziatura, il riempimento e il posizionamento. È anche utile mostrare le sovrapposizioni del sistema a griglia del prodotto in relazione alle diverse dimensioni dello schermo.

Il grande obiettivo qui è fornire un contesto sufficiente per evitare la necessità di progetti di schermi una tantum. Nel tempo, questi si sommano e minano la coesione di un prodotto digitale.

Palette dei colori

Uno dei modi più rapidi per distruggere un'interfaccia è l'uso incoerente dei colori, quindi le combinazioni di colori devono essere chiaramente definite. Elencare i colori e i loro valori (HEX, UIColor) è un buon inizio, ma dovrebbero essere forniti anche abbinamenti specifici ed esempi di utilizzo.

Se la Guida allo stile dell'interfaccia utente fa riferimento a una serie di linee guida sull'identità del marchio, controlla se è disponibile uno schema secondario di accenti di colori più chiari. In caso contrario, creane uno tuo e documenta. È utile anche una selezione di valori di grigio.

Bottoni

Quasi tutte le interfacce includono pulsanti, quindi prenditi del tempo per documentarne dimensioni, stili, colori, posizionamento, spaziatura ed elementi tipografici. Se vengono utilizzati vari pulsanti in contesti diversi, chiarisci anche questo.

Componenti aggiuntivi dell'interfaccia utente che potrebbero essere necessari

• Iconografia
• Tooltip e popover
• Modali
• Elementi della forma
• Tabelle dati
• Menu di navigazione
• Grafici e visualizzazioni di dati
• Schede
• Interruttori on-off
• Dialoghi
• Elenchi della griglia dei contenuti
• Liste verticali
• Barre degli strumenti
• Selettori di data e ora
• Indicatori di caricamento
• Caselle di controllo
• Avvisi
• Menu a tendina
• cursori
• Stepper
• Impaginazione

Organizzare e contestualizzare le istruzioni di progettazione

Oltre ai componenti dell'interfaccia utente indispensabili, sono disponibili numerose funzionalità pratiche che semplificano la consultazione, la navigazione e l'implementazione delle guide di stile dell'interfaccia utente per le aziende e i team di progettazione.

Sommario

Un sommario ben organizzato e chiaramente contrassegnato è un modo semplice per aiutare tutti a trovare rapidamente cosa c'è all'interno del documento.

Note contestuali

È impossibile prevedere ogni decisione progettuale problematica che potrebbe sorgere nel corso della vita di un prodotto, quindi articolare la logica di progettazione alla base dei componenti dell'interfaccia utente spesso utilizzati può semplificare la risoluzione di scenari imprevisti.

Per esempio:

“In sostanza, il nostro prodotto consiste nel mostrare le migliori immagini di architettura da tutto il mondo. Per questo motivo, il layout della nostra interfaccia dà la priorità alle immagini grandi e vistose rispetto al testo. Quando possibile, rendi le immagini il punto focale del nostro prodotto”.

Istruzioni di spaziatura e posizionamento

La spaziatura e il posizionamento sono spesso trattati nella sezione "Layout reattivi". A seconda della complessità del prodotto digitale, le istruzioni possono consistere in "regole pratiche" generali o essere piuttosto granulari.

Cose da fare e da non fare

Spesso, può essere utile delineare chiaramente le cose da fare e da non fare nella progettazione. Per esempio:

• " Utilizzare la versione bianca del marchio denominativo del logo della nostra azienda nel piè di pagina dell'interfaccia."
• " Non utilizzare versioni a colori alternativi del marchio denominativo aziendale su sfondi neri".

Cose da fare e da non fare impediscono il dibattito e fanno risparmiare tempo di progettazione e sviluppo, ma è sempre meglio fornire una nota di contesto come questa:

“Questo elenco di cose da fare e da non fare copre un'ampia gamma di importanti decisioni di progettazione, ma non tiene conto di ogni possibile uso improprio degli elementi di design del nostro prodotto. Con questo in mente, usa il miglior giudizio quando sorgono incertezze e fai scelte che riflettano accuratamente l'aspetto generale del nostro prodotto".

Elementi live e frammenti di codice

Le linee guida sull'identità del marchio sono in genere documenti statici, ma le guide di stile dell'interfaccia utente includono elementi live che funzionano come farebbero nel prodotto finale, il che significa che i pulsanti si comportano come pulsanti, i menu a discesa effettivamente scendono e le animazioni sono animate.

I frammenti di codice consentono agli sviluppatori di copiare e incollare rapidamente il codice degli elementi live nel back-end di un prodotto.

Rendi le guide di stile dell'interfaccia utente facilmente accessibili per i team di progettazione

Ora che comprendiamo come creare una guida di stile e i componenti e le funzionalità inclusi in una guida di stile dell'interfaccia utente, spostiamo la nostra attenzione sulla condivisione e sulla comunicazione. Più specificamente, quali sono le opzioni per l'alloggiamento delle guide di stile dell'interfaccia utente?

Tradizionalmente, le guide di stile dell'interfaccia utente sono esistite come pagine Web. Ciò fornisce a progettisti e sviluppatori un facile accesso e consente agli elementi di progettazione di funzionare come farebbero all'interno del prodotto.

Più di recente, sono emerse una manciata di piattaforme basate su cloud, che consentono ai team di progettare, prototipare e testare i prodotti in modo collaborativo. Queste stesse piattaforme sono anche in grado di ospitare guide di stile dell'interfaccia utente e consentire ai membri del team di scambiare feedback e idee continui.

Vediamo come alcune di queste piattaforme descrivono il loro approccio alle Guide di stile dell'interfaccia utente.

Figma

“Crea sistemi di progettazione con componenti dell'interfaccia utente collegati che l'intero team può utilizzare. Ricevi aggiornamenti quando vengono apportate modifiche ai componenti condivisi”

Fase

“Le biblioteche come avrebbero dovuto essere sempre: colori, proprietà ed elementi... anche i tempi di transizione, ora tutto in un componente. Modifica sul posto: tutto è un maestro. Sostituisci tutto ciò che non ti serve, ad esempio.

InVision

"Tutti i componenti del marchio e dell'esperienza utente, inclusa la documentazione sull'utilizzo, sono gestiti in un'unica posizione. Le modifiche si sincronizzano con l'intero team e i progettisti possono passare all'ultima versione o ripristinare gli aggiornamenti in qualsiasi momento".

Materiale.io

“Crea il tuo tema Materiale e crea una libreria di simboli con marchio applicando modifiche di stile a colore, forma e tipografia. Condividi, carica e presenta iterazioni di progettazione nella Galleria. Quindi usa la modalità di ispezione per accedere alla documentazione degli sviluppatori.

Le guide di stile dell'interfaccia utente dovrebbero essere facili da usare

Quando si assemblano le guide di stile dell'interfaccia utente, la comunicazione non può essere data per scontata. I team di prodotto sono composti da persone di diverse discipline, background culturali ed esperienze professionali. Utilizzare questi principi per garantire chiarezza e facilità d'uso.

Layout semplici

Le guide di stile dell'interfaccia utente richiedono layout dello schermo puliti e ordinati. Ogni schermo dovrebbe essere ben organizzato, chiaramente etichettato e altamente leggibile. Non c'è alcun vantaggio nel sovraccaricare gli schermi di informazioni visive, quindi punta a disposizioni che siano sia minime che spaziose.

Istruzioni concise

Mantieni le istruzioni brevi e dolci. Evita i paragrafi lunghi e usa i punti elenco. Ove possibile, dimostra con immagini anziché parole.

Scenari di utilizzo informativo

Ti chiedi quando usare questo stile di slider su quello? "Usa scenari" risolve questo tipo di confusione. Anche in questo caso, le immagini sono più forti delle parole, quindi fornisci esempi che dimostrino chiaramente sia lo scenario che il percorso corretto da seguire.

Cronologie delle versioni rilevanti

I prodotti digitali vengono aggiornati frequentemente. Poiché i team di prodotto cercano di perfezionare ogni minimo dettaglio dell'interfaccia, è importante tenere traccia dell'evoluzione dei componenti di progettazione. Usa discrezione qui: per le piccole aziende e i team di prodotto, mantenere un'ampia libreria di cronologie delle versioni potrebbe non essere pratico.

Le guide di stile dell'interfaccia utente sono una risorsa preziosa e un potente strumento di progettazione

I team di progettazione e sviluppo contemporanei apprezzano l'efficienza e la collaborazione multidisciplinare, come dimostrato dai sistemi di linguaggi di design propagandati da grandi marchi come MailChimp, Google e Salesforce.

I sistemi di linguaggio di progettazione consentono a diversi team che lavorano su prodotti digitali sofisticati di comunicare utilizzando un linguaggio visivo standardizzato. Le guide di stile dell'interfaccia utente sono intrecciate nel tessuto dei sistemi di linguaggi di progettazione e fungono da strumento su cui fare affidamento per un'iterazione rapida ed esperienze digitali coerenti.

Allo stesso tempo, il design non è un'attività riservata solo alle grandi aziende. Una vasta gamma di team di prodotto e progetti digitali trarrà vantaggio da guide di stile dell'interfaccia utente ben strutturate, ma le risorse (finanziarie, tempo e talento) variano da azienda a azienda.

Per questo motivo, le guide di stile dell'interfaccia utente sono più utili quando sono personalizzate in base alle esigenze delle singole aziende e dei team di progettazione. L'obiettivo più alto di ogni Guida allo stile dell'interfaccia utente è un equilibrio tra chiarezza e praticità che porta a esperienze utente costantemente piacevoli.

Ulteriori letture sul blog di Toptal Design:

• Stili di caratteri per il Web e il design di stampa
• Design reattivo: migliori pratiche e considerazioni
• Perché le startup hanno bisogno di una guida di stile
• Best practice per l'usabilità e la progettazione delle icone
• Usa la tua ispirazione: una guida ai Mood Board