Linee guida

Stefano Bussolon

2018

Guideline, style guide, pattern

Spesso i termini guideline e style guide sono usate in maniera intercambiabile.

Una possibile distinzione può basarsi sui livelli di Garrett:

Definizioni

Secondo il Merriam-Webster una guideline è una regola o un'istruzione che indica come qualcosa debba essere fatta. Secondo Wiktionary è un principio o una regola non specifica che offre una direzione all'azione o al comportamento; un piano o una spiegazione che guida nello stabilire degli standard o determinare il corso di una azione.

Una guida di stile, secondo Wiktionary, è un insieme di standard per progettare e scrivere documenti, sia per uso generale che per delle pubblicazioni o organizzazioni specifiche, e può definire standard di tipografia, grammatica e sintassi.

Per semplificare, potremmo considerare le guide di stile come delle linee guida specifiche per il visual design e della scrittura dei contenuti.

Finalità

Le finalità di un documento di linee guida sono molteplici:

Strutturare un documento di linee guida

Il documento dovrebbe essere strutturato in base ad una gerarchia di livelli di astrazione: dai princìpi più astratti (princìpi generali, di design, ucd, accessibilità) alle funzioni delle interfacce, alle tipologie di schermata, fino al dettaglio (rappresentare le date, le label) e, se opportuno, ai dettagli implementativi.

Una possibile struttura (1)

Una possibile struttura (2)

Una possibile struttura (3)

Design language

Il fine del design language è quello di massimizzare il rapporto fra informazione e complessità cognitiva.

Minimizzare la complessità visiva e cognitiva è fondamentale per aumentare l'usabilità e la percezione estetica dell'interfaccia.

Design language: princìpi (1)

Design language: princìpi (2)

Design language: princìpi (3)

Le funzioni dell'interfaccia

Orientarsi

L'utente deve potersi orientare, capire cosa c'è intorno

Trovare, cercare

In un sistema informativo ricco, non è affatto scontato che l'utente arrivi direttamente alla risorsa che gli interessa (magari arrivando da Google).
La navigazione offre all'utente la possibilità di muoversi, ma è indispensabile che egli possa trovare quello che sta cercando. Il motore di ricerca, seppur necessario, è solo uno degli strumenti che vanno messi a disposizione degli utenti. L'information design deve garantire un buon livello di information scent, per permettere di arrivare ai contenuti più importanti anche senza ricorrere al motore di ricerca.
In ogni caso, possono essere necessarie le seguenti funzionalità:

Visualizzare lo stato del sistema o di un oggetto

All'interno di un sistema informativo vi sono informazioni più statiche ed altre più dinamiche (il saldo del conto, le notifiche su facebook, il ritardo del treno). Se le informazioni dinamiche sono di rilevanza per l'utente, non solo devono essere facili da vedere ed attirare - in maniera appropriata - l'attenzione; se opportuno, è utile che siano le informazioni che vanno all'utente, ad esempio per mezzo di notifiche.

Pertanto, una delle funzioni dell'interfaccia è quella di:

Prendere decisioni

Nelle numerose circostanze in cui l'esperienza d'uso implica un processo decisionale, è necessario che il sistema metta a disposizione quelle funzioni e quei servizi che possono facilitare il processo di scelta e di decisione:

Agire: fare delle azioni

Nella progettazione di un servizio online vanno identificati i verbi della user experience, ed implementata l'interazione ad essi associata.

Le funzioni dispositive vanno rappresentate attraverso delle opportune call to action. Dev'essere pertanto chiaro all'utente se un link fa parte della navigazione o innesca una azione.
Queste funzioni, inoltre, generalmente richiedono all'utente di immettere dei dati. Oltre agli aspetti legati all'usabilità, e al rispetto delle linee guida, è opportuno attenersi al principio di chiedere all'utente solo le informazioni strettamente necessarie (oppure di permettere di inserire le info facoltative in un secondo momento).

Fruire dei contenuti

Le persone vanno su internet per consumare di contenuti: testi, foto, video, film, musica, documenti, slide, ebook e quant'altro. Sono questi gli oggetti della user experience.

Alcune regole che è bene seguire nella presentazione dei contenuti.

L'importanza delle diverse funzioni

Naturalmente, il peso delle varie funzionalità varia a seconda dell'applicazione: per un sito di e-commerce le funzioni dispositive sono centrali; per un sito di informazione è prioritaria la fruizione dei contenuti. L'anatomia e le componenti dell'applicazione devono tener conto di queste peculiarità.

Alcune di queste funzioni sono di supporto: navigare, orientarsi sono funzionali a fare qualcos'altro. Altre, sono funzioni primarie: fruire di contenuti, fare delle azioni.

La grammatica dell'applicazione

Nella grammatica cognitiva, i sostantivi corrispondono agli oggetti, gli aggettivi agli attributi degli oggetti, e i verbi alle funzioni. Sia gli oggetti che le funzioni sono divisi per ontologia, e all'interno dell'ontologia sono sistematizzati in tassonomie.
Le linee guida devono prevedere un template per ogni classe dell'ontologia, sia degli oggetti, che delle funzioni. Inoltre, devono prevedere un template per i rami della tassonomia.

Dunque, per ogni classe dell'ontologia, è necessario prevedere un template per le istanze della classe (gli oggetti, le funzioni) ed un template index per i rami della tassonomia.
Inoltre, va previsto un template per la home page.

Pagina oggetto

I template delle pagine oggetto corrispondono alle ontologie del sistema informativo.
In un sistema di e-commerce vi sono pagine oggetto per ogni prodotto. In un social network ci sono pagine oggetto per ogni persona. In un blog, le pagine oggetto per i post.

Nella pagina oggetto, il titolo corrisponde al nome dell'oggetto (il nome del prodotto, il nome della persona, il titolo del post).
Se appropriato, nella pagina oggetto viene mostrata l'immagine dell'oggetto (ad esempio, la fotografia del profilo, o del prodotto, o la copertina del libro, o dell'album).
Nella pagina oggetto sono rappresentate:

Caratteristiche, componenti, relazioni e metodi derivano dal processo di concettualizzazione e dalla creazione delle ontologie. Questi elementi vengono raggruppati in cluster, in base alla loro natura. Se molto numerosi, possono essere paginati, ad esempio con l'utilizzo di tab.
La rappresentazione di questi elementi dev'essere appropriata alla loro tipologia.

dalla concettualizzazione ai template

dalla concettualizzazione ai template

Pagina di profilo

La pagina di profilo è finalizzata a visualizzare ed eventualmente modificare le informazioni dell'utente loggato nell'applicazione

Pagina index

Le pagine index vengono utilizzate principalmente per rappresentare i rami delle tassonomie.
Nelle pagine index vengono elencate, in base ad opportuni criteri, gli oggetti e le funzioni principali della sezione.

Home page

La home page è un caso particolare di pagina index.

Rappresentazione delle attività

Le attività rappresentano la concettualizzazione di quelle funzionalità che permettono all'utente di agire. Nella definizione di una attività vanno considerati:

Attività: progettare il processo

Più in particolare, nel processo vanno stabiliti:

La rappresentazione delle attività più semplici (task elementari) può avvenire attraverso delle micro-interazioni; i task più complessi la rappresentazione dei passaggi principali può avvenire attraverso il pattern wizard, dove ad ogni passaggio corrisponde una schermata / pagina; i compiti a complessità intermedia possono essere rappresentati nel contesto di un'unica pagina.

La rappresentazione deve implementare - e rendere espliciti - i vincoli logici, attraverso opportuni vincoli di interazione: non puoi iniziare il passaggio b finché non hai completato il passaggio a; deve inoltre rendere esplicite le circostanze in cui questi vincoli non ci sono, permettendo all'utente - per quanto possibile - di personalizzare la sequenza.

Attività: linee guida

Nella rappresentazione delle attività è utile che l'utente:

Nelle circostanze in cui è importante mantenere esplicito il contesto in cui l'attività si innesca, può essere opportuno gestire il processo all'interno di una finestra modale sopra alla schermata del contesto iniziale. Questa soluzione è però sconsigliata se l'attività ed il processo sottostante risultano piuttosto complessi.

Anatomia della pagina

Una interfaccia deve permettere all'utente di orientarsi, di navigare, di cercare, di scegliere, di identificare un oggetto (o una funzione), di visualizzarne le informazioni, di visualizzare lo stato del sistema, di fruire o creare dei contenuti, di inserire delle informazioni, di fare delle azioni.

L'anatomia della pagina (o della schermata) deve permettere tutte queste cose. Per questo motivo è utile la presenza di diverse componenti:

La struttura

La struttura delle linee guida

La struttura delle linee guida

Risorse utili

Website Style Guide Resources è un elenco di risorse sulle style guide

Atomic Design | Brad Frost introduce il concetto di Atomic Design.

How to create beautiful style guides online | DesignHooks

29 Well-Designed Online Style Guides - Web Design Ledger

UI Style Guides | Experience Dynamics

50 Meticulous Style Guides Every Startup Should See Before Launching – Design School