Design og dokumentasjon - Avdeling for informasjonsteknologi
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/ – – – – 29.01.2015 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 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
© Copyright 2024