Architettura e navigazione dei siti web

1/40“Giacomo Mason” – Novembre 2008

Appunti su architettura dell’informazione e Design della navigazione


- Gli ingredienti di un sito web -

Aepw s-

asdlò

Aepw s-

asdlò+ + + +

HomeArchitettura

e navigazione

Design pagine

Testi Interazione

Usabilità


Architettura e navigazione- Architettura dell’informazione -

L’architettura delle informazioni è il livello “più nascosto” del sito ma è il primo passo da compiere nella progettazione. Gli schemi classificativi più tipici sono

• Per ordine alfabetico (modello “Elenco del telefono”)

• Per ordine cronologico (modello “archivio quotidiani”)

• Per ordine geografico (modello “cartina geografica”)

• Per tipo di utente (modello “servizi bancari”)

• Per tipo di compito (modello “ufficio anagrafe”)

• Per macrocategorie (modello “biblioteca”)

• Per metafora (Modello “realtà virtuale”)

• Nuove tendenze (tag, comportamenti emergenti, associalzio locali..


Architettura e navigazione - Per categorie -

Per macrocategorie

(modello “biblioteca”)


1

2

Per macrocategorie

(modello “biblioteca”)

Per tipo di azione

(modello “ufficio anagrafe”)

Architettura e navigazione - Per task e categorie -


Per tipo di utente

Architettura e navigazione - Per tipo di utenti -


Architettura e navigazione - Tipi di navigazione -

• Navigazione fissa o principale

• Navigazione locale

• Navigazione contestuale

• Navigazione di orientameno (briciole di pane)

• Navigazione di servizio

Struttura globale delle informazioni

Informazioni di secondo livello, Approfondimenti

Task specifici, correlazioni (oggi questo aspetto si è molto allargato)

Correlazioni gerartchiche (oggi meno usato)

Identità, login, personalizzazioni (oggi questo aspetto è determinante)


Architettura e navigazione - Navigazione principale -

In alto (poche opzioni) o a sinistra (molte opzioni). Anche a destra va bene se è chiara la loro natura. E’ presente in ogni parte del sito

Serve a

Muoversi nelle aree principali del sito e dare un’idea dei contenuti principali

Errori da evitare

Mettere link esterni

Mettere link a materiali

Mescolare mele con le pere

Tassonomia incomprensibile

Ritorno alla home

Link a pagine vuote


Architettura e navigazione - Navigazione locale -

A sinistra, oppure a destra se il menù principale è a sinistra

Serve a

Dare le opzioni di “azione” concreta all’utente nell’area che ha scelto e approfondire parti

Errori da evitare

Titolatura incoerente

Troppe voci di menù

Istruzioni incomprensibili


Architettura e navigazione - Navigazione contestuale -

Tipicamente a destra e a centro della pagina, dentro il testo

Serve a

Dare accesso ai materiali, fornire link o associazioni ad altre pagine, effettuare azioni

Errori da evitare

Mancata divisione tra pagine e materiali

Mancata divisione tra pagine interne ed esterne


Architettura e navigazione - Navigazione di orientamento -

Tipicamente in alto, sotto al logo e al menù principale

Serve a

Dare la posizione in profondità nel sito e risalire per categorie

Errori da evitare

Posizionamento errato

Finta briciola

La briciola finale è uguale alle altre

Il titolo della pagina è diverso dal titolo della briciola


Architettura e navigazione - Navigazione di servizio -

Tipicamente in alto, a fianco del logo e sopra il menù principale

Serve a

Dare informazioni sul sito, sull’azienda, e alcune istruzioni e servizi del sito. Serve a gestire l’identità e le personalizzazioni

Errori da evitare

Mettere cose diverse

Mescolare servizi e menù principale

Mescolare “contatti” e “Chi siamo”


Architettura e navigazione - Regole generali per la progettazione dei menù -

Coerenza. Il titolo della voce di menù è anche il titolo della pagina

Feedback. I menù attivi e i pulsanti cambiano stato (es. quello attivo non è cliccabile ed è di un colore diverso)

Memorizzabilità. Ogni box del menù non ha più di 7 collegamenti

Learneability. I menù di navigazione rispecchiano il più possibile la struttura informativa del sito

Prevedibilità. La tassonomia deve rispecchiare le aspettative dell’utente

Scelte esplicite. Se il sito è grande i sottomenù principali stanno in sotto-home page. No ai sottomenù a comparsa

Convenzioni. Usate icone standard e convenzionali


Architettura e navigazione - Coerenza nei titoli dei menù -

La voce di menù mi porta a una pagina che ha lo stesso titolo

Anche la briciola di pane è coerente con la titolatura

Da notare il trinagolino “segnaposto” nel menù


Architettura e navigazione - Feedback: i bottoni cambiano aspetto -

Le voci di menù nelle quali mi trovo cambiano aspetto

Cambia il colore

La voce non è cliccabile

Coerenza tra titolo della briciola di pane e titolo pagina


Architettura e navigazione - Memorizzabilità: troppe voci di menù -

Cercate di dividere ogni box in non più di sette voci

Menù troppo lunghi sono difficile da memorizzare


Architettura e navigazione - Learneability: dai menù capisco l’architettura -

Nel sito delle poste è facile “imparare” come è fatto il sito solo guardando i menù di navigazione

La navigazione rispecchia in modo esplicito la struttura del sito

Per tipo di utenti

Per prodotto

(ma label non chiare)


Architettura e navigazione - Prevedibilità: rispecchiare il modello dell’utente -

La tassonomia del menù principale rispecchia il modo nel quale l’utente stesso suddivide le informazioni

E’ facile prevedere i contenuti delle varie voci


Architettura e navigazione - Scelte esplicite: no ai sottomenù a comparsa -

E’ visibile sono un menù per volta

E’ visibile solo se ci passo con il mouse

E’ difficile ricordare le altre scelte

Copre le informazioni della pagina


Architettura e navigazione - Scelte esplicite: i sottomenù a parte -

Un sottomenù grande è messo in una pagina-indice (sotto-home page)

La titolatura è coerente tra titolo della voce di menù e titolo della pagina


Architettura e navigazione - Convenzioni: limitare le icone creative -

Troppe icone e di non facile comprensione

I menù diventano meno comprensibili che con il solo testo


Nuove tendenze nell’architettura informativa


1. Classificazioni fluide (tag)

2. Associazioni contestuali tra i contenuti (notizie correlate, task correlati)

3. Inline navigation (es. Wikipedia)

4. Navigazione globale stretta (poche voci – aumento navigazione

contestuale)

5. Navigazione task centrata (voci legate al “fare” dell’utente)

6. Classificazioni a faccette (e commerce)

7. Gestione identità (profili, personalizzazioni)

8. Comportamenti emergenti (più visti, più scaricati ecc)

Architettura e navigazione - Le nuove tendenze -


Architettura e navigazione - Classificazioni fluide: tag/1 -

I contenuti sono classificati con etichette e sparisce la navigazione classica. Un contenuto può essere raggiunto da più punti ed è classificato in modo multidimensionale


Architettura e navigazione - Tag/2 -

L’archivio di segnalazioni di Maestro Alberto è consultabile attraverso i suoi tag


I convegni del Forum Pa sono classificati in modo convenzionale (per categorie) e per tag (polidimensionale)

Architettura e navigazione - Classificazioni fluide: tag/3 -


Architettura e navigazione - Associazioni contestuali -

Ad ogni contenuto sono associati contenuti simili, in una navigazione “per pertinenze”o)


Architettura e navigazione - Inline navigation/1 -

In Wikipedia la navigazione di una voce è inserita dentro la pagina

In Yahoo le tab dei tipi di news sono dentro la pagina



La navigazione del prodotto è dentro la pagina


Le sottotab sono dentro la pagina



Architettura e navigazione - Navigazione globale stretta/1 -

La navigazione globale offre poche voci. Il resto è costituito da navigazione e task contestuali


Architettura e navigazione - Navigazione task centrata -

La navigazione globale è molto legata ai task che l’utente può compiere nell’applicazione


Architettura e navigazione - Classificazioni a faccette/1 -

Molto adatte per e-commerce e per grandi quantità di contenuto da gestire in modo polidimensionale


Architettura e navigazione - Classificazioni a faccette/2 -

Monclick associa una navigazione globale classica (per categorie e sottocategorie) e una navigazione locale a faccette


Architettura e navigazione - Gestione identità -

Ampio spazio è dedicato alla gestione dell’identità e delle azioni personali dell’utente


Architettura e navigazione - Comportamenti emergenti -

La classificazione è fatta sulla base del comportamento degli utenti


Architettura e navigazione - Per approfondire… -

http://trovabile.org/

http://www.iainstitute.org/it/

http://www.informationarchitecture.it/index.shtml

http://www.vocabola.com/

http://trovabile.org/

http://www.iainstitute.org/it/

http://www.informationarchitecture.it/index.shtml

http://www.vocabola.com/


Giacomo Mason

[email protected]

mailto:[email protected]

Architettura e navigazione dei siti web

Education

tipo di utenti

modello ufficio

task contestuali

navigazione

modello biblioteca

ai sottomen

scelte esplicite

home page

Transcript of Architettura e navigazione dei siti web

Laboratorio Nautico propone CORSO NAVIGAZIONE ALTURA · CORSO NAVIGAZIONE ALTURA Il corso fornisce le nozioni tecniche per l’organizzazione e lo svolgimento della navigazione d’altura

Monitoraggio siti Istituzionali 2009...iniziative per l’anno scolastico 2009-2010. A destra la navigazione facilitata con: vai direttamente a. ... All’interno le pagine sono costruite

ELEMENTI PER IL DIMENSIONAMENTO ED IL …xoomer.virgilio.it/giuseppeklain/lavori/siti internet/Architettura/archisito/pdf...elementi su cui si incardina la procedura tecnica del piano

Navigazione padrone marittimo.pdf

DECRETO - Consorzio LaMMA · esperto nelle seguenti tematiche: Architettura navale, Stabilità della nave, Sicurezza operativa della navigazione, Effetti della modellazione non lineare

LA RIQUALIFICAZIONE DEL QUARTIERE SPINE BIANCHE … · QUARTIERE SPINE BIANCHE MATERA Università degli Studi della Basilicata Facoltà di Architettura ... SITI lo stesso Aymonino

NAVIGAZIONE ASTRONOMICA parte 4 - Libero Communitydigilander.libero.it/gpcommunity/Navigazione Astronomica4.pdf · phi p-hat. NAVIGAZIONE ASTRONOMICA Circolo Astrofili di Mestre “Guido

dispensa corso navigazione

CAPITOLATO TECNICO (Allegato B) PROCEDURA NEGOZIATA … · • Architettura Software: il portale dei MiC e i n. 19 siti correlati sono realizzati con CMS Ez Publish versione 4.4.0

orario navigazione

Web viewPer il portale di Ateneo è stato definito un modello di architettura informativa con asse di navigazione orizzontale, che rappresenta le relazioni gerarchiche fra

ELEMENTI DI NAVIGAZIONE COSTIERA - Libero Communitydigilander.libero.it/rmerloni/Navigazione Costiera.pdf · In sintesi la navigazione aerea, ... luogo il desiderio di navigare sfruttando

Navigare per diporto - naviko23.files.wordpress.com · Cenni sulla storia della navigazione La navigazione costiera è stata la prima navigazione affrontata dall'uomo che, dotato

Navigazione marittima: Pirati Navigazione marittima ...

La navigazione smart per il salone nautico della Versilia. · garantita una navigazione sicura, su siti autorizzati, bloccando quelli malevoli. Vista l’importanza del Salone Nautico

Daniele Varelli - CopywriterDesign Architettura Prodotto Still life Pubblicitaria Documentazione Evento Artistico Servizi ... per progetti editoriali, magazine, siti web, mobile application,

Vuoi Limitare La Navigazione Ad Un Solo Sito o Ad Alcuni Siti Web (IMPORTANTE)

LE ORIGINI E LO SVILUPPO DEI SITI PORTUALI DELLA … · LE ORIGINI E LO SVILUPPO DEI SITI PORTUALI DELLA LAGUNA VENETA La storia della navigazione all'interno della laguna veneta

La navigazione del Po

Manuale per la realizzazione del Progetto Didattico · 2018. 10. 29. · 3. Navigazione sulla mappa interattiva e possibilità di selezionare o aggiungere SITI/BENI, come da procedura