Informasjonsarkitektur og Prototyping Håkon Tolsby 20.10.2015 Håkon Tolsby 1
Hva er informasjonsarkitektur? Definisjon 1. The structural design of shared information environments 2. The combination of organization, labeling, search, and navigation systems. 3. The art and science of shaping information products and experiences to support usability and findability 4. An emerging dicipline and community of practice focused on bringing prinsiples of design and architecture to the digital landscape - Planlegging og design av store nettsteder 20.10.2015 Håkon Tolsby 2
Informasjonsarkitekturens rammeverk -en holistisk tilnærming 20.10.2015 HåkonTolsby 3 Skaffe oversikt og forståelse Design og dokumentasjon Prosjektledelse Kontekst Foretningsmål, finansiering, politikk, Kultur, teknologi, menneskelige ressurser Innhold Brukere Ulike dokumenter/data; Objekter, metadata, omfang, Eksisterende struktur Publikum, oppgaver, behov, Søkeadferd, erfaringer, vokabular, alder, kultur
Sentrale komponenter Informasjonsorganisering Merkesystemer Navigasjonssystemer Søkesystemer Metadata 20.10.2015 Håkon Tolsby 4
Informasjonsorganisering Informasjon kan kategoriseres på mange måter Kronologisk Geografisk Emne Publikum God IA gir tilgang til informasjon på flere måter Hvorfor? 20.10.2015 Håkon Tolsby 5
Hvorfor er informasjonsorganisering vanskelig? Tvetydighet Ord kan tolkes på ulike måter Ikke alltid opplagt hvilken kategori et element tilhører Ulike brukere har ulike perspektiver Heterogenitetsproblemet 20.10.2015 Håkon Tolsby 6
Merkesystemer Organisasjon og navigasjon på et nettsted visualiseres gjennom merker: Navnevalg og bruk av farger og ikoner Gode merker er konsistente gjennom hele nettstedet Lik grovhet (biler, Volvo, Franske biler ) Helhetlig (jakke, bukse, slips ) Publikum (hodepine, Intoxicatio alimentaria) Syntaks (blanding av verb substantiv og spørsmål) Stil (tegnsetting, store/små bokstaver) Presentasjon (font, fontstørrelse, farge, gruppering) Gode merker gir brukerne riktige assosiasjoner 20.10.2015 Håkon Tolsby 7
Navigasjonssystemer Designelementer og strukturer som gjør at brukerne kan finne frem Gir svar på: Hvor er jeg? Hva finnes her? Hva kan jeg gjøre nå? Hvor har jeg vært? Brukere kommer ikke alltid via hovedsiden 20.10.2015 Håkon Tolsby 8
20.10.2015 HåkonTolsby 9 Global, lokal og kontekstuell navigasjon HVOR ER JEG HVA ER I NÆRHETEN RELATERT
Søkesystemer Hva skal søkes? Intern Hele nettstedet Kun utvalgte nøkkelområder Hva slags søk? Fritekst Indeksert Hvordan listes resultatene? 20.10.2015 Håkon Tolsby 10
Metadata Data om data Tittel Beskrivelse Dato Nøkkelord Ikke all informasjon inneholder ord Basis for all informasjonsorganisering Relatere informasjon 20.10.2015 Håkon Tolsby 11
Metoder for å samle data Kontekst Bakgrunnsundersøkelse Presentasjoner og møter Intervju med stakeholders Teknologivurdering Innhold Heuristisk evaluering Metadata og innholdsanalyse Kartlegging av innhold Benchmarking Brukere Analyse av søkelogger og klikkestrømmer Use cases og brukerprofiler Kontekstuell undersøkelse Brukerintervju og -testing 20.10.2015 Håkon Tolsby 12
Til å visualisere brukes prototyper En prototype kan være ulike ting: Low-fidelity En serie med skisser av websider Scenario (i kombinasjon med skisser) En storyboard, serie med sener (tegneserie) En Powerpoint presentasjon High-fidelity Et websted, men med begrenset funksjonalitet 20.10.2015 HåkonTolsby 13
Hvorfor lager vi prototyper? For å forstå tidlig i prosessen hva vi skal utvikle. Utfordringer, idé og konsept For å kunne kommuniser med: Andre designere Oppdragsgiver Brukere For å inndra brukere i prosessen. VIKTIG! 20.10.2015 Håkon Tolsby 14
Husk at design og utvikling er en iterativ prosess 20.10.2015 Håkon Tolsby 15
Det er mulig å involvere «klienten» i hele prosessen 20.10.2015 Håkon Tolsby 16
Prototyping innebærer kompromisser Begrenset funksjonalitet, sakte respons, simple ikoner og grafikk. To sentrale kompromisser Horisontal prototyping: Mange funksjoner, men liten detalj Vertikal prototyping: Mange detaljer, men få funksjoner Farlig å ignorere kompromissene Begrenset hvilke konklusjoner du kan trekke basert på tilbakemelding på veldig enkle prototyper 20.10.2015 HåkonTolsby 17
Prototyping er virkeliggjøring av idéen Det er et produkt som skal lages Evolusjonær prototyping Throw-away prototyping Hvilke funksjoner skal produktet utføre Hva skal produktet gjøre og hva skal brukerne gjøre Er strukturen og kategoriene riktige Hvilken informasjon må være tilgjengelig? Hva kreves for å utføre oppgaven? 20.10.2015 HåkonTolsby 18
Eksempler på prototyper Blueprints Wireframes Brukerscenarier Metaforer Historier Konseptuelle diagrammer Enkle implementasjoner 20.10.2015 Håkon Tolsby 19
Blueprints Illustrerer sammenhenger mellom sider og innholdskomponenter Kalles også sitemaps 20.10.2015 Håkon Tolsby 20
Blueprint - enkel
High-level blueprints 20.10.2015 Håkon Tolsby 22
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 20.10.2015 Håkon Tolsby 23
Wireframe
Wireframes eksempel 2 Flere detaljer Layout Reelt innhold Forklaringer 20.10.2015 Håkon Tolsby 25
Wireframes eksempel 3 Høy grad av nøyaktighet Prototype Tidkrevende 20.10.2015 Håkon Tolsby 26
Brukerscenarier Vise hvordan brukere med ulike behov vil navigere nettstedet Utgangspunkt: brukerprofilene fra forundersøkelsen 3 eller 4 ulike typer Navn, tittel og årsak til at de besøker hjemmestedet Scenarier som demonstrerer behov for forskjellige navigasjons- og søkemuligheter Prosessen med: mål, overveielser og beslutninger. Kan kombineres med storyboard.
Eksempel brukerscenario Det er morgen og Kari stopper på bensinstasjonen på veg til arbeidet. Mens hun fyller bensin bestemmer hun seg for å sjekke om dansegruppa hennes har blitt enig om neste trening. Kari tar frem telefonen. Hun logger seg på en tjeneste og får en oversikt over foreslåtte datoer. Kari noterer seg at bare 11 av 15 personer har svart. Hun ser også at det passer best for de fleste neste mandag og lørdag. Kari trenger et endelig svar så rakt som mulig og sender en påminnelse til dem som ikke har svart med de foreslåtte datoene. Så avslutter hun tjenesten, legger telefonen i veska og kjører videre. 20.10.2015 Håkon Tolsby 28
scenario mapping http://www.uxforthemasses.com/scenario-mapping/ 20.10.2015 Håkon Tolsby 29
Morville: visuell kommunikasjon
Hvem lager prototypene? Designer/utvikler Kan oppdragsgiver og brukere delta? Design in action (Susanne Bødker og Kaj Grønbæk) Hvem bør delta, hvem bør ikke? Oversikt, entusiasme, representativ, erfaring Tillit og likeverd 20.10.2015 Håkon Tolsby 31
20.10.2015 32 Contextual Inquiry En tilnærming til etnografisk studie (observasjon, feltstudie) hvor: brukeren er ekspert og designeren er lærling En form for intervju på brukerens arbeidsplass 2 til 3 timers varighet Fire hovedprinsipper: 1. Kontekst: Se arbeidsplassen og hva som skjer 2. Arbeidskollegaer: Bruker og utvikler samarbeider 3. Fortolkning: Observasjoner fortolkes av bruker og utvikler sammen. 4. Fokus: Fremlegg fokus for å gjøre det enklere å forstå hva man skal se etter.
Contextual Inquiry Hvordan kan prototyper brukes for å skape større tilnærming til kontekst når man ønsker tilbakemelding fra brukere og klienter? 20.10.2015 Håkon Tolsby 33
Hvordan bruker dere prototyper i deres prosjekt? 20.10.2015 Håkon Tolsby 34