Laboratorio internet 7: Web design

Università degli Studi di Milano Bicocca Dipartimento 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 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

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

Le attività e i prodotti della fase di Web Design 1 2 3 Nell’ambito delle possibilità del CMS usato story-board 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

Ogni nodo rappresenta una pagina del sito (a differenza della scaletta logica) HOME PAGE PAGINA 1.1 PAGINA 1.2 PAGINA 1.3 PAGINA 1.3.2 PAGINA 1.3.1 PAGINA 1.1.2 PAGINA 1.1.1 LIVELLO 0 LIVELLO 1 LIVELLO 2

Esempio Mappa del sito Scaletta logica dei contenuti Scheda prodotto Scheda prodotto Scheda prodotto Home Condizioni di vendita Mappa del sito Contatti News Iscrizione ai servizi Area riservata Prodotti Carrello Dati utente Chi siamo Chitarre nuove Chitarre usate Ordina prodotto Accessori Il negozio Le marche trattate Dove siamo

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

Vari tipi di navigazione B C D E A HOME D1 D2 D3 A2 A1 A2.2 A2.3 A2.1 navigazione orizzontale navigazione trasversale navigazione verticale

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 E A HOME D1 D2 D3 A2 A1 A2.2 A2.3 A2.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

Esempio pubblicità pubblicità contenuti

Esempio

Una variante: navigazione locale in orizzontale Strutturalmente, è la stessa cosa <contenuti Linea Cash>

Un’altra variante: navigazione locale in menu a tendina

Un’altra variante: navigazione globale a tab (metafora dello schedario) A B C D E

Struttura a schedario con navigazione locale A B C D E D1 D2 D3 pagina D1 A B C D E pagina D1 D1 D2 D3

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

Scorciatoie scorciatoia 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

La gabbia logica delle pagine

Una volta consolidata la mappa del sito e individuate le principali sequenze di navigazione, dobbiamo decidere:

La struttura dei menu (e le voci che li compongono)

La ripartizione delle pagine nelle diverse aree logiche (o spazi logici): titoli, banner, aree contenuti, ecc.

Gli ingombri di massima di ciascuna area logica

Esempio Area Riservata Novità dal negozio Promozioni 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 Area Riservata Nuovo | Usato | Accessori | Ordina prodotto Prodotti Home 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

Esempio Header HOME > Prodotti per le persone > Previdenza Versione stampa Brochure PDF Previdenza 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 Cerca Contatti Credit Legal Accessibilità Qual è il tuo gap previdenziale? Il tuo risparmio fiscale

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.

Layout fisso Occorre scegliere la “risoluzione video privilegiata” 800x600 1024x768 dimensione della pagina

Layout liquido 1024x768 800x600

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)

Esempio 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