Slides dal corso di Laboratorio Internet del prof.R.Polillo, Università di Milano Bicocca, A.A.2010-11

1. Corso Laboratorio Internet – Prof. Roberto Polillo
Università degli Studi di Milano Bicocca – Anno Accademico 2010-11
8. WEB DESIGN
R.Polillo – Ottobre 2010
1

2. 3 4 5 6 7
Web
design
Visual
design
Sviluppo Redazione
dei contenuti
Pubblicazione
1
Definizione
dei requisiti
Documento
dei requisiti
Prototipo di
navigazione
Prototipo
funzionale
Prototipo
editoriale
Sistema
on line
Prototipo di
comunicazione
2
Avviamento
del progetto
Piano di
qualità
Gestione
del sito
Che cosa faremo oggi
R.Polillo – Ottobre 2010
2

3. L’obiettivo della fase di Web Design
 sviluppare la concezione generale del sito dal punto
di vista della sua “architettura informativa”
 Struttura del sito
 Meccanismi di navigazione
 costruire un primo prototipo (“di navigazione”) per
le prime verifiche di usabilità e da mostrare al
committente
 … senza ancora sviluppare la grafica in dettaglio
R.Polillo – Ottobre 2010
3

4. mappa
del sito
documento
dei requisiti
gabbia logica
delle pagine
prototipo
di navigazione
Progettazione
della architettura
dell’informazione
Costruzione del
prototipo di
navigazione
Verifica
e convalida
1
2
3
Nell’ambito delle possibilità
del site builder usato
Web design: attività e prodotti
R.Polillo – Ottobre 2010
4

5. HOME
PAGE
PAGINA 1.1 PAGINA 1.2 PAGINA 1.3
PAGINA 1.3.2PAGINA 1.3.1PAGINA 1.1.2PAGINA 1.1.1
LIVELLO 0
LIVELLO 1
LIVELLO 2
Ogni nodo rappresenta una pagina del sito (a differenza della scaletta
logica)
La mappa del sito
R.Polillo – Ottobre 2010
5

6. Scheda
prodotto
Scheda
prodotto
Scheda
prodotto
Home
Condizioni
di vendita
Mappa
del sitoContattiNews
Iscrizione
ai servizi
Area
riservataProdotti Carrello
Dati
utenteChi siamo
Chitarre
nuove
Chitarre
usate
Ordina
prodotto
Accessori
Il negozio
Le marche
trattate
Dove
siamo
Mappa del sito
Scaletta logica
dei contenuti
Esempio
R.Polillo – Ottobre 2010
6

7. Navigazione
 La struttura di navigazione deve permettere
all’utente di muoversi all’interno della struttura del
sito lungo i percorsi più frequentemente seguiti,
rapidamente e senza fatica
R.Polillo – Ottobre 2010
7

8. B C D EA
HOME
D1 D2 D3A2A1
A2.2 A2.3A2.1
navigazione orizzontale
navigazione trasversale
navigazione verticale
Tipi di navigazione
R.Polillo – Ottobre 2010
8

9. A B C D E
D1
D2
D3
pagina D1
contenuti della pagina
navigazione globale
navigazione locale
B C
D
EA
HOME
D1 D2 D3A2A1
A2.2 A2.3A2.1
D
Struttura di navigazione tipica
R.Polillo – Ottobre 2010
9

10. Esempio
A B C D E
pagina home
R.Polillo – Ottobre 2010
10

11. Esempio
A B C D E
D1
D2
D3
pagina D
R.Polillo – Ottobre 2010
11

12. Esempio
A B C D E
D1
D2
D3
pagina D1
R.Polillo – Ottobre 2010
12

13. Esempio
A B C D E
B1
B2
B3
pagina B
R.Polillo – Ottobre 2010
13

14. Esempio
R.Polillo – Ottobre 2010
A B C D E
B1
B2
B3
pagina B2
14

15. pubblicità
pubblicità
contenuti
Esempio
R.Polillo – Ottobre 2010
15

16. Esempio
R.Polillo – Ottobre 2010
16

17. <contenuti Linea Cash>
Esempio
R.Polillo – Ottobre 2010
17

18. Esempio: http://www.prototipoong.ilbello.com
R.Polillo – Ottobre 2010
18

19. Esempio
R.Polillo – Ottobre 2010
19

20. Esempi
 www.tangonet.it
 www.rpolillo.it
 www.comproj.weebly.com
 http://prototipoong.weebly.com
 www.casadiemma.webs.com
 http://www.prototipoong.webs.com
 http://www.prototipoong.ilbello.com
20
R.Polillo – Ottobre 2010

21. A B C D E
La metafora dello schedario
R.Polillo – Ottobre 2010
21

22. R.Polillo – Ottobre 2010

23. A B C D E
D1 D2 D3
pagina D1
A B C D E
pagina D1
D1
D2
D3
Schedario con navigazione locale
R.Polillo – Ottobre 2010
23

24. inserzione pubblicitaria
<contenuti della pagina>
Esempio
R.Polillo – Ottobre 2010
24

25. <contenuti: Idee regalo fino a 10.99 euro>
Esempio
R.Polillo – Ottobre 2010
25

26. Navigazione a tre livelli
R.Polillo – Ottobre 2010
26

27. Menu che si modificano
 Il menu è l’”ancora di salvezza” per l’utente
nella navigazione: non devono MAI cambiare
R.Polillo – Ottobre 2010
27

28. R.Polillo – Ottobre 2010

29. R.Polillo – Ottobre 2010

30. R.Polillo – Ottobre 2010

31. R.Polillo – Ottobre 2010

32. R.Polillo – Ottobre 2010

33. R.Polillo – Ottobre 2010

34. Esempio
R.Polillo – Ottobre 2010

35. Menu che non si vedono (!)
R.Polillo – Ottobre 2010
35

36. Accessi multipli a una stessa pagina
36
R.Polillo – Ottobre 2010

37. Esempio
R.Polillo – Ottobre 2010
37

38. R.Polillo – Ottobre 2010

39. Inglese FAQ
Contattaci Mappa del sito
Le sedi
La missione
L’azienda
Punti di noleggio
Auto
Lanostra flotta
Registrazione
I tuoi noleggi
I tuoi dati
Area clienti Servizi
HOME
Condizioni
Preventivo
Noleggio
Offerte speciali
scorciatoia
Scorciatoie
39
R.Polillo – Ottobre 2010

40. Orientamento
 Bread-crumbs
 Evidenziazione voce selezionata
 Simboli grafici/colori per distinguere le sezioni
R.Polillo – Ottobre 2010
40

41. R.Polillo – Ottobre 2010

42. R.Polillo – Ottobre 2010

43. R.Polillo – Ottobre 2010

44. R.Polillo – Ottobre 2010

45. Esempi
 www.tangonet.it
 www.rpolillo.it
 www.comproj.weebly.com
 http://prototipoong.weebly.com
 www.casadiemma.webs.com
 http://www.prototipoong.webs.com
 http://www.prototipoong.ilbello.com
45
R.Polillo – Ottobre 2010

46. La gabbia logica
Consolidata la mappa del sito e individuate le principali
sequenze di navigazione, dobbiamo decidere:
1. La struttura dei menu (e le voci che li compongono)
2. La ripartizione delle pagine nelle diverse aree logiche (o
spazi logici): titoli, banner, aree contenuti, ecc.
3. Gli ingombri di massima di ciascuna area logica
R.Polillo – Ottobre 2010
46

47. Area Riservata
Novità dal negozioPromozioni
Titolo
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed
do eiusmod tempor incididunt ut labore e dolore magna aliqua
Titolo
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed
do eiusmodtempor incididunt ut labore e dolore magna aliqua
Titolo
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed
do eiusmodtempor incididunt ut labore e dolore magna aliqua
Lorem ipsum
dolor sit amet,
consectetur
adipisicing elit,
sed do eiusmod
tempor
incididunt ut
labore e dolore
magna aliqua
Esempio
Area Riservata
Nuovo | Usato | Accessori | Ordina prodotto
ProdottiHome
Prodotti nuovi
<menu
prodotti
nuovi>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed
imperdiet, est eu sollicitudin pretium, justo sapien volutpat erat, nec
vulputate lacus metus at augue. Donec id nibh sit amet erat suscipit
viverra. Vivamus ac dui. Aenean sed mauris. In metus. Suspendisse
placerat, lorem quis dictum ornare, neque tellus hendrerit metus, sed
gravida enim dolor id ipsum. Nulla fermentum. Vestibulum pretium
pellentesque urna. Nulla enim tortor, feugiat condimentum, laoreet
quis, dapibus et, sem. Duis blandit pede vitae dui. Nam pulvinar.
Aliquam fermentum, lectus eu imperdiet luctus, dui nibh scelerisque
purus, ut laoreet tortor ipsum in orci. Proin rutrum dui a nulla. Donec
volutpat, massa sit amet semper cursus, felis quam pharetra metus, a
porta magna augue id augue. Donec urna pede, volutpat ultrices
R.Polillo – Ottobre 2010

48. R.Polillo – Ottobre 2010

49. Header
HOME > Prodotti per le persone > Previdenza
Versione
stampa
Brochure
PDFPrevidenza
Caratteristiche del prodotto
Lorem ipsum dolor sit amet,
consectetuer adipiscing elit, sed diam
nonummy nibh euismod tincidunt ut
laoreet dolore magna aliquam erat
volutpat.
Target
- Nam porttitor pretium eros.
- Aliquam quis dui sed nulla mattis
tristique.
- Nulla ut justo in arcu viverra
elementum.
Erogazione
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam
nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam
erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci
tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo
consequat.
Contattaci per richiedere ulteriori informazioni.
Scarica il modulo di contratto da presentare alla filiale.
IMMAGINE
L'allarme
pensionistico
Prodotti per le
persone
•Previdenza
•Terzo tempo
Informativa Aziende
I nostri risultati
Il Gruppo
Glossario
FAQ
-Linea 1 -Linea 2 -Linea 3 -Linea 4 -Linea 5
Risposte
del consulente
Campagna
prodotto
IMMAGINE
Numero verde
IMMAGINE
Richiesta moduli
FAQ di sezione
Ricerca Filiali
Contatta il
consulente
Mappa CercaContatti
Credit Legal Accessibilità
Qual è il tuo gap previdenziale? Il tuo risparmio fiscale
Esempio

50. Header
Footer
Interfaccia
navigazione
Interfaccia Navigazione
Funzioni
contestuali
e di supporto
Path di navigazione
TITOLO
MENU DI 3° LIVELLO
CORPO
Azione
Link
contenuto
Titolo
Titoletto
Lorem ipsum dolor sit amet, consectetuer
adipiscing elit, sed diam nonummy nibh
euismod tincidunt ut laoreet dolore magna
aliquam erat volutpat.
Titoletto
- Nam porttitor pretium eros.
- Aliquam quis dui sed nulla mattis tristique.
- Nulla ut justo in arcu viverra elementum.
Titoletto
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy
nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi
enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis
nisl ut aliquip ex ea commodo consequat.
Contattaci per richiedere ulteriori informazioni.
Scarica il modulo di contratto da presentare alla filiale.
IMMAGINE
GRAFICO
Qual è il tuo gap previdenziale? Il tuo risparmio fiscale
Area destinata ai link che
attivano un’azione come ad
esempio “Versione
Stampa”. Il link deve
essere sempre alla stessa
altezza del titolo.
Area per scaricare la
brochure relativa al
prodotto in formato pdf.
Il link deve essere
sempre alla stessa
altezza del titolo.
Area corpo del testo. Il
contenuto della pagina
è organizzato in
paragrafi con il testo
sempre allineato a sx e
in tondo. L’area può,
inoltre, contenere dei
link. I paragrafi non
devono essere più
lunghi di 4 righe.
Link ai tool per il
calcolo del gap
previdenziale e per il
calcolo del risparmio
fiscale.
Area destinata
all’inserimento di
un’immagine o
grafico. Dimensione
max immagine: xxx.
Link
Link di navigazione verso
una pagina di
approfondimento
strettamente collegata al
contenuto della pagina.
Ove previsto.
R.Polillo – Ottobre 2010
50

51. 800x600
1024x768
dimensione
della pagina
Occorre scegliere la “risoluzione video privilegiata”
Layout fisso
R.Polillo – Ottobre 2010
51

52. 1024x768
800x600
Layout liquido
R.Polillo – Ottobre 2010
52

53. Prototipo di navigazione
• Prototipo “wireframe” del sito
• Serve a rendere vivo il progetto sulla carta, dando la
“percezione fisica” della navigazione del sito:
• Aspetti: menu, layout delle pagine (liquido/fisso),
labelling
• Bianco e nero: permette di concentrarsi solo sugli
aspetti strutturali (se si usa un CMS, usare il/I tema/I più
semplice/i)
R.Polillo – Ottobre 2010
53

54. Marca
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
incididunt ut labore e dolore magna aliqua
Marca
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
incididunt ut labore e dolore magna aliqua
Marca
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
incididunt ut labore e dolore magna aliqua
Lorem ipsum
dolor sit amet,
consectetur
adipisicing elit,
sed do eiusmod
tempor
incididunt ut
labore e dolore
magna aliqua
Lorem ipsum
dolor sit amet,
consectetur
adipisicing elit,
sed do eiusmod
tempor
incididunt ut
labore e dolore
magna aliqua
Esempio
R.Polillo – Ottobre 2010
54

55. 55
R.Polillo – Ottobre 2010

56. R.Polillo – Ottobre 2010
56
Blog di default
/ altro tema predefinito

57.  Usare i temi wireframe (eventualmente provatene più
d’uno):
 Blank Centered (navigazione orizzontale centrata)
 Blank Top (navigazione orizzontale)
 Blank Left (navigazione verticale sinistra)
 Blank Right (navigazione verticale destra)
Esempio: www.webs.com
R.Polillo – Ottobre 2010
57

58. Verifiche e convalide:
 Verifiche:
• Layout generale
• Struttura dei menu
• Navigazione
• Etichette (termini usati, lunghezza)
 Convalida:
• Primo test di usabilità
R.Polillo – Ottobre 2010
58

59. Che cosa dovete portare alla revisione della fase
3 (Web Design)
1. Mappa del sito
2. [Gabbie logiche delle pagine]
3. Prototipo di navigazione eseguibile
R.Polillo – Ottobre 2010
59

60. Queste slides…
Queste slide sono disponibili con licenza Creative Commons
(attribuzione, non commerciale, condividi allo stesso modo) a
chiunque desiderasse utilizzarle, per esempio a scopo didattico,
senza necessità di preventiva autorizzazione.
La licenza non si estende alle immagini fotografiche e alle screen
shots, i cui diritti restano in capo ai rispettivi proprietari, che sono
stati indicati, ove possibile. L’autore si scusa per eventuali omissioni,
e resta a disposizione per correggerle.
R.Polillo – Ottobre 2010
60