1/35 Giacomo Mason - Aprile 2008 Intranet design Principi di base di Intranet Design

2/35 Giacomo Mason - Aprile 2008 Intranet design - Tipi di Strutture - E’ la più usata Sito Blog Portale

3/35 Giacomo Mason - Aprile 2008 Intranet design - 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/35 Giacomo Mason - Aprile 2008 Intranet design Contenuti Navigazione Motore - Il rapporto contenuti/navigazione - Tagline Logo 80% 20%

5/35 Giacomo Mason - Aprile 2008 Intranet design - 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/35 Giacomo Mason - Aprile 2008 Intranet design 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/35 Giacomo Mason - Aprile 2008 Intranet design Progettare lo spazio web - Sezione a Sinistra - In genere può contenere Menù principale Menù contestuali Link rapidi Finestre su servizi chiave

8/35 Giacomo Mason - Aprile 2008 Intranet design 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/35 Giacomo Mason - Aprile 2008 Intranet design - 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/35 Giacomo Mason - Aprile 2008 Intranet design - 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/35 Giacomo Mason - Aprile 2008 Intranet design - 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/35 Giacomo Mason - Aprile 2008 Intranet design - 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/35 Giacomo Mason - Aprile 2008 Intranet design - 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/35 Giacomo Mason - Aprile 2008 Intranet design - 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/35 Giacomo Mason - Aprile 2008 Intranet design - 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/35 Giacomo Mason - Aprile 2008 Intranet design - 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/35 Giacomo Mason - Aprile 2008 Intranet design - Architettura per task/servizi - SI usa per intranet che hanno molti servizi per l’utente e per intranet che presentano aspetti operativi

18/35 Giacomo Mason - Aprile 2008 Intranet design 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/35 Giacomo Mason - Aprile 2008 Intranet design - 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/35 Giacomo Mason - Aprile 2008 Intranet design - 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/35 Giacomo Mason - Aprile 2008 Intranet design Home page

22/35 Giacomo Mason - Aprile 2008 Intranet design Barra orizzontale: 100 pixels. Tipicamente usata per il logo, navigazione globale e ricarca. Colonna di sinistra: pixels. Tipicamente usata per la navigazione globale con dettagli e/o per la navigazione locale. Area centrale: Bianca, pixels. Tipicamente una o due colonne con foto, notizie in evidenza, task prioritari e applicazioni Colonna di destra: bianca, pixels. Tipicamente usate per box di servizi e fotografie - Home page intranet per Nielsen -

23/35 Giacomo Mason - Aprile 2008 Intranet design - 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/35 Giacomo Mason - Aprile 2008 Intranet design 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/35 Giacomo Mason - Aprile 2008 Intranet design 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/35 Giacomo Mason - Aprile 2008 Intranet design - Home page “solo servizi” -

27/35 Giacomo Mason - Aprile 2008 Intranet design - Home page solo news -

28/35 Giacomo Mason - Aprile 2008 Intranet design Notizie Documenti My page Discussioni Applicativi Logo Servizi Notizie e documenti Logo - Non solo notizie e documenti - Aree profilate

29/35 Giacomo Mason - Aprile 2008 Intranet design 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/35 Giacomo Mason - Aprile 2008 Intranet design - 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/35 Giacomo Mason - Aprile 2008 Intranet design Spazio per i comportamenti emergenti - Comportamenti emergenti -

32/35 Giacomo Mason - Aprile 2008 Intranet design - 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/35 Giacomo Mason - Aprile 2008 Intranet design - Standard per le pagine sottostanti - Identità Sottosezioni Referenti Documenti Evidenza Links News

34/35 Giacomo Mason - Aprile 2008 Intranet design - 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

35/35 Giacomo Mason - Aprile 2008 Intranet design 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