Università degli Studi di Milano BicoccaDipartimento di Informatica, Sistemistica e Comunicazione

Laboratorio di Internet /Laboratorio di progettazione (mod.1)

Anno Accademico 2009-2010

LEZIONE 7

FASE 3: WEB DESIGN Roberto Polillo

CHE COSA FAREMO OGGI: FASE 3

3 4 5 6 7Web

designVisual design

Sviluppo Redazionedei contenuti

Pubblicazione

1Definizionedei requisiti

Documento dei requisiti

Prototipo di navigazione

Prototipo funzionale

Prototipo editoriale

Sistema on line

Prototipo di comunicazione

2Avviamentodel progetto

Piano di qualità

Gestione del sito

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 per le prime verifiche di usabilità e da mostrare al committente

• … senza ancora sviluppare la grafica in dettaglio

story-board

mappa del sito

documentodei requisiti

gabbia logicadelle pagine

prototipodi navigazione

Progettazione della architettura dell’informazione

Costruzione delprototipo di navigazione

Verificae convalida

Le attività e i prodotti della fase di Web Design

1

23

Nell’ambito delle possibilità del CMS usato

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)

Schedaprodotto

Schedaprodotto

Schedaprodotto

Home

Condizioni di vendita

Mappa del sitoContattiNews Iscrizione

ai serviziArea

riservataProdotti CarrelloDati

utenteChi siamo

Chitarre nuove

Chitarre usate

Ordina prodottoAccessori

Il negozio Le marche trattate

Dove siamo

Esempio

Mappa del sitoScaletta logica dei contenuti

Esempio

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

B C D EA

HOME

D1 D2 D3A2A1

A2.2 A2.3A2.1navigazione orizzontale

navigazione trasversale

navigazione verticale

Vari tipi di navigazione

Una struttura di navigazione tipica

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

Esempio

A B C D E

pagina home

Esempio

A B C D E

D1

D2

D3

pagina D

Esempio

A B C D E

D1

D2

D3

pagina D1

Esempio

A B C D E

B1

B2

B3

pagina B

Esempio

A B C D E

B1

B2

B3

pagina B2

pubblicità

pubblicità

contenuti

Esempio

Esempio

<contenuti Linea Cash>

Una variante: navigazione locale in orizzontale

Strutturalmente, è la stessa cosa

Un’altra variante: navigazione locale in menu a tendina

A B C D E

Un’altra variante: navigazione globale a tab (metafora dello schedario)

A B C D E

D1 D2 D3

pagina D1

A B C D E

pagina D1

D1

D2

D3

Struttura a schedario con navigazione locale

inserzione pubblicitaria

<contenuti della pagina>

<contenuti: Idee regalo fino a 10.99 euro>

Navigazione a tre livelli

Il problema degli accessi multipli alla stessa pagina

Esempio

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

Scorciatoie

scorciatoia

La gabbia logica delle pagine

Una volta 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

Area Riservata

Novità dal negozioPromozioni

TitoloLorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore e dolore magna aliqua

TitoloLorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmodtempor incididunt ut labore e dolore magna aliqua

TitoloLorem 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

Header

HOME > Prodotti per le persone > Previdenza

Versione stampa

BrochurePDFPrevidenza

Caratteristiche del prodottoLorem 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.

ErogazioneLorem 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 prodottoIMMAGINE

Numero verdeIMMAGINE

Richiesta moduli

FAQ di sezione

Ricerca Filiali

Contatta il consulente

Mappa Cerca Contatti

Credit Legal Accessibilità

Qual è il tuo gap previdenziale? Il tuo risparmio fiscale

Esempio

Header

Footer

Interfaccia navigazione

Interfaccia Navigazione

Funzionicontestuali

e di supporto

Path di navigazione

TITOLO

MENU DI 3° LIVELLO

CORPO

AzioneLink

contenutoTitolo

TitolettoLorem 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.

TitolettoLorem 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.

IMMAGINEGRAFICO

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.

800x600

1024x768

dimensione della pagina

Layout fisso

Occorre scegliere la “risoluzione video privilegiata”

1024x768

800x600

Layout liquido

Il prototipo di navigazione

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)

MarcaLorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore e dolore magna aliqua

MarcaLorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore e dolore magna aliqua

MarcaLorem 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

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

Verifiche e convalide:

Verifiche:• Layout generale• Struttura dei menu• Navigazione• Etichette (termini usati, lunghezza)

Convalida:• Primo test di usabilità

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