Progettazione di sistemi di interfaccia utente modulari tramite lo sviluppo guidato da una guida di stile

L'uso di una guida di stile per guidare lo sviluppo è una pratica che sta guadagnando molta trazione nello sviluppo del front-end, e per una buona ragione. Gli sviluppatori inizieranno nella guida di stile aggiungendo nuovo codice o aggiornando il codice esistente, contribuendo così a un sistema di interfaccia utente modulare che verrà successivamente integrato nell'applicazione. Ma per implementare un sistema di interfaccia utente modulare, dobbiamo avvicinarci alla progettazione in modo modulare.

Il design modulare ci incoraggia a pensare e progettare un'interfaccia utente e un'esperienza utente in modelli. Ad esempio, invece di progettare una serie di pagine o viste per consentire a un utente di svolgere un'attività, inizieremmo il processo di progettazione comprendendo come è strutturato il sistema dell'interfaccia utente e come i suoi componenti possono essere utilizzati per creare il flusso utente.

Ulteriori letture su SmashingMag:

• Come creare una guida di stile efficace
• Una panoramica approfondita degli strumenti della guida allo stile di vita
• Automatizzare lo sviluppo guidato da una guida di stile
• Set di icone di guide di stile gratuite per scrittori ed editori

In questo post, spiegherò il valore della modularità nella progettazione dell'interfaccia utente e come si collega al processo di sviluppo guidato dalla guida di stile, che migliora l'implementazione di applicazioni flessibili e intuitive, aiutando al contempo designer e sviluppatori a collaborare in modo più produttivo.

Design modulare nell'interfaccia utente

Il design modulare consiste nel scomporre un progetto in piccole parti (moduli), creandole in modo indipendente e poi combinandole in un sistema più ampio. Se ci guardiamo intorno, troveremo molti esempi di design modulari: automobili, computer e mobili sono tutti modulari. Grazie alla loro modularità, parti di questi sistemi possono essere sostituite, aggiunte, rimosse e riorganizzate. Questo è ottimo per i consumatori perché possono personalizzare il sistema in base alle proprie esigenze . Vuoi un tetto apribile, un motore più potente, sedili in pelle? Avete capito bene! Il design modulare delle auto consente questo tipo di personalizzazioni e molto altro.

Un altro ottimo esempio sono i mobili IKEA. Nelle illustrazioni sottostanti si può notare come la modularità del progetto non sta solo nella forma della libreria, che ne consente l'impostazione in diverse direzioni, o nella possibilità di inserire degli inserti nelle sue aperture, ma anche nella stessa parti che compongono il pezzo stesso, che sono rettangoli di diverse dimensioni, che ripetono lo stesso motivo.

Dal punto di vista della produzione, il design modulare è anche conveniente. Un aspetto importante di questo è che costruire piccole parti semplici che possono essere collegate in un secondo momento è più facile ed economico che costruire un unico grande pezzo complesso in una volta. Inoltre, la soluzione può essere riutilizzata più e più volte, massimizzando la produttività.

Gli obiettivi nella creazione di un design dell'interfaccia utente sono simili. Come designer, vogliamo creare un sistema di interfaccia utente efficiente sia nella costruzione che nel funzionamento. Quando troviamo una soluzione a un problema, vogliamo essere in grado di riutilizzare la soluzione in molti luoghi. Ciò non solo consente di risparmiare tempo, ma stabilisce anche uno schema che gli utenti possono apprendere una volta e riapplicare in altre aree dell'applicazione. Vogliamo anche poter personalizzare il sistema per determinati scenari senza dover ristrutturare tutto.

Questo è esattamente ciò che la modularità porta alla progettazione dell'interfaccia utente: porta a un sistema flessibile, scalabile ed economico , ma anche personalizzabile, riutilizzabile e coerente .

Esempi di design modulare

Alcuni esempi di progettazione dell'interfaccia utente modulare possono essere visti in modelli come griglie reattive, design di finestre tile e design di carte . In tutti i moduli vengono utilizzati ripetutamente per fornire un layout flessibile che si adatta facilmente alle diverse dimensioni dello schermo. Inoltre, i moduli fungono da contenitori per i componenti, consentendoci di inserire diversi tipi di contenuto e funzionalità, proprio come gli inserti che possono essere aggiunti a un armadio IKEA.

Questo è omogeneo?

Se la progettazione modulare riguarda la progettazione di un sistema e i sistemi di interfaccia utente comprendono principalmente le stesse parti (pulsanti, caratteri tipografici, icone, griglie, ecc.), allora ti starai chiedendo:

• I design modulari non avranno tutti lo stesso aspetto?
• In che modo questo influenzerà l'identità del marchio?
• Come si può rendere unica l'interfaccia utente di un prodotto?

Queste domande, sebbene valide, sollevano una domanda di fondo: dove si trovano l'innovazione e l'unicità nel design del prodotto? Questo dibattito ha preso piede ultimamente (vedi “The Unbearable Homogeneity of Design” e “In Defense of Homogeneous Design”), ma direi che, poiché il visual design è ciò che vediamo per primo, tendiamo a pensare che innovazione e unicità risiedano l'aspetto di un disegno. Tuttavia, il visual design è solo una parte di questo. L'innovazione e l'unicità nella progettazione del prodotto devono essere considerate nell'intero prodotto: nel valore intrinseco che fornisce e nel modo in cui le persone lo vivono, compreso il suo aspetto. Prendi una sedia. È necessario essere una sedia, ma non tutti i modelli di sedie hanno lo stesso aspetto, sensazione o funzionamento. In effetti, il design della sedia è stato storicamente un'area di innovazione nel design e nei materiali. Allo stesso modo, le interfacce utente hanno i propri requisiti e l'utilizzo di modelli che hanno dimostrato di funzionare non significa sacrificare l'innovazione e l'unicità. Al contrario, saranno necessarie innovazione e unicità per risolvere i problemi particolari dei tuoi clienti. Il bello del design modulare è che ci incoraggia ad avvicinarci a queste soluzioni come un sistema di parti interconnesse, piuttosto che a trovare soluzioni originali in modo isolato per il gusto di essere diversi. In altre parole, un design innovativo applicato a un controllo dell'interfaccia utente non rimarrà relegato in un posto nell'applicazione, ma invece permeerà l'intero sistema, mantenendo la coesione e migliorando l'usabilità.

La modularità dello sviluppo guida-guida di stile

Dal lato dell'implementazione, anche lo sviluppo guidato da una guida di stile è molto modulare. Per cominciare, il processo inizia con una fase di scoperta : comprensione del problema che deve essere risolto, raccolta dei requisiti e iterazione attraverso soluzioni di progettazione. Sebbene le soluzioni di design siano generalmente presentate come un intero pacchetto o funzionalità, in realtà dovrebbero essere la combinazione delle molte parti del sistema documentate nella guida allo stile. Alcune parti del design potrebbero essere nuove, ma dovrebbero comunque essere create come moduli. Il punto è utilizzare la guida di stile per determinare quali moduli sono disponibili nel sistema dell'interfaccia utente che possono essere riutilizzati o estesi per creare il design.

(E se non ci fosse una guida di stile? Non preoccuparti! Nella prossima sezione ti mostrerò come progettare in modo modulare, anche se non stai utilizzando una guida di stile.)

Il passo successivo nello sviluppo guidato dalle guide di stile è la fase di astrazione , che è fondamentalmente l'esercizio di scomporre la soluzione progettuale in parti più piccole. Durante questa fase, i progettisti e gli sviluppatori lavorano insieme per discernere il progetto proposto e identificare gli elementi ei componenti (ad esempio i moduli) che verranno utilizzati o migliorati o che dovranno essere creati per l'implementazione.

La fase di astrazione serve anche a tracciare un piano per la fase successiva: implementazione e documentazione . Durante questa fase, i moduli vengono costruiti o migliorati in isolamento dal resto dei moduli esistenti. Nello sviluppo web, questo significa costruire un componente o definire gli stili per un elemento indipendente dall'applicazione. Questo è un aspetto importante della modularità, perché aiuta a identificare eventuali problemi nelle prime fasi del processo, prevenendo dipendenze impreviste con altre parti del sistema. Il risultato sono parti più stabili che sono più facili da integrare nell'insieme.

Qualcosa di unico nello sviluppo guidato dalle guide di stile è che, mentre l'implementazione progredisce, viene eseguita anche la documentazione, anziché essere un ripensamento. Questo è possibile perché quando viene utilizzato un generatore di guide di stile, la documentazione diventa una guida di stile vivente , che funge sia da framework che da sandbox per l'implementazione:

• La guida allo stile di vita funge da struttura di definizioni per gli elementi dell'interfaccia utente (come intestazioni, elenchi, collegamenti, controlli di input, ecc.) e come libreria di componenti (come sistemi di navigazione, barre degli strumenti, strumenti di ricerca, tabelle della griglia, ecc. ) disponibili per l'uso. Ciò significa che lo sviluppo non viene avviato ogni volta da zero. Al contrario, si basa sulle definizioni esistenti nel sistema dell'interfaccia utente e contribuisce ad esso.
• È anche una sandbox perché funge da spazio dimostrativo per costruire e testare l'implementazione. Questo è esattamente il punto in cui avviene lo sviluppo prima che sia integrato nell'applicazione.

L'ultima fase dello sviluppo guidato da una guida di stile, la fase di integrazione , ricorda la fase di assemblaggio nella progettazione modulare. Gli elementi oi componenti dell'interfaccia utente necessari sono stati sviluppati e sono pronti per essere integrati nell'applicazione. Non resta che configurarli e personalizzarli. Durante l'integrazione, la guida di stile è come qualsiasi buon manuale di istruzioni utilizzato per assemblare un progetto fisico modulare.

Ora che abbiamo identificato i concetti fondamentali del design modulare e dello sviluppo guidato dalle guide di stile, mettiamoli in pratica.

Progettare in modo modulare

Immagina questo: hai creato un ottimo flusso di utenti, messo insieme mockup e prototipi per illustrare le interazioni e documentato ogni singola parte. È probabile che i tuoi progetti seguano già una guida di stile, il che potrebbe metterti in grande vantaggio. (In caso contrario, non preoccuparti!) Fai un passo indietro e inizia a mappare le parti principali della tua soluzione di progettazione ad alto livello. Queste parti potrebbero essere i punti di interazione in cui vengono realizzate determinate cose. Ad esempio, un flusso di pagamento potrebbe essere simile al seguente:

Ma tieni le pistole! Questi non sono ancora moduli. Per arrivarci, dobbiamo identificare gli elementi dell'interfaccia utente che sono persistenti nel flusso, come ad esempio:

• l'indicatore dei passaggi di checkout,
• elementi del modulo utilizzati per inserire informazioni,
• la rappresentazione dei prodotti nel carrello,
• la rappresentazione di prodotti correlati che altri hanno acquistato,
• politiche sull'acquisto,
• Testo guida,
• messaggi e avvisi.

Scavando un po' più a fondo, troveremo anche stili e modelli di interazione:

• Stili:

• colori usati per denotare:

  • messaggi di errore, successo, avviso e informazioni;
  • azioni primarie contro azioni secondarie;
  • stati inattivi rispetto a stati selezionati rispetto a stati disabilitati;
  • collegamenti rispetto al testo normale;
  • marchio;

• tipografia utilizzata per denotare diversi tipi di contenuto:

  • dimensione del carattere per disporre le informazioni in modo gerarchico;
  • tipi di caratteri per evidenziare messaggi o fornire informazioni aggiuntive;
  • elenchi per riassumere le informazioni;

• iconografia per trasmettere un significato visivo e per un rapido riferimento ad azioni comuni.

• Modelli di interazione:

  • mostrare i passi imminenti (disabilitato);
  • mostrando i passaggi precedenti (abilitati in modo che le informazioni possano essere modificate);
  • visualizzazione di riepiloghi modificabili;
  • convalidare le informazioni una volta che l'utente ha fatto clic fuori dal campo;
  • fornire testo di aiuto al rollover;
  • aggiornare il carrello una volta effettuata la selezione.

Una volta che il design è stato suddiviso in tutti questi pezzi più piccoli, avremo finalmente i nostri moduli. A questo punto, è più facile vedere che molti di essi si applicano non solo al processo di pagamento, ma a molte altre aree dell'applicazione. Con un approccio di progettazione modulare, questi moduli possono essere creati in modo che siano utilizzabili in questo particolare progetto così come in quelli futuri.

Vale la pena menzionare il design atomico come una metodologia in grado di accelerare questo processo di creazione di progetti modulari. Questa metodologia analizza le relazioni tra le diverse parti del sistema e il modo in cui interagiscono, utilizzando la chimica come analogia. L'esecuzione dei passaggi è praticamente l'inverso del nostro esercizio precedente:

1. Partiamo dagli atomi , che sono i moduli più piccoli del sistema (nel nostro esempio i pulsanti, la tipografia e l'iconografia).
2. I moduli crescono in complessità, legandosi insieme in molecole , che forniscono più funzionalità (nel nostro esempio, gli indicatori delle fasi di checkout e il relativo modulo dei prodotti).
3. Poi ci sono gli organismi , che sono molecole raggruppate nell'applicazione (nel nostro esempio, l'intestazione dell'applicazione e varie forme).
4. Lasciando l'analogia chimica, il livello successivo sono i modelli , che sono strutture predefinite in cui vengono collocati gli organismi.
5. Infine, ci sono le pagine , che sono istanze di modelli.

Il pezzo mancante qui è un modo per documentare i moduli che sono stati identificati. Non si tratta solo di creare un documento di specifiche per catturare come devono essere costruiti i moduli o di scrivere linee guida che acquisiscano definizioni di alto livello come i colori del marchio e le famiglie di caratteri (che sono tipiche di qualsiasi guida di stile standard). Piuttosto, la documentazione deve essere più sofisticata e dinamica, in modo che quando questi moduli cambiano (e tu sai che lo faranno!), la documentazione non diventi obsoleta. Questo è esattamente il punto in cui le guide sugli stili di vita colmano il divario!

Utilizzando una guida allo stile di vita

Una guida allo stile di vita può essere molto utile durante il processo di progettazione perché fornisce diverse cose.

Una linea di base con cui lavorare

Invece di ricominciare ogni volta da zero, la guida di stile fornisce la direzione visiva e i moduli che dovresti utilizzare per creare il design.

Poiché una guida allo stile di vita viene generata dal codice effettivo, riflette la versione più recente e più completa del design implementato.

Documentazione delle soluzioni progettuali

Le conoscenze acquisite per risolvere un particolare problema di UI o UX possono essere consegnate per un uso successivo.

Questo aiuta a mantenere la coerenza nell'implementazione, incoraggiandoti ad adattare qualsiasi nuova soluzione a una parte del progetto attuale.

Svilupperai modelli con cui gli utenti possono familiarizzare, migliorando così l'usabilità.

Facilità di comunicazione

La guida aiuta a comunicare il design fornendo la rappresentazione più aggiornata dell'interfaccia utente (a differenza dei modelli statici, che diventano rapidamente obsoleti).

Viene sviluppato un linguaggio comune dell'interfaccia utente perché devi nominare i vari elementi nella guida di stile. Ciò richiede la collaborazione non solo tra i designer dell'interfaccia utente, ma tra i designer e gli sviluppatori, il che è un grande vantaggio quando devi comunicare come implementare un progetto.

Che tu abbia una guida di stile esistente o che tu stia pianificando di crearne una, automatizzare il processo ti metterà nella giusta direzione, guidando il processo di progettazione in modo modulare. Quindi, se sei pronto per acquistare un generatore di guide sullo stile di vita, ti consiglio le seguenti risorse:

• "Una panoramica approfondita degli strumenti della guida allo stile di vita", Robert Haritonov, Smashing Magazine
• "Panoramica dei generatori di librerie di modelli", David Hund, GitHub
• "Riepilogo del generatore di guide di stile", Susan Robertson, A List Apart

Non portarlo all'estremo!

Ora che abbiamo esaminato come ottimizzare il processo di progettazione per incorporare la modularità, nonché i vantaggi di una guida allo stile di vita, esploriamo alcune delle insidie ​​comuni che potresti incontrare lungo il percorso.

La Guida allo stile non sostituisce il lavoro di progettazione

Non è raro sentire dai manager che, una volta che la guida allo stile di vita è a posto, la maggior parte del lavoro di progettazione è fatto. Mentre viene svolto gran parte del lavoro ripetitivo e banale (come la prototipazione dei diversi stati di un pulsante più e più volte), considera che:

• nuove funzionalità dovranno essere continuamente sviluppate,
• trovare una soluzione implica prendere decisioni di progettazione.

Quindi, sì, avere una guida allo stile di vita e seguire lo sviluppo guidato da una guida di stile migliora il flusso di lavoro di sviluppo, ma non toglie il designer dall'equazione. Avere uno strumento che velocizza i flussi di lavoro e migliora la comunicazione è vantaggioso sia per i progettisti che per gli sviluppatori. Ma il bello di questo approccio è che lascia molto spazio alla personalizzazione dell'interfaccia utente, migliorando così l'esperienza dell'utente e capire che fa parte del ruolo del designer.

Non seguire i modelli all'estremo

Dovremmo sempre sforzarci di utilizzare i modelli in un'applicazione. Ad esempio, l'uso coerente di colori e dimensioni dei caratteri può indicare rapidamente all'utente elementi nell'interfaccia utente con cui è possibile interagire. Tuttavia, evita di usare un modello solo perché è stato implementato in precedenza; piuttosto, usalo perché risolve davvero il problema a portata di mano.

Ad esempio, se hai stabilito lo schema di visualizzazione delle barre degli strumenti nella parte superiore dello schermo, questo schema funzionerà nella maggior parte dei casi, ma ci saranno momenti in cui presentare una barra degli strumenti contestuale, più vicina al punto in cui l'utente sta agendo, ha più senso . Quindi, chiediti sempre se il riutilizzo di un modello dia la priorità alla facilità di implementazione rispetto all'esperienza dell'utente.

Non trascurare l'iterazione di progettazione

Questo si lega un po' al punto precedente. Non trascurare il valore dell'iterazione e dell'innovazione quando si provano nuovi modelli e si trovano modi per progettare un'interfaccia, anche se a prima vista non seguono la guida di stile. La guida di stile non dovrebbe essere un freno al tuo sforzo per creare la migliore esperienza utente possibile. Piuttosto, come suggerisce il nome, dovrebbe essere una guida, un punto di partenza per aiutarti a risolvere i problemi attingendo al lavoro e all'esperienza precedenti. L'iterazione durante la fase di progettazione dovrebbe continuare a essere importante come sempre e dovrebbe spronarti a migliorare i modelli stabiliti.

L'onere della manutenzione

Tra le migliaia di cose che comporta il tuo lavoro, mantenere la guida di stile dovrebbe essere l'ultima cosa che sembra un peso. Per ovviare a questo, trovo utili le seguenti pratiche:

• Trova un sistema di documentazione facile da installare e con cui interagire regolarmente.
• Rendi gli aggiornamenti della documentazione una parte del tuo flusso di lavoro, piuttosto che un ripensamento una volta che l'implementazione è già uscita. Documenta mentre vai!
• Stabilire linee guida che rendano facile per tutti contribuire alla documentazione. Ciò distribuirà il carico di lavoro e aumenterà il senso di appartenenza.

Design modulare per costruire modulare

La creazione di un sistema di interfaccia utente flessibile, coerente e facile da personalizzare, ma anche scalabile ed economico, dipende non solo da come è costruito, ma anche da come è progettato. Una libreria di componenti ha scarso valore se ogni nuovo design viene creato in modo indipendente, ignorando standard e modelli stabiliti.

Il rovescio della medaglia, non si tratta di creare interfacce con lo stampino che riutilizzano gli stessi stili e schemi perché è conveniente. Un buon design è efficace non per la sua unicità, ma perché combina forma e funzione per creare una grande esperienza . Questo obiettivo dovrebbe essere sempre al primo posto e l'utilizzo di un metodo come lo sviluppo guidato da una guida di stile per portare la modularità sia alla progettazione che allo sviluppo dovrebbe aiutarti a creare un sistema di interfaccia utente coeso che raggiunga questo obiettivo.