Orientarsi

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

• identificare l’identità dell’applicazione o del sito (attraverso logo ed eventualmente nome del dominio)
• identificare dove l’utente si trova, in quale parte dell’albero o del grafo in cui è strutturata la macroarchitettura dell’applicazione;
• identificare la risorsa che sta visualizzando: il titolo della pagina o della vista;
• visualizzare gli elementi più salienti di quella pagina

Navigare

L’utente deve potersi muovere: navigare nei vari nodi della macroarchitettura, attraverso un sistema di navigazione. Vanno dunque progettate:

• la navigazione globale (adattata per desktop (layout large) e per mobile (layout medium, small);
• la navigazione locale, contestuale, supplementare, di cortesia.

Cercare, trovare

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.

Cercare, trovare (2)

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à:

• motore di ricerca interno (e relativa interfaccia)
• quando opportuno (lista di elementi relativamente lunga) filtri di ricerca, navigazione a faccette

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.

Stato del sistema (2)

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

• visualizzare lo stato del sistema o di un componente;
• rappresentare gli attributi dinamici più salienti del sistema o di un elemento;
• prevedere un servizio di notifiche per gli eventi più salienti per l’utente.

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:

• valutazioni e commenti di altri utenti;
• meccanismi che implementino e facilitino il processo decisionale, applicando automaticamente le principali euristiche: #choosability - Designing Interactions that Help Customers in Decision Making.

Identificare un oggetto

Stabilire l’identità di un oggetto: il nome di una persona, il titolo di un libro, e così via. Se opportuno, presentare l’immagine dell’oggetto

Visualizzare le informazioni di un oggetto

Visualizzare le informazioni, sia le più importanti che, eventualmente, i dettagli:

• il prezzo di un prodotto
• la geo-localizzazione di un luogo
• le date di un evento

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.

Contenuti: regole

• se si adotta l’approccio ooux, ogni contenuto va concettualizzato come un oggetto: la foto, il video, il post e così via;
• se i contenuti dell’oggetto sono limitati, l’oggetto può essere rappresentato come un elemento in una lista; l’esempio più tipico è l’oggetto tweet;
• generalmente però gli oggetti tendono ad essere ricchi di contenuti, di attributi, di relazioni; in questo caso, è necessario prevedere una pagina per ogni oggetto
• nella rappresentazione degli oggetti è necessario permettere all’utente di
  • identificiare l’oggetto, l’eventuale tassonomia, gli attributi principali
  • monitorare lo stato dell’oggetto, ed eventuali eventi ad esso associati
  • presentare le funzioni e le azioni principali legati a quell’oggetto, attraverso le opportune affordance

Fornire delle informazioni

Spesso alcune funzioni delle applicazioni richiedono (o permettono) l’inserimento di informazioni.

Produrre dei contenuti

Alcune applicazioni permettono di produrre dei contenuti: ad esempio i software per la gestione e creazione di blog.

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).

Rappresentare la pagina oggetto

Nella pagina oggetto sono rappresentate:

• le caratteristiche dell’oggetto
• le componenti dell’oggetto (che possono essere, a loro volta, degli oggetti a se stanti)
• le relazioni con altri oggetti
• eventuali metodi dell’oggetto, ovvero funzioni ad esso associate.

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.

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.

Esempi

• Bestbuy
• Target
• Costco
• Macys (abbigliamento)
• Ikea
• Trivago
• Airbnb
• kickstarter

Rappresentazione delle attività

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

• gli attori coinvolti
• le motivazioni (gli scopi, i bisogni)
• il contesto
• le circostanze che innescano l’attività e la rendono possibile
• le regole e le norme a cui l’attività è vincolata
• le risorse necessarie
• il processo secondo cui l’attività si svolge.

Attività: progettare il processo

Più in particolare, nel processo vanno stabiliti:

• i vari passaggi: i compiti / task necessari per portare a termine l’attività;
• i sottopassaggi, in una rappresentazione ad albero
• i vincoli logici
• la sequenza, guidata dall’albero dei task, dai vincoli logici, dalla consuetudine
• la possibilità di parallelizzare alcuni task, o di permettere agli attori di scegliere sequenze diverse, nel rispetto dei vincoli logici

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:

• possa avere una visione di insieme della attività e del processo (ad esempio rendendo espliciti i passaggi)
• abbia chiare le circostanze, le risorse richieste, le regole
• sia chiara l’eventuale divisione dei compiti con altri attori
• possa essere guidato nelle attività più complesse
• al termine dell’attività, abbia la possibilità di verificare il processo, le azioni intraprese, le scelte e le informazioni fornite, e di confermare o correggere
• quando possibile, possa interrompere una attività e riprenderla in seguito

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:

• l’intestazione generale permette di orientarsi
• la navigazione permette di muoversi
• l’intestazione contestuale di identificare un oggetto (o una attività) e visualizzarne lo stato
• l’area dei contenuti permette di consumare o produrre contenuti.

La struttura

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