Design og dokumentasjon Information Architecture Peter Morville& Louis Rosenfeld Kapittel 12 29.01.2015 Håkon Tolsby 1
Ny fase i prosjektet Fokusskifte: Fra planlegging til produksjon Fra overordnet arkitektur til detaljert løsning Leveranser Detaljerte blueprints og wireframes Metadata og kontrollerte vokabular 29.01.2015 Håkon Tolsby 2
Diagrammer Behov for visualisering av arkitekturen Selge inn løsning til klient Forklare for kollega Grunnlag for implementering IA abstrakte, konseptuelle ting Ingen beste måte for visuell fremstilling Ingen standard diagrammer som fungerer for alle tilhørere i alle situasjoner 29.01.2015 Håkon Tolsby 3
Retningslinjer for dokumentasjon 1. Lag diagrammer som får frem ulike perspektiver ved arkitekturen Umulig å visualisere alle sider ved komplekse systemer i samme diagram Kombinasjonen av flere typer diagrammer gir helhetlig bilde 2. Benytt perspektiver tilpasset publikum og behov 29.01.2015 Håkon Tolsby 4
Hva visualiseres med diagrammer I realiteten to aspekter ved arkitekturen: Innholdskomponenter Relasjonen mellom innholdskomponenter Vanlige diagrammer Blueprints Wireframes 29.01.2015 Håkon Tolsby 5
Visuelle vokabular Syntaks for visualisering av innholdskomponenter og relasjoner Jesse James Garrets vokabular: http://jjg.net/ia/visvocab/ Mye brukt, oversatt til flere språk Enkelt (whiteboard-kompatibelt og lett å lære) Verktøyuavhengig Inneholder lenker til biblioteker med former for diverse applikasjoner 29.01.2015 Håkon Tolsby 6
Eksempel på formbibliotek (Hentet fra http://www.jjg.net/ia/visvocab/ ) 29.01.2015 Håkon Tolsby 7
29.01.2015 Håkon Tolsby 8
29.01.2015 Håkon Tolsby 9
Maler for utvikling av diagrammer En rekke maler for utvikling av de vanligste diagramtypene tilgjengelig for nedlasting Knyttet til verktøy som MS Visio (Pc) Omni Graffle (Mac) Excel PowerPoint Adobe Illustrator Noen eksempler finnes på http://iainstitute.org/tools/ 29.01.2015 Håkon Tolsby 10
Blueprints Illustrerer sammenhenger mellom sider og innholdskomponenter Kalles også sitemaps 29.01.2015 Håkon Tolsby 11
High-level blueprints: eksempel 1 29.01.2015 Håkon Tolsby 12
High-level blueprints: eksempel 2 29.01.2015 Håkon Tolsby 13
Detaljerte blueprints Visualisere merke- og navigasjonssystemer i hvert område Mange blueprints som til sammen viser hele informasjonshierarkiet Praktisk formål: Gir sammen med sidestrukturer (wirefames) grunnlag for å implementere nettstedet. 29.01.2015 Håkon Tolsby 14
Organisering Må kunne se sammenhengen mellom diagrammene som genereres. System for modularisering/numm erering 29.01.2015 Håkon Tolsby 15
Wireframes Sidestruktur Illustrerer hvordan en side eller mal skal se ut fra et arkitektonisk perspektiv Fokusere på struktur, organisering og navigasjon før form, farge, typografi 29.01.2015 Håkon Tolsby 16
Ulike typer wireframes Lages for nettstedets viktigste sider Hovedside Sider til viktige kategorier Viktige applikasjoner som søkegrensesnitt Nøyaktighetsnivå avhenger av hvor i prosessen man befinner seg Skisse (håndtegnet) Generert med for eksempel HTML eller Adobe illustrator Fungerer også som prototyper 29.01.2015 Håkon Tolsby 17
Wireframes eksempel 1 Ingen grafikkelementer eller reelt innhold Fokus på navigasjonselementer 29.01.2015 Håkon Tolsby 18
Wireframes eksempel 2 Flere detaljer Layout Reelt innhold Forklaringer 29.01.2015 Håkon Tolsby 19
Wireframes eksempel 3 Høy grad av nøyaktighet Prototype Tidkrevende 29.01.2015 Håkon Tolsby 20
Kontrollerte vokabular Metadata-matrise Oversikt over hvilke felter dokumentene skal tagges med For hvert felt kan det tilknyttes et vokabular Enkelt (med foretrukkede termer og varianter) Avansert thesauri Mange mulige formater Tekst, xml, database 29.01.2015 Håkon Tolsby 21
Metadatamatrise Unique ID Accepted term Variant term 1 Software Package Application, Bundle, Package, Software 2 Computer Computer,Net-book, Personal Computer, PC 3 Windows MS Windows, Microsoft Windows, Win 4 Credit Card CC, Credit, Debit Card, Plastic 5 Operating System OS 6 Apple Mac, Macintosh 7 Microsoft MS 8 Internet web, net, www, world wide web 9 Medium Device, Media, Platform 29.01.2015 Håkon Tolsby 22
Thesauri: eksempel 29.01.2015 HIØ - Avdeling for informasjonsteknologi 23
OPPSUMERING - Prosessen 29.01.2015 Håkon Tolsby 24
Forundersøkelse
Strategi Konseptuelt rammeverk Struktur og organisering av nettsted/intranett Anbefalinger basert på resultater fra forundersøkelsen Balansere behov og realiteter Kontekst Brukere Innhold
Design Går fra overordnet arkitektur til detaljert løsning Leveranser Detaljerte blueprints og wireframes Metadata og kontrollerte vokabular Mottakere Grafiske designere, programmerere, innholdsforfattere,.
Implementering Nettstedet bygges, testes og lanseres Informasjonsarkitektens oppgaver Organisering og tagging av dokumenter Testing Lokalisere og rette feil Dokumentasjon og opplæring for å sikre vedlikehold av arkitektur
Administrasjon Strategi for videreutvikling og vedlikehold Opprettholde struktur og konsistens Sentralisert eller desentralisert administrasjon Metadata for nye dokumenter Kontrollerte vokabular Forstå organisasjonens kultur og de menneskelige ressursene