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