class: profilo <h1>Linee guida</h1><h2 class="author">Stefano Bussolon</h2> --- layout: true <img src="https://www.bussolon.it/assets/logo_250.png" width="50px" height="50px" style="position:absolute;top:5px;left:5px;"/><div id="footer" style="position:fixed; bottom: 0px;left: 0px;height: 40px; padding:5px; width: 100%;display: flex;align-items: center;"></div> --- --- ## 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: * le guide di stile si riferiscono principalmente al quinto piano, la *superfice*, ovvero il visual design; * le Human interface guideline si riferiscono principalmente al quarto piano di Garrett, lo scheletro: information design, interface design, navigation design; * guide di stile e hig sono tipologie di linee guida. --- ## Definizioni Secondo il [Merriam-Webster](http://www.merriam-webster.com/dictionary/guideline) una **guideline** è una regola o un'istruzione che indica come qualcosa debba essere fatta. Secondo [Wiktionary](https://en.wiktionary.org/wiki/guideline) è 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](https://en.wiktionary.org/wiki/style_guide), è 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: * costituisce uno dei documenti di riferimento nella progettazione e nelle iterazioni * fornisce un **linguaggio comune** per designer, sviluppatori, project manager, product manager, marketing * garantisce **consistenza** dell'interfaccia, del linguaggio, del look and feel all'interno di un ecosistema (crosscanalità) * agevola lo sviluppo e l'adozione di **buone pratiche** * **riduce i tempi** di progettazione e di sviluppo * stabilisce uno **stile**, per migliorare la comunicazione * dettaglia gli **elementi**, i moduli, i componenti * costituisce la base per la **valutazione euristica** - valutazione ispettiva --- ## 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. --- background-image: url(https://www.bussolon.it/didattica/hci/slide/img/esagoni_ux/design_system.svg) background-size: contain --- ## Una possibile struttura (1) * i **princìpi generali**; ad esempio essere centrati sull'utente, essere inclusivi, essere finalizzati alla semplificazione e alla facilità d'uso, essere aperti (open source, open standard, open data) e così via; * i **princìpi di design**: ad esempio [GOV.UK](https://www.gov.uk/design-principles): focalizzarsi sui bisogni e gli scopi, con un approccio che si basa sui dati, possibilmente snello (do less), orientato ai servizi (digital services); * i **princìpi cognitivi** dell'ucd (sulla falsariga delle [euristiche](https://en.wikipedia.org/wiki/Heuristic_evaluation) di Nielsen o di Gerhardt-Powals); ad esempio: minimizzare il carico cognitivo, minimizzare l'incertezza, essere consistenti ... * i princìpi dell'**accessibilità**; * una chekclist di regole da seguire nella progettazione e da usare nella valutazione euristica --- ## Una possibile struttura (2) * la mappa delle più importanti funzioni e servizi online dell'ambito che viene coperto (i **verbi dell'ux**); ad esempio: registrarsi, creare un profilo, autenticarsi, acquistare un prodotto ...; * la definizione (o l'adozione) di un **design language**; * la definizione dell'**anatomia della pagina**: intestazione, navigazione principale, navigazione contestuale, area principale, footer, e la definizione dei requisiti di ogni area; * definizione delle **tipologie di pagine** previste: home, pagine indice, pagine di funzione, pagine degli oggetti; un buon esempio sono le [Page Types](https://swiss.github.io/styleguide/en/docs/03-basic-grid.html) della Swiss Styleguide; * la definizione del **layout**, con la specifica di layout diversi per i diversi canali: tipicamente i layout large, medium e small di desktop, tablet e smartphone; --- ## Una possibile struttura (3) * la definizione degli **elementi** dell'interfaccia, in base ad un approccio modulare e gerarchico, sulla falsariga dell'[atomic Design](http://bradfrost.com/blog/post/atomic-web-design/); * i princìpi di **implementazione**: che strumenti usare; framework css (es. bootstrap), librerie javascript (es <del>jquery</del>); quali vincoli (es. quali versioni di browser supportare); * una linea guida per il codice css, html e javascript (le [Styleguide](https://github.com/styleguide) di Github possono essere un buon punto di partenza); Un'ottima lista è [CSS Style Guides](https://css-tricks.com/css-style-guides/) di CSS-Tricks; * dei princìpi di **stile grafico** (colori, tipografia), e brand guidelines; ad esempio il [Guardian](https://design.theguardian.com/), [Twitter](https://about.twitter.com/en/who-we-are/brand-toolkit), [Facebook](https://www.facebookbrand.com/), [Uber](http://brand.uber.com/); * princìpi di **stile di scrittura**: ad esempio [The Economist](https://cdn.static-economist.com/sites/default/files/store/Style_Guide_2015.pdf); * una **implementazione** di riferimento delle guide. --- ## Esempi * [Linee guida di design - Designers Italia](https://designers.italia.it/norme-e-riferimenti/linee-guida-di-design/) * [Design principles | U.S. Web Design System (USWDS)](https://designsystem.digital.gov/design-principles/) * [Home – GOV.UK Design System](https://design-system.service.gov.uk/) * Pinterest [Gestalt](https://gestalt.pinterest.systems/home) * [Shopify Polaris](https://polaris.shopify.com/) * [Naming guidelines - Stacks](https://stackoverflow.design/brand/copywriting/naming/) * Financial Times [Origami](https://origami.ft.com/) * Microsoft [Fluent 2 Design System](https://fluent2.microsoft.design/) * [klaufel/awesome-design-systems: 📒 A curated list of bookmarks, resources and articles about design systems focused on developers.](https://github.com/klaufel/awesome-design-systems) * [alexpate/awesome-design-systems: 💅🏻 ⚒ A collection of awesome design systems](https://github.com/alexpate/awesome-design-systems?tab=readme-ov-file) --- ## 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) * corrispondenza fra la **gerarchia logica** e semantica dei contenuti e la gerarchia della rappresentazione visiva * corrispondenza fra la **vicinanza logica** e semantica dei contenuti ed il layout grafico * corrispondenza fra l'**importanza** delle informazioni e l'ordine di presentazione * corrispondenza fra l'importanza focale delle informazioni e azioni e la loro salienza percettiva (cosa serve quando) --- ## Design language: princìpi (2) * riduzione della quantità di informazioni: - riduzione della quantità di elementi informativi o potenziali distrattori - riduzione della complessità e della lunghezza degli elementi testuali * chiara definizione del contesto o dello scenario * familiarità del layout e dello stile grafico * consistenza grafica * chiarezza nella segmentazione negli elementi e nei gruppi di elementi, nel rispetto della gerarchia semantica e logica dei contenuti * utilizzo di linguaggio chiaro ed appropriato --- ## Design language: princìpi (3) * riduzione della complessità visiva attraverso - struttura gerarchica della rappresentazione - prossimità - allineamento - ripetizione - contrasto --- class: centraleArancio # Le funzioni dell'interfaccia --- background-image: url(https://www.bussolon.it/didattica/hci/slide/img/esagoni_ux/functions_ui.svg) background-size: contain --- ## 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 macro-architettura 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 macro-architettura, 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](https://bussolon.it/slide/2011/09_euroia_prague/index.html). --- ## 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](http://www.slideshare.net/bussolon/the-grammar-of-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 informazioni 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](http://www.slideshare.net/SophiaVoychehovski/object-oriented-ux-is-the-new-ia/). --- ## Contenuti: regole * se si adotta l'approccio [ooux](http://alistapart.com/article/object-oriented-ux), 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; ad esempio i commenti brevi; * 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 * **identificare** 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. In questo caso vanno stabilite le linee guida per le form e per l'input di dati in genere. --- ## 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) 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 - gli attributi * la tassonomia * le componenti dell'oggetto (che possono essere, a loro volta, degli oggetti a sé stanti) * le relazioni con altri oggetti * eventuali *metodi* dell'oggetto, ovvero funzioni ad esso associate. Attributi, tassonomia, 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 --- ## Pagine indice Le pagine indice vengono utilizzate principalmente per rappresentare i *rami* delle tassonomie. Nelle pagine indice vengono elencati, in base ad opportuni criteri, gli oggetti e le funzioni principali della sezione. ### Home page La home page è un caso particolare di pagina indice. --- ## Esempi * [Target](http://www.target.com/c/digital-slr-cameras-camcorders-electronics/-/N-5xtem#navigation=true&category=5xtem&searchTerm=&view_type=medium&sort_by=bestselling&faceted_value=5y3et&offset=0&pageCount=30&response_group=Items&isLeaf=false&parent_category_id=5xtez&custom_price=false&min_price=from&max_price=to) * [Costco](http://www.costco.com/CatalogSearch?storeId=10301&catalogId=10701&langId=-1&refine=&keyword=canon) * [Macys](http://www1.macys.com/shop/mens-clothing/mens-shirts/Sortby,Productsperpage/ORIGINAL,40?id=20626&edge=hybrid) (abbigliamento) * [Ikea](http://www.ikea.com/it/it/catalog/categories/business/20502/) * [Trivago](http://www.trivago.com/?iPathId=447485&aDateRange%5Barr%5D=2015-07-19&aDateRange%5Bdep%5D=2015-07-24&iRoomType=7&bIsTotalPrice=false&aCategoryRange=0%2C1%2C2%2C3%2C4%2C5&aOverallLiking=1%2C2%2C3%2C4%2C5&aHotelTestClassifier=&aPriceRange%5Bfrom%5D=0&aPriceRange%5Bto%5D=0&iIncludeAll=0&bTopDealsOnly=false&aPartner=&sOrderBy=relevance%20desc&iViewType=0&isRetina=false&bIsSeoPage=false&bIsSitemap=false&) * [Airbnb](https://www.airbnb.com/s/athens?checkin=07%2F19%2F2015&checkout=07%2F24%2F2015&source=bb&ss_id=hqeuzpdi) * [kickstarter](https://www.kickstarter.com/projects/819484536/lumos-a-next-generation-bicycle-helmet?ref=category) --- ## 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à/azioni più semplici (task elementari) può avvenire attraverso delle micro-interazioni; * nei 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: * abbia una visione di insieme della attività e del processo (ad esempio rendendo espliciti i passaggi) * comprenda le circostanze, le risorse richieste, le regole * comprenda 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 --- ## Attività e finestre modali 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](http://styleguides.io/) è un elenco di risorse sulle style guide [Atomic Design | Brad Frost](http://bradfrost.com/blog/post/atomic-web-design/) introduce il concetto di Atomic Design. [How to create beautiful style guides online | DesignHooks](http://designhooks.com/how-to-create-beautiful-style-guides-online/) [29 Well-Designed Online Style Guides - Web Design Ledger](http://webdesignledger.com/29-online-style-guides) [UI Style Guides | Experience Dynamics](https://www.experiencedynamics.com/approach/ui-style-guides) [50 Meticulous Style Guides Every Startup Should See Before Launching – Design School](https://designschool.canva.com/blog/50-meticulous-style-guides-every-startup-see-launching/)