Prototyper & interaktionsdesign. SAS Forum 2012

Transkript

1 Prototyper & interaktionsdesign SAS Forum 2012

2 Klaus Silberbauer Partner, Creative Director Think! Digital Tidl. UX Director / VP, Creuna Cand. IT.

3 Strategy Tactics Operations

4 Strategy Tactics Operations }UX mindset

5 Strategy without tactics is the slowest route to victory. Tactics without strategy is the noise before defeat. SUN TZU, 500 B.C.

6 Sorø Kommune

7 Brugerforståelse Forretningsforståelse Brandforståelse Interaktionsdesign Visuelt design User Experience Performance Relevans Tech Features Koncept

8 USEFUL USABLE DESIRABLE VALUABLE Peter Morville FINDABLE ACCESSIBLE CREDIBLE

9 Konteksten Hvorfor, Hvor? For hvem? Med hvilket mål? Strategisk. Business intelligence, user/market research, strategi, forretningsmodel, brugerbehov USEFUL VALUABLE FINDABLE Visuelt design Interaktionsdesign Informationsarkitektur Logic/code Datastrukturer Systemarkitektur Platform- og teknologivalg Løsningen Hvordan? Taktisk USABLE CREDIBLE ACCESSIBLE DESIRABLE

10 Konteksten Hvorfor, Hvor? For hvem? Med hvilket mål? Strategisk. Business intelligence, user/market research, strategi, forretningsmodel, brugerbehov USEFUL VALUABLE FINDABLE Visuelt design Interaktionsdesign Informationsarkitektur Logic/code Datastrukturer Systemarkitektur Platform- og teknologivalg Løsningen Hvordan? Taktisk USABLE CREDIBLE ACCESSIBLE DESIRABLE

11 Hvor kører vi hen? Roadmap Videreudvikling Proces Organisation

12 Konteksten Hvorfor, Hvor? For hvem? Med hvilket mål? Strategisk. Business intelligence, user/market research, strategi, forretningsmodel, brugerbehov USEFUL VALUABLE FINDABLE Visuelt design Interaktionsdesign Informationsarkitektur Logic/code Datastrukturer Systemarkitektur Platform- og teknologivalg Løsningen Hvordan? Taktisk USABLE CREDIBLE ACCESSIBLE DESIRABLE Hvor kører vi hen? Roadmap 2019

13 Interaktionsdesign

14 Interaktionsdesign...the practice of designing interactive digital products, environments, systems, and services. Alan Cooper, Robert Reimann, Dave Cronin (2007). About Face 3: The Essentials of Interaction Design.

15 Interaktionsdesign

16 Interaktionsdesign

17 Interaktions design

18 design is the creation of a plan or convention for the construction of an object or a system en.wikipedia.org/wiki/design

19 design Idé Byggebyggebygge? Problem Designe Bygge Lære Vision Løsning for løsning Iterere

20

21 Fejl er mange ting Misforståelser af brugerens kontekst Brugervenlighedsmæssige fejl Processer understøttes forkert. Forkert navngivning. Brugerforstår ikke systemes brugerflade Manglende funktionalitet Overflødig funktionalitet Systemet er indforstået Systemet taler ned til brugeren Konceptmæssige fejl Diskursmæssige fejl

22 Fail early Kompleksitet / pris / risiko Interaktionsfejl fint Interaktionsfejl acceptable Sketching Wireframing Prototyping Risikominimering Scope down Visual design Interaktionsfejl problematiske Interaktionsfejl ekstremt problematiske Development Amanda Tid

23 Start med interface design Design Test Indsigt Forretning Brand Mål / KPI Succeskriterier Brugere Design Struktur Interaktion Dialog Visuelt Design Reality check Tech Arkitektur Platform Data/Integration Agile Dev

24 Redskaber til interaktionsdesign

25 Svømmebane System-centrisk System A System B System C

26 Sitemap Indholdscentrisk Dokument Dokument Dokument Dokument Dokument Dokument Dokument

27 Flowcharting Brugercentrisk Skærm Skærm? Nej Ja Fokus på brugerens mulige rejse, ikke på dataens rejse eller dokumentets rejse. Skærm Skærm Skærm

28 Flowcharting Visual Vocabulary Jesse James Garett

29 Wireframes

30 Prototypen Rute Kortet n 1st person Skærm Skærm? Nej Ja Skærm Logik Skærm + Skærm Design

31

32

33

34

35

36 Fidelity Shallow prototype Deep prototype Fokus på at afdække bredden. Mange skærmbilleder Visionen om det fulde / system ingen logik Fuld prototype (Mulighedsrummet) (Sjældent rentabelt) Fokus på at afdække enkelte funktioner. Simuleret logik.

37 Prototypen som dialogværktøj

38 IxD / IA Projektledelse? Testbrugere AD / Design Beslutningstagere

39 Redskaber til prototyping Visio Powerpoint OmniGraffle

40 Redskaber til prototyping Axure RP Pro Moqups Balsamiq

41 Papir og blyant

42 Take-aways Brugeroplevelsen leveres af den samlede løsning. Design er ikke overflade, design er problemløsning Design er en iterativt proces. Interaktiondesign er en taktiske disciplin, der også kan facilitere strategiske spørgsmål og svar

43 Take-aways Start tidligt med interaktionsdesignet - find fejlene før det er for sent Brug flowcharting til at kortlægge brugerens rute. Start med skitser, detaljér i wireframes... Sæt wireframes sammen til interaktive prototyper

44 Tak

45 facebook.com/thinkdigitaldk twitter.com/thinkdigitaldk