Design og dokumentasjon

Transkript

1 Design og dokumentasjon Information Architecture Peter Morville& Louis Rosenfeld Kapittel Håkon Tolsby 1

2 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 Håkon Tolsby 2

3 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 Håkon Tolsby 3

4 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 Håkon Tolsby 4

5 Hva visualiseres med diagrammer I realiteten to aspekter ved arkitekturen: Innholdskomponenter Relasjonen mellom innholdskomponenter Vanlige diagrammer Blueprints Wireframes Håkon Tolsby 5

6 Visuelle vokabular Syntaks for visualisering av innholdskomponenter og relasjoner Jesse James Garrets vokabular: 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

7 Eksempel på formbibliotek (Hentet fra ) Håkon Tolsby 7

8 Håkon Tolsby 8

9 Håkon Tolsby 9

10 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å Håkon Tolsby 10

11 Blueprints Illustrerer sammenhenger mellom sider og innholdskomponenter Kalles også sitemaps Håkon Tolsby 11

12 High-level blueprints: eksempel Håkon Tolsby 12

13 High-level blueprints: eksempel Håkon Tolsby 13

14 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 Håkon Tolsby 14

15 Organisering Må kunne se sammenhengen mellom diagrammene som genereres. System for modularisering/numm erering Håkon Tolsby 15

16 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 Håkon Tolsby 16

17 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 Håkon Tolsby 17

18 Wireframes eksempel 1 Ingen grafikkelementer eller reelt innhold Fokus på navigasjonselementer Håkon Tolsby 18

19 Wireframes eksempel 2 Flere detaljer Layout Reelt innhold Forklaringer Håkon Tolsby 19

20 Wireframes eksempel 3 Høy grad av nøyaktighet Prototype Tidkrevende Håkon Tolsby 20

21 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 Håkon Tolsby 21

22 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 Håkon Tolsby 22

23 Thesauri: eksempel HIØ - Avdeling for informasjonsteknologi 23

24 OPPSUMERING - Prosessen Håkon Tolsby 24

25 Forundersøkelse

26 Strategi Konseptuelt rammeverk Struktur og organisering av nettsted/intranett Anbefalinger basert på resultater fra forundersøkelsen Balansere behov og realiteter Kontekst Brukere Innhold

27 Design Går fra overordnet arkitektur til detaljert løsning Leveranser Detaljerte blueprints og wireframes Metadata og kontrollerte vokabular Mottakere Grafiske designere, programmerere, innholdsforfattere,.

28 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

29 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