Architettura e navigazione dei siti web

Loading...

Flash Player 9 (or above) is needed to view presentations.
We have detected that you do not have it on your computer. To install it, go here.

0 comments

Post a comment

    Post a comment
    Embed Video
    Edit your comment Cancel

    10 Favorites

    Architettura e navigazione dei siti web - Presentation Transcript

    1. Appunti su architettura dell’informazione e Design della navigazione
    2. - Gli ingredienti di un sito web - + + + + Home Architettura e navigazione Design pagine Testi Interazione Usabilità Aepw s- asdlò Aepw s- asdlò
    3. 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..
    4. Architettura e navigazione - Per categorie - Per macrocategorie (modello “biblioteca”)
    5. 1 2 Per macrocategorie (modello “biblioteca”) Per tipo di azione (modello “ufficio anagrafe”) Architettura e navigazione - Per task e categorie -
    6. Per tipo di utente Architettura e navigazione - Per tipo di utenti -
    7. 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)
    8. 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
    9. 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
    10. 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
    11. 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
    12. 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”
    13. 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
    14. 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ù
    15. 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
    16. 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
    17. 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)
    18. 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
    19. 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
    20. 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
    21. 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
    22. Nuove tendenze nell’architettura informativa
      • Classificazioni fluide (tag)
      • Associazioni contestuali tra i contenuti (notizie correlate, task correlati)
      • Inline navigation (es. Wikipedia)
      • Navigazione globale stretta ( poche voci – aumento navigazione contestuale)
      • Navigazione task centrata (voci legate al “fare” dell’utente)
      • Classificazioni a faccette (e commerce)
      • Gestione identità (profili, personalizzazioni)
      • Comportamenti emergenti (più visti, più scaricati ecc)
      Architettura e navigazione - Le nuove tendenze -
    23. 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
    24. Architettura e navigazione - Tag/2 - L’archivio di segnalazioni di Maestro Alberto è consultabile attraverso i suoi tag
    25. I convegni del Forum Pa sono classificati in modo convenzionale (per categorie) e per tag (polidimensionale) Architettura e navigazione - Classificazioni fluide: tag/3 -
    26. Architettura e navigazione - Associazioni contestuali - Ad ogni contenuto sono associati contenuti simili, in una navigazione “per pertinenze”o)
    27. 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
    28. Architettura e navigazione - Inline navigation/2 - La navigazione del prodotto è dentro la pagina
    29. Le sottotab sono dentro la pagina Architettura e navigazione - Inline navigation/3 -
    30. Architettura e navigazione - Navigazione globale stretta/1 - La navigazione globale offre poche voci. Il resto è costituito da navigazione e task contestuali
    31. Architettura e navigazione - Navigazione globale stretta/2 - La navigazione globale offre poche voci. Il resto è costituito da navigazione e task contestuali
    32. Architettura e navigazione - Navigazione globale stretta/3 - La navigazione globale offre poche voci. Il resto è costituito da navigazione e task contestuali
    33. Architettura e navigazione - Navigazione task centrata - La navigazione globale è molto legata ai task che l’utente può compiere nell’applicazione
    34. Architettura e navigazione - Classificazioni a faccette/1 - Molto adatte per e-commerce e per grandi quantità di contenuto da gestire in modo polidimensionale
    35. Architettura e navigazione - Classificazioni a faccette/2 - Monclick associa una navigazione globale classica (per categorie e sottocategorie) e una navigazione locale a faccette
    36. Architettura e navigazione - Gestione identità - Ampio spazio è dedicato alla gestione dell’identità e delle azioni personali dell’utente
    37. Architettura e navigazione - Comportamenti emergenti - La classificazione è fatta sulla base del comportamento degli utenti
    38. Architettura e navigazione - Per approfondire… - http://trovabile.org/ http://www.iainstitute.org/it/ http://www.informationarchitecture.it/index.shtml http://www.vocabola.com/
    39. Giacomo Mason [email_address]

    + Giacomo MasonGiacomo Mason, 2 years ago

    custom

    2198 views, 10 favs, 3 embeds more stats

    Gli appunti di una lezione sull'architettura della more

    More info about this document

    CC Attribution License

    Go to text version

    • Total Views 2198
      • 2101 on SlideShare
      • 97 from embeds
    • Comments 0
    • Favorites 10
    • Downloads 66
    Most viewed embeds
    • 81 views on http://intranetmanagement.splinder.com
    • 15 views on http://www.intranetmanagement.it
    • 1 views on http://www.slideshare.net

    more

    All embeds
    • 81 views on http://intranetmanagement.splinder.com
    • 15 views on http://www.intranetmanagement.it
    • 1 views on http://www.slideshare.net

    less

    Flagged as inappropriate Flag as inappropriate
    Flag as inappropriate

    Select your reason for flagging this presentation as inappropriate. If needed, use the feedback form to let us know more details.

    Cancel
    File a copyright complaint
    Having problems? Go to our helpdesk?

    Categories