Perché le startup hanno bisogno di una guida di stile

Anche per un designer esperto, creare una nuova guida di stile per un determinato prodotto è difficile: ci sono molte possibili direzioni di progettazione e il processo può diventare rapidamente travolgente. La vita da startup è frenetica, veloce e piena di cliché come "il perfetto è il nemico del fatto", "muoviti velocemente e rompi le cose" o "lancialo ora, aggiustalo più tardi".

Trovare una guida di stile con tali slogan e priorità fluttuanti è impegnativo, ma un must se il design di un prodotto vuole avere successo a lungo termine.

Negli ultimi anni, abbiamo sentito parlare molto di sistemi di progettazione, guide di stile, librerie di modelli e progettazione atomica. Sebbene questi strumenti siano molto utili, usarli può sembrare eccessivo quando vuoi solo creare alcune schermate per un MVP o per eseguire la demo di un'app. Tuttavia, avere una guida di stile non solo migliorerà il tuo processo di progettazione in generale, ma renderà la tua app più solida e coerente.

Parliamo prima dei principali vantaggi di una guida di stile, quindi tocchiamo l'ambiente di avvio impegnativo. Infine, discuteremo di come una guida di stile si evolva sempre come un documento vivente.

I cinque principali motivi per cui una guida di stile è una buona idea

1. Una guida di stile rende i progetti concreti e il branding chiaro

In qualità di designer solitario in una startup, come spesso accade, non ci sono molte opportunità per rivedere e mettere in discussione le decisioni di progettazione prese da altri membri del team. Sebbene tutti possano lavorare in collaborazione, i progetti non sono necessariamente condivisi con gli altri. Ciò significa che c'è solo una persona che convalida i progetti finali.

Una guida di stile fornirà a una startup una guida e una documentazione di riferimento. Metterà in discussione alcune delle scelte progettuali fatte dal designer o dal team perché dovranno essere convalidate nel contesto globale dell'app. La progettazione di un componente dell'interfaccia utente perché funziona bene su uno schermo non lo taglierà. Un design ben congegnato dovrebbe risolvere un singolo problema di progettazione in una situazione, nonché un problema diffuso che si trova su altre schermate della tua app.

Una guida di stile mette a disposizione di tutti nella tua azienda lo stile generale del design, le linee guida del marchio, le specifiche e le regole. È solo un clic di distanza. Possono accedere a un URL per accedere facilmente a una guida di stile online o scaricare un PDF. Il design diventa il lavoro di tutti, non è più l'unica responsabilità del team di progettazione. È un approccio prudente che migliorerà l'interfaccia utente del tuo prodotto.

2. Una guida di stile rende il tuo design più coerente

Fornisce una sorta di dizionario per il linguaggio di progettazione dell'interfaccia utente. Puoi usare la stessa terminologia quando vuoi comunicare qualcosa che hai già espresso. Immagina se avessimo parole leggermente diverse per esprimere la stessa cosa:

1. "Piove; Ho bisogno del mio ombrello".
2. “Piove, ho bisogno del mio ombrello”
3. “Piove, ho bisogno del mio ombrello”

Può rendere un linguaggio poetico, ma difficile da capire. Fondamentalmente, è la stessa idea con l'interfaccia utente di un sito o di un'app. Per facilità d'uso, dovresti inventare una nuova "parola" solo quando stai davvero creando qualcosa di nuovo. In questo modo, sei vincolato da una regola rigorosa che dice: "Solo i componenti che risolvono un problema di progettazione ripetutamente in tutto il prodotto sono ammessi nel prodotto e successivamente nella guida di stile".

La coerenza rende il tuo prodotto più user-friendly; un prodotto altamente utilizzabile può tradursi in maggiore coinvolgimento e vendite.

3. Il riutilizzo degli stessi componenti di sistema rende la tua app più facile da usare

Come nell'esempio della lingua, la coerenza è fondamentale. Una volta che ogni componente è stato compreso dall'utente, se utilizzato di nuovo in un contesto diverso, le persone avranno già familiarità con il suo comportamento. Quando si tratta di interazioni con l'utente, questa coerenza migliora l'usabilità complessiva del prodotto.

Lavorare con un sistema di progettazione basato sui componenti consente di risparmiare denaro e semplifica anche l'aggiornamento di un prodotto. Se c'è un problema di usabilità con un componente in una determinata situazione, può essere risolto una volta e anche tutti gli altri potenziali problemi con quel componente verranno aggiornati.

4. Una guida di stile rende la tua app più veloce da sviluppare a lungo termine

Quando il tuo team sta sviluppando un componente comune per uno schermo, sta sviluppando una soluzione che utilizzerà anche altrove. Ciò consente di risparmiare tempo di sviluppo, molto. Quando la tua azienda si ridimensiona, ciò potrebbe significare risparmiare fino a 10 volte le ore uomo necessarie per costruire un nuovo schermo.

5. Una guida di stile facilita l'efficienza produttiva e l'innovazione

La creazione di una guida di stile rende i progetti più accessibili e prontamente disponibili per il resto dell'azienda. Sviluppatori e designer possono prototipare un'idea più velocemente e facilmente. Bootstrap è spesso elogiato per aver semplificato agli sviluppatori la creazione di un prototipo funzionante: la tua guida di stile ha lo stesso scopo. Fornisce una base di riferimento per una nuova interfaccia utente che verrà creata dagli sviluppatori, senza che il team di progettazione debba prima creare lo schermo (anche se il team di progettazione dovrebbe eseguire il controllo qualità delle schermate finali).

Le sfide di una startup, una guida di stile in Flux

La creazione di un sistema di progettazione in un ambiente di avvio non è così lineare come potrebbe essere in un'azienda più matura in cui sono abituati a un processo più snello. In un'azienda più tradizionale, il team di progettazione esegue la ricerca, l'ideazione e la sperimentazione UX, quindi elabora la guida allo stile del marchio finale. Questo processo non è adatto a tutte le aziende. Le startup lavorano in un ambiente in cui la loro visione e i requisiti per il prodotto sono sempre in evoluzione. Lavorano con MVP (prodotti minimi praticabili), versioni incomplete delle loro app che vengono utilizzate per testare la loro idea e mostrarne il potenziale agli utenti.

Quando si tratta di creare una guida di stile, questo può diventare un problema.

In un ambiente in continua evoluzione, un designer di solito fatica a creare una guida di stile che dovrebbe essere in qualche modo "fissata". Un designer potrebbe non avere il tempo di pensare a fondo a tutti i componenti che vengono creati, anche se potrebbero comunque finire nella prossima versione dell'app. Facebook notoriamente ha scambiato il loro menu di hamburger con una navigazione a schede quando sono maturati un po'. Pensi che chi ha messo il menu dell'hamburger lì in primo luogo lo abbia anche aggiunto alla styleguide di Facebook?

Potresti anche considerare che non è ancora il momento di creare una styleguide. Potresti renderti conto che a lungo termine ne avrai bisogno, ma in questo momento è più importante creare schermate per i test di usabilità dell'app. Inoltre, avrai bisogno anche di alcune pagine di marketing per promuovere la tua app. Improvvisamente, il tuo design deve aumentare e mentre crei gli schermi, inizi a vedere il valore di avere una guida di stile in grado di mantenere coerenti i tuoi design e il marchio aziendale.

Il problema è che non sai esattamente quando è il momento giusto per scambiare flessibilità con stabilità. Devi decidere quando avviare la styleguide e quando concentrarti solo sulla creazione di schermate. Un approccio ottimale potrebbe essere quello di produrre una guida di stile nello stesso momento in cui stai consegnando gli schermi: in questo modo potresti essere in grado di avere il meglio di entrambi i mondi.

Inizia con un po' di ispirazione per l'interfaccia utente

Un buon modo per iniziare, soprattutto se non sei un designer, è raccogliere esempi di stili di design che ti piacciono o, cosa più importante, a cosa pensi che risponderanno gli utenti. Raccogli il maggior numero possibile di esempi e inseriscili in una cartella/scheda InVision/scheda Niice/ecc. Possono essere usati come riferimento e ispirazione insieme alla tua sensibilità progettuale. Puoi basarti su di essi in seguito per creare una libreria di modelli.

Ad esempio, quando stavo lavorando a una guida di stile per un'azienda che promuove artisti nel settore dell'intrattenimento, ci siamo chiesti se sfondi chiari o scuri avrebbero avuto un impatto maggiore sui nostri utenti. Ho esaminato centinaia di siti Web diversi in giochi/film/produzione visiva per vedere come utilizzavano sfondi scuri e chiari.

Ho realizzato un foglio di riferimento in cui ho evidenziato i modelli più comuni. Un modello che ho identificato era che le aziende di quel settore tendevano a utilizzare sfondi più scuri quando presentavano i loro prodotti, ma usavano sfondi bianchi nelle loro attività di marketing, eCommerce e negozi.

Non devi andare così in profondità, ma ho scoperto che avere riferimenti visivi aiuta, non solo nella creazione di una guida di stile, ma anche nel ricordare alcuni dei casi d'uso per cui potresti aver bisogno di progettare. Una volta che ti senti a tuo agio con i riferimenti che hai raccolto, puoi iniziare a lavorare sul design visivo.

Progetta componenti dell'interfaccia utente solidi

Mentre si lavora alle startup, è più difficile creare componenti che creare pagine, almeno all'inizio. Quando progetti una pagina, spesso hai un'idea di come verrà utilizzata. Questo non è necessariamente il caso quando si progetta un componente. Stai cercando di progettare per un caso d'uso specifico, ma vuoi che faccia parte di un sistema di progettazione universale e devi affrontarlo in questo modo. Ad esempio, potresti voler creare un componente di navigazione secondaria con tre pulsanti. Potrebbe anche essere necessario che funzioni con quattro, cinque o dieci pulsanti e dovrà funzionare su dispositivi mobili, tablet e desktop. Devi pensare in anticipo.

Vuoi un certo livello di persistenza o potenza in un componente. I componenti comuni non dovrebbero cambiare spesso e devono essere riutilizzabili in molti punti del tuo prodotto. Ad esempio, se sei interessato solo a un'app iOS, desideri testare il tuo componente in base al numero di opzioni o alla lunghezza del contenuto, non necessariamente alle dimensioni dello schermo. L'idea è che se è praticabile nell'interfaccia utente in molti punti della tua app, allora sai che è un componente che ha il potenziale per far parte della tua guida di stile.

Una startup deve partire praticamente dal nulla e poi muoversi velocemente. Il tuo capo potrebbe volere uno schermo progettato entro la fine della giornata. Ciò significa che non puoi davvero sviluppare un'intera guida di stile e quindi visualizzare lo schermo. Peggio ancora, potresti progettare una styleguide con componenti che non vedranno mai la luce perché la visione dell'azienda è cambiata. Come si suol dire, è meglio spedire ora.

La creazione di una guida di stile eccezionale richiede tempo e, poiché diventerà la base del tuo sistema di progettazione, vorrai farlo bene. In un ambiente di avvio, devi lavorare sulla tua styleguide con tutto in tandem.

La guida di stile come documento vivente

Dovresti pensare alla tua styleguide come a un work in progress. Come una startup che decide la sua strategia, scoprirai la tua guida di stile mentre procedi. Lo modificherai e lo regolerai nel tempo fino a quando non diventerà la base della tua interfaccia utente. Un approccio utile è avviare il primo mockup nello stesso momento in cui avvii la tua guida di stile. Apri due file con il tuo software preferito (nel mio caso, Sketch); uno chiamato page name e l'altro styleguide . Mentre lavori al design dello schermo, puoi iniziare a seminare la tua guida di stile con gli elementi che compongono il tuo design.

Man mano che inizi a fare più di questi, noterai presto che alcuni componenti sono i principali candidati per l'inclusione nella guida di stile. Ad esempio, se hai optato per uno stile di icona, tutte le tue icone possono entrare nella styleguide fin dall'inizio.

Di solito creo una sezione chiamata "icone fatte finora". Se a un certo punto qualcuno ha bisogno di un'icona, deve prima controllare questa sezione prima di crearne una nuova.

Altri elementi ovvi da considerare sono colori, pulsanti, selettori, titoli, intestazioni, corpo del testo, ecc. Se stai utilizzando uno stile appositamente per il marketing, puoi considerare di inserirlo nella tua styleguide ed etichettarlo in modo appropriato. Va bene se non sei completamente soddisfatto di un particolare oggetto. È possibile perfezionare gli elementi dell'interfaccia utente nel sistema di progettazione in un secondo momento, quando si presenta l'opportunità, e aggiornare la guida in modo appropriato. Non dimenticare, la styleguide è un documento vivo , soprattutto in una startup.

Alla fine, quando inizio a inserire i layout nella guida, so che sto iniziando a raggiungere un punto in cui tutti i componenti dovrebbero essere vicini al loro stato finale. Questa parte segna il punto di svolta nel processo di creazione della styleguide: ora puoi festeggiare! Un buon modo per celebrare un tale traguardo è creare un logo o un'icona (considera di nominarlo) per la versione 1.0 della styleguide.

Alcune persone arrivano al punto di stampare il logo/l'icona come un adesivo in modo che la squadra abbia una sorta di trofeo. Questo è anche il punto in cui di solito torno al modo più tradizionale di lavorare con la guida aprendo prima quella styleguide e quindi creando un nuovo file per qualsiasi interfaccia debba essere eseguita.

Conclusione

Come designer, creando una guida di stile il prima possibile, ti assicuri che la tua startup aderisca a uno standard di qualità più elevato. Può essere impegnativo, ma ne vale la pena. Una guida di stile solida e completa non solo ti aiuterà ad avere un prodotto migliore, ma ti aiuterà anche a ridurre i costi di sviluppo.

C'è un modo per farlo accadere anche in un ambiente frenetico in cui vengono prese decisioni rapide e talvolta i progetti devono cambiare rapidamente. Si spera che il processo sopra descritto aiuterà i designer di qualsiasi startup a far fronte alle sfide della complessità e della velocità, creando anche una solida guida di stile a vantaggio del prodotto.

• • •

Ulteriori letture sul blog di Toptal Design:

• eCommerce UX: una panoramica delle migliori pratiche (con infografica)
• L'importanza del design incentrato sull'uomo nel design del prodotto
• I migliori portfolio di designer UX: casi di studio ed esempi stimolanti
• Principi euristici per interfacce mobili
• Design anticipatorio: come creare esperienze utente magiche