Dispensa

Credibilit & Web
Design efficace
Analisi competitiva di alcuni siti web di successo
A cura di Fabrizio Cuscini e Eddy Maddalena

Universit degli studi di Udine
Febbraio 2011
Credibilit e Web Design efficace

Sommario
!"#$%&'()*#'$+",,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,"-!
."/0#"1"+2'*#'$#"3")4+&"+56+&#+$0+",,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,"-!
"#$!%&'%'()*!%!+&*,(-('./!0+%!0(1%2&(32(!0%--45)(!###########################################################################!6!
7"89+46+&#+$*:"+4%+%#0:",,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,";!
7#$!%&'%'()*!)-*&&()*/!%&'%'()*!%&89%&&(:*!##########################################################################################!;!
-"0&+(#<#8#%="$+8">+<",,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,"?!
<#$!=+*-('.!0%-!0%&(>2!)31%!(20()*'39%!0(!)9%0(,(-('.!###############################################################!$?!
@"0&#%+&#"(#">+<"(+4#A$"+BB#0:0+C"+4%+%#0:"08:44#0:",,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,"!D!
6#$!-*@3+'!%!>9(>-(%!####################################################################################################################################!$$!
6#"!-%>>(,(-('.!##############################################################################################################################################!$$!
6#7!)32'9*&'3!'(83>9*A()3!%!A-+&&3!####################################################################################################!$"!
!"#"$%&'()*+',*)%""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""%$-!
!"#"-%./0++'1'203',*)%4)'%567)102)%""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""%$#!
!"#"#%8/%2,/,9)%""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""%$#!
!"#":%8/%5);5<20+)%""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""%$:!
!"#"!%=5'/)%)%4)2,903',*)%"""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""%$!!
!"#">%8/%7)+,%"""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""%$!!
!"#"?%@,%+703',%"""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""%$>!
!"#"A%.,*2/B+',*)%""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""%$>!
6#<!*0%>+*'%BB*!0%(!)32'%2+'(!#############################################################################################################!$C!
6#6!390(2%!######################################################################################################################################################!$C!
6#D!)318-%&&('.!############################################################################################################################################!$C!
;"0&#%+&#"(#">+<"(+4#A$"+BB#0:0+C"+4%+%#0:"+46&+44#E:",,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,"!F!
D#$!)9%*'(:('.!###############################################################################################################################################!$E!
D#"!%AA%''(!&8%)(*-(!#####################################################################################################################################!"?!
D#7!39(>(2*-('.!#############################################################################################################################################!"?!
G"0&#%+&#"<:4#8:&#"(#"0&+(#<#8#%=",,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,".D!
;#$!(11%0(*'%BB*!0%--F(0%2'('.!############################################################################################################!"$!
;#"!A*)(-('.!0(!)32'*''3!###########################################################################################################################!"$!
;#7!)32'%2+'3!89313B(32*-%!################################################################################################################!"$!
?":$:8#4#"0'26+%#%#E:"(+#"4#%#">+<",,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,".!!
C#$!:*-+'*B(32%!0%(!&('(!)9%0(,(-(!#########################################################################################################!""!
A"$"$%CD'*E+%5D05%09)%F9,G*%""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""%--!
A"$"-%H'%CB*)B7%"""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""%-?!
A"$"#%I,9)J)9%K)0J6%""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""%##!
A"$":%I'*2D%"""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""%:L!
A"$"!%=)2,*4%M%N09O%""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""%:?!
A"$">%I)J)9%"""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""%!!!
C#"!:*-+'*B(32%!0%(!&('(!83)3!)9%0(,(-(!##############################################################################################!D$!
A"-"$%P7'2,+%8*5)9*)5%=)9J'2)+%"""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""%>$!
A"-"-%=56/)%Q)F%&)+'E*%"""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""%>>!
A"-"#%N';%""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""%?L!
A"-":%R/B)%=29))*%""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""%?#!
C#7!9(%8(-3>3!0%--%!:*-+'*B(32(!###########################################################################################################!;;!
F"0'$08)4#'$#",,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,"GF!
<#<8#'A&:B#:",,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,"?D!


1 Introduzione
Ogni discussione relativa al legame tra bellezza estetica ed usabilit delle
interfacce di sistemi informativi, quali applicazioni per bancomat o siti web,
porta direttamente agli studi svolti ed agli articoli pubblicati da Noam
Tractinsky. In particolare, il punto di partenza per questa relazione proprio
l'articolo "What is beautiful is usable", di Tractinsky, Katz e Ikar del 2000.
Lo studio di Tractinsky ha evidenziato come esistano delle relazioni tra la
percezione della bellezza di un sistema interattivo e il suo grado di usabilit. I
risultati di questo studio si avvicinano molto a quelli raggiunti in un altro
settore, quello della psicologia sociale, riguardo agli effetti dell'attrazione fisica
nella valutazione di altri attributi personali. Dopo aver letto questi studi, sembra
dunque evidente l'importanza della cura e dell'approfondimento degli aspetti
estetici nell'interazione uomo-macchina.
2 HCI + emozioni = User experience

Nei tempi in cui la disciplina dell'HCI era appena nata e si stava affermando
(anni '80-'90), l'attenzione si focalizzava soltanto su quelle metodologie e
tecniche che rendessero i prodotti pi usabili: si faceva dunque attenzione a
quanto l'utente imparava velocemente ci che doveva fare, quanti errori
commetteva nel farlo e, quando ci accadeva, se era capace di uscirne
facilmente e velocemente.
Dai centri di ricerca universitari, lo studio e la pianificazione di tutte queste
metodologie per garantire l'usabilit sono stati impiegati anche all'interno di
aziende che hanno capito come l'usabilit possa essere un fattore competitivo.
Ora per non si parla pi solo di usabilit, ma di qualcosa di pi ampio che
ingloba aspetti pi profondi: la user experience. Con questa nuova prospettiva,
oltre alle classiche questioni sull'usabilit, si vanno ad aggiungere altri aspetti
fino ad ora non considerati: come l'utente percepisce l'oggetto, che sensazioni
ed emozioni prova nellutilizzarlo, come entra in relazione con altre persone
attraverso l'oggetto tecnologico. Anche i prodotti pi usabili, privi di una
componente emotiva, possono sembrare all'utente freddi e senza vita.

Figura 1: User Experience come intersezione tra l'HCI e lo studio delle emozioni (Psicologia).
Secondo Don Norman, guru dell'HCI, "gli oggetti attraenti funzionano meglio".
Se un prodotto bello, le sensazioni positive che trasmette alle persone le fa
essere pi tolleranti di eventuali errori ed enfatizza la percezione dell'usabilit
(chiamata infatti usabilit apparente, a priori; percezione del livello di usabilit
di un sistema prima di averlo utilizzato realmente). In altre parole, se due
oggetti hanno lo stesso grado di usabilit, ma uno pi attraente, l'utente
otterr migliori risultati (o comunque ne avr la percezione) con quello pi
attraente.
2.1 Estetica e usabilit, due dimensioni dellHCI

In un certo senso i concetti di estetica e usabilit rappresentano due dimensioni
ortogonali dell'HCI. Mentre l'estetica solitamente si riferisce all'esperienza non
quantificabile, soggettiva, dell'uso di un sistema, l'usabilit comunemente
misurata da significati relativamente oggettivi e simpone come il criterio pi
importante nello studio dell'interazione uomo-macchina. Grazie agli studi di
Tractinsky stato possibile osservare come, in realt, la percezione estetica di
un'interfaccia altamente correlata con la percezione della facilit d'uso della
stessa; perci sembra che gli utenti non percepiscano queste due dimensioni
come indipendenti. Si capito, dunque, che usabilit ed estetica, cos come
altri fattori, contribuiscono entrambi alla creazione di prodotti elettronici
gradevoli.

Figura 2: l'usabilit incontra l'estetica.
Grazie a numerosi studi ed esperimenti effettuati da Reevs e Nass, tutti racchiusi

nel libro "The media equation", si arrivati alla conclusione che le interazioni
delle persone con i computer, le televisioni e i new media in generale sono
fondamentalmente sociali e naturali, come nella vita reale. Il fenomeno sociale
per cui si tende a dedurre attributi relativi alla personalit a partire da una
attrazione fisica stato dimostrato e preso in esame dallo studio (nel campo
della psicologia sociale) intitolato "What is beautiful is good", secondo il quale
persone fisicamente attraenti sono ritenute di possedere caratteristiche sociali
pi desiderabili rispetto a persone che sono meno attraenti. Questo spesso
accade perch la bellezza fisica la caratteristica personale pi ovvia e
accessibile alle altre persone e viene percepita in anticipo nell'interazione.
Questi studi nel campo psicologico-sociale si applicano con successo anche al
campo dell'HCI non solo grazie alla media equation, che rappresenta
comunque un ottimo "collante" tra queste discipline. Grazie agli studi di
Tractinsky, infine, si capito come la bellezza estetica coinvolge la percezione
dell'estetica stessa, l'usabilit apparente coinvolge la percezione dell'usabilit e
una qualche combinazione dei due coinvolge la soddisfazione dell'utilizzo del
sistema.
3 Lesperienza estetica
Definire le dimensioni dellestetica con la stessa precisione con cui sono state
individuate le dimensioni dell'usabilit, un compito assai complesso. Tuttavia,
in vista di un approccio centrato sull'utente, appare sensato chiedersi quale sia
la sua esperienza estetica durante l'interazione con una interfaccia Web. Tale
"esperienza" comprende una pluralit di sensi e fattori coinvolti, non un
processo passivo ma in parte dipende dalle caratteristiche individuali come ad
esempio et, genere, background culturale. Prestare attenzione all'esperienza
estetica dell'utente richiede una visione ampia del concetto di estetica, non

ascrivibile esclusivamente all'arte e ai giudizi sulla bellezza. Nella letteratura

(Liu 2003) sono state teorizzate tre peculiarit dell'esperienza estetica:
Multidimensionalit. L'estetica un concetto riscontrabile non

esclusivamente nel dominio delle arti e le valutazioni estetiche non si
limitano a giudizi sulla bellezza. Vi piuttosto un'ampia gamma di nozioni
estetiche, che possono inglobare anche il contrario della bellezza, il
sublime, nel determinare l'esperienza estetica dell'utente; questa gamma
comprende anche concetti come la comicit, la tragedia, l'originalit. La
principale questione aperta nel dibattito tra filosofi, critici d'arte e designers,
riguarda la possibilit di stabilire quali siano queste dimensioni e i fattori che
determinano i giudizi estetici degli individui.
Multimodalit. Ogni esperienza estetica dovuta al coinvolgimento
simultaneo di pi modalit sensoriali, ad esempio visive ed uditive, olfattive
e gustative, visive e tattili, ecc.
Interattivit. L'individuo interagisce attivamente con l'oggetto che provoca
l'esperienza estetica.
3.1 Estetica classica, estetica espressiva

Traktinsky e Lavie affermano che l'estetica non pu essere definita allo stesso
modo per tutti i tipi di artefatto, ma che le dimensioni ed i fattori in gioco
variano a seconda della tipologia di oggetto alla quale si riferisce. In relazione
allestetica percepita dei siti Web, i due autori teorizzano che l'esperienza
estetica dell'utente sia determinata in gran parte dalla sinergia tra l'ordine e la
complessit dell'interfaccia. Queste due nozioni provengono dalla teoria della
comunicazione visiva, ed in particolare sono definite come segue:
Ordine. Rappresenta il grado e il tipo di organizzazione tra le parti di un

oggetto. In riferimento ai siti Web corrisponde alla chiarezza visiva relativa
alla disposizione degli elementi nel display, la quale concorre a facilitare la
comprensione e a ridurre l'ambiguit dell'informazione presentata.
Complessit. definita come la molteplicit delle relazioni tra le parti che
compongono un oggetto. In un'interfaccia determina la ricchezza visiva e
favorisce una maggiore attivazione dell'utente.
La relazione tra queste due qualit non predefinita, ma in un buon design

deve necessariamente risultare bilanciata e armonizzata in vista dell'esperienza
estetica dell'utente, poich: complessit senza ordine produce confusione;
ordine senza complessit produce noia.

Figura 3: visual design efficace come compromesso tra estetica classica e espressiva.
A proposito delle due nozioni estetiche sopra menzionate, Tracktinsky e Lavie

definiscono l'esistenza di due dimensioni principali ad esse legate. La prima,
chiamata estetica classica, comprende giudizi riguardanti chiarezza, semplicit,
pulizia visiva e simmetria. interessante osservare come tale dimensione
rispecchi alcuni degli obiettivi dell'usabilit, rendendo ancora pi evidente
come in realt estetica e usabilit non abbiano obiettivi divergenti.
La seconda dimensione rispecchia i giudizi sulla creativit, uso di effetti
speciali, originalit e complessit ed denominata estetica espressiva. La
dimensione dell'estetica espressiva non appare cos legata agli obbiettivi
generali dell'usabilit come lo invece la dimensione dell'estetica classica;
secondo i due autori, tuttavia, fondamentale nel concorrere al piacere legato
all'uso e al coinvolgimento dell'utente, mantenendo alto il suo livello di
attivazione durante l'interazione.
Quando un utente valuta un sito Web, lo fa utilizzando contemporaneamente
queste due dimensioni (estetica classica ed estetica espressiva). Nella loro
interazione, esse determinano l'esperienza estetica e riflettono i concetti di
"ordine" e "complessit".
4 Credibilit nel web

Sono stati condotti diversi studi per scoprire cosa influenza la percezione, da
parte delle persone, della credibilit di un sito web. Molti di questi studi
appartengono al gruppo del laboratorio Stanford Web Credibility Research,
che hanno stilato un elenco di 10 linee guida per costruire la credibilit di un
sito web.
1. Fai in modo che sia facile verificare laccuratezza delle informazioni.
Puoi costruire credibilit del sito fornendo supporto di terze parti

(citazioni, riferimenti) per le informazioni che presenti. Anche se la gente

non seguir quei link, hai mostrato confidenza col tuo materiale.
2. Mostra che c una reale organizzazione dietro al tuo sito.
Mostrare che il tuo sito web per una organizzazione legittima, reale,
aumenter la sua credibilit. Il modo pi facile quello di farlo
mostrando lindirizzo fisico dellattivit. Altre cose possono aiutare,
come postare foto degli uffici.
3. Evidenzia le capacit della tua organizzazione e nei servizi che fornisci.
Hai esperti nel team? I tuoi collaboratori sono autoritari? Sii sicuro di
dare le loro credenziali. Sei affiliato con una organizzazione rispettabile?
Rendilo chiaro. Al contrario, non pubblicare link a siti esterni che non
sono credibili. Il tuo sito diventer meno credibile per associazione.
4. Mostra che dietro al tuo sito ci sono persone oneste ed affidabili.
Mostra quindi che ci sono dietro persone reali dietro al sito e nella tua
organizzazione. Poi, trova un modo per trasmettere la loro seriet
attraverso immagini o testo. Per esempio, alcuni siti postano biografie dei
dipendenti che raccontano della loro famiglia e dei loro hobby.
5. Fai in modo che sia facile contattarti.
Un modo semplice per incrementare la credibilit del tuo sito web di
rendere le tue informazioni di contatto chiare: numero di telefono,
indirizzo fisico e indirizzo email.
6. Progetta il tuo sito in modo che sembri professionale (o appropriato
per il tuo scopo).
Sappiamo che le persone valutano velocemente un sito soltanto dalla
progettazione visuale. Quando progetti il tuo sito, fai attenzione a layout,
tipografia, immagini, consistenza dei contenuti, ecc. Ovviamente, non
tutti i siti ottengono credibilit somigliando a IBM.com. La veste grafica
dovrebbe combaciare gli obiettivi del sito.
7. Fai in modo che il tuo sito sia facile da usare, e utile.
Queste sono due linee guida compresse in una sola. La ricerca mostra
che i siti vincono punti di credibilit essendo sia facili da usare che utili.
8. Aggiorna spesso il contenuto del tuo sito (o comunque fai vedere che
stato revisionato recentemente).
Le persone attribuiscono maggiore credibilit ai siti che mostrano di
essere stati aggiornati o rivisti di recente.
9. Usa moderazione con il contenuto promozionale (es.: pubblicit,
offerte speciali).
Se possibile, evita di avere pubblicit sul sito. Se devi avere pubblicit
sul sito, distingui chiaramente il contenuto sponsorizzato dal tuo. Evita
finestre pubblicitarie pop-up. Come per lo stile di scrittura, cerca di
essere chiaro, diretto e sincero.
10. Evita errori di qualsiasi tipo, non importa quanto piccoli siano.
Errori tipografici e link guasti, sconnessi, fanno male alla credibilit di un
sito pi di quanto si possa immaginare. anche importante avere sempre
il sito online e reperibile.

4.1 Qualit del design come indicatore di credibilit

Partiamo subito da un esempio: non sappiamo se Fever (vedi immagine sotto)
sia una buona applicazione, ma linterfaccia utente e il sito web che la descrive,
eleganti e raffinati, fanno una grande prima impressione.
Figura 4: schermata descrittiva dell'applicazione Fever per iPhone.
Uninteressante conclusione degli studi citati prima che gli utenti giudicano
davvero un libro dalla sua copertina, o piuttosto, un sito web dal suo design.
Elementi come layout, coerenza, tipografia, colore e stile influenzano come gli
utenti percepiscono il sito web e che tipo di immagine viene proiettata della
organizzazione o del prodotto. Il sito web non dovrebbe proiettare soltanto una
buona immagine, ma anche quella giusta per la relativa audience. Come gi
trasparso dalle linee guida precedenti, gli altri fattori che influenzano la
credibilit di un sito web sono: la qualit dei contenuti, la quantit di errori, la
frequenza di aggiornamento, facilit duso e laffidabilit degli autori.
5 Criteri di web design efficace: estetica

classica
Lestetica classica lestetica pi tradizionale, cio quellinsieme di
caratteristiche che deve avere un oggetto per risultare attraente, e venire dunque
10

percepito come bello. Nel web risultano validi e sensati praticamente gli stessi
concetti utilizzati per analizzare lestetica nel mondo dellarte, della carta
stampata e del design in generale. Gran parte di questi criteri sono facilmente
valutabili e riscontrabili in modo oggettivo. Per valutare i siti web scelti per
lanalisi si terr conto proprio della presenza o, viceversa, della mancanza di
adesione ai concetti fondamentali dellestetica classica.
Nel seguente capitolo si vuole definire una serie di criteri da valutare e
analizzare, in fase di analisi di un sito web, per valutare la bont del design che
stato eseguito in fase di progettazione.
5.1 Layout e griglie

Il layout la disposizione logica degli elementi grafici allinterno di una pagina
web. Un layout ben progettato permette di conferire una maggior comprensione
degli elementi grafici e un miglior orientamento tra gli stessi. Tanto pi ci si
orienta verso layout pi ordinati, che possibilmente seguano alcune regole base
di progettazione e design, tanto pi si avr una struttura pi immediata per
lutente che, come guadagno, avr una comprensione del sito pi veloce ed
efficace, grazie soprattutto al fatto che sar in grado di costruire un modello
mentale del sistema pi accurato. Il posizionamento degli elementi in una
pagina web pu essere regolato da griglie.
Lutilizzo di griglie per suddividere lo spazio permette di garantire stabilit e
conferire una solida struttura al layout della pagina. Al progettista viene dunque
fornito un modello logico, che gli permette di distribuire i contenuti in modo
ordinato e gradevole.
Figura 5: esempio di layout di impaginazione con griglia.
5.2 Leggibilit
La lettura dei siti web tramite computer differente dalla lettura su carta. La
lettura su schermo pi faticosa e lenta perch si legge in modo discontinuo,
sorvolando gran parte di ci che viene scritto (skimming) per ricercare solo le
righe di interesse, cercando di ignorare il testo meno interessante o rilevante. A
colpire locchio sono soprattutto titoli, sottotitoli immagini e colori; e sono
proprio questi elementi che indirizzano la lettura. dunque importante seguire
alcune semplici regole che permettano di rendere la lettura facile, interessante,
piacevole, ordinata e di facile memorizzazione.
11

Tra le principali linee guide per garantire la leggibilit, vale la pena di citare:
Uso accurato del contrasto tipografico.

Enfatizzare solo aspetti importanti del testo.
Lunghezza di una riga di circa 9 parole (basate su una media di 5 lettere
per parola).
Utilizzo di testi brevi (al massimo 20 righe).
Dimensione minima del font di 12 punti.
Nella fase di analisi dei siti web in esame, per quanto riguarda la valutazione di
questo criterio, si terr conto pi che altro degli aspetti relativi alla lunghezza e
alla dimensione delle righe dei testi. Per completezza, questo criterio verr poi
affiancato in maniera sostanziale a quello che segue, che si focalizza
maggiormente sugli aspetti relativi alle tecniche tipografiche utili ad ottenere
una buona leggibilit, a partire da un buon contrasto visivo e flusso logico del
testo.
Figura 6: due esempi di layout, uno leggibile e uno inconsistente.
5.3 Contrasto tipografico e flusso

Com ormai risaputo, la maggior parte delle persone che leggono sui siti web
non leggono riga per riga, bens scansionano, da un punto ad un altro della
pagina. Per questa ragione, i progettisti di pagine web dovrebbero creare
contrasto tipografico e flusso enfatizzando alcuna parte del testo. Il contrasto (o
gerarchia visiva) importante perch non tutto il contenuto della pagina ha lo
stesso valore, alcune parti potrebbero avere maggiore significato di altre.
Creando del contrasto tipografico si pu indirizzare l'attenzione del lettore ai
messaggi importanti e, allo stesso tempo, incrementare l'attrazione visuale.
5.3.1 Dimensione
Maggiore dimensione del font indica alta priorit perch cattura l'attenzione del
lettore, dunque questo metodo usato soprattutto per le intestazioni.
12

Figura 7: esempio di enfatizzazione mediante dimensione.
Allo stesso modo si pu de-enfatizzare parte del testo usando dimensioni del
font minori.
Figura 8: Esempio di de-enfatizzazione mediante dimensione.
5.3.2 Classificazione dei typeface

Il contrasto tipografico pu essere raggiunto mischiando differenti classificazioni
di typeface. Comunque, dato il limite dei font websafe, ci sono soltanto due
classificazioni usate comunemente: serif (con grazie) e sans-serif (senza grazie).
Figura 9: classificazione dei font web safe.
Generalmente, per creare contrasto tra intestazione e corpo del testo, si usa un
font serif per le intestazioni e font sans-serif per il corpo, o viceversa.
Figura 10: esempio di contrasto tipografico mediante classificazione del typeface.
5.3.3 Il colore
Il contrasto di colore un modo comune per distinguere tra navigazione,
intestazioni, link e corpo del testo.
13

Figura 11: esempio di uso del colore per distinguere un link.
Per esempio, si pu anche usare del colore dissolto per indicare che qualcosa
disabilitato o non disponibile.
Figura 12: esempio di uso del colore per distinguere attivo/disabilitato.
Alcune volte non c bisogno di rendere qualcosa pi grande per catturare

meglio lattenzione, basta creare enfasi usando colori pi luminosi, come ad
esempio il rosso.
Figura 13: esempio di uso del colore per attirare lattenzione.
Si pu usare il colore per distinguere parole individuali in un gruppo di testo.
Figura 14: esempio di uso del colore per distinguere parole allinterno di un gruppo.
Quando si combinano dimensioni minori di font con colore dal tono pi

leggero, limportanza del testo ulteriormente de-enfatizzata, come
nellesempio seguente:
Figura 15: esempio di uso del colore per de-enfatizzare ulteriormente.
5.3.4 Il text-case
Quando lo stesso typeface usato per le intestazioni e per il corpo del testo, il
contrasto pu essere raggiunto cambiando il text-case (maiuscolo/minuscolo). Il
testo in maiuscolo tende a catturare maggiore attenzione rispetto a quello
interamente in minuscolo, dunque pi adeguato per le intestazioni.
14

Figura 16: esempio di uso del text-case per enfatizzare un titolo.
Bisogna stare attenti alluso del maiuscolo, difatti da evitarne lutilizzo per il
corpo del testo; questo rallenter la lettura e abbasser la leggibilit del testo
stesso.
Figura 17: esempio di errato uso del maiuscolo nel corpo del testo.
5.3.5 Stile e decorazione

Uno degli errori pi comuni di molti scrittori (particolarmente per gli utenti di
Microsoft Word) la tendenza di usare la decorazione sottolineatura per
enfatizzare certe parti del testo. Questo errore assume dimensioni ben pi gravi
nel web. I lettori interpreteranno per errore il testo sottolineato come dei link
perch i browser sottolineano i link di default. Quindi, non si deve sottolineare
del testo che non sia un link quando si scrive sul web.
Figura 18: esempio di (errata) enfatizzazione mediante sottolineatura.
Piuttosto, sarebbe pi corretto enfatizzare un termine, o parte del testo,

utilizzando lo stile corsivo per il font:
Figura 19: esempio di (giusta) enfatizzazione mediante corsivo.
5.3.6 Il peso
Rendere alcune parti del testo con maggiore peso (bold, grassetto) pu creare
enfasi.
Figura 20: esempio di (giusta) enfatizzazione mediante grassetto.
Un altro errore comune la tendenza a mettere in grassetto intere frasi.

Facendo questo lenfatizzazione ed il contrasto del testo viene perduta.
15

Figura 21: esempio di esagerata enfatizzazione mediante grassetto.
5.3.7 Lo spazio
Lo spazio gioca la parte pi importante per mantenere il flusso nel design. Un
buon utilizzo dello spazio comunicher al lettore dove iniziare, quando fare
pausa, dove finisce, e cosa fare dopo. Ci sono vari modi per creare spazio:
spazio tra i paragrafi, spazio tra i caratteri delle parole, linterlinea (spazio tra le
righe) e indentazione.
5.3.8 Conclusione
Di seguito si fornisce un esempio che racchiude tutti i concetti appena descritti.
16

Figura 22: esempio concreto del flusso visivo di un sito.
17

5.4 Adeguatezza dei contenuti

Per aumentare la gradevolezza visiva di un sito necessario che tutti i contenuti
da esso forniti siano in linea con il tema e i motivi che il sito tratta. Ambiguit e
disordine della scelta degli elementi del sito ne minano la credibilit, oltre che a
risultare poco adatti nel contesto del sito stesso.
5.5 Ordine
Dopo aver effettuato unattenta scelta sui contenuti da inserire nel sito, diventa
fondamentale saperli disporre seguendo logiche ben precise. Queste logiche
dipendono sia da fattori impliciti, sia dalle convenzioni comunemente adottate
sul web. Lordine visuale indispensabile per presentare il contenuto in una
forma di semplice comprensione che permette di garantire soddisfazione,
efficienza e accettazione da parte dei fruitori finali.
Figura 23: esempio di due siti web molto diversi in termini di ordine visuale.
5.6 Complessit
La complessit di un artefatto non un concetto universale. Per un sito di
apprendimento, destinato ad un ampio parco di utenti, una bassa complessit
pu essere lago della bilancia nel far accettare il sistema. Un sito che vuole
rompere gli schemi oppure un sito per poche persone, cosiddetto di nicchia,
pu trovare necessario utilizzare unelevata complessit, perch potrebbe
ritenere che la troppa semplicit coincida con la noia e la banalit. Diventa
quindi necessario mettere tutto sulla bilancia e fare delle scelte sul grado di
complessit (sia visiva, sia funzionale) per trovare il giusto compromesso, ai fini
di fornire quindi uninterfaccia complessa al punto giusto da essere comunque
fruibile nel modo giusto.
18

Figura 24: esempio di due siti di diversa complessit visuale.
6 Criteri di web design efficace: estetica

espressiva
Lestetica espressiva, a differenza di quella classica, non orientata
direttamente al concetto di usabilit del sito stesso. Trova un consenso meno
globale, proprio perch esce dalla rigidit imposta dallestetica tradizionale.
Non bisogna considerare estetica classica ed estetica espressiva come due cose
contrapposte, bens come due dimensioni dello stesso spazio che possono
coesistere anche se dettate da regole diverse.
La valutazione dellestetica espressiva risulta pi complessa e meno rigida
rispetto alla valutazione dellestetica classica. I concetti che la caratterizzano
sono pi generali e risulta difficile trovare unadesione unanime che soddisfi
appieno tutti i valutatori. Essendo concetti meno oggettivi, la valutazione dei siti
in esame in questa relazione sar pi che altro discorsiva e influenzata dai gusti
estetici dei valutatori.
6.1 Creativit
Creativit unire elementi esistenti con connessioni nuove, che siano utili.
Henri Poincar
Creativit un termine che indica genericamente l'arte o la capacit di creare e
inventare; tuttavia esso pu prestarsi a numerose interpretazioni e significati.
La creativit espressione tipicamente umana perch si fonda anche sul
possesso di un linguaggio a volte astratto (fatto per di parole, numeri, note
musicali) e atto a compiere discriminazioni sottili.
Nellambito del web design, il concetto di creativit viene spesso associato
allaspetto visivo e artistico di un siti web nel suo complesso. Si tratta della
capacit di creare, inventare con libert e fantasia. In particolare, essere creativi
significa trovare:
19

un modo migliore di fare le cose,

un modo nuovo di fare le cose,
un modo differente di fare le cose.
Questo vale sia per laspetto artistico/visivo, sia per laspetto

tecnico/implementativo.
In parole povere, trovare creativit in un sito web significa individuare nuovi
approcci estetici e/o funzionali che siano ben integrati nel loro insieme, nel
contesto del sito e che siano ben accettati dagli utenti che lo utilizzano, senza
appesantire dunque la user experience, bens migliorandola.
6.2 Effetti speciali

Gli effetti speciali sono quellinsieme di tecniche e tecnologie utili a simulare
qualcosa che non sarebbe possibile rappresentare in un comune sito web.
Queste tecniche possono rivelarsi una lama a doppio taglio. Se usati
correttamente gli effetti speciali possono stupire lutente, catturare la sua
attenzione, aumentarne la possibilit di memorizzazione e magari persuaderlo a
tornare a visitare il sito. Dallaltro canto, se usati in maniera impropria, gli effetti
speciali possono divenire noiosi, confondere lutente, possono essere valutati
come inutili o, ancor pi grave, causare il rifiuto dellesperienza da parte
dellutente.
6.3 Originalit
Il concetto di originalit si basa sullidea della diversit. Ci che considerato
originale a volte viene percepito come strano, bizzarro, stravagante.
Nellambito del web design, originalit proporre idee e tecniche nuove, che
non seguono schemi tradizionali. Il concetto di originalit di un sito web , pi
che altro, legato allidea che ne sta dietro: il sito funge fondamentalmente da
strumento principale per poterne fruire.
7 Criteri basilari di credibilit

Lintera relazione si basa sul concetto di credibilit, non come punto di
partenza, ma come punto di arrivo. Attraverso un web design efficace
possibile curare positivamente la propria immagine, e da questa si pu arrivare
a trasmettere un profilo credibile sulla rete, senza che gli utenti entrino
necessariamente in contatto (toccando con mano i prodotti, parlando co un
consulente per i servizi offerti, ecc.) con lorganizzazione. Per arrivare a questo,
come gi discusso nel paragrafo sulle linee guida della credibilit sul web, non
basta soltanto una cura estetica del proprio sito, bens bisogna prestare cura a
molti altri aspetti. Per valutare se i siti presi in esame per questa analisi
competitiva trasmettono un minimo di credibilit, si deciso di formulare tre
criteri, ognuno di questi relativo allimmediatezza di alcune informazioni
fondamentali.
20

7.1 Immediatezza dell'identit

Un criterio veramente essenziale che ogni utente usa per valutare la credibilit
di un sito, di unazienda o organizzazione in genere, la percezione di una
chiara identit aziendale. Tutto questo si basa, innanzitutto, sullindividuazione
di un marchio ben definito, ma anche e soprattutto su come questo marchio,
assieme ad altre informazioni basilari, viene presentato al pubblico. Lidentit
non solo un marchio, cos come la carta di identit non solo una fototessera.
Comunicare bene la propria immagine vuol dire presentare in maniera
immediata l'identit aziendale o dell'organizzazione che c' dietro.
importante visualizzare efficacemente il proprio marchio e fare in modo che i
dati anagrafici aziendali siano facilmente ed immediatamente reperibili.
7.2 Facilit di contatto

Per valutare la credibilit di un sito web, o comunque dellorganizzazione che
c dietro, importante avere chiarezza ed immediatezza nellidentificare i
contatti telefonici o e-mail, o se facile e immediato poter entrare in contatto
con l'organizzazione direttamente tramite il sito web, per esempio tramite un
modulo predisposto.
7.3 Contenuto promozionale

Questo criterio intende misurare il quantitativo di contenuto promozionale
presente sul sito, se il materiale pubblicitario presente troppo o giusto, se
invasivo o meno. Una massiccia presenza di materiale pubblicitario o
promozionale non comunica certo una immagine pulita e sana, quindi
credibile, dellorganizzazione.
8 Analisi competitiva dei siti web

I siti web selezionati per lanalisi saranno dunque valutati mediante i criteri di
buon web design esposti finora. Questi criteri sono relativi ad aspetti estetici,
pi che di usabilit. Dagli studi citati nei capitoli precedenti, si capito come le
interfacce con un aspetto estetico ben curato riescono a far percepire allutente
un maggiore livello di usabilit (quindi usabilit percepita, o usabilit
apparente). giusto dunque precisare che nella fase di valutazione di ogni
singolo sito non stato effettuato alcun user-test per valutare leffettivo grado di
usabilit della relativa interfaccia.
Per assegnare un valore di valutazione ad ogni criterio stato usato un sistema
a stelline, per indicare un punteggio da 0 a 5, includendo anche i mezzi punti.
21

Punteggio
Descrizione
Il criterio non valutabile perch completamente non
rispettato.
Le pagine presentano numerose lacune e il criterio non
viene soddisfatto.
La valutazione risulta soddisfatta solo in minima parte.
Il sito soddisfa solo in parte il criterio.
La gran parte degli elementi delle pagine aderisce con
successo alle linee guida.
Il sito supera rispetta pienamente il criterio.
Tabella 1: legenda per la valutazione dei criteri.
8.1 Valutazione dei siti credibili

In questa sezione si passeranno in rassegna alcuni siti selezionati come possibili
siti credibili, o comunque abbastanza ben progettati da essere catalogati in
questo gruppo.
8.1.1 Things that are brown

Things that are brown una piccola web agency che si occupa della
realizzazione di siti web con un approccio molto moderno, creativo e solido.
22

Figura 25: la home page del sito thingsthatarebrown.com
Valutazione estetica classica

Layout e griglia
Questo sito sembra presentare un layout molto ordinato e pulito, ben
strutturato, alla base del quale stata individuata una griglia di impaginazione a
16 colonne, come mostrato nella figura seguente:
23

Figura 26: griglia di impaginazione del sito thingsthatarebrown.com
PUNTEGGIO:
Leggibilit
Le informazioni sono visivamente ben organizzate, i testi hanno la giusta
lunghezza in modo da permettere allutente di leggere con attenzione e i colori
sufficientemente contrastanti (testo-sfondo) permettono una facile scansione del
testo. I messaggi sono chiari e diretti, lo stile comunicativo corretto per una
agenzia di siti web.
PUNTEGGIO:
Contrasto tipografico e flusso
Per quanto riguarda la gerarchia visiva, questo sito sarebbe da prendere come
esempio. Si percepisce un flusso costante da sinistra verso destra e dallalto
verso il basso. Lutente riesce quindi a visualizzare correttamente, nel modo
giusto e nel giusto ordine, tutto ci di cui ha bisogno. Si fatto un corretto uso
del contrasto tipografico mediante giochi di dimensione dei font, colore del
testo e dei link, decorazione (sottolineatura dei link), peso (alcuni titoli in
grassetto, altri no), text-case (le voci del menu in upper-case). Per quanto
riguarda lo stile adottato, stato scelto un uso specifico di font sans-serif per
comunicare eleganza mediante leggerezza, linearit e pulizia, mentre la scelta
di colori abbastanza contrastanti e diversi, come il marrone in diverse
24

variazioni di saturazione e lazzurro/verde acqua, dona un tocco di modernit

ad un aspetto che altrimenti avrebbe unaria decisamente pi classica.
Figura 27: un possibile flusso visivo di thingsthatarebrown.com
PUNTEGGIO:
Adeguatezza dei contenuti
In questo sito non stata riscontrata la presenza di contenuti fuori tema. Tutto
sembra adeguato al tipo di sito. I contenuti visibili a colpo docchio sono tutti
inerenti alla pubblicizzazione dei propri prodotti e servizi, allesposizione dei
lavori precedenti (portfolio) e alla possibilit di entrare in contatto con il team.
PUNTEGGIO:
Ordine
Per quanto riguarda lordine nella disposizione dei contenuti, i progettisti di
questo sito sembra che abbiano seguito delle logiche ben precise. abbastanza
evidente che i contenuti non sono stati disposti a caso, anzi, sembrano quasi
seguire una struttura, che risulta abbastanza comune tra i siti di web agency di
successo. Un ottimo livello di ordine visuale viene percepito immediatamente,
a colpo docchio, in quanto tutto sembra essere al proprio posto.
PUNTEGGIO:
Complessit
Si pu affermare che, nonostante il sito presenti un visual design decisamente
moderno ed accattivante, la sua interfaccia non sembra avere un livello di
complessit tale da rendere il sito difficile da navigare.
25

PUNTEGGIO:
Valutazione estetica espressiva

Creativit
Come accennato poco prima, il sito presenta un visual design accattivante,
trasmettendo anche un certo livello di creativit di chi ha progettato il sito.
Sicuramente, la presentazione di anteprime dei progetti allinterno della
homepage presentati in stile cover flow dona un tocco di creativit al sito.
PUNTEGGIO:
Effetti speciali
Di effetti speciali ce ne sono pochi davvero. Quello che cattura lattenzione
sicuramente lo slideshow in home page con il susseguirsi delle anteprime dei
progetti con effetto dissolvenza.
PUNTEGGIO:
Originalit
Da un punto di vista dei contenuti, dei servizi offerti, questo sito non pu, per
sua natura, essere particolarmente originale. Essendo pi che altro un sito
vetrina, si limita alla presentazione delle proprie competenze e referenze con
lintento di catturare nuovi potenziali clienti. Da un punto di vista puramente
visuale ed estetico, sembra che chi lo ha progettato abbia dedicato attenzione ai
particolari e questo, nel loro insieme, aiuta a trasmettere una immagine
originale del sito, seppur senza uscire troppo dagli schemi tradizionali.
PUNTEGGIO:
Valutazione credibilit
Immediatezza dellidentit
In questo sembra abbastanza immediato identificare lorganizzazione che sta
dietro, il nome del gruppo di lavoro, cosa fanno e in che settore di mercato
sono localizzati.
PUNTEGGIO:
Facilit di contatto
Se un potenziale cliente, o comunque un utente interessato ai servizi proposti,
fosse veramente interessato a contattare lazienda per richiedere informazioni
aggiuntive, non avrebbe alcun problema a farlo: le informazioni di contatto
sono presenti sia nello header in cui viene visualizzato lindirizzo e-mail, il
numero di telefono e la voce del menu per accedere alla sezione contatti e
anche nel footer in cui vengono collegati i profili dei social network e, di
nuovo, e-mail e numero di telefono come presentato nella figura seguente:
26

Figura 28: esempio di facilit di contatto del sito thingsthatarebrown.com
PUNTEGGIO:
Contenuto promozionale
Questo sito non presenta alcun contenuto promozionale, quindi si pu definire
come un sito pulito, in cui gli utenti non sono distratti da alcun materiale
promozionale. Questo sicuramente un punto a favore.
PUNTEGGIO:
Conclusione
In base alle valutazioni fatte finora, si pu osservare che il sito analizzato
presenta un profilo professionale, e risulta decisamente appropriato per il suo
scopo. Lobiettivo di questo sito quello di promuovere la propria attivit
mediante la cura della propria immagine e presenza sulla rete. Si pu
concludere che comunica una immagine credibile poich, tra laltro, rispetta
tutte le linee guida della credibilit sul web e, per questo, colpisce il segno.
PUNTEGGIO:
8.1.2 Ui Tuneup
Questo il sito web che offre un servizio ben specifico: mettere a posto
(letteralmente accordare) il visual design di siti brutti, vecchi o che abbiano
bisogno di un rinfresco stilistico.
27

Figura 29: la homepage del sito uituneup.com

Layout e griglia
Linterfaccia di questo sito presenta un layout molto pulito e ordinato che si
basa su una griglia a 16 colonne, come presentato nella figura sottostante:
28

Figura 30: griglia di impaginazione del sito uituneup.com
Si pensa di assegnare il voto massimo alluso della griglia perch stata

impostata talmente bene che si percepisce chiaramente una disposizione
ordinata, strutturata e lineare degli elementi del layout. In parole povere, stata
applicata alla perfezione la tecnica di impaginazione mediante griglia a 16
colonne.
PUNTEGGIO:
29

Leggibilit
In questo sito non sono presenti testi troppo lunghi, bens risultato somigliare a
messaggi non troppo concisi ma schietti e diretti, senza fronzoli. Si fatto un
ottimo uso di tecniche tipografiche come luso del colore, della dimensione e
del peso del testo per aumentare la leggibilit e la scansionabilit del testo
risulta molto lineare. I caratteri non sono troppo piccoli e la lunghezza delle
frasi corretta per permettere una lettura piacevole ed efficace.
PUNTEGGIO:
La home page del sito in analisi rappresenta un perfetto esempio di come
ottenere gerarchia visiva del contenuto testuale in una pagina. Si percepisce un
perfetto flusso informativo, molto lineare. Lutente inconsciamente guidato
verso una lettura da sinistra verso destra e dallalto verso il basso, scansionando
gli elementi nellordine corretto, si pensa, in base a come intendevano gli
sviluppatori.
Figura 31: un possibile flusso visivo di uituneup.com
30

Per ottenere questo flusso lineare e ben direzionato, gli sviluppatori del sito
hanno usato tutte le tecniche tipografiche a disposizione per creare un perfetto
contrasto tipografico, riuscendo quindi ad ottenere una perfetta gerarchia tra gli
elementi. Si dunque fatto un corretto uso del colore e della dimensione del
testo per enfatizzare alcune intestazioni, peso per enfatizzare alcune parti
concetti chiave di alcuni paragrafi e dello spazio bianco che servito a
bilanciare gli elementi paritari, e a suddividere meglio gli elementi di peso
diverso.
PUNTEGGIO:
In questo sito tutti i contenuti sembrano essere davvero in linea con il tema
dello stesso. Non son stati individuati contenuti non adeguati o ambigui. Tutto
sembra molto chiaro e quindi, di conseguenza, credibile.
PUNTEGGIO:
Ordine
Il sito in analisi presenta un ordine visuale di alto livello, ottenuto grazie ad un
insieme di fattori che concorrono assieme: presenza di una struttura ben precisa
e lineare, contenuti adeguati e gerarchia visiva eccellente.
PUNTEGGIO:
Complessit
Linterfaccia del sito uituneup.com abbastanza semplice, non sembra voler
uscire dagli schemi. Sia da un punto di vista visivo, sia funzionale, il sito ha un
livello di complessit molto basso, aspetto che permette di essere facilmente
fruibile da una estremamente ampia gamma di utenti.
PUNTEGGIO:
Estetica espressiva
Creativit
Seppure viene percepita una interfaccia estremamente semplice, quasi
minimale, comunque facile trovare alcune note creative. In questo caso si fa
direttamente riferimento ai disegni vettoriali realizzati per integrare la grafica
del sito. un sito davvero ben fatto, a livello tipografico si nota una cura dei
particolari molto buona, ma laggiunta di alcuni disegni a supporto della
comunicazione di messaggi specifici compito primario del sito, quello di
presentare il servizio offerto dona un tocco di creativit al tutto.
PUNTEGGIO:
Effetti speciali
Non ci sono elementi nel sito che possano ricondurre ad effetti speciali;
nessuna animazione, nessun effetto visivo di transizione.
31

PUNTEGGIO:
Originalit
In questo caso, di originale c gi di per s lidea del sito. originale lidea che
questo non sia il sito di una web agency che fa siti web, bens il sito di un
servizio specifico per siti gi esistenti: il restyling. sicuramente un servizio che,
almeno potenzialmente, ogni web agency dovrebbe poter offrire, per in questo
caso lidea unica e principale. Aspetti di originalit si notano anche in materia
di estetica. Secondo una attenta osservazione si arrivati a concludere che il
servizio proposto in maniera originale attraverso tecniche di visual design
allavanguardia.
PUNTEGGIO:
Immediatezza dell'identit
Appena si accede al sito e si osserva la sua interfaccia, sembra davvero
immediato capire, attraverso slogan e messaggi chiari, che tipo di servizio viene
offerto/proposto e, soprattutto, che organizzazione c dietro. immediato
visualizzare il marchio assegnato al servizio e identificare il gruppo che ci
lavora dietro.
PUNTEGGIO:
Facilit di contatto
Anche in questo caso sembra davvero immediato poter entrare in contatto con
lorganizzazione. Nella parte in alto del sito sono visualizzati chiaramente
lindirizzo e-mail e il numero di telefono.
PUNTEGGIO:
Non presente alcun contenuto promozionale che non sia la promozione
dellunico servizio stesso del sito. In questo modo, il visitatore non confuso da
altre offerte e promozioni a video, ma si pu concentrare sul reperimento delle
informazioni che necessita.
PUNTEGGIO:
Conclusione
Un sito web davvero ben fatto, ben progettato; risulta molto lineare, leggibile,
ordinato e preciso. Trasmette una immagine davvero positiva del servizio e
dellorganizzazione che ne sta dietro. Di conseguenza, dopo aver valutato il
sito mediante la valutazione dei criteri appena descritti, si pu concludere che
un sito che trasmette credibilit e qualit, per cui con estrema probabilit
sar in grado di catturare un soddisfacente numero di clienti.
32

PUNTEGGIO:
8.1.3 Forever Heavy

Forever Heavy il nome della web agency a cui fa capo un freelancer, con
sede in North Carolina, USA. Il punto forte di questa web agency sono le
interfacce grafiche molto gradevoli che in grado di creare. Lidea quella di
analizzare il grado di credibilit del sito stesso della web agency mediante una
attenta osservazione del suo design.
33

Figura 32: la homepage del sito foreverheavy.com

Layout e griglia
Linterfaccia del sito risulta strutturata sulla base di una griglia di 12 colonne. SI
nota anche un certo ritmo orizzontale, conseguenza del fatto che si sia scelto di
adottare una griglia ben impostata su cui progettare il tutto. La scelta di una
34

griglia a colonne dona un certo ordine al layout generale, e questo andr tutto a
favore di una buona leggibilit e flusso visivo, aspetti che per si affronteranno
in maniera pi approfondita nei paragrafi successivi.
Figura 33: griglia di impaginazione del sito foreverheavy.com
In sostanza, si nota facilmente che stato fatto un ottimo lavoro per quanto
riguarda la definizione del layout. Si deciso di non assegnare il punteggio
massimo, ma di penalizzare di mezzo punto la valutazione, in quanto stata
35

individuata una lieve imperfezione nel posizionamento di alcuni elementi nel

footer.
PUNTEGGIO:
Leggibilit
Sebbene si percepisca una buona strutturazione dellinterfaccia, la scelta di
allineare centralmente alcuni testi, paragrafi con font con grazie (serif) di
dimensioni ridotte ne abbassa la leggibilit. Per aggiungere un tocco di
creativit hanno scelto di usare delle scritte che sono belle da vedersi,
comunicano che lo sviluppatore ha davvero ampie competenze tipografiche,
ma sono scritte decisamente poco leggibili.
Figura 34: alcune scritte poco leggibili del sito foreverheavy.com
PUNTEGGIO:
Per quanto riguarda il contrasto tipografico, si pu affermare che si
individuata una certa gerarchia visiva, anche se un po confusionata per via
dellestrema cura grafica che lautore ha voluto dare. Il logo in alto a sinistra,
come oramai diventato standard de facto. Nella parte alta centrale del sito c
lo slogan principale molto grande, colorato, stilistico, quindi gerarchicamente
importante. Il menu di navigazione, che si trova sopra questo slogan, di
dimensioni abbastanza moderate e, per questo, gerarchicamente perde di
importanza e visibilit. Per il resto sembra tutto rispettare una gerarchia visiva
sensata, per cui le intestazioni acquisiscono visivamente importanza grazie
a grassetti, stilizzazioni, sottolineature, colori. I link sono colorati di arancione,
quindi vengono facilmente individuati nel flusso di testo.
Per quanto riguarda il flusso, la presenza del grande slogan al centro
dellinterfaccia, che attira particolarmente lattenzione, fa in modo che lutente
si presume, nella maggior parte dei casi inizi il proprio flusso di scansione
del testo proprio da quel punto. Di seguito si propone un possibile flusso visivo.
36

Figura 35: un possibile flusso visivo di foreverheavy.com
PUNTEGGIO:
Tutti i contenuti sembrano abbastanza in linea con il tema. Anche se lautore
usa uno stile un po esagerato, che a volte sembra un po forzato, per esprimere
la propria creativit: basti pensare al gatto che si lecca la zampa nello header, e
lo stesso gatto che si avvicina ad un uccellino morto nel footer. A parte questi
dettagli stilistici, che si riferiscono prettamente ai disegni che lautore ha
realizzato, per quanto riguarda invece i contenuti testuali, questi risultano
decisamente ben adeguati al contesto.
PUNTEGGIO:
Ordine
Se il punto di partenza un layout ben strutturato, magari con una griglia a
colonne, allora ci sono buone probabilit che il punto di arrivo sia qualcosa di
abbastanza ordinato, purch non si stravolga il layout stesso mediante
impaginazione piena di violators. Questa interfaccia non propriamente
ordinata. A primo colpo docchio si percepisce una buona strutturazione dei
37

contenuti, per allinizio gli utenti potrebbero sentirsi un po confusi e

disorientati dalleccessiva arte grafica adottata, e ai tanti testi allineati
circolarmente, alle tante scritte molto stilistiche. In contrapposizione con questo
c per un certo ordine nella disposizione dei contenuti testuali fondamentali.
PUNTEGGIO:
Complessit
In base ad una serie di osservazioni avanzate finora, aggiungendo anche una
valutazione di complessit, si arrivati alla conclusione che questo sito, da un
punto di vista visuale, abbastanza complesso. Il menu di navigazione in alto,
con scritte piccole allineate in su una linea circolare, lo rende poco visibile,
comprensibile, e mal navigabile, quindi aumenta il carico cognitivo per
lutente. Per il resto non sono stati trovati elementi che rendano il sito ancora
pi complesso.
PUNTEGGIO:

Creativit
Si nota un alto livello di creativit nella progettazione dellinterfaccia di questo
sito web. Visto che il soggetto principale del sito un web designer con
particolari competenze nellambito del disegno in vettoriale, limmagine che
deve comunicare attraverso il sito : sono un creativo e faccio siti belli.
PUNTEGGIO:
Effetti speciali
Non immediato percepire che questo sito presenta qualche effetto speciale, e
va bene cos. Tutti i siti web dovrebbero essere discreti nel presentare qualche
tipologia di effetto visivo particolare. Quello che attira lutente, in questo genere
di questioni, leffetto sorpresa. Durante la fase di analisi di questo sito web,
infatti, si rimasti sorpresi nel vedere un particolare effetto di rollover sulle voci
del menu di navigazione, con effetti di transizione molto gradevoli. Anche nella
parte pi centrale della pagina, nella sezione con alcuni lavori recenti, si
notato lutilizzo di alcune transizioni animate che completano una navigazione
gi di per s accattivante.
Figura 36: esempio di effetto di animazione sul menu del sito foreverheavy.com
PUNTEGGIO:
38

Originalit
Lidea che sta dietro al sito non di certo originale, ancora un altro sito di un
altro creativo freelancer web designer. Per sembra che questo web designer sia
particolarmente creativo, che abbia la giusta esperienza e che sia,
effettivamente, originale. Comunica originalit come diversit, in quanto
sembra fare le cose in modo, appunto, originale. Originalit in questo caso vuol
dire capire la firma che sta dietro ad unopera anche un sito web e capire
che quel che stato fatto, progettato, ideato, lo stato fatto in maniera
originale, diversa dal comune.
PUNTEGGIO:
In quanto ad immediatezza dellidentit, si pensato di non assegnare il
punteggio massimo a questo sito perch non ancora ben chiaro se il nome del
progetto sia Forever Heavy o soltanto heavy. Nel logo viene usata soltanto
la parola heavy, nel titolo del documento e nelle note del footer menzionato
come Forever Heavy. Questo crea un po di confusione, cosa che non giova
certo alla propria immagine.
PUNTEGGIO:
Facilit di contatto
Non sembra per niente difficile o macchinoso entrare in contatto con questo
web designer. Nella parte in alto del sito sono presenti oltre alla sezione
contatti del menu dei link per collegarsi al suo profilo twitter e facebook.
Nella sezione contatti sono scritti chiaramente il contatto skype, lindirizzo email e, nuovamente, laccount twitter. In sostanza, sembra abbastanza
immediato e di facile accesso la possibilit di entrare in contatto con lazienda.
PUNTEGGIO:
Non presente alcun contenuto promozionale, a parte un unico elemento che
in realt una pubblicizzazione del fatto che il sito web stato segnalato come
sito del giorno da un altro sito.
Figura 37: leggero contenuto pubblicitario del sito foreverheavy.com
PUNTEGGIO:
39

Conclusione
In conclusione si pu affermare che il sito funziona: comunica credibilit
trasmettendo di s una immagine curata, competitiva e allavanguardia. Proprio
per questo, si pensa che, grazie al design molto curato a livello espressivo,
potrebbe attirare dei clienti esigenti.
PUNTEGGIO:
8.1.4 Finch
Finch il sito personale di un freelancer web designer, scrittore e disegnatore,
Francisco Inchauste. un personaggio molto creativo che sta avendo molto
successo sulla rete, anche grazie ad alcuni suoi articoli molto popolari. Si
voluto selezionare questo sito perch, come vedremo pi avanti, nonostante sia
davvero essenziale, minimale, riesce a comunicare con estrema efficacia,
risultando dunque credibile ed affidabile.
40

Figura 38: la home page del sito getfinch.com
41

Figura 39: la prima pagina del blog del sito getfinch.com

Layout e griglia
La prima impressione che comunica questo sito di avere un layout semplice
ma ben strutturato. A supporto di questo stato rilevato lutilizzo di una griglia
di 12 colonne.
42

Figura 40: griglia di impaginazione del sito getfinch.com
Purtroppo, stata individuata una leggera imperfezione nellallineamento delle

colonne centrali del sito. In particolare, la prima colonna sembra avere un
margine eccessivo rispetto alle altre due, come mostrato nella figura seguente.
43

Figura 41: piccolo problema di allineamento alla griglia nel sito getfinch.com
PUNTEGGIO:
Leggibilit
Testi concisi, schietti e diretti, dimensioni adeguate dei font, righe della giusta
lunghezza, colori sufficientemente contrastati e gerarchia visiva ben progettata
rendono il sito decisamente ben leggibile.
PUNTEGGIO:
Questo sito web, seppur minimale ed essenziale, mostra una tecnica tipografica
di qualit elevata, una gerarchia visiva impeccabile ed un flusso sensato.
Lautore del sito ha fatto un massiccio uso delle classiche tecniche tipografiche
per ottenere una gerarchia visiva dei contenuti molto buona. Per esempio:
la scritta al centro, per attirare lattenzione, stata ingrandita in maniera

estrema, stato utilizzato uno stile corsivo, con poche grazie, ma molto
morbide, quasi lasciando intendere che fosse scritta a mano;
lo slogan principale del sito (frase subito sotto al titolo gigante) il
secondo elemento nella gerarchia, presenta una dimensione elevata, ma
non inadeguata; stato utilizzato un font con grazie e la cosa che risalta
stato luso del colore e del text-case (uppercase, per la precisione) per
enfatizzare alcune parole importanti allinterno della frase;
i tre titoli delle rispettive colonne hanno uno stile in corsivo, con sfondo
tondo e colorato e riescono perfettamente a fare il loro dovere: danno
importanza a quei blocchi e creano un livello nella gerarchia visiva;
I titoli degli articoli sono in grassetto, font con grazie, dimensione
maggiore rispetto al testo.
Insomma, ci sono molti, moltissimi elementi che portano la valutazione dei

criteri di gerarchia visiva e flusso ad un punteggio elevato.
Il flusso visivo ben impostato, tutto parte dal logo gigantesco al centro della
pagina, poi il resto abbastanza automatico grazie alla buona gerarchia visiva e
suddivisione dei (pochi) contenuti del sito. Di seguito si presenta in
unimmagine un possibile flusso visivo della home page.
44

Figura 42: un possibile flusso visivo della homepage del sito getfinch.com
PUNTEGGIO:
I contenuti del sito sono decisamente adeguati per il suo contesto. Oltre ad
essere adeguati sono anche dei contenuti molto ben strutturati, originali, con
uno stile di scrittura davvero allavanguardia.
PUNTEGGIO:
45

Ordine
Da un punto di vista visuale, grazie soprattutto ad un layout preciso e ben
strutturato, linterfaccia risulta molto pulita, minimale e molto ordinata. Ci sono
pochi elementi nella pagina, ma grazie ad una gerarchia visiva ben pensata,
associata ad una organizzazione dei contenuti ponderata e ben riuscita, questo
sito presenta, a livello concettuale, un livello di ordine impeccabile.
PUNTEGGIO:
Complessit
Secondo un approccio puramente concettuale, sembra proprio che questo sito
abbia un livello di complessit molto basso, perfetto in situazioni in cui bisogna
limitarsi a pubblicizzare le proprie arti e competenze lavorative. Lutente non
quindi, di conseguenza, costretto ad applicare modelli mentali particolarmente
complessi per poter navigare sul sito e fruire delle informazioni disponibili.
PUNTEGGIO:

Creativit
Questo un sito creativo di una persona creativa. Tramite questo sito, lautore
esprime la sua potenza nel linguaggio espressivo attraverso, in questo caso, la
sola tecnica tipografica. Non si aggiudicato il punteggio massimo perch
sembra che lautore si sia limitato, avrebbe potuto fare qualcosa di pi.
PUNTEGGIO:
Effetti speciali
Non ci sono effetti speciali in questo sito. Nessuna transizione, nessun tipo di
animazione o cose simili. Il massimo che si pu notare il fatto che i link
cambiano colore al passaggio del mouse.
PUNTEGGIO:
Originalit
Anche il solo fatto che la home page presenta al centro questa scritta enorme
col nome del sito, fa pensare a qualcosa un po fuori dal comune. Questo
segno di originalit. originale nel proporre la propria descrizione con la frase
simpatica e, appunto, originale subito sotto il logo. originale nel
suddividere in 3 colonne here, there e about, rispettivamente per le
sezioni interne al sito (articoli del proprio blog), articoli esterni (articoli scritti
dallautore e pubblicati su webzine esterne) e una descrizione del sito stesso.
PUNTEGGIO:
46

La valutazione di questo criterio, in questo caso, quasi banale. Linsieme di
logo gigante al centro della home page e slogan subito sotto di esso fa s che
qualsiasi utente riesca a capire in maniera immediata lidentit che sta dietro al
sito, cosa fa e come lo fa.
PUNTEGGIO:
Facilit di contatto
Sembra essere abbastanza facile entrare in contatto con lautore del sito. In alto
sono presenti i link ai ai profili di twitter e dribbble. Dal menu di navigazione
del sito si pu accedere alla sezione contatti, quindi sembra rispettare questo
criterio.
PUNTEGGIO:
Non presente alcun materiale pubblicitario extra. Lunico materiale esterno
che presente, anche se soltanto collegato, una serie di articoli pubblicati su
siti esterni, ma comunque opera della stessa persona che sta dietro al sito.
Questo non rappresenta un problema, in termini di materiale pubblicitario,
perch sin da subito ed in maniera molto evidente lautore del sito dichiara
di essere, oltre che un designer, uno scrittore.
PUNTEGGIO:
Conclusione
Navigando per la rete abbastanza facile imbattersi in piccoli siti, spesso di
freelancer, che cercano di manifestare/dimostrare la propria creativit e qualit
nel servizio. Francisco Inchauste, unico personaggio che sta dietro al marchio
finch, lo fa davvero con stile. riuscito a mettere insieme diverse tecniche
tipografiche, unendole a sue particolari doti di linguaggio creativo, per creare
qualcosa di davvero originale. come saper dire le cose che dicono tutti, ma in
maniera diversa e, soprattutto, efficace.
PUNTEGGIO:
8.1.5 Second & Park

Second &Park il sito di una ragazza, Tiffany Jones Brown, che si occupa di
strategie e gestione dei contenuti nelle pagine web, in applicazioni, nei blog e
nella carta stampata. La sua attivit mira dunque a fornire servizi a pi alto
livello rispetto alle comuni web agency.
47

Figura 43: la homepage del sito secondandpark.com
48


Layout e griglia
In fase di analisi del sito stata individuata una griglia alla base del layout del
sito. Questa griglia la classica o ormai molto diffusa griglia 960px con 16
colonne. Soltanto in alcuni, piccoli e marginali casi, sembra esserci un lieve
disallineamento dei contenuti rispetto alle colonne, ma questo non rappresenta
un particolare problema.
49

Figura 44: griglia di impaginazione del sito secondandpark.com
PUNTEGGIO:
50

Leggibilit
Il sito offre un grado di leggibilit molto alto. usato un corretto contrasto
tipografico, per cui facile ed immediato comprendere quali parti del testo
sono importanti, quali invece di contorno. Sono state adottate ottime tecniche
tipografiche al fine di enfatizzare parti del testo nella maniera corretta. Le frasi
non sono troppo lunghe, il font della grandezza giusta.
PUNTEGGIO:
Il flusso di lettura non casuale e, anzi, stato progettato per guidare la lettura
degli utenti allinterno della pagina. Al momento della prima visione
dellinterfaccia, lattenzione dellutente cade sicuramente sul grande slogan
Looking for the right words?; poi, successivamente, lattenzione si pu
spostare nellimmagine accanto, che raffigura una ragazza che sta
scrutando/cercando qualcosa dietro unalta siepe; infine, subito sotto la grande
immagine, c un percorso di lettura ben delineato: per fare questo lautrice ha
usato un testo enfatizzato (font grande, con grazie e in grassetto) ed una
parentesi graffa in modo da canalizzare la lettura dellutente in quella direzione
in modo originale.
51

Figura 45: un possibile flusso visivo della homepage del sito secondandpark.com
52

Come si pu notare dallimmagine appena proposta, il flusso subisce un

condizionamento dato dalladeguata disposizione dei contenuti e dalle giuste
scelte stilistiche.
PUNTEGGIO:
La scelta dei contenuti risulta adeguata per trasmettere il suo pensiero, il suo
modo di lavorare e la cura che impiega nella sua attivit. Con le sue foto
personali e qualche figura di fantasia per esempio, lorso che sembra un
albero , vuole trasmettere un immagine giocosa, dinamica ma seria di s stessa
e della sua professione.
Lautrice del sito, che dichiara esplicitamente tra le sue competenze quelle di
brava scrittrice e stratega del contenuto informativo, non si smentisce di certo.
PUNTEGGIO:
Ordine
Le pagine risultano ordinate al punto giusto. Ad esempio, lhomepage pu
essere divisa in tre macro blocchi; nel primo viene trasmessa lidea di Tiffany,
nel secondo la ragazza parla di s e nel terzo viene data la possibilit di
contattarla. Tutta questa organizzazione semantica dei contenuti giova
sicuramente allordine visivo e, di conseguenza, concettuale del sito.
PUNTEGGIO:
Complessit
Il sito facile da comprendere. Non si presenta alcun tipo di intoppo e, grazie
alla buona scelta dei contenuti, non si rischia di perdersi in dettagli inutili.
PUNTEGGIO:

Creativit
Tutte le pagine del sito risultano molto creative. Rispecchiano il pensiero e il
modo di fare ricercato mai banale della ragazza. Una dose di creativit la si
pu percepire osservando come lautrice abbia deciso di enfatizzare le parole
chiave allinterno delle frasi. Oltre alla solita tecnica del grassetto, lautrice in
alcuni casi scurisce leggermente le parole che reputa importanti, senza altre
tecniche di contrasto tipografico come sottolineatura o fastidiosi stacchi di tinta.
Il risultato che lattenzione viene comunque catturata dalle parole scure senza
per rovinare larmonia del testo.
53

Figura 46: un esempio di modo creativo di enfatizzare del testo in una frase.
Nellimmagine si pu notare come la parola content, che la parola chiave

nella frase, sia scritta leggermente pi scura del resto del testo.
PUNTEGGIO:
Effetti speciali
Il sito non presenta effetti speciali, tranne che per una scritta a forma di fumetto
che compare quando ci si posiziona con il puntatore del mouse sopra alla
ragazza raffigurata al centro di una foto in bianconero, e un effetto di scrolling
automatico morbido quando si clicca sulla voce del menu get a quote, che
una ancora interna alla sezione per i contatti, nel footer della pagina.
PUNTEGGIO:
Originalit
A differenza di altri siti di web agency, Second &Park, utilizza un approccio
nuovo. Il sito non vuole promuovere tecnologie o slogan banali, ma si focalizza
sulla diffusione di idee e concetti nuovi per arrivare a ottenere risultati ottimali
grazie ad un uso pragmatico e strategico delle tecnologie stesse. Tiffany punta
sulloriginalit per catturare lattenzione e fare in modo che le sue idee siano
comprese e apprezzate.
PUNTEGGIO:
Questo criterio rispettato in modo esemplare. Dati anagrafici, breve
curriculum, contatti e foto dellautrice sono tutti visibili gi in homepage. Lo
slogan della ditta la prima cosa che si vede nel sito e d subito lidea del tipo
di sito che si sta visitando.
PUNTEGGIO:
54

Facilit di contatto
Gi in homepage si possono trovare indirizzo mail, indirizzo dellaccount
twitter e un modulo per contattare lautrice direttamente dal sito.
PUNTEGGIO:
Il sito presenta dei collegamenti a siti web con cui lautrice collabora. Non sono
tuttavia presenti promozioni o offerte.
PUNTEGGIO:
Conclusione
Second &Park risulta essere un sito molto piacevole da consultare e da
leggere. Lautrice riesce a trasmettere le sue idee innovative grazie ad un design
accurato e delle buone scelte tipografiche; il tutto condito con una cura quasi
maniacale dei dettagli.
PUNTEGGIO:
8.1.6 Fever
Fever il nome di una web application simile ad un aggregatore di Feed RSS,
con laggiunta di alcuni filtri automatici degli articoli, cercando di proporre solo
quelli pi interessanti per gli utenti.
In questo paragrafo non si analizzer linterfaccia dellapplicazione appena
descritta, bens il sito web che la descrive e pubblicizza. Verr stabilito, alla fine
dellanalisi, se e quanto la pagina web descrittiva dellapplicazione trasmette
credibilit, invogliando o meno gli utenti ad acquistarla ed usufruire delle sue
potenzialit.
55

Figura 47: la pagina web che pubblicizza l'applicazione Fever.
56


Layout e griglia
Questo sito presenta un buon layout con una griglia un po atipica. Nella fase di
analisi stata individuata una griglia da 890px suddivisa in 15 colonne.
57

Figura 48: la griglia di impaginazione del sito feedafever.com
PUNTEGGIO:
58

Leggibilit
In questa pagina web evidente che sono stati rispettati in modo giusto i criteri
per una buona lettura su schermo. I colori aiutano la lettura, c una buona
gerarchia visiva, i testi non sono eccessivamente lunghi e le frasi sono della
giusta lunghezza. La dimensione del font non troppo piccola, anche se
sembra che lincremento anche di soli 2px della stessa avrebbe portato al
raggiungimento di un ottimo livello di leggibilit.
PUNTEGGIO:
Il contrasto tipografico e il flusso visivo sono le caratteristiche che pi si
distinguono in maniera positiva nellanalisi di questo sito web. Si nota con
immediatezza il fatto che ogni cosa stata pensata a dovere, che c stata una
buona progettazione dellarchitettura informativa e era ben chiaro a priori
quello che si voleva comunicare tramite il sito, e soprattutto come.
Si fatto davvero un ottimo uso del colore per enfatizzare parte del testo pi
importante del resto. I titoli delle sezioni del sito sono adeguatamente grandi e
comunicano adeguatamente il loro alto livello gerarchico nella pagina. Lunica
nota a sfavore che sembra mancare un po di spazio bianco che aiuti a fare un
po di ordine e dunque a separare meglio le sezioni della pagina.
Il flusso visivo davvero ben guidato, lo scorrimento in verticale in quanto
tutte le diverse sezioni del sito sono una sotto laltra, ogni sezione ha un ottimo
flusso di lettura da sinistra verso destra. Sembra davvero che la lettura accurata
di questa comunque ricca, piena pagina web sia abbastanza immediata
grazie alle tecniche tipografiche appena discusse.
PUNTEGGIO:
Dopo una attenta lettura dellintera pagina, sembra che i contenuti della stessa
sia perfettamente adeguati al tipo di contesto in cui opera lapplicazione.
Inoltre, giusto ricordare che il sito analizzato la pagina di vetrina della
applicazione, quindi i contenuti informativi sono, pi che altro, pubblicitari.
PUNTEGGIO:
Ordine
Si percepisce un buon livello di ordine nella pagina, i contenuti in essa
sembrano disposti in maniera logica, per cui un utente interessato alla sua
lettura non dovrebbe incappare in particolari oneri. Come accennato poco fa, si
percepisce soltanto la mancanza di un po di spazio bianco aggiuntivo, che
possa aiutare una migliore categorizzazione visiva dei contenuti, cosa che
andrebbe tutto a favore dellordine visuale percepito di conseguenza.
PUNTEGGIO:
59

Complessit
Essendo questa pagina web una sorta di coupon elettronico per lapplicazione,
essa non presenta particolari artefatti che possano accrescere al complessit del
sito stesso. Anzi, il fatto che in realt sia un sito in una pagina (il menu di
navigazione non altro che una serie di ancore interne) semplifica
ulteriormente il tutto.
PUNTEGGIO:

Creativit
C poco da dire, questo sito presenta il proprio prodotto in un modo non
banale. Trasmette creativit gi da come presenta, nella parte in alto del sito, le
immagini (schermate dellapplicazione) ed il prezzo per lacquisto. Hanno
saputo creare qualcosa di fresco, moderno ma dallaspetto anche serio ed
accattivante.
PUNTEGGIO:
Effetti speciali
Non ci sono effetti speciali in questa pagina web. Lunico contenuto extra,
anche se non associabile totalmente ad effetti speciali, una video che presenta
lapplicazione pubblicizzata.
PUNTEGGIO:
Originalit
Alla base c sicuramente una idea originale, quella di associare ad una serie di
articoli presi dai vari Feed RSS dellutente una vera e propria temperatura di
quanto gli articoli stessi sono hot, ossia interessanti/rilevanti per lutente. La
presentazione e pubblicizzazione del prodotto effettuata in maniera
analogamente originale: i contenuti del sito sono tutti disposti in una singola
pagina, ci sono delle brevi FAQ gi nella homepage. Insomma, questo sito si
distingue per la sua originalit, non facile trovarne uno simile.
PUNTEGGIO:
Lidentit racchiusa nel marchio Fever sembra adeguatamente esplicita e
diretta, anche per chi non ancora a conoscenza dellapplicazione. Grazie ad
unampia presenza di contenuti informativi e ad un logo ed uno slogan ben
posizionati accolgono bene lutente, che potrebbe non sentirsi disorientato.
Lunica mancanza, ma sembra giustificata dal fatto che si tratta di una
applicazione web, che non citato in alcun modo un indirizzo aziendale o
informazioni simili.
60

PUNTEGGIO:
Facilit di contatto
Se un utente fosse realmente interessato allapplicazione pubblicizzata, e
magari intendesse contattare lo sviluppatore, non avrebbe certo da perdere
tempo: c una voce Contact nel menu, che punta ad una sezione del sito con
il modulo da compilare per mandare un messaggio di posta elettronica
direttamente dal sito. Mancano per altri riferimenti tipo presenza sui social
network, o un numero di telefono.
PUNTEGGIO:
Questo sito gi di per s un contenuto interamente pubblicitario, in quanto ha
lo scopo di proporre le funzionalit dellapplicazione Fever. In aggiunta a
questo, che di per s non rappresenta un problema in quanto lutente ne
sicuramente conscio, presente allinizio della pagina un collegamento ad un
sito esterno uno dei pi grandi fornitori al mondo di servizi di web hosting,
che viene menzionato come partner.
PUNTEGGIO:
Conclusione
Si deciso di votare questo sito come credibile, ben fatto e progettato per
comunicare efficacemente unimmagine positiva dellapplicazione. Anche se
non si sa come lapplicazione sia realmente, limmagine che questa pagina web
pubblicitaria ne trasmette decisamente credibile e positiva.
PUNTEGGIO:
8.2 Valutazione dei siti poco credibili

Questo capitolo chiude la fase di analisi di alcuni siti web. Questa volta per si
vuole presentare una serie di cattivi esempi: alcuni siti web di web agency che
annoverano tra le proprie attivit quella di web design. Ma lo fanno male,
risultando poco credibili grazie ad una cura pessima della propria immagine.
8.2.1 Apicos Internet Services

Apicos una web agency di Tokio che, oltre alla realizzazione di siti web, offre
anche svariati servizi, sempre legati al mondi della rete. Dal sito si possono
suddividere le offerte in servizi di ottimizzazione del posizionamento nei motori
di ricerca, servizi di campagne pubblicitarie per pagine web e attivit per il
tracciamento e laffiliazione di contenuti web.
61

Figura 49: la homepage del sito apicos.com
Oltre ad una immagine della home page, si pensato di fornirne anche una di
una pagina interna, in cui sia presente un poco di contenuto testuale in pi.
Ecco di seguito la schermata della pagina Company Info.
62

Figura 50: schermata della pagina "Company Info" del sito apicos.com

Layout e griglia
La disposizione dei contenuti non segue nessuna regola precisa. Non presente
alcuna griglia a supporto di un layout di impaginazione. La suddivisione della
pagina svolta con il vecchio metodo delle tabelle HTML. I contenuti sono
semplicemente inscatolati in tre tabelle principali (che dovrebbero fungere da
header, content e footer), che a loro volta contengono ulteriori tabelle.
PUNTEGGIO:
63

Leggibilit
La leggibilit risulta compromessa dalla mancata adesione di molte linee guida.
Figura 51: uno dei tanti limiti alla leggibilit dle sito apicos.com
Come si pu notare dalla figura esplicativa di sopra, il testo scritto interamente

in bold.
Figura 52: altro esempio di scarsa leggibilit del sito apicos.com
Come facile osservare dallimmagine di sopra, le righe di testo spesso sono

molto lunghe, capita che superino le 25 parole e la leggibilit ne risulta
compromessa. La scelta della dimensione del font risulta sbagliata, il testo
scritto troppo in piccolo, e risulta oneroso leggerlo senza zoomare la pagina.
Non c distanza dal testo al bordo del paragrafo. Le voci del menu risultano
poco leggibili causa sottolineatura e colore troppo simile allo sfondo
cliccabili solo in parte e disallineate.
PUNTEGGIO:
La gerarchia visiva viene spesso rispettata, tranne per la dimensione del testo
che in certe pagine superiore alla dimensione delle voci del men. Il flusso
risulta piatto, inconsistente e pu venire semplicemente svolto con una lettura
dallalto verso il basso. Il contrasto tipografico rispettato in tutto il sito tranne
nelle voci del menu.
PUNTEGGIO:
64


Il sito presenta unintera sezione software in cui viene esposta una carrellata
di software open source, consigliati dalla Web Agency. Questo elenco non si
limita solamente a consigliare dei browser web, ma include sistemi operativi,
piattaforme di sviluppo, web hosting esterni e siti di ricerca di icone. Tutto
questo aggravato dal fatto che questa sezione poco adeguata raggiungibile
dalla seconda voce del menu orizzontale quello principale del sito.
PUNTEGGIO:
Ordine
Nellhomepage del sito sono presenti due menu, uno orizzontale e uno
verticale. Il menu orizzontale rimane immutato per qualunque pagina mentre il
menu verticale varia a seconda della pagina che si sta visitando. Il menu
verticale dovrebbe essere il pi importante perch permette di conoscere i
prodotti che la web agency offre, quindi dovrebbe essere direttamente
accessibile da qualsiasi pagina. Discorso diverso per la sezione software,
presente nel menu orizzontale sempre presente , tanto diretta quanto inutile.
PUNTEGGIO:
Complessit
La complessit del sito risulta adeguata. Il sito navigabile agevolmente e si
riescono a trovare abbastanza facilmente le informazioni pi importanti che si
ricercano comunemente nel sito di una web agency.
PUNTEGGIO:

Creativit
Il sito in analisi non per niente creativo. Tutti i contenuti sono disposti nel pi
classico e ormai superato dei modi. Risulta piatto, poco ricercato e spesso
banale. Solo delle onde stilizzate verdi, presenti in alto e in basso, conferiscono
un po di colore.
PUNTEGGIO:
Effetti speciali
Non sono presenti effetti speciali.
PUNTEGGIO:
Originalit
Il sito non presenta nulla di originale.
PUNTEGGIO:
65

Dallhomepage del sito non immediato capire quali sono le persone dietro al
sito e cosa essi offrono. Tuttavia, le informazioni si possono trovare nelle voci
Products e Company Info del menu di navigazione.
PUNTEGGIO:
Facilit di contatto
Si possono contattare i membri della web agency sia tramite telefono o mail
grazie agli indirizzi nella pagina Company Info, sia tramite la compilazione di
un semplice form allinterno della pagina Contact us.
PUNTEGGIO:
Come detto nei precedenti paragrafi, il sito consiglia alcuni software open
source, probabilmente allo scopo di migliorare la sua credibilit.
PUNTEGGIO:
Conclusione
Dopo aver svolto lanalisi del web design del sito in quesitone, facile
affermare che esso non centra lobbiettivo. Dopo averlo visitato si ha la
sensazione che quella che si propone una azienda poco incline alla cura dei
contenuti, del design e degli aspetti funzionali.
Tutto questo trova conferme nelle sincere ammissioni dellautore del sito.
Figura 53: pessima dichiarazione nel sito apicos.com
PUNTEGGIO:
8.2.2 Style Web Design

Style Web Design una web agency toscana, che si occupa di web design, web
marketing e di visual design. Lagenzia realizza siti web sia statici che dinamici,
principalmente per Hotel e B&B. Vengono inoltre forniti servizi di analisi SEO,
studio e ottimizzazione keywords, link popularity e inserzioni pubblicitarie.
66

Figura 54: la homepage del sito stylewebdesign.it
67


Layout e griglia
Il layout del sito non segue una logica precisa. Gli elementi grafici sono pensati
pi in una visione locale dei singoli blocchi piuttosto che in una visione globale
dellaspetto grafico dellintera pagina. Questo comporta una serie di spazi
bianchi che trasmettono una sensazione di vuoto. Il sito non segue una solida
griglia verticale di posizionamento. diviso in colonne non uniformi in tutta la
pagina. Il logo dellazienda sembra essere fuori dal sito stesso, come fosse un
errore di allineamento; in realt voluto.
PUNTEGGIO:
Leggibilit
Il sito rispetta solo in parte i principi di leggibilit. Vengono spesso enfatizzati
aspetti poco importanti del testo, tra lalto con tecniche diverse. Nella
homepage, per esempio allinterno dei paragrafi, c il font nero classico misto a
font blu, font blu sottolineato, font in grassetto blu, font in grassetto nero. Anche
nei titoli presente lo stesso problema. La lunghezza delle righe sfora
costantemente la regola delle nove parole, mentre le lunghezze dei paragrafi. I
testi sono generalmente brevi (inferiori alle 20 righe), quindi soddisfano i
requisiti. La dimensione del testo sufficiente a rendere leggibile i contenuti.
PUNTEGGIO:
Il contrasto tra testo e sfondo viene rispettato, tranne per i titoli (rosa su sfondo
bianco/rosa). Il flusso abbastanza casuale, lattenzione viene catturata dalle
grandi immagini del sito, che risultano invasive alla consultazioni delle pagine.
PUNTEGGIO:
I contenuti delle pagine sono adeguati al contesto del sito. Nella homepage c
un blocco Le ultime news, dove vengono mostrati i post pubblicati nella
pagina ufficiale della ditta su Facebook. I contenuti postati sono per la maggior
parte pubblicitari e poco adatti a comparire nella homepage del sito.
PUNTEGGIO:
Ordine
Lordine degli elementi del sito lascia molto a desiderare. Ad esempio, nella
pagina principale del sito sono presenti una breve descrizione della ditta, un
menu orizzontale, le voci: Le ultime news, i moduli di iscrizione alla
newsletter, larea clienti, lelenco dei servizi (lo stesso raggiungibile dal pulsante
servizi), i form per la richiesta informazioni, i link alle pagine dei social
network e un corposo footer. Tutto questo non trasmette certo lidea di ordine,
68

lutente si trova davanti ad un numero elevato di contenuti tutti abbastanza

importanti, disposti anche in un modo poco intuitivo.
PUNTEGGIO:
Complessit
Il sito navigabile con una bassa complessit. interamente formato da una
decina di pagine. Un possibile visitatore potrebbe voler sapere qualcosa di pi
sulla ditta stessa e nei rispettivi servizi forniti.
PUNTEGGIO:

Creativit
Il sito vuole essere forzatamente creativo, con tinte rosa e viola. Si vuole
trasmettere con pagine colorate lidea di una ditta che punta sulla creativit a
discapito della grigia formalit. Anche le immagini raffiguranti delle figure
umane, bianche, stilizzate che dipingono delle scritte bianche con un secchio
di vernice colorata contribuiscono a rendere creative le pagine, anche se con
uno stile abbastanza discutibile.
PUNTEGGIO:
Effetti speciali
Gli unici effetti speciali presenti nel sito sono nel header. Un riquadro fa
cambiare lentamente delle simpatiche immagini e delle scritte con il nome della
ditta e i principali servizi.
PUNTEGGIO:
Originalit
Il sito non presenta nulla di originale, che non si possa trovare in altri scadenti
siti del suo genere. Le figure e lo sfondo sono le uniche cose che potrebbero
lasciare un ricordo visivo del sito nella mente dei visitatori.
PUNTEGGIO:
Non proprio immediato comprendere lidentit del sito gi a prima vista.
Tuttavia basta scrollare un po la pagina e leggere la presentazione, per capire
di cosa tratta il sito e di che servizi offre la relativa azienda.
PUNTEGGIO:
69

Facilit di contatto
Gi nella homepage sono presenti dei collegamenti alle pagine relative alla
ditta dei social network pi importanti. Nella sezione contatti presente il
numero telefonico dellautore. Manca tuttavia un indirizzo mail di riferimento.
PUNTEGGIO:
Nella sezione Le ultime news, sono preseti i post fatti dallautore del sito nella
pagina Facebook ufficiale della ditta; questi non sono altro che pubblicit al sito
e alle relative offerte e promozioni. Sono presenti anche pubblicit ai siti dei
clienti, sia in homepage che nella sezione portfolio.
PUNTEGGIO:
Conclusione
Il sito, pur cercando di essere creativo e di colpire lattenzione dei visitatoti con
colori e forme simpatiche, presenta numerose lacune, soprattutto nelle scelte
tipografiche e nella mancata originalit. Probabilmente un po di semplicit,
linearit e un layout pi accurato e ordinato gioverebbero alla visione del sito.
PUNTEGGIO:
8.2.3 Pix
Pix unagenzia di web design e grafica pubblicitaria. Lazienda oltre ad offrire
servizi di realizzazione di siti internet dinamici, si occupa di grafica,
applicazioni multimediali, pubblicit, sviluppo di campagne di comunicazione,
consulenze a professionisti, enti ed aziende.
70

Figura 55: la homepage del sito pix.it

Layout e griglia
La disposizione degli elementi grafici non segue nessuna apparente logica. Non
sono n allineati ad una griglia, n disposti in colonna.
PUNTEGGIO:
Leggibilit
Il numero di parole per riga e il numero di righe su paragrafi rispettano le regole
generali sulla leggibilit. Il testo troppo piccolo, la lettura difficoltosa.
Lenfatizzazione dei contenuti risulta adeguata e coerente in tutto il sito.
PUNTEGGIO:
Il contrasto tipografico accettabile quasi in tutto il sito. Tuttavia il sito presenta
dei paragrafi, con testo nero su sfondo bianco semitrasparente, che
compromette il contrasto nella lettura. Essendo i contenuti grafici disposti in
ordine casuale, il sito non suggerisce un flusso nella consultazione delle pagine.
Tutto lasciato al caso.
PUNTEGGIO:
71


Il background del sito una fotografia satellitare raffigurante piazza Cavour a
Napoli. Oltre che non essere adeguato, in quanto i visitatori dovrebbero essere
pi interessati ai servizi svolti dallazienda piuttosto che a una foto satellitare
della zona. Il resto dei contenuti sono adeguati al contesto del sito.
Figura 56: lo sfondo del sito pix.it, una foto satellitare di Napoli.
PUNTEGGIO:
Ordine
I contenuti non seguono un ordine preciso. I vari menu sono disposti nella
pagina senza una logica apparente.
PUNTEGGIO:
Complessit
Il livello di complessit del sito accettabile. La difficolt maggiore nella
navigazione data principalmente dal modo non logico con il quale appaiono
e scompaiono i contenuti.
PUNTEGGIO:

Creativit
Le pagine analizzate non presentano nulla di creativo.
PUNTEGGIO:
Effetti speciali
Il sito non presenta effetti speciali.
PUNTEGGIO:
72

Originalit
Il sito non presenta nulla che non si possa trovare in un qualunque altro banale
sito dello stesso genere.
PUNTEGGIO:
Al primo accesso al sito, capire che si tratta di un sito di una web agency non
certamente immediate. Lo si intuisce solamente quando si legge una piccola
scritta nella homepage. Si sarebbe dovuto comunicare in modo pi preciso e
lampante il nome dellazienda e la sua specializzazione. Manca una sezione in
cui un visitatore possa capire che servizi offre precisamente lazienda, in quanto
la descrizione presente sullhomepage risulta essere un po troppo vaga.
PUNTEGGIO:
Facilit di contatto
Gi in homepage si possono trovare tutte le informazioni necessarie per
contattare lazienda, sia con i metodi classici (e-mail, telefono) sia tramite le
pagine dei social network. Il sito presenta anche una sezione contatti in cui
presente un form che pu essere compilato per richiedere immediatamente
informazioni.
PUNTEGGIO:
Il sito presenta solo alcuni link dal portfolio verso i siti che lazienda ha
prodotto. Non sono presenti offerte promozionali o pubblicit.
PUNTEGGIO:
Conclusione
Il sito risulta inadeguato e trasmette davvero poca credibilit. Risulta
completamente privo di estetica espressiva. Lestetica classica risente di gravi
lacune, specialmente riguardati la dimensione dei testi e la disposizione degli
elementi grafici nella pagina. Lunico aspetto positivo la facilit di contatto dei
visitatori verso lazienda.
PUNTEGGIO:
8.2.4 Blue Screen

Blue Screen una web agency che opera a Firenze. Le attivit in cui
specializzata sono realizzazione di siti internet e posizionamento nei motori di
ricerca e servizi professionali rivolti alle aziende che cercano visibilit su
internet.
73

Figura 57: la homepage del sito sitiwebfirenze.com

Layout e griglia
Il layout del sito non segue nessuna regola di posizionamento, n in griglie n
in colonne di alcun tipo. I contenuti sono ancora disposti con il metodo delle
tabelle.
PUNTEGGIO:
Leggibilit
I testi eccedono quasi sempre le nove parole per riga. In ogni pagina c troppo
poco spazio dal bordo dei paragrafi. Due paragrafi di testo si trovano in fondo
alla pagina e bisogna fare dello scroll per poterli visualizzare e successivamente
fare dellulteriore scroll per poterli leggere. Per la scrittura di questi due
paragrafi stato utilizzato un font molto piccolo e questo incide negativamente
sulla lettura. Dato il posizionamento di questi due paragrafi di testo molto
lontano, sotto al blocco centrale e unico del sito, abbastanza facile intuire che
o testi sono stati inseriti per permettere una migliore indicizzazione da parte dei
74

crawler dei motori di ricerca. Queste tecniche sono ormai superate, e

comunque andrebbero eseguite in altri modi, decisamente meno espliciti di
questo. Davvero un grosso punto a sfavore della credibilit di questa azienda.
Inoltre, lenfatizzazione dei testi stata fatta in modo non uniforme (utilizzando
colori diversi, con sottolineatura oppure utilizzando testo in maiuscolo). Il
carattere usato per la scritta nello header(che corrisponde al logo della ditta)
di difficile comprensione.
PUNTEGGIO:
Il contrasto tipografico adeguato in tutto il sito tranne nel footer dove
presente del testo nero su sfondo grigio scuro. Il concetto di flusso viene
soddisfatto in parte. Ad esempio nella sezione Contatto lattenzione viene
catturata da quattro grossi blocchi colorati e lordine di lettura degli stessi
abbastanza lasciato al caso.
PUNTEGGIO:
I contenuti della sezione Portfolio non sono fruibili, in quanto la sezione
contiene solo una scritta, inutile peraltro. Il resto dei contenuti adeguato al
contesto del sito.
PUNTEGGIO:
Ordine
Parte dei contenuti sono inspiegabilmente posizionati in fondo delle pagine,
raggiungibili solo mediante uno scroll prolungato della pagina. La sezione
Portfolio inesistente. Contenuti troppo vicini, stile di impaginazione molto
povero e colori decisamente poco consoni al contesto fanno di questo sito un
sito decisamente poco ordinato.
PUNTEGGIO:
Complessit
La complessit del sito adeguata. Non risulta troppo difficile ottenere le
informazioni che in genere si possono cercare in un sito di una web agency.
PUNTEGGIO:

Creativit
Il sito non presenta dettagli creativi degni di nota. Anzi, risulta completamente
assente di note creative.
PUNTEGGIO:
75

Effetti speciali
Le pagine non presentano nessun effetto speciale.
PUNTEGGIO:
Originalit
Il sito non per nulla originale. Nulla di particolare rispetto ad altri siti dello
stesso tipo.
PUNTEGGIO:
Dalla prima visualizzazione del sito si capisce che il sito relativo ad una web
agency. Tuttavia le informazioni pi funzionali (cosa fa la ditta, che servizi
offre, e soprattutto come lavora), si trovano solamente in fondo alla pagina
(problema dello scroll discusso nei punti precedenti).
PUNTEGGIO:
Facilit di contatto
Gi dalla homepage del sito presente un form che permettere di scrivere
allazienda. Nella sezione Contatto sono presenti gli indirizzi fax, mail, skype
e recapito telefonico. Questultimo presente in tutte le pagine. Non sono per
presenti link alle pagine dei social network.
PUNTEGGIO:
Nel sito non sono presenti promozioni, offerte o contenuti pubblicitari.
PUNTEGGIO:
Conclusione
Il sito Blue Screen presenta svariati problemi, sia da un punto di vista tecnico
che, soprattutto, estetico. Le scelte estetiche fondamentali del sito (colori
background, enfatizzazioni nei testi, layout), sarebbero da rivedere
completamente. Il sito graficamente non per nulla accattivante e trasmette
lidea di essere incompleto, povero, anche se in realt non lo . La mancanza di
un flusso di fruizione rende i contenuti di difficile assimilazione da parte degli
utenti. Lassenza di estetica espressiva rende le pagine piatte e noiose. Azienda
decisamente poco credibile.
PUNTEGGIO:
76

8.3 Riepilogo delle valutazioni

Si vuole concludere la fase di analisi dei siti web con delle tabelle riepilogative.
Queste tabelle posso essere utili per avere uno sguardo dinsieme di come sono
stati valutati i singoli siti, prima quelli giudicati come positivi, ben fatti e di
conseguenza maggiormente credibili, poi quelli fatti male, poco curati e di
conseguenza meno credibili.
Riepilogo valutazioni dei siti credibili

Di seguito si propone il riepilogo tabellare delle valutazioni effettuate per i siti
selezionati tra quelli con un design efficace.
$()*+,'-(.-'
./0'1/23*'
!"#$%"#&'
!
!"#$%&'(')*+),+"'
4#'
$5*056'
72/080/'
90.8:'
7)*;('
<0;2*='>'
?./@'
7080/'
"#$%&#'()*+!+,&+&(-#!-$#,,(-#!
-./'
/'
-./'
-'
-./'
-./'
!())+0+,+&1'
/'
/'
2'
/'
/'
-'
3$4&*"5&$'&+6$)*"7+8$'
('7,%55$'
/'
/'
-'
/'
/'
-./'
9:()%"&(;;"':(+'
8$4&(4%&+'
/'
/'
-'
/'
/'
/'
<*:+4('
/'
/'
-'
/'
/'
-'
3$=6,(55+&1'
-'
-./'
2'
/'
/'
/'
"#$%&#'()*+!+,&+&(-#!+,./+,,(0#!
3*("&+>+&1'
-'
-./'
/'
-'
/'
-./'
?77(&&+'56(8+",+'
2'
@'
/'
A'
2'
A'
<*+)+4",+&1'
-'
-'
/'
/'
/'
/'
"#$%&#'()*+!-/+1(2($(&3!
B==(:+"&(;;"'
:(,,C+:(4&+&1'
-./'
-'
2'
/'
/'
2./'
D"8+,+&1':+'8$4&"&&$'
/'
-./'
-'
-./'
/'
2./'
3$4&(4%&$'
6*$=$;+$4",('
/'
/'
-'
-./'
-'
-'
4,50
4,38
4,04
4,50
4,71
4,13
A.B5-.C)2*0'D)*.B0'
Tabella 2: riepilogo valutazioni dei siti ben fatti.
77

I dati delle valutazioni, riassunti nella tabella qui sopra, sembrano abbastanza
consistenti con quello che ci si aspettava prima dellanalisi dei criteri sui siti
web. Questi siti erano stati selezionati proprio perch sembravano trasmettere
una immagine positiva attraverso la cura del design e di altri aspetti di usabilit,
estetica e chiarezza/immediatezza delle informazioni.
Riepilogo valutazioni dei siti non credibili

Di seguito si propone il riepilogo tabellare delle valutazioni effettuate per i siti
selezionati tra quelli con una cattiva cura del design del sito e che quindi non
curano la propria immagine, trasmettendo poca credibilit.
E6);2,'
#*-0/*0-'
<0/8);0,'
!"#$%"#&'
<-:B0'F01'
G0,)+*'
?)H'
IB50'<;/00*'
"#$%&#'()*+!+,&+&(-#!-$#,,(-#'
!"#$%&'(')*+),+"'
@'
A'
E'
E./'
!())+0+,+&1'
@'
A'
A./'
E./'
3$4&*"5&$'&+6$)*"7+8$'('
7,%55$'
A'
@./'
@'
A./'
9:()%"&(;;"':(+'8$4&(4%&+'
A'
-'
2'
2'
<*:+4('
@'
@'
@'
@'
3$=6,(55+&1'
-'
2'
2'
-'
"#$%&#'()*+!+,&+&(-#!+,./+,,(0#'
3*("&+>+&1'
@'
2'
E'
E'
?77(&&+'56(8+",+'
E'
E./'
E'
E'
<*+)+4",+&1'
E'
E./'
E'
E'
"#$%&#'()*+!-/+1(2($(&3'
B==(:+"&(;;"':(,,C+:(4&+&1'
2'
A./'
E./'
A'
D"8+,+&1':+'8$4&"&&$'
2'
2./'
/'
-'
3$4&(4%&$'6*$=$;+$4",('
2'
@./'
2'
-'
1,75
2,08
1,58
1,79
A.B5-.C)2*0'D)*.B0'
Tabella 3: riepilogo valutazioni dei siti brutti.
In base ai dati delle valutazioni riassunti nella tabella di sopra, sembra evidente
come una scarsa cura del design, sia da un punto di vista di estetica classica, sia
78

espressiva, cali drasticamente la valutazione finale del sito, anche se questo

mostrava sufficienza nei requisiti fondamentali di credibilit, come facilit di
contatto e immediatezza dellidentit.
9 Conclusioni
Questa analisi competitiva stata svolta per cercare di stimolare la
comprensione del legame che intercorre tra la credibilit di una azienda/sito
web e il livello di qualit del suo design. Un utente interessato a dei servizi
forniti da unazienda, che si pubblicizza, si interfaccia ai suoi clienti, attraverso
il proprio sito web, molto probabilmente valuter inconsciamente, almeno in
parte, i criteri discussi in questo documento.
Come ogni persona viene giudicata anche da come si veste, da come si
comporta agli occhi delle altre persone, anche i siti web hanno il loro ruolo di
mediatore dellimmagine dellazienda, organizzazione o persona che sia, che
sta dietro al sito stesso. Tanto pi sar curato ed efficace adeguato al suo
contesto oltre che ben fatto il design del sito, tanto pi sar trasmessa una
immagine positiva e, di conseguenza, potr essere trasmessa credibilit. Un sito
credibile cattura maggiormente la fiducia e linteresse degli utenti, quindi un
fattore da tenere in considerazione se si vuole puntare ad avere un
prodotto/servizio di successo.
79

Bibliografia
Linee guida per la credibilit sul web
http://credibility.stanford.edu/guidelines/index.html
L'esperienza estetica
http://www.hyperlabs.net/ergonomia/bolognani/capitolo1/06.html
10 utili affermazioni e linee guida sull'usabilit
http://www.smashingmagazine.com/2009/09/24/10-useful-usability-findingsand-guidelines/
10 principi per un web design efficace
http://www.smashingmagazine.com/2008/01/31/10-principles-of-effective-webdesign/
http://www.webdesignerwall.com/tutorials/typographic-contrast-flow/
Materiale del corso di Web Design 2009/2010, Paolo Omero
Lezioni 3, 4: Tipografia & Web (Parte 1 e 2).
Lezione 7: Layout e griglie.
Materiale del corso di Sistemi Multimediali 2007/2008, Elio Toppano
Lezione 7: Caratteristiche espressive dei testi: tipografia.
Lezione 8: Lettura e scrittura sul web.
Web Style Guide, 3rd Edition. Paragrafo 8.3 Legibility
http://www.webstyleguide.com/wsg3/8-typography/3-legibility.html
80

Dispensa

Caricato da

Informazioni sul documento

Copyright

Formati disponibili

Condividi questo documento

Condividi o incorpora il documento

Opzioni di condivisione

Hai trovato utile questo documento?

Questo contenuto è inappropriato?

Copyright:

Formati disponibili

Dispensa

Caricato da

Copyright:

Formati disponibili

Credibilit & Web

A cura di Fabrizio Cuscini e Eddy Maddalena

Credibilit e Web Design efficace

Credibilit e Web Design efficace

Credibilit e Web Design efficace

2 HCI + emozioni = User experience

Credibilit e Web Design efficace

2.1 Estetica e usabilit, due dimensioni dellHCI

Credibilit e Web Design efficace

Figura 2: l'usabilit incontra l'estetica.

Grazie a numerosi studi ed esperimenti effettuati da Reevs e Nass, tutti racchiusi

Credibilit e Web Design efficace

ascrivibile esclusivamente all'arte e ai giudizi sulla bellezza. Nella letteratura

Multidimensionalit. L'estetica un concetto riscontrabile non

3.1 Estetica classica, estetica espressiva

Ordine. Rappresenta il grado e il tipo di organizzazione tra le parti di un

La relazione tra queste due qualit non predefinita, ma in un buon design

Credibilit e Web Design efficace

A proposito delle due nozioni estetiche sopra menzionate, Tracktinsky e Lavie

4 Credibilit nel web

Credibilit e Web Design efficace

(citazioni, riferimenti) per le informazioni che presenti. Anche se la gente

Credibilit e Web Design efficace

4.1 Qualit del design come indicatore di credibilit

Figura 4: schermata descrittiva dell'applicazione Fever per iPhone.

5 Criteri di web design efficace: estetica

Credibilit e Web Design efficace

5.1 Layout e griglie

Figura 5: esempio di layout di impaginazione con griglia.

Credibilit e Web Design efficace

Uso accurato del contrasto tipografico.

Figura 6: due esempi di layout, uno leggibile e uno inconsistente.

5.3 Contrasto tipografico e flusso

Credibilit e Web Design efficace

Figura 7: esempio di enfatizzazione mediante dimensione.

Figura 8: Esempio di de-enfatizzazione mediante dimensione.

5.3.2 Classificazione dei typeface

Figura 9: classificazione dei font web safe.

Figura 10: esempio di contrasto tipografico mediante classificazione del typeface.

Credibilit e Web Design efficace

Figura 11: esempio di uso del colore per distinguere un link.

Figura 12: esempio di uso del colore per distinguere attivo/disabilitato.

Alcune volte non c bisogno di rendere qualcosa pi grande per catturare

Figura 13: esempio di uso del colore per attirare lattenzione.

Si pu usare il colore per distinguere parole individuali in un gruppo di testo.

Quando si combinano dimensioni minori di font con colore dal tono pi

Figura 15: esempio di uso del colore per de-enfatizzare ulteriormente.

Credibilit e Web Design efficace

Figura 16: esempio di uso del text-case per enfatizzare un titolo.

5.3.5 Stile e decorazione

Figura 18: esempio di (errata) enfatizzazione mediante sottolineatura.

Piuttosto, sarebbe pi corretto enfatizzare un termine, o parte del testo,

Figura 19: esempio di (giusta) enfatizzazione mediante corsivo.

Figura 20: esempio di (giusta) enfatizzazione mediante grassetto.

Un altro errore comune la tendenza a mettere in grassetto intere frasi.

Credibilit e Web Design efficace

Figura 21: esempio di esagerata enfatizzazione mediante grassetto.

Credibilit e Web Design efficace

Figura 22: esempio concreto del flusso visivo di un sito.

Credibilit e Web Design efficace

5.4 Adeguatezza dei contenuti

Credibilit e Web Design efficace

Figura 24: esempio di due siti di diversa complessit visuale.

6 Criteri di web design efficace: estetica