ANALISI DEI SITI WEB

Appunti slide Polidoro + domande esonero

VANTAGGI DEI SITI WEB RISPETTO AI SOCIAL MEDIA

1. Pubblico più universale: più facile da raggiungere perché quasi tutti hanno
accesso a Internet, mentre i social non sono ugualmente diffusi in tutto il
mondo

2. I siti web sono di nostra proprietà: ci facciamo quello che vogliamo, mentre i
social sono di proprietà di aziende esterne che utilizzano gli algoritmi per
capire i nostri interessi e volendo potrebbe rimuovere il nostro profilo

3. Maggiore istituzionalità: i social fanno da supporto, ma si parte da un sito web,

lì trovo le info di contatti

4. Funzioni differenti: i social sono ottimi per gli aggiornamenti (hanno sostituito
il feed RRS), ma funzionano male da archivio per trovare vecchi post.
Le transazioni le faccio sui siti più che sui social
Si parla di sistema integrato di più canali, ognuno ha una specificità

5. I social sono siti web: iniziano con www

DIGRESSIONE
Digitale = metodo di codifica e immagazzinamento tramite codice binario, due
segnali 0 e 1 che danno informazioni staccate
Analogico = metodo di codifica e immagazzinamento delle info in modo continuo e
non discontinuo come il digitale

Remediation: quando un nuovo medium assorbe i linguaggi, i generi e le pratiche dei

media precedenti perché ancora deve trovare la propria identità (es. la tv con i TG che
all’inizio erano come i radiogiornali; anni 80 con i reality trova identità)

1995= arriva il web

Inizialmente per cercare i siti si usavano gli index, all’’epoca Yahoo aveva un indice
di argomenti che si espandeva su più livelli fino a trovare quello desiderato

1997= nascono i portali

Ispirati all’impaginazione dei periodici, era facile orientarsi avendo già uno schema
di riferimento. Si crearono i sfogliabili che erano economici da produrre ma poco
efficienti perché la lettura cartacea non si adatta bene al digitale, rende la lettura
difficile ( es. sito di Report, Frontline, Nsa Paper The Guardian)

A questo punto iniziano le prime forme di interattività = sfruttare le potenzialità dei

media

INTERNET E WEB

1968 = nasce internet durante la guerra fredda

1990/91= nasce il web

1993= web libero e accessibile

Nasce l’ARPA che si occupava dello spazio, poi la NASA, e l’ARPA diventa
DARPA occupandosi di cibernetica

Erano gli anni’70 quando in USA collegarono 4 pc per scambiarsi dati e comunicare
punto a punto, da questa rete si collegano altri pc e si costituiscono altre reti che si
collegano all’ARPANET (collega pc militari e non)

Si scide in

-rete per progetti militari

-rete per progetti civili

Metà anni ’70 nasce il personal computer che veniva venduto con un kit di montaggio
autonomo, senza interfacce
Erano 8 bit in fila: 1 byte immagazzina 256 info in codice binario, prima si usava il
sistema ASHI con caratteri alfanumerici, punti e virgole…, leggeva gli impulsi e li
trasformava in codice

Fine ‘anni 70 si separano gli aspetti della rete: MILNET e INTERNET

Con internet si inizia a lavorare sui protocolli (linee guida di codici e cavi per
collegare 2 pc) il TCP/IP

Nasce la mail: computer con interfaccia, fino agli anni 70-80 si parlava inserendo dei
comandi, indicando nome, cartella, file e formato con protocolli POP3.

1990: Tim Bernes Lee inventa il web come attività di Internet (Mail, scambio file
FTP), il www serviva per far circolare, pubblicare articoli scientifici online, pagine
ipertestuali, le caratteristiche principali erano:

 uso di protocolli dati http (l'Hypertext Transfer Protocol) OGGI HTTPS

 linguaggio per pagine scambiate http con html
 URL (Universal Resource Locator)

Inizialmente era fatto da pagine, nel tempo diventano siti con pagine e link
ipertestuali, fine anni ’90 arriva il web 2.0 con un linguaggio web, più facile
raccogliere e modificare info.

Metà anni ’90 la mail arriva sul web si leggeva la posta con il sito web e FTP
(protocollo trasferimento dati)

Nasce nel ’94 il primo browser per visualizzare pagine web e cambiare il colore
(NCSA Mosaic) .

HTML= non è un linguaggio di programmazione (questi leggono gli input e con

algoritmi propongono un output) è un linguaggio di marcatura, termine che deriva dal
linguaggio tipografico con note ai margini, consente di indicare le componenti del
testo e come va trattato dal punto di vista editoriale

Pagina web : testo che posso scrivere in programma di testo .txt

Le parti sono definite con dei tag <html> : nella head abbiamo le info sul file (chi
l’ha fatto, i linguaggi..) e poi nella body i contenuti visibili

-Se voglio apire il file .txt in browser lo rinomino in .html Così diventa una
pagina Chrome

H1,h2,h3 sono i titoli di livello, p le sezioni , img le immagini

<a href= http://www. .....> salvo e riaggiorno chrome, salvo, compare la

sottolineatura e se lo apro va alla page

*Per colorare i titoli <h2 style= color: #F00”

*questa è una forzatura per l’html che il realtà ha il compito di dare solo struttura, il
colore è un info aggiuntiva ma non strutturale, quindi si usa il CSS (Cascade Style
Sheets) per inserire font, colori, layout e ha dei simboli diversi .

I linguaggi di scripting (come Javascript) vengono invece usati per implementare

funzioni e presentazioni avanzate e interattive.

ARCHITETTURA CLIENT – SERVER

Ci sono 2 macchine collegate una fa da server che trasmette le info e l’altra da client,

che si collega al server per ricevere un contenuto

Nel 1993: Lee costruisce pagine .html salvate in un pc e il dns (sistema di nomi a
dominio)

IP= codice numerico composto da 4 numeri da 0 a 255 usato da tutti i dispositivi per
navigare in Internet e per comunicare in una rete locale. Il dns legge la richiesta e la
trasforma in numeri più facili da comprendere. Se vogliamo modificare un’info
usiamo html e css o ci colleghiamo a un FTP a distanza, ma è difficile e complicato,
l’utente medio non ha accesso al server.
SITI STATICI VS DINAMICI

Siti statici= sito web in HTML senza codifiche personalizzate e funzionalità

dinamiche. Non richiede scripting lato server, solo lato client come HTML e CSS.

Siti dinamici= si basano su html, css e linguaggi di programmazione PHP e database*

*una tabella tipo excel: in colonna i campi, in riga i record.

Immagazzinano le info del sito come base per produrre pagine

per il client e costruiscono html con le info ricevute.

Ogni database ha: un ID, pagine numerate, URL della parte che ci
interessa, titolo della page (visibile in etichetta o h), URL foto

Server= qualsiasi pc sempre acceso, collegato a un FTP si collega all’esterno e

diventa un server internet
Server farm= strutture con tanti server (es. Aruba), localizzati in nord Europa o dove
fa freddo per il raffreddamento e i costi di alimentazione
PHP= dicono qual è la struttura della pagina e danno le info per scriverla in html
CMS (Content management system)= facilita la gestione dei siti web con una parte
front end e una back che vedo io, il più famoso è WordPress, ma anche Drupal e
Magento.
Plugin= pezzo di codice che si può aggiungere
Vantaggi WordPress: sistema open source, tutti possono proporre modifiche,
utilizzabili dalla community.
SISTEMA WEB
È una comunicazione su più canali digitali e non.
Anni’90 per essere presente sul web bastava il sito, oggi si aggiungono le APP, i
social media (piattaforma) che è diverso da social network (attività di rete)
App viene da applicazione=è un software che fa qualcosa attraverso gli algoritmi, è
scritto in un linguaggio di programmazione , riceve un input e restituisce un output
(word processor, prenotazione treno esempio)
App
-desktop: quando clicchi icona word, la macchina carica i file per far funzionare
word e secondo le istruzioni linee programmazione, interroga la memoria, e emette
output, elaborazione da parte del processore
-web: Google drive è installato sui server di Google che restituisce un sito
visualizzato nel browser, inseriamo input, vengono traferiti al server, li elabora e
restituisce output che viene inviato al mio pc e io lo vedo sul browser, Google
aggiorna il server, non devo farlo io
Vantaggio più potenza e funzionalità nei software rispetto ai server di Google

Uno funziona su pc e l’atro sul server

Anni ‘90 computer fisso, si iniziano a diffondere i portatili (laptop), importante
differenza tra desktop o laptop, cambiamento con gli smartphone (2005/2006) e si
crea la categoria del mobile: li possiamo portare con noi, poi aggiungono i tablet e
fitband, smartwatch (weareable), differenze tra desktop e laptop sempre meno
evidenti rispetto al mobile, nuova differenza tra desktop e mobile, nel desktop
includi anche i portatili
APP specifico nel mondo mobile, applicazione più su desktop
-Native: sono software installati su mobile, con linguaggio programmazione, si va
sullo store, selezionare app, download, installazione, compare icona nella home,
quando si clicca, vengono caricati nella ram e processore fa funzionare l’app,
elaborazione su questo dispositivo (le più pesanti sono quelle di realtà virtuali, 3D*
Possono lavorare in background, ogni 20 min. si collega all’app e scarica gli
aggiornamenti
*perché abbiamo due occhi frontali, non vedono la stessa cosa e consente al cervello
di usare la profondità
 accesso più facile alle API: software può accedere ai dispositivi interni dello
smartphone con il nostro consenso, le autorizzazioni rimangono in memoria, lo
fanno anche i siti, le web app ma non può chiedere tutte le autorizzazioni e non
le memorizza
 più veloci, perché sono installati sul dispositivo
 notifiche lavorano in background, se le abiliti per l’app le vedi nel sistema
 + costose: codice per Android è diverso da IOS, app a pagamento e pagamenti
interni sono tassati dallo store
 Più tempo per la verifica e non ho controllo pubblicazione app, anche per
gli aggiornamenti
 Problema di manutenzione, modifiche a livello di app
 Navigabili senza connessione
-Web: cellulare apre browser dell’app- si collega a server da remoto-mandare input e
dare output, sono dei siti web scritti in Java e html, solo che la user experience è
come una native
Un sito web non lavora in background, è per essere letto e consultato, per le app che
erogano servizi e richiedono interazione cambia, sul telefono abbiamo dei sensori che
leggono l’ambiente circostante (touch, fotocamere, microfono, GPS, Bluetooth, NFC,
bussola, accelerometro, prossimità, biometrici, wifi)
 limitazione all’accesso su dispositivi
 Ricercabilità: sono siti le web app, facilmente indicizzate dai motori di ricerca
 Unico codice per tutti i sistemi
 I siti web si possono creare velocemente e il sistema dns ci mette un po' ad
aggiornare ma si può sempre fare

Desktop sistemi operativi: Microsoft windows, Mac Ios, Linux (un chernel, sopra si
aggiunge interfaccia, software utilizzabili, si installa una distribuzione di Linux
chernes+ pacchetto di cose, le distribuzioni sono tante e specifiche per i settori
(ubuntoo)
Nel mobile due sistemi operativi: IOS, Android (derivazione di Linux proprietaria di
Google) e huawei

RESPONSIVE E ADAPTIVE
Anni ‘95/96 le persone si collegavano da pc fisso che montava sopra Windows, usato
dal 95% delle persone, si collegava con Internet Explorer, usava un monitor (tubo
catodico)
Pixel: puntini luminosi che compongono gli schermi
‘90-91 Lee costruisce MOSAIC primo browser grafico diffuso, poi si trasforma in
Netscape Navigator nel ‘95 (1° browser diffusione di massa) sopravvive con la
pubblicità
Grafico dal 95 al 2010 evoluzione dei browser
‘95: 3% persone usano Internet Explorer, 90% Netscape
2003: +90% del mercato Internet Explorer e Netscape 2%
Mozilla crea un browser open source da Netscape come FireFox che è più
performante e rispettoso dell’utente e prende piede
Da 2010 a 2015 Internet Explorer è in difficoltà e oggi c’è Edge, così FireFox, cresce
invece Chrome.
Chi dominava nel mercato era uno, oggi non esiste più uno dominante, c’è uno
principale che è Chrome e poi sparpagliati tanti altri (situa frammentata)
Oggi tutti i browser rispettano le istruzione di html5
Problema la frammentazione degli schermi: no condizione omogenea, cambiano i
rapporti di grandezza degli schermi, con risoluzioni diverse (4K, HD/full HD, 8K)
LAYOUT RESPONSIVE E ADAPTIVE
Fine anni 2000 devices mobile: smartphone e tablet, gli schermi sono di diverse
dimensioni, risoluzione diversa e ognuno di questi può essere guardato in orizzontale
(landscape) e verticale (portrait)
Viewport: larghezza area dello schermo dedicata a visualizzare un sito web, non tutti
i pixel non sono destinanti alla visualizzazione del sito ma di altro tipo la barra del
browser, barra per scendere la pagina
Non è fisso, lo possiamo ridimensionare
Layout fissi desktop su schermo dispositivo mobile: sito appare rimpicciolito per
essere tutto visibile ma è illeggibile, costringe a fare pinch zoom, scrollare
orizzontalmente
Al concetto di pixel si lega la:
-definizione: n. totale di pixel di uno schermo (4K > Full HD)
-risoluzione: concentrazione di pixel in un’unità di misura
Anni ’90 vecchi siti avevano layout fissi, l’impaginatore la disegna come pagina di
giornale sapendo lo spazio che ha e usa la misurazione su tipologie fisse, anni 2000
c’è 4:3, 16:9 lascia tanto spazio bianco e col mobile non si poteva vedere tutto bene,
lo schermo è più piccolo, da in automatico lo scrollo orizzontale
Si risolve con layout liquidi: le dimensioni non si esprimono più in termini assoluti,
ma relativi espresse in percentuale, mantengono le proporzioni stabile
Layout responsive: filosofia di progettazione layout, da una parte progettazione
liquida si adeguano al viewport disponibile in un certo momento, esistono per le
misure espresse in termini relativi e breakpoint : punto che cambia l’organizzazione
della pagina man mano rimpicciolisco
Come funziona?
Sito statico: ci viene inviato un html e CSS che è costruito in modo da spiegare al
browser come strutturare la pagina in base al viewport
Svantaggio: CSS molto lungo perché riporta istruzioni per diversi viewport e le
combinazioni diventano molto complesse (rotture layout)
Layout adaptive: viene fatto CSS per desktop e mobile, il server riconosce il
dispositivo che si è connesso e invia html e CSS specifico, la distinzione viene fatta a
monte , viewport non si riplasma, bisogna fare scrollo orizzontale
Vantaggio: CSS disegnato per quella specifica situazione ed è più leggero, anche se è
poco usato
Metodo per distinguere i due layout
Vado sul desktop- apro il sito- stringo e allargo-vedo se si riplasma: se al minimo è
uguale a quello che vedo da pc allora è responsive
LE FASI DEL LAVORO
Quando si chiedeva di realizzare un sito il committente chiedeva un’idea di come
sarebbe venuta la homepage, oggi è un errore perché la visione dell’interfaccia non si
fa senza capire cosa devo comunicare e come e sono cose che si sanno dopo ricerca e
progettazione
DESIGN è progettazione, web design: costruisco il sito nelle sue parti in base a come
darà le info, al di sotto della grafica
1. Vado a definire i requisiti che sito deve rispettare, prima capire i bisogni a
cui deve rispondere: come usano e cosa fanno le persone che lo usano?
Devo capire cosa vogliono fare i miei utenti
Assumptions based: sulla base delle nostre idee non verificate e dimostrate
Poi si stila un doc. il committente dice cosa vuole e l’agenzia fa l’offerta
Committente deve sapere quello che gli serve con l’aiuto di un consulente che
fa i suoi interessi
 Interviste, focus group, analisi dati a disposizione, traffico, scenari d’suo
che potrei soddisfare all’utente, analisi concorrenza sul web, con la user
experience si decidono le cose dopo ricerca con l’utente, se le sai
dall’inizio sono assuptions tue
 Approccio service design che parte dall’utente per cui tutto è finalizzato
per creare esperienza soddisfacente per l’utente, non quello che voglio
io, prodotti come emblemi della relazione di servizio, il servizio è il mio
scopo non tanto i prodotti o le app, alle assumptions si risponde con la
ricerca, deve essere centrato su uomo, collaborativo, iterativo,
sequenziale, reale e olistico
Tappe:
1.Empathise: raccolta dati
2. Define: li elaboro per avere info e li visualizzo con le personas
3. Ideate: Come risolvo il problema dell’utente
4. Prototipe: parto da idea generica a concreta fino ad avere schizzo interfaccia e poi
disegno homepage con photoshop
5. Test e implementazione
Fase di test e ricerca si fa sempre non solo inizio o fine

2. Web design: si cerca di capire come si può costruire il sito per soddisfare i
bisogni, gestione progettazione di interazione tra utente e app
3. Visual design: disegna interfaccia
4. Sviluppo del sito: scrittura codice
5. Redazione contenuti: inserisco contenuti all’interno
Sito in produzione: sito online che sta funzionando
Poi si passa alla gestione:
6. Esercizio del sito
7. Gestione server: sistemista
8. Gestione competitività internet
È un modello sequenziale: ogni fase è divisa in cicli virtuosi di progettazione,
quando progetto qualcosa la vado a prototipare, faccio dei test e se viene superato
proseguo con la successiva fase di prototipazione, c’è una ciclicità del processo

10 DICEMBRE CONSEGNA ESERCITAZIONE SU E-LEARNING

ORALE: presentazione progetto
Appelli
12 gennaio SE consegna seconda esercitazione 4 gennaio ore 11
25 gennaio SE consegna 13 gennaio ore 11
8 febbraio SE consegna 27 gennaio ore 11
Cancellare parti in corsivo
Fatturato espresso approssimato
Prodotti principali : se non ci sono prodotti non mettere niente
Screenshot homepage TOTALE ridimensionata per la pagina word
1. Cercare siti secondari, alcuni sono corporate brand quindi hanno sotto altri
brand
(nel settore metto di cosa parla nello specifico, screen normale
url cliccabile e anche più piccolo)
NATIVE e WEB APP : URL e funzione ENTRAMBE MAX 4

Se ci sono siti internazionali fare solo parte italiana

4.Nella prima riga voci di primo livello
NON CANCELLARE TABELLA VALUTAZIONE

LEZIONE
ARCHITETTURA DELL’INFORMAZIONE
È una branca della UX che si occupa di come organizzare e presentare info, in modo
che chi usa il sito e app sa dove trovare le info, è uno dei problemi principali nella
UX è proprio la trovabilità
Quindi risponde ai bisogni informativi degli utenti
4 sono le tipologie:
 Known-item seeking (La ricerca di un item già noto): utente cerca la cosa
giusta, specifica
 Re-finding: need it again (bisogno info specifica e so che esiste, la devo
ritrovare)
 A few good things; exploratory seeking
 Everything: exhaustive research (cerco tutte le info importanti prima di
comprare)
Per soddisfarli mettiamo in atto comportamenti di ricerca:
-proud: vediamo il menu, vado nella sezione e cerco la mia info (browsing : buona
etichettatura)
-search: vado nel cerca del sito (indicizzazione dei contenuti)
-ask: chiedere personalmente a qualcuno se non trovo le info (contatti, mail, chat)
Dovremmo riuscire a risolvere il problema dell’utente coi primi due, l’asking costa di
più
Berry picking model: mix tra i vari bisogni
Dobbiamo mettere a punto la Content inventory dei contenuti da veicolare
attraverso la strategia di comunicazione, quindi content marketing per capire quali e
dove metterle o devo rifare un sito e guardo quali contenuti vanno tenuti o eliminati
Si fanno su excel, ogni riga un contenuto
Devo dare un nome ai contenuti: etichetta (clicco e mi porta ai contenuti) indicativa
del contenuto su cui capito
Labels: nomi che diamo a link, titoli, cliccabili e non, indica cosa c’è dopo
quell’etichetta (es sito Lumsa i nomi nell’homepage) anche su un testo con link
Se non è comprensibile per l’utente è un problema, devono essere rappresentative
del contenuto, comprensibili,
Meglio lavorare su etichette specifiche, si scrivono sistemi di etichette non singole
etichette che siano omogenee e coerenti
COME SI FA L’ANALISI DELLE ETICHETTE
Esempio etichette sito Ferrari
Prima faccio un’introduzione chi sono io (intervistatore), a cosa serve il test e su cosa
è
Mostrare etichette scritte, intervistato deve dire a cosa rimanda l’etichetta, anonimo
Inizio a trascrivere le risposte in sintesi
Fare proposta di quelle non comprensibili per migliorarle

LEZIONE
Test 8:30-10 15 dicembre online
ALBERI DI NAVIGAZIONE
Labeling: organizzare e strutturare le info del sito, prende forma come albero
gerarchico (padre-figlio/genere-specie) fra i vari elementi, risolve il problema di
categorizzazione (riconoscere somiglianze di elementi e creare categorie ci aiuta a
livello mentale, siamo abituati) che prevede più livelli: categorie figlie, padri e madri
Mettiamo insieme singoli prodotti che riguardano la stessa categoria, poi una
categoria che si differenzia per un elemento e per il resto è uguale, poi affiancate a
categorie simili (es supermercato tonno in scatola a fianco altri cibi in scatola)
Problemi: non tutti percepiscono allo stesso modo le categorie decise, elementi che
possono appartenere a più categorie (schemi ambigui), omogeneità di classificazione
 Schemi esatti: dividono le info in sezioni ben definite, si può appartenere a
una sola categoria (es. alfabetico, cronologico, geografico) e funzionano se io
so cosa cercare
 Schemi ambigui: info che non possono essere definite in una sola categoria,
tipo il topic oriented (diviso per argomenti), task oriented (quello che può fare
l’utente), audience oriented (orientati al destinatario)

Menu globale: persistente in tutte le pagine del sito, organizzati per argomenti
-secondari:
Menu locali: solo sulle pagine che sto vedendo
Regole:
- Categorie esclusive, no stessa etichetta per lo stesso albero
- Ci possono essere alberi più larghi con pochi contenuti (broad-and-shallow):
troppo larghi troppe opzioni non va bene, se è più stretto ho più informazioni
(narrow-and-deep) ma bisogna stare attenti perché utenti devono fare troppi
click
- Meno click fai meglio è, meno difficile perdersi
- L’utente gestisce 5-9 info per la memoria in una sessione di lavoro, sarebbe
meglio il broad
Faccio il content mapping e poi nella content inventory (tutti i contenuti che devono
esserci) si fa su fogli excel e arrivo all’ipotesi dell’albero di navigazione, come lo
rappresento?
Word processor è il metodo più facile, si usano anche software di creazione alberi o
excel (ogni etichetta va su una riga separata, con una cella occupata che rappresenta
l’albero, colonne per il livello gerarchico
CART SORTING: come raggruppare gli elementi in categorie nelle card
Come gli utenti userebbero quelle info? Come facciamo a capirlo? Sarà la persona a
metterla apposto (es b&b dove i clienti cercano le cose? Si chiede agli utenti dove
metterebbero le cose, per rispettare l’ordine mentale intuitivo usato dalla
maggioranza )
Tipologie:
-open card sort: pennarelli, cartoncini, post it, tavolo grande , dopo content
inventory, labeling e comprensione labels, sui cartoncini si scrivono le etichette dei
contenuti, uno per etichetta, vanno mischiati e si mettono sul tavolo disposti, si
chiama il soggetto e gli si dice di organizzare i contenuti in gruppi (categorie che
inconsapevolmente ha individuato, es. sezioni di primo livello per sito web), poi deve
nominare coi post it la categoria = in questo modo l’utente organizza i contenuti e
definisce il labeling
Open perché l’utente può fare come vuole, è libero
Quali contenuti tende a mettere vicino? Quanto allontana e avvicina i contenuti
Si fa in una fase iniziale, in cui osserviamo per capire come ragionano
-closed card sort: situazione come prima con le card e contenuti, però già si fanno
trovare i post it con le scritte (es cartoncini con contenuti e post in le sezionie l’utente
deve associare il contenuto alla sezione che ritiene più adatta
Io so già le categorie e come le ho chiamate, serve a capire se l’ordine che penso è
quello che seguono anche le persone, ci fa capire come cercheranno quel contenuto in
base a quell’architettura
-Card sort misto: do numero sezione, ma non nominate / dare un numero di
mucchietti
Indagine one-to one si usa il THINK LOUD PROTOCOL: non è un test, è un modo
con cui fare test
 Quando c’è un soggetto di fronte a te e gli dai un compito lui deve parlare,
chiedendogli passo passo cosa sta facendo, raccontare cosa pensa nella mente
Svantaggio: costi e tempi incidono sulla quantità di test che si riescono a fare ,
evidenzia l’attendibilità qualitativa per capire i modelli mentali
Il suo fine: capire il perché non quanto
 A distanza vantaggi: test asincroni , ti mando link e tu quando puoi lo fai, ma
tolgo l’insight ( non saprò mai perché hai fatto così)
Vantaggio: lo posso mandare a tante persone e diventa statisticamente rilevante, un
sistema scalabile: posso aumentarne la scala senza ridurre efficacia e efficiente

Optional workshop: sito per card sorting

TREE TEST
Serve a verificare la validità dell’alberatura delle informazioni .
Devo poi categorizzare in livelli i contenuti con il cart sorting, questo fa capire se
l’albero va bene, se le persone trovano contenuti
1. Creare task: formulazione del compito che utente deve svolgere
2. Si assegnano i task
3. Si chiede di trovare contenuto nel sito
4. Utente ha simulazione del sito con l’alberatura
5. Vedo se raggiunge/perde il contenuto
Esempio
1. Ricostruire albero navigazione
Excel: ogni colonna un livello gerarchico, ogni riga un elemento
1. Homepage 2. Menu globale 3. Secondo livello…
2. Importare in optical workshop
3. Creare studio
4. Costruire l’albero e nodi, shift tab tornare indietro
5. Creo i task, un task deve avere un contesto e va formulato
6. Define correct answer: flag su soluzione giusta e save
Blueprints : schemi di navigazione del sito, seguono determinate condizioni che
devono essere indicate, ci deve essere una legenda dei simboli
(SERP Pagina che rinvia Google, dei risultati)
Wireframe: rappresentazioni schematiche dell’interfaccia, sono dei prototipi, in fase
iniziale non servono per verificare il look and feel, la sua funzione è verificare la
parte dell’interfaccia (questo albero diventa un prototipo di menu che devo sistemare
su una pagina), colloco nella posizione finale più meno gli elementi
Possono essere a bassa, media, alta definizione
-Bassa: veloci, semplici, no contenuto
-Media: barra con scritto menu, le singole etichette del menu, posso fare test di
navigazione
-Alta: font finale, etichette esatte che utilizzo, foto finali, confina quasi con il mockup
(simulazione perfetta di photoshop)
Si possono fare: a mano (devono essere puliti e chiari), con software non specifici
(Excel), o software specifici
Sistemi di navigazione embedded: non immediatamente visibile, si integra
all’interno dell’oggetto o del sistema informatico in cui è inserito per monitorarne e
gestirne alcune funzionalità, programmati per svolgere solo particolari compiti di
misura e controllo,
Contestuale: link nel testo
Faceted navigation (si adattano) vs filtri (fissi)
Filtri es categorie Amazon
Facets: in base a cosa cerchi

ESEMPI DELLE VARIE DIFFERENZE

APPLICAZIONI WEB: Google suite (drive, doc, calendar…)
DESKTOP : Word, Excel, Media player

Filtri e facets

ESONERO
DOMANDE
15.12.22
10 domande 12 minuti, posso sempre tornare indietro e modificare la risposta
 1. Definizione dei 4 bisogni informativi (combinazione)
2. Definizione CSS, html, Javascript, PHP (a tendina)
3. Differenza tra adaptive e responsive ( parole da inserire nel testo)
4. Associare quali sono i vantaggi di native e web app
5. Tree test va fatto quando si ha già un sito operativo? F
6. Internet e il web ( V/F sulla definizione)
7. Cosa è un wireframe? (Multiple choice)
8. Miglior allineamento del testo (Multiple choice) : Sinistra
9. Cosa è wordpress? Un CSM
10. Differenza tra native e web app (parole da inserire in testo)

USABILITÀ
Anni 80/90, termine radicato nell’economia cognitiva (interazione uomo-macchine)
Studia il modo per progettare prodotti o servizi digitali che siano efficacia (capacità
raggiungere obiettivo), efficienti (minor dispendio di risorse) e confortevoli
(esperienza piacevole)
Disciplina che aiuta a progettare prodotti e servizi usabili.
Se un prodotto non è usabile non viene usato dalle persone
ESEMPI Walmart, Mozilla
Ci si basa su alcuni principi di base
-elemento più importante deve essere più visibile
-collegamenti logici visivi
-testo complesso con sottoparagrafi
Test usabilità: interfaccia è usabile? Parte da un task assegnato a un soggetto
1994 Jakob Nielsen = 10 regole generali di progettazione interfacce da cui
discendono le singole indicazioni dei test di usabilità
1.Visibilità dello stato del sistema
Il sistema dovrebbe tenere l’utente informato su come sta andando con un feedback
(es tu sei qui in una cartina)
2.Connessione tra sistema e mondo reale
Design deve parlare la lingua della gente, tutti devono capire
Esempio Mapping= l’interfaccia deve essere un diagramma di come le cose sono
organizzate nel mondo, se cambio un pulsante che fa scendere e salire un elemento,
non ha senso metterli in orizzontale
3.Controllo utente e libertà
Serve una via di uscita se faccio un errore, devo poter recuperare questo errore (es.
tasto torna indietro, il rimuovi da Amazon
4.Consistenza e standard
Le persone passano il tempo su siti che non sono il tuo, segui le impostazioni che
usano la maggior parte dei siti
5.Prevenzione errori
Es avvisi “sei sicuro di cancellare? Di procedere?”
6.Riconoscere piuttosto che ricordare
Riconoscere è più facile di ricordare, inutile dire prima della survey “potete lasciare
la vostra mail”, si dà alla fine o l’help
7.Flessibilità e efficienza d’uso
Stratificare gli utenti: esperti e inesperti
Es. scorciatoie per gli esperti
8.Design estetico e minimalista
Le info contenuto devono essere tutte rilevanti, meglio pochi elementi
9.Aiutare utenti a riconoscere, recuperare gli errori
Quando c’è un errore “error 404, page not found” non da suggerimenti per risolvere il
problema, bisogna spiegare l’errore
10.
Il sistema dovrebbe essere intuitivo, in caso va fornita la documentazione per
raggiungere gli obiettivi (guida, tutorial)

TEST USABILITÀ
A/B TESTING: se voglio introdurre una novità sul mio sito, es l’e-commerce
Creo due varianti di pagina, facendo cambiare solo un elemento alla volta, ho bisogno
di un KPI (Amazon considera la % di persone che entrano sulla pagina e acquistano)
che può essere sulle vendite, conversioni, tempo di lettura…
In pratica: prendo un tot di soggetti e li divido in due gruppi, mando due versioni - do
un budget e vedo se le persone del primo gruppo acquistano più o meno del secondo
gruppo.
EXPERT REVIEW: non ho molto tempo, chiamo l’esperto di usabilità per fargli
verificare l’usabilità del sito, può immaginare di essere un utente tipo
HEURISTIC EVALUATION: Gruppo di utenti che verificano se il sito corrisponde
alle linee guida (check list usabilità)
Per esercitazione va compilata e allegata
PAPER PROTOTIPE TEST: se lavoriamo su prototipi questi test si possono fare
dall’inizio con i wireframe , senza codice o Photoshop, si fanno cartacei, si danno i
task ai soggetti e si vede se riescono compierli o no
Come si fa in cartaceo? Esempio su fogli separati creo un albero e metto quello che
l’utente dovrebbe fare
TEST USABILITÀ FORMALE (esercitazione 2)
Soggetto in target- facilitatore esperto usabilità e interazione utenti
L’utente sta testando un sito da desktop nella test room (con pc e telecamera per
vedere la faccia), tutto quello che accade e fa vengono registrati e trasmessi in diretta
nella control room dietro uno specchio .
Il facilitatore lo accoglie e gli da i task uno alla volta, think loud protocol e verifica i
feedback
Task:
- devono fornire il contesto nella prima parte, per immedesimarsi nella parte e
partecipare più attivamente
-Devono essere realistici, invitare all’azione, stimolanti
-se c’è qualche parte applicativa (fare un ordine) fare task che verificano
l’interazione, non solo cerco
-devono invitarti a fare non “vuoi prenotare una cena… cosa faresti?”
Ma “è il compleanno di… prenota un tavolo per due per venerdì” NO
SUGGERIMENTI PER UTENTE (non puoi dire vai nella sezione e prenota, no
parole che sono parte del percorso che io dovrò fare per svolgere il task)
Esempio usabilità sito di un comune, task per mettere passo carrabile e si trova in
etichetta codice della strada non posso mettere questi termini nel task tipo “vuoi
l’autorizzazione per… cerca in codice della strada)
-no termini che facilitano la ricerca

Facilitatore:
-parte iniziale fa delle domande per capire quanto è esperta di navigazione la persona,
la mette a suo agio
-durante il test deve alimentare il think loud protocol
Dobbiamo mettere due test usabilità con gli stessi task (3) , 2 persone che siano
esterne ai gruppi e fare dei test da remoto con meet , soggetto deve condividere
schermo e spegnere telecamera (anonimato anche nel nome che compare), alimentare
sempre il think loud protocol
Dobbiamo registrare il test, compilare il report e condividere i link per vedere i test
Video max. 15/22/23 minuti
-Facilitatore legge lo script, che troviamo sul libro come esempio, adattare meglio la
parte del microfono perché si usa solo in presenza (meglio toglierla), alcuni membri
del team di progettaz. Web… TOGLIERE
FIRMARCI IL MODULO TOGLIERE
LA REGISTRAZIONE SI
LA PARTE SULLE DOMANDE AL SOGGETTO VA SALTATA

-Seguire il tour dell’homepage

-task
Fondamentale
Quando inizia la registrazione, la schermata deve essere su google dal soggetto, non
ci deve già essere il sito , si manda link in chat , si apre quando si inizia tour
homepage

Come alimentare il think loud protocol

 Cosa stai pensando? Cosa stai facendo/guardando?
 Che cosa ti aspettavi, perché hai reagito così
 Utente dice cosa devo fare, dove devo cliccare : cosa faresti se fossi a casa, se
io non ci fossi, se non ci fossi, se fossi solo
 Se fa un commento: che cosa ti ha fatto dire questo, è quello che ci serve
 Chiede una spiegazione : tu dici che ne pensi? Secondo te come dovrebbe
funzionare, devi far finta che non ci sono
 Partecipante sbaglia strada: cosa fai/dove vai ?
 Cosa faresti se non ci fosse la search box?
Si può cancellare la tabella dei punteggi ma non quella di valutazione
Video esempio Usability test demo by Steve Krug

ACCESSIBILITÀ
Screen reader: software che leggono il sito ad alta voce