[<a href=“#”>]
Strumenti per il web design
/strumenti per il web design [+]
L'usabilità è un concetto che nasce negli anni
60 nell'ambito degli studi sull'ergonomia
cognitiva in relazione a qualunque
interazione uomo-artefatto.
l'usabilità*
è il grado in cui un prodotto può essere usato da particolari utenti
per raggiungere certi obiettivi con efficacia, efficienza e soddisfazione in uno
specifico contesto d'uso.
1993
il modello mentale di chi ha progettato il sito (design model)
corrisponde (il più possibile)
al modello mentale del funzionamento del software così come se lo
costruisce l'utente finale (user model)
*a cosa serve un determinato sito web?
*chi lo userà e cosa si aspetterà di trovarci?
/strumenti per il web design [+]
Alla base della realizzazione del disegno di un’interfaccia dunque, dovrà
esistere un processo noto come
user centered design (UCD)
Modello del progettista (design model):
concettualizzazione che il progettista si crea di come l’attività
dovrebbe essere svolta.
Significato del sito: ciò che il sito è in grado di comunicare
all’utente relativamente al proprio modo di funzionare.
Modello dell’utente (user model): concettualizzazione che il
bambino ha dell’attività che dovrebbe essere supportata
dall’interfaccia; nel momento in cui interagisce si aspetta di
ritrovare il proprio modello concettuale, nonché le proprie
conoscenze e preferenze personali. Attraverso l’interazione va a
raffinare il proprio modello sulla base di quello che intuisce circa
il funzionamento del sistema.
/strumenti per il web design [+]
Come fare a sapere se un design è buono o cattivo?
Scansione della pagina
Uno dei criteri che spesso vengono
chiamati in causa per capire se siamo o
meno di fronte ad un buon design è il
Tempo
che l’utente impiega per consultare la
pagina e ricercare l’informazione deiderata.
Il buon design deve essere in grado di
condurre verso le informazioni desiderate
ed essere un ponte tra :
l’utente e l’informazione
La grafica forte e colorata intorno ai
blocchi di contenuto consente
all’occhio di orientarsi e individuare le
aree con le informazioni rendendo la
pagina gradevole, ma senza interferire
sulla comprensione.
/strumenti per il web design [+]
Navigazione intuitiva
La navigazione principale del sito deve
essere chiara e visibile. Tale navigazione
non può e non deve
cambiare da una pagina
all’altra, nè nell’aspetto, nè
nella posizione.
Navigazioni secondarie, campi di ricerca,
link, non devono invece essere dominanti.
Se li rendiamo facili da trovare, ma separati
dal contenuto, permetteremo agli utenti di
concentrarsi sulle informazioni.
/strumenti per il web design [+]
Homepage
La homepage rappresenta il centro nevralgico, il cuore del sito e ne dichiara
immediatamente carattere e obiettivi. Per permettere ciò deve rispondere
sostanzialmente a tre criteri:
*Fornire informazioni sul luogo in cui il bambino è
arrivato e le finalità per cui il sito stesso è nato.
*Aiutare nella navigazione interna al sito,
sottolineando sezioni e percorsi possibili.
*Fornire informazioni su servizi e contenuti offerti.
Occorre fare molta attenzione nell’organizzazione della home, perché
l’eccessiva quantità di informazioni, può rendere più difficile ad un
bimbo la comprensione in merito alle possibilità che gli si presentano.
In generale è preferibile privilegiare semplicità dei contenuti.
Overload cognitivo
/strumenti per il web design [+]
Homepage
Tutti i siti web sono organizzati attorno ad una homepage che
rappresenta il punto d'ingresso logico nel sistema di pagine web.
La home è la pagina più visitata e su questa si basa la prima
impressione dei vostri utenti.
L'alta visibilità della homepage la rende anche il posto migliore
per inserire un menù di collegamenti o un sommario del sito.
La maggior parte degli utenti visualizzerà il sito su un monitor
con dimensioni da 14 a 17 pollici, quindi per una
navigazione efficiente, il numero di collegamenti nella parte
superiore della home page deve essere massimo.
/strumenti per il web design [+]
Homepage
Non è possibile sapere il modo in cui gli utenti visualizzeranno le pagine.
La gamma di risoluzioni visualizzabili dipende dalla caratteristiche del monitor e della
scheda video installata nel computer. Le tre risoluzioni più utilizzate sono:
640x480 pixel | 800x600 pixel | 1024x768 pixel
È necessario decidere come realizzare il sito in modo da gestire più risoluzioni.
Alcuni progettisti sostengono che si dovrebbero sviluppare le
pagine basandosi su un minimo comune denominatore.
È anche possibile progettare una pagina web che si adatti alle varie risoluzioni dello
schermo. (liquid)
Adottare questa tecnica è un'ottima soluzione ma è sicuramente più impegnativo che
sviluppare un layout dalle dimensioni "fisse". Si può anche pensare di realizzare
diverse versioni delle pagine per ogni risoluzione e far scegliere all'utente quale
utilizzare, ma si tratta di una tecnica laboriosa e poco usata.
/strumenti per il web design [+]
Contenitore - wrapper
Brand, slogan,concept
logo
navigazione
navigazione
contenuti
Elementi di una
pagina web
white space
footer
/strumenti per il web design [+]
Contenitore - wrapper
Ogni pagina web possiede un
contenitore. La larghezza del contenitore
può essere “fissa” (fixed)
oppure, adattarsi alla larghezza della
finestra
(liquid)
Logo
Il logo è l’immagine, il simbolo che
identifica il nostro sito, individua
immeditamente, all’occhio di chi gurda
l’ente o il soggetto al quale il sito si
riferisce.
/strumenti per il web design [+]
Navigazione
È essenziale che la navigazione si facile
da reperire ed usare. Gli utenti
solitamente si aspettano di trovare la
navigazione in alto a destra, se usiamo
dei menu a tendina, diversamente si
trovare la navigazione sul lato sinistro
(menu orizzontale)
Content
I contenuti sono l’elemento fondamentale
delle pagine. Non dimenticate che gli
utenti non sono sul vostro sito per
contemplarlo ma per interagire con i suoi
contenuti . È importante rendere
evidente, il blocco principale della pagina
che al suo interno continene le
informazioni più importanti.
Usabilità/
Footer
È il piede della pagina. Solitamente
contiene le informazioni di copyright,
crediti, partita iva e link vari.
Separando I contenuti dal piede gli utenti
hanno piena comprensione di essere a
fondo pagina e dunque di trovare solo
informazioni di servizio.
White space
Gli spazi bianchi anche definti
“negative space”
Sono gli spazi che occorre ritagliare
all’interno di una pagina per farla
respirare
Usabilità/
Sequenzialità /circolarità
Questa disposizione dei contenuti, si sviluppa
secondo un percorso circolare (in senso orario), e
pertanto è considerata più appropriata ai bambini.
In base al tipo di contenuti infatti, le modalità di
visualizzazione delle pagine e l’orientamento dello
sguardo tendono a cambiare.
Quando una pagina è composta da ampie porzioni
di testo, la scansione avviene da sinistra verso
destra e dunque a capo
similmente ad un foglio di carta, (fig.a)
Al contrario, la scansione delle pagine composte
da una maggiore presenza di elementi grafici,
animazioni e minori porzioni di testo avviene
secondo un movimento circolare ed orario
.a
.b
Usabilità/
Struttura
Il sito dovrà avere una struttura ben definita, specie
se costituito da molte pagine e differenti livelli,
al fine di evitare che i bambini possano avere
problemi di ricognizione.
Le modalità di organizzazione più diffuse in rete, si
possono riassumere in tre :
Struttura piramidale: organizzazione gerarchica:
il vertice costituito dalla home e a seguire i diversi
livelli e le rispettive pagine di contenuto.
Struttura reticolare: da ogni pagina collegamenti
diversi che diramandosi costituiscono una rete
verso tutte le altre.
Struttura sequenziale: prevede dei percorsi semi
obbligati e sequenziali. (usata per percorsi
formativi)
/strumenti per il web design [+]
Progettiamo?
Bene, spegni il computer e disegna…
Prima di lavorare con il pc è necessario
progettare sulla carta.
1* Disegnamo il nostro contenitore, le dimensioni
vere e proprie non contano per ora è solo uno
schizzo.
2* Quindi dividiamo il rettangolo verticalmente in
tre parti uguali. Fare la stessa cosa anche
orizzontalmente.
3* Dividere i nove riquadri creati sia
orizzontalmente che verticalmente.
/strumenti per il web design [+]
Progettiamo?
Bene, spegni il computer e disegna…
/strumenti per il web design [+]
Bilanciamento
Il concetto bilanciamento visivo
si verifica quando in un’interfaccia gli elementi sono
gli stessi sia su un lato che su un altro, lungo un
asse orizzontale.
/strumenti per il web design [+]
Bilanciamento
Esistono anche altre forme di bilanciamento
simmetrico meno diffuse nelle pagine web:
Simmetria bilaterale: quando il
bilaciamento si riferisce a più di un asse
Simmetria radiale: quando gli elementi
sono disposti in modo equidistante intorno
ad un punto centrale
Bilanciamento asimmetrico
(bilanciamento informale) è generalmetne
più interessante sul piano visivo. I siti che si
rifanno a questo bilanciamento
generalmente presntano degli elementi
grafici consistenti che assumono un ruolo
prepondersante sull’apetto estetico del sito
/strumenti per il web design [+]
Unità
Le teorie sul design considerano l’unità come il modo in cui elementi differenti all’interno di
un’interfaccia interagiscono con l’utente come se fossero un tutt’uno
È fondamentale che tale unità non esista soltanto all’interno di un elemento della pagina, ma
in tutta la pagina.
Esisono degli “espedienti” per consentire l’unita all’interno di un layout: la vicinanza e la
ripetizione
Prossimità
Il principio della prossimità (gestalt) afferma che la vicinanza nello spazio di due o più
elementi induce l’individuo a considerarli con buona probabilità come una figura unica. Si
attiva un processo percettivo che opera un raggruppamento di questi elementi
Osservando le figure a lato .a e .b si può notare come alcuni elementi vengono considerati
come indipendenti e come invece quelli fra loro vicini come delle unità.
/strumenti per il web design [+]
Contrasto
Per contrasto si intende la giustapposizione di elementi
grafici dissimili. Si tratta di uno dei modi più frequenti per
dare enfasi ad alcuni elementi del nostro layout.
Il concetto è abbastanza semplice: più è grande la
differenza fra un elemento grafico e il suo sfondo, più
l’oggetto in primo piano tenderà a risaltare.
Woot, è un sito di e-commerce che vende un solo
articolo al giorno. Con un layout di questo tipo la prima
cosa che l’utente nota è l’oggetto promosso quel giorno.
Il secondo elemento che il nostro occhio nota è
Il bottone “I want one!” di un colore che ricorre
sporadicamente all’interno della pagina.
/strumenti per il web design [+]
La navigazione
Colonna sx
La colonna di sinistra come luogo destinato
alla navigazione può essere considerato uno
standard. Tale spazio diventa il blocco
principale della navigazione
Oltre ad essere uno standard, rappresenta
anche una sicurezza, perchè qualunque sia
la risoluzione con cui è costruita la nostra
pagina, il posizionamento del menu di
navigazione a sinistra, garantisce, sempre,
una corretta visualizzazione
L'aspetto negativo dei siti che utilizzano la
colonna di navigazione a sinistra è che
sembrano mancare di creatività: sono ormai
stati realizzati in tutti i modi possibili per cui
si ha l’impressione di guardare
qualcosa di già visto…
/strumenti per il web design [+]
La navigazione
Colonna dx
È decisamente più raro incontrare siti con
strumenti di navigazione a destra, è più
facile invece, trovare dei siti che
posizionano su questo lato menu di
secondo livello
Resta comunque una scelta del designer
anche in relazione all’aspetto estetico e al
progetto che sta realizzando.
Oggi con lo sviluppo di siti basati su css e
piattaforme open source (wordpress,
joomla ecc ecc) è frequente la presenza di
una sidebar (solitamente a destra)
con tutti i “widget” del caso.
Non si tratta però di strumenti di
navigazione in senso stretto.
/strumenti per il web design [+]
La navigazione
3 colonne
La tipica configurazione a tre colonne
consente di disporre di una vasta colonna
centrale per i contenuti affiancata da due
colonne di navigazione.
Attraverso questa configurazione, le due
colonne laterali possono ospitare non
bottoni di navigazione , ma anche brevi
contenuti. Solitamente le tre colonne
esistono solo nella home, all’interno si
ripropone la sola navigazione a sinistra
oppure in alto.
/strumenti per il web design [+]
Expansive footer
È una nuova tendenza che va
diffondendosi sempre di più, usare dei
footer molto “alti” all’interno dei quali
riproporre non solo crediti e informazioni
di copyright, ma vere e proprie porzioni di
navigazione, photogallery, badges.