Laboratorio Web Oriented

Progettazione
web oriented
Matteo Ziviani
In fin dei conti, gli utenti
visitano un sito web per il
contenuto.
Tutto il resto è solo
scenografica.
L'unico scopo del design è
permettere ai visitatori di
arrivare al contenuto.
Per avere una buona
analogia, pensate di essere
un impresario teatrale:
quando il pubblico lascia la
sala, l'entusiasmo deve
essere per l'opera, non per i
costumi.
Jakob Nielsen

Introduzione
• Il web è una forma di comunicazione dove
l’obiettivo principale è comunicare
indipendentemente dall’appeal che può
avere il nostro mezzo di comunicazione.
• La grafica, i colori e altri elementi
contribuiscono a favorire l’attenzione e la
comunicazione verso il nostro sito
• Non è legato solo alla tecnologia ma è un
insieme di: contenuti, architettura, visual
design e interazione.
*

Regole fondamentali
• Un sito deve avere alla base delle regole
fondamentali che rispondono a dei
requisiti indipendentemente dal mezzo
tecnologico scelto:
• Contenuto valido e coerente
• Di facile aggiornamento/manutenzione
• Esteticamente gradevole
• Facile da usare
• Tecnicamente solido
*

Panoramica sulle tecnologie
Le tecnologie utilizzate nel web sono:
• Tecnologie Client Side
• Tipologia di browser
• HTML/XHTML
• CSS
• Javascript
• Multimedia: Audio e Video
• Tecnologie lato Server
• Siti statici
• Siti dinamici (o data-driven)
• Xml | JSON (usati per il trasporto di dati)
• Ajax
• Gli standard per il web sono regolati dal World Wide Web
Consortium (W3C) che definiscono le regole base per le
tecnologie, le reti e i relativi protocolli.
*

Panoramica sulle tecnologie
• Il web non è come un libro e diversi sistemi tecnologici
possono modificare il funzionamento o la visione
• I colori e le font possono essere visualizzate diversamente
su sistemi e browser diversi, quindi possiamo affermare che
non abbiamo il completo controllo su come l’utente
visualizzerà il sito
• Gli elementi della pagina non possono essere garantiti
(posizione, dimensioni ecc)… differenti dimensioni di
monitor possono cambiare la disposizione o visualizzazione
degli elementi
• Il web ha anche dei punti a favore come utilizzo delle
animazioni, interazione, colori diversi dalla stampa e più
saturi, possibilità di inserire motori di ricerca per ritrovare
informazioni ecc…
*

Tipi di siti web
I siti web possono essere suddivisi in due grandi categorie:
• Siti statici
• Siti dinamici o data-driven (siti che offrono servizi
interattivi)
*

Architettura di un sito statico
*
Il browser richiede al web server una pagina, specificando l’URL.
Il web server preleva il file HTML corrispondente alla richiesta e lo invia al browser.
Questo interpreta il codice HTML che specifica come deve essere visualizzata e quali altri componenti sono necessari per
completarla.
Le pagine possono essere aggiornate sostituendole semplicemente con altre pagine create nello stesso modo.

Siti dinamici
I siti dinamici sono più complessi. Oltre a navigare nel sito,
l’utente può usare funzioni interattive per usufruire di
determinati servizi: registrazione, acquisto, ricerche
prodotti ecc…
Un sito dinamico è in grado di creare/generare nuove pagine
in risposta alle azioni dell’utente.
La realizzazione di un sito dinamico è complessa perché
richiede di sviluppare software o utilizzare componenti
software e integrarli e/o personalizzarli.
Fra le varie funzioni ci sono normalmente quelle di gestione
dei contenuti informativi.
*

Architettura di un sito dinamico
*
Alcuni preferiscono usare il termine “sito web” per i siti statici e il termine “applicazione web” per siti
che offrono servizi interattivi.
Il funzionamento è simile per i siti statici l’unica differenza è che il contenuto informativo della pagina
viene prelevato da un Database e inserito all’interno di un template HTML. Una volta
compilata/generata la pagina viene inviata al browser. Cambiando le informazioni all’interno del
Database le pagine vengono aggiornate o modificate senza mettere mano alla pagina fisica e al
codice HTML

CMS (Content management
system)
Esistono dei sistemi che possono essere usati per facilitare la
costruzione di siti dinamici. Essi normalmente forniscono
una serie di funzioni predefinite per la gestione dei
contenuti informativi. I più sofisticati supportano tutte le
necessità di una redazione web composta da numerose
persone.
I sistemi possono essere open source, software a pagamento
o dati in uso quando si stipula un contratto di hosting con
una web farm.
*

Fasi logiche del processo di
produzione
*
Fasi logiche e professionalità coinvolte nella realizzazione e gestione di un sito web di alta portata e di una certa
complessità, richiedono quindi di molte persone.

Progettazione
web oriented
Concetti base di sviluppo
Matteo Ziviani

Struttura tecnica di una pagina
web
*
• La struttura HTML è la base della
pagina web e serve per descrivere gli
elementi (es. se noi utilizziamo il tag
<h1> il contenuto verrà descritto
come titolo importante)
• I CSS servono per definire come
verrà presentato l’html (tipo di font,
colore, posizione ecc..)
• Il JAVASCRIPT serve per inserire
interattività tra utente e html/css
• L’HTML è la struttura, non deve
essere complessa e deve avere senso
anche senza il rendering dei css o
javascript
• I CSS e i JAVASCRIPT è consigliato
tenerli in file separati .css o .js
• Separare sempre la presentazione
dalla struttura
Linguaggio
lato server
e database
+

Esempio di HTML + CSS
*
HTML + CSS

Progettazione
web oriented
Definizione dei requisiti
Matteo Ziviani

Introduzione
La definizione dei requisiti* è un attività delicata che può contribuire
più di ogni altra attività al successo del progetto.
SCOPO: specificare nella forma più completa le richieste del
committente e i vincoli che dovranno essere rispettati.
*I requisiti sono proprietà richieste o desiderate del sito
*

Target
*
Si raccolgono il maggior numero possibile di informazioni ma
soprattutto si devono valutare:
• Target
• Bisogni principali

Bisogni
*
Categoria
di utenti
Bisogni
principali
Priorità Obiettivi Priorità
Studente • Avere informazioni
sempre aggiornate sui
corsi, lezioni ed esami
• Scaricare il materiale
didattico
• Contattare facilmente
docenti e segreteria
Alta
Alta
Media
•Migliorare la
comunicazione
relativa alla didattica
•Ridurre il carico di
lavoro della segreteria
didattica
Alta
Media
Candidato
Studente
•Avere informazioni
sull’offerta didattica del
Dipartimento
•Avere informazioni
sulle modalità di
iscrizione ai corsi di
laurea
Alta
Alta
•Ridurre il carico di
lavoro della segreteria
•Promuovere l’offerta
formativa
selezionando gli
studenti migliori
Media
Alta

Progettazione
web oriented
Architettura dell’informazione
Matteo Ziviani

Introduzione
L’architettura dell’informazione è la pratica di decidere come
organizzare i contenuti e gli elementi per essere comprensibili.
Si tratta dell’organizzazione sia semantica sia logica di
informazioni, contenuti, processi e funzioni in qualsiasi ambiente
informativo, sia fisico sia digitale per promuovere la fruibilità,
l’usabilità e la reperibilità delle informazioni.
*

Card sorting
Il card sorting è un metodo per raccogliere informazioni riguardo ai
modelli mentali degli utenti applicati quando raggruppano,
classificano e nominano i contenuti.
Questo metodo prevede di creare tanti pezzi di carta o cartoncini
(card) quanti sono i contenuti da organizzare, chiedere agli utenti
di raggrupparli e poi di assegnare un nome a ogni gruppo.
Si utilizzano al massimo dalle 30 alle 50 card.
https://www.justinmind.com/blog/card-sorting/
*

Progettazione
web oriented
Percezione visiva
Matteo Ziviani

Elementi preattentivi
Gli elementi preattentivi permettono al nostro occhio di riconoscere
i pattern e focalizzare l’attenzione in alcuni punti (parti importanti)
*

Quanti 4 sono presenti in questa sequenza di numeri? L’immagine a sinistra richiede la scansione visiva di tutti i
numeri. L’immagine destra invece, avendo i numeri colorati in modo differente, sono di facile visualizzazione
perché sfrutta le capacità preattentive umane
*

Per richiamare l’attenzione su alcuni elementi in questo esemipio vengono utilizzati colore e dimensione
*

Principi della Gestalt
Quando viene visualizzata un’immagine composta da diverse
componenti caotiche, il cervello umano mette in atto una serie di
azioni che permettono di ordinare mentalmente gli elementi visivi e
semplificare la visione.
*

Principi della Gestalt
*
Primo piano / sfondo
Similarità
Prossimità

Affordance
Caratteristica intrinseca degli oggetti che suggerisce come utilizzarli
ed interagire con essi
*

Progettazione
web oriented
Principi di interaction design
Matteo Ziviani

Discoverability
*
Questo principio definisce che ogni utente deve essere in grado di
riconoscere, in un tempo limitato, tutte le azioni che possono essere
compiute tramite l’interfaccia.
In fase di realizzazione bisogna sempre ricordare che gli utilizzatori
non sono interessati ad imparare un’interfaccia, ma il loro
obiettivo principale è quello di utilizzarla. L’assimilazione sarà
una conseguenza dell’uso.

Signifier
*
L’uso efficace di “significati”
assicura che le affordances
siano chiaramente indicate e
visibili nell’interfaccia utente. La
affordances definisce quali
azioni sono possibili, mentre i
signifier definiscono come gli
utenti scoprono queste
funzionalità. Essi sono segni o
segnali di ciò che può essere
fatto

Feedback e feedforward
*
I feedback sono fondamentali perché sono informazioni esplicite che
rispondono all’azione compiuta dall’utente. Sono importanti perché
evidenziano lo stato del sistema durante l’uso o al termine di
un’attività.
I feedforward invece è una tecnica che permette all’utente di sapere
cosa accadrà prima di eseguire un’azione e consente ad un
utilizzatore di interagire con maggiore sicurezza, in quanto ha già
un’idea di cosa succederà successivamente.
Questa tecnica viene spesso utilizzate negli e-commerce per
instaurare più sicurezza nel processo di acquisto e facilitare la
conversione utente

Modelli mentali e mapping
*
I modelli mentali, o mappe cognitive, fanno riferimento ad immagini
precostruite nella mente dell’utente sull’uso di un sistema
Il mapping invece è la relazione che intercorre tra i controlli e gli
effetti risultanti correlati all’azione.

Vincoli
*
I vincoli hanno lo scopo di limitare l’interazione utente in un
determinato momento per prevenire l’insorgere di errori
Una tecnica molto diffusa è la progressive disclosure che prevede
di visualizzare nuove informazioni a comparsa in relazione all’opzione
selezionata in modo da guidare l’utente step-by-step

Coerenza, standard e pattern
*
Per coerenza si intende l’utilizzo di elementi simili per compiere task
analoghi avendo funzioni e comportamenti simili. Stesse regole di
utilizzo, operazioni che funzionano o che vengono attivate in modo
analogo, messaggi di errore e messaggi di conferma omogenei.

Coerenza, standard e pattern
*

Gerarchia visiva
*
La gerarchia visiva riguarda la disposizione degli elementi in modo da
definire un ordine gerarchico e visivo di importanza. La disposizione
degli elementi è fondamentale per attirare l’attenzione dell’utente e
definisce l’ordine di visualizzazione in cui un utilizzatore percepisce il
contenuto, il quale non necessariamente corrisponde all’ordine di
collocazione all’interno dell’interfaccia.
https://blog.sadesign.it/gerarchia-visiva/
https://pgpneuromarketing.wordpress.com/sabia-que/eye-tracking-heatmaps-reveal-
where-people-really-look/
https://vwo.com/website-heatmap/

Diagramma di Gutenberg,
Z e F pattern
*
Questi tre pattern definiscono come l’utente occidentale scansiona
visivamente una pagina e quindi possono essere d’aiuto per la
gestione e il posizionamento del contenuto.
Il diagramma di Gutenberg dichiara che la visione dell’utente,
soprattutto in pagine dove la presenza di testo è preponderante,
segue la linea di gravità di lettura. Il focus iniziale del lettore sarà in
alto a sinistra e man mano che lo sguardo cade verso il basso si
sposterà a destra seguendo una diagonale. Gli elementi che non
ricevono la dovuta attenzione normalmente sono disposti in alto a
destra ed in basso a sinistra.

Z e F pattern
*

Z e F pattern
*
Il pattern F invece fa riferimento al metodo di scansione dei
contenuti per la lettura; in una pagina ad alto contenuto testuale,
l’utente tende a non leggere l’intero contenuto, ma a visionare la
pagina secondo uno schema ad F.

Z e F pattern
*
Il pattern Z o zig-zag dichiara che l’occhio umano scansiona la
pagina/interfaccia seguendo un movimento a Z. Quindi, prima
avviene una scansione orizzontale alta da sinistra verso destra,
successivamente una scansione diagonale dal punto in alto a
destra al punto in basso a sinistra ed infine un ultima scansione
orizzontale che inizia dal punto in basso a sinistra

Legge di Hick
*
La legge di Hick sostiene che il tempo richiesto agli utenti per
prendere una decisione è determinato dal numero di possibili scelte e
da come queste vengono suddivise e disposte. Sostanzialmente
questo significa che un utente non valuta le opzioni singolarmente,
ma le suddivide mentalmente in categorie, eliminando circa la metà
delle scelte rimanenti ad ogni singolo passaggio del processo
decisionale.
https://medium.com/swlh/ux-laws-with-practical-examples-c418b4738d20

Progettazione
web oriented
Gestione colore
Matteo Ziviani

Introduzione
*
Il colore è molto di più di un fenomeno ottico perché in grado di
provocare e rappresentare uno stato d’animo, o influenzare
emotivamente l’utente. Per questo ha un ruolo importante nella
comunicazione visiva.
La scelta delle giuste tonalità, assieme a struttura, disposizione degli
elementi e font, contribuisce all’efficacia comunicativa di un sito web.
Il colore è quindi un elemento strettamente collegato al target e al
messaggio da veicolare con l’obiettivo di fare leva sull’impatto
emotivo e suscitare delle reazioni.
I colori nel web possono essere descritti secondo tre metodologia
• HEX #ff227c
• RGB rgb(255,12,30)
• RGBA rgba(255,12,30,0.5)

Progettazione
web oriented
Gestione font
Matteo Ziviani

Introduzione
*
Tralasciando la teoria sulla scelta del font, per il web è possibile
scegliere 2 strade: web safe font oppure custom font.
Web safe fonts
Gli utenti non devono avere un particolare carattere installato sul
proprio computer per vederlo correttamente perché già presente nel
sistema operativo.
https://www.w3schools.com/cssref/css_websafe_fonts.asp
Custom fonts
Sono font che devono essere installate nel sistema dell’utente
(avviene automaticamente), ottimizzate per il web e libere da diritti
d’autore o con licenza per la distribuzione via web.
https://fonts.google.com/
https://www.fontsquirrel.com/
https://transfonter.org/

Progettazione
web oriented
L’impaginazione e il grid system
Matteo Ziviani

Introduzione
*
Un grid system permette di definire la struttura base dell’interfaccia
per l’organizzazione gerarchica degli elementi.
Un grid system è composto da 3 elementi:
• Area/Modulo
• Colonne
• Distanza colonne / gutter
Le griglie più diffuse sono composte
da 12 colonne.

Area modulo
*
Sono i blocchi che possono contenere testo e/o immagini o altri
elementi.
Non è importante definire la larghezza di colonna ma è importante
definire la larghezza totale del contenitore.
contenitore

Colonne
*
La larghezza di colonna viene definita in % dallo sviluppatore e
quindi diventa responsiva in funzione della dimensione del
contenitore.
Normalmente in base alla larghezza del device le colonne si
riadattano anche se in alcuni casi potrebbero essere semplificate.

Distanza colonne / gutter
*
Il gutter è la distanza tra le colonne che normalmente ha una
dimensione fissa. Comunemente si utilizzano 20/30 px

#1 elementi e colonne
*
Gli Elementi/Moduli devono essere identificati raggruppando le
colonne.

#2 elementi e colonne
*
Gli elementi non devono occupare lo spazio tra colonne

#3 allineamento interno
*
Gli elementi all’interno dell’Area/modulo possono non seguire
l’allineamento delle colonne basta che l’oggetto che li contiene segua
le guide

#4 colonne vuote
*
Evitare di lasciare la prima ed ultima colonna vuote

#5 elementi al vivo
*
Gli elementi al vivo possono uscire dalle colonne e devono andare da
un bordo all’altro della finestra

#6 sub griglie
*
Per impaginazioni complesse è possibile suddividere le aree/modulo
con altre griglie. Attenzione ai gutter laterali

Progettazione
web oriented
Mobile design
Matteo Ziviani

#1 punta al minimalismo
*
Negli smartphone l’area per posizionare gli elementi è limitata e non
bisogna sovraccaricare il carico cognitivo degli utenti.
Come semplice regola empirica cerca di eseguire un'azione
principale per schermata
È qui che tornano utili soluzioni come filtri, impostazioni predefinite
ragionevoli e progressive disclosure.

#2 posizione degli elementi
*
Posiziona gli elementi dell’interfaccia a portata di pollice utente.

#3 limita la digitazione
*
Gli utenti hanno difficoltà a scrivere con i dispositivi mobile quindi si
rende necessario progettare di conseguenza.
Suggerimenti, categorie, filtri, opzioni e selettori di date sono i
migliori strumenti per ridurre il carico di scrittura.

#4 dimensione dei target
*
Nei dispositivi mobile non esiste il
puntatore del mouse ma viene utilizzato il
dito che è meno preciso.
Le linee guida di Apple e Google
raccomandano una dimensione di almeno
44 pixel e di non posizionare gli elementi
troppo vicini per non incorrere in errori di
tocco.

#5 Leggibilità
*
La più importante delle raccomandazioni
da sapere per i dispositivi mobili è che la
dimensione base del carattere è 16px.
Oltre al testo è da tenere in
considerazione il contrasto cromatico tra
gli elementi. Ricorda che i dispositivi
vengono utilizzati all’aperto e non sempre
in condizioni di illuminazione ideali.

#6 Feedback
*
La velocità di connessione non è sempre costante. Se non si riesce a
velocizzare il caricamento mostra che il sistema sta lavorando per
prevenire l’abbandono.

#7 Gestisci gli errori
*
I sistemi e gli utenti
commettono sempre
errori.
Pianifica il sistema in
modo da informare e
ridurli al minimo.

#8 Navigazione
*
Aiuta l’utente a navigare nella tua
applicazione e a capire dove si trova.
I percorsi dell'utente dovrebbero essere
sufficientemente logici da consentire
l'esecuzione di un'attività all'interno di
una singola app.

Progettazione
web oriented
Design style guide
Matteo Ziviani

Introduzione
*
Quando si progetta un sito o un app è importante che il progetto sia
consistente, robusto e che faciliti le fasi successive.
Per fare questo è importante creare una guida di stile separando
tutti i componenti realizzati.
Una guida è una collezione di elementi, grafica e regole a cui i
designer e gli sviluppatori si devono attenere.

Introduzione
*
Deve contenere:
• Colori: primari e secondari, colori di testo, layout, sfondi,
evidenziazioni, hover, link, bottoni ecc...
• Tipografia: dimensione e font dei titoli (h1-h6), corpo, citazioni,
spazi/margini, colori e sfondi associati ai testi.
• Griglia: colonne e spazi tra gli elementi
• Elementi Grafici: icone e grafica applicata
• Altri elementi/regole: tutto il resto che non ricade nelle
categorie precedenti come variazioni colore, stile delle immagini
fotografiche, contaft form, call to action, testimonials,
animazioni, suoni ecc...

Colore
*
• Definizione dei colori principali e secondari
• Definizione dei colori di feedback: stato di successo, errore ed
eventuali avvisi
• Colori di charts, grafica e navigazione
• Eventuali colori associati ad azioni / sezione del sito/app

Tipografia
*
• Definizione della gerarchia titoli (h1-h6), corpo, didascalie, link
(con hover) ecc...
• Font variazioni seriali
• Dimensioni
• Interlinea
• Margini

Griglia
*
• Definizione della griglia ed eventuali vincoli
• Colonne, distanza tra colonne

Grafica e icone
*
• Icone e illustrazioni
• Posizioni
• Colori / outline
• Eventuali effetti in hover

Form
*
• Campi di testo, checkbox, dropdown, bottoni di invio e reset,
textarea, password, colorpicker, datapicker, range ecc…
• Label di form e palceholder
• In stato normale, focus, disabled e invalid

Bottoni
*
• Bottoni principali, secondari
e variazioni, testuali, visuali,
misti
• Definizione dei vari stati:
hover, disabled

Link di esempio
*
• https://www.bbc.co.uk/gel
• http://ux.mailchimp.com/patterns/color
• https://rizzo.lonelyplanet.com/styleguide/design-elements/colours
• https://polaris.shopify.com/design/design#navigation
• https://storybook.futurelearn.com/
• https://solid.buzzfeed.com/

Laboratorio Web Oriented

More Related Content

Similar to Laboratorio Web Oriented

More from Matteo Ziviani

Laboratorio Web Oriented

Editor's Notes