Intranet Design

  • 5,590 views
Uploaded on

Principi di base di design intranet. Architettura informativa, home page

Principi di base di design intranet. Architettura informativa, home page

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
5,590
On Slideshare
0
From Embeds
0
Number of Embeds
5

Actions

Shares
Downloads
277
Comments
0
Likes
12

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. Principi di base di Intranet Design
  • 2. - Tipi di Strutture - E’ la più usata Sito Blog Portale
  • 3. - Alcuni principi di progettazione in intranet - Rapporto contenuti/navigazione = 80% - 20% Uso dei template Header rigoroso e funzionale Menù principale ripetuto in tutte le pagine Briciole di pane per la navigazione in profondità Se, possibile, pochi livelli di profondità Grafica essenziale e uso di elementi ricorrenti Architettura informativa rigorosa Uso corretto della home
  • 4. Contenuti Navigazione Navigazione Motore - Il rapporto contenuti/navigazione - Tagline Logo 80% 20%
  • 5. - Header - In genere può contenere Logo Tagline Motore di ricerca Menù servizi personali (Il mio profilo, la mia posta, i miei messaggi…) Menù principale o servizi importanti Casella cercapersone
  • 6. Progettare lo spazio web - Sezione a destra - In genere può contenere Accesso rapido a servizi chiave Quick links a parti profonde Instant polI Instant content (Meteo, Borsa) Elementi di communty Accesso agli applicativi aziendali
  • 7. Progettare lo spazio web - Sezione a Sinistra - In genere può contenere Menù principale Menù contestuali Link rapidi Finestre su servizi chiave
  • 8. Progettare lo spazio web - Footer - In genere può contenere Richieste di feed-back Data delle pagine Accesso pagina redazione Quanti sono connessi in questo momento Referenti delle pagine
  • 9. - Un buon esempio di footer - Titolo pagina Data ultima modifica pagina Responsabile dei contenuti della pagina Riferimenti per questioni sul contenuto Riferimento per questioni tecniche
  • 10. - Errori di progettazione intranet - Header tropo alto Piazzare loghi, claim e tagline in modo troppo evidente e invadente Killer utility nascoste Tenere nascoste le utility principali, in nome dell’eleganza Architettura a “organigramma” Rispecchiare meccanicamente l’organigramma aziendale Poche informazioni Non sfruttare le home page in maniera ricca Troppe informazioni Eccedere nel numero di informazioni presenti No filtri Non usare spazi “vetrina” per evidenziare contenuti
  • 11. - Raggruppare i contenuti - Una volta definiti i contenuti occorre raggrupparli ed ordinarli, in modo da ottenere l’architettura informativa e i menù di navigazione . Questa operazione deve rispecchiare il più possibile le abitudini, le priorità e la mappa mentale delle persone che useranno la intranet.
  • 12. - Il card sorting -
    • Si mostrano a gruppi di persone dei post it che elencano i diversi contenuti della intranet e si chiede loro
    • Di raggrupparli in modo omogeneo
    • Di dare un nome ai ragguppamenti
    • Di definire quali sono per loro i conenuti prioritari
    • In un lasso di tempo definito ( 30-40 minuti )
    • Questi raggruppamenti e i loro nomi diventano la bozza di architettura informativa della intranet
    Sito
  • 13. - Definizione dell’architettura - Grazie al lavoro di card sorting e alla mappa dei contenuti è possibile definire l’architettura informativa, ovvero I diversi menù di navigazione I sottomenù I label delle diverse vocì Questa architettura diventa l’infrastruttura informativa di tutte le pagine della intranet
  • 14. - Tre tipi di architettura - Per categorie Modello con contenuti informativi divisi per aree omogenee (es. per dipartimenti, per tipi di informazioni, per aree di attività) Per appartenenza Modello con contenuti per tipo di utente (es. Contenuti generali, Contenuti del mio dipartimento, contenuti personali, contenuti dei miei sottogruppi) Per servizi/task Contenuti divisi per tipo di task e di servizi a cui l’utente deve accedere (es. Notizie, formazione, rapporto di lavoro, Community, Area blog, area wiki ecc.) Spesso sono compresenti nella stessa intranet Categorie + appartenenza Categorie + task Appartenenza + task ecc N.b. L’architettura non è la navigazione
  • 15. - Architettura per categorie/sezioni - Ottima sotto il profilo della scalabilità, abbastanza semplice da realizzare Molto usata per intranet con tante notizie, inserite in appositi “canali” Si usa spesso per la parte istituzionale e per le parti non profilate della intranet
  • 16. - Architettura per appartenenze - Richiede una intranet profilata sull’utente Molto usata per intranet con publishing decentrato In genere si usa per intranet molto grandi, nelle quali esistono sottosezioni di dipartimento
  • 17. - Architettura per task/servizi - SI usa per intranet che hanno molti servizi per l’utente e per intranet che presentano aspetti operativi
  • 18. Navigazione per aree tematiche e dipartimenti H.R Organizzazione Formazione ecc Navigazione per servizi o appartenenza My page Mio dipartimento Miei gruppi Servizi principali - Architetture ibride -
  • 19. - Tipi di navigazione - Navigazione principale E’ la navigazione presente in tutte le pagine secondo un modello standard Navigazione istituzionale La navigazione delle info istituzionali della intranet (L’azienda, help, La redazione, mappa del sito ecc) Navigazione personale La navigazione di alcuni task di servizio e servizi personali, presente in genere verso destra o in alto (es. my profile, posta elettronica, my page, ecc)
  • 20. - Tipi di navigazione principale - Tutta a sinistra In genere le voci sono già “esplose” Comoda per aggiungere facilmente sezioni Rischi: “overflow informativo” Tutta in alto Poche voci che vengono esplose in un sottomenù orizzontale Più elegante Rischi: colli di bottiglia e difficoltà a trovare le info al primo clic In alto e contestuale a sinistra Oppure servizi + task Molto usata Il menù di sinistra varia al variare delle voci in alto Buon bilanciamento tra eleganza e scalabilità
  • 21. Home page
  • 22. Barra orizzontale : 100 pixels. Tipicamente usata per il logo, navigazione globale e ricarca. Colonna di sinistra : 200-250 pixels. Tipicamente usata per la navigazione globale con dettagli e/o per la navigazione locale. Area centrale : Bianca, 400-600 pixels. Tipicamente una o due colonne con foto, notizie in evidenza, task prioritari e applicazioni Colonna di destra : bianca, 200-250 pixels. Tipicamente usate per box di servizi e fotografie - Home page intranet per Nielsen -
  • 23. - La home page: caratteristiche fondamentali - NO SI
    • La Home page ha come funzione:
    • Risparmiare all’utente dei clic
    • informare sulle novità e aggiornamenti
    • creare una vetrina e fornire scorciatoie per alcune parti del sito
    • dare risalto agli strumenti di navigazione e di ricerca e alle utility
    • favorire l’accesso alle killer utility
    • Guidare l’utente verso particolari contenuti (aspetto “push”)
    • La Home page non ha come funzione:
    • fare da “ coperta ” grafica a contenuti disomogenei
    • dare un senso di mera “ eleganza ”
    • stupire l’utente con efffetti grafici
    • Esprimere un qualche senso di mera “ appartenenza ”
    • Fare da “ tappo di bottiglia ” ai contenuti
  • 24. Presenta in evidenza la navigazione principale Convivono news, servizi e documentazione Dà accesso alle risorse più recenti Dà accesso alle risorse informative più rilevanti Dà scorciatoie per parti profonde del sito Dà accesso ai comportamenti emergenti Dà immediato accesso alle “killer utility” Dà immediato accesso al motore di ricerca - Caratteristiche della home -
  • 25. Una killer utility è quell’applicazione (servizio, notizia, prodotto) che giustifica l’accesso alla intranet stessa Qual’è la Killer utility della vostra Intranet ? - Che cos’è una “killer utility”?-
  • 26. - Home page “solo servizi” -
  • 27. - Home page solo news -
  • 28. Notizie Documenti My page Discussioni Applicativi Logo Servizi Notizie e documenti Logo - Non solo notizie e documenti - Aree profilate
  • 29. Notizie Servizi Documentazione Discussioni Applicativi Navigazione principale Tagline Logo Servizi importanti nell’header (in tutte le pagine) Motore “ Killer utility” - Una possibile divisione logica della home - Notizie Utility Documenti Navigazione Applicazioni Servizi Community
  • 30. - Comportamenti emergenti - Le pagine più viste Le notizie più cliccate La documentazione più scaricata Gli ultimi interventi nel forum Le ultime segnalazioni dagli utenti … I comportamenti dei singoli determinano il posizionamento dei contenuti
  • 31. Spazio per i comportamenti emergenti - Comportamenti emergenti -
  • 32. - Alcuni errori da evitare sulle pagine interne - Dare uno standard poco rigoroso e riconoscibile alle pagine Creare pagine fatte solo di elenchi senza una gerarchia precisa Utilizzare template troppo rigidi Non dare spazio alle risorse più importanti
  • 33. - Standard per le pagine sottostanti - Identità Sottosezioni Referenti Documenti Evidenza Links News
  • 34. - Il modello “Lego” - Box “primo piano” Box “Risorse” Box “Elenco notizie” Box “Vetrina” Box “Documenti” (Anche per gli ultimi, i più richiesti, i più importanti..) Box feed back e invio materiali dagli utenti Box “quick link” Box “Galleria foto” Box “Segnalazioni dei lettori” Sottosezione 1 Descrizione della sottosezione Sottosezione 2 Descrizione della sottosezione Sottosezione 3 Descrizione della sottosezione Box “Elenco categorie” Casa scuola famiglia personale trasferimenti corsi Casa scuola famiglia personale trasferimenti corsi
  • 35. I Vantaggi dei “Lego” per i template Permette di creare infinite variazioni mantenendo una coerenza interna Permette con facilità di venire incontro ad esigenze spot di qualunque tipo Permette la gestione ottimale di sezioni gestite dalla redazione distribuita