leichtgewichtige prototypen für mobile apps
TRANSCRIPT
LEICHTGEWICHTIGE PROTOTYPENfür mobile Apps
1
WER? WAS? WIE?
2
▫︎ Vorstellen
▫︎ Experience Design
▫︎ Prototypen
▫︎Werkzeuge
▫︎ Life Cycle
▫︎User Tests
▫︎ Fragen und hoffentlich Antworten
@nilseckelt
FRÜHER
3
Developer
@nilseckelt
Developer
FRÜHER
4
Anwender
@nilseckelt
FRÜHER
5
Todo Doing Done
Developer@nilseckelt
FRÜHER
6Developer
Todo Doing Done
Magic
@nilseckelt
UMWELT
7
Developer Anwender
UX@nilseckelt
UMWELT
8
Developer Anwender
UX@nilseckelt
UMWELT
9
Developer Anwender
Kunde
Produkt
UX@nilseckelt
UMWELT
10
Developer Anwender
Kunde
Produkt
UX@nilseckelt
UMWELT
11
Developer Anwender
Kunde
Produkt
UX@nilseckelt
WIKIPEDIA MEINT
12
User Experience spielt eine große Rolle bei der Produkt- und Serviceentwicklung. In vielen Bereichen wird Vitruv als erster Architekt und Designer gesehen der mit den Begriffen Firmitas (Festigkeit), Utilitas (Nützlichkeit, Usability) und Venustas (Schönheit) die Kriterien für das Nutzerlebnis definiert hat, wenn es auch damals
noch eher auf Gebäude ausgerichtet war.
— Wikipedia
@nilseckelt
THOUGHTWORKS SAGT
13
Interaction Design
Frontend Engineering
Product Strategy
Research
Visual Design
Business Design Engineering@nilseckelt
PROTOTYPENmade easy
14@nilseckelt
Fake it before you make it
15@nilseckelt
WERKZEUGE
▫︎ Stift und Papier
▫︎ PopApp
▫︎Balsamiq
▫︎Axure
▫︎ Keynote + alles andere das PDF mit Links erzeugen kann
▫︎ PowerPoint, Impress (Libre Office or Open Office)
▫︎ LinkViewer
▫︎CodePen, JSBin, JSFiddle + frameless Browser
16@nilseckelt
PAPER PROTOTYPES
17@nilseckelt
PAPER PROTOTYPES
Pros
Keine Anwendungen nötig
Keine Kenntnisse nötig
Schnell erstellt
Cons
Test-Person braucht etwas Fantasie
Keine Interaktionen möglich
18@nilseckelt
POP APP
19@nilseckelt
POP APP Pros
Vorteile von Paper-Prototypes
Trotzdem gewisses App-Feeling
Klick-Interaktionen möglich
Cons
Das aussehen gleicht immer noch dem Paper Prototype
Ein gewisses unprofessionelles Kindergarten-Gefühll stellt sich ein
20@nilseckelt
KLICKBARES PDF
Pros
Kaum Aufwand
Bekannte Anwendungen
Professionelleres Aussehen
Interaktionen bedingt möglich
Cons
Kein Scrollen
Keine Animationen
21@nilseckelt
BALSAMIQ Pros
Kaum Aufwand
Interaktionen bedingt möglich
Cons
Kein Scrollen
Keine Animationen
Kein Design
22@nilseckelt
AXURE Öhmm…
23@nilseckelt
AXURE Pros
Alles ist möglich
Cons
Etwas teurer
Etwas kompliziert
24@nilseckelt
KEYNOTE Pros
Geringer Aufwand
Design anpassbar
Produziert klickbare PDFs
Cons
Kein Scrollen
Keine Animationen
25@nilseckelt
POWERPOINTIMPRESS
Pros
Gewohntes Programm
Design anpassbar
Cons
Klickbare PDFs nur mit Tricks möglich
26@nilseckelt
FRONTEND DEVELOPER PLAYGROUND
Pros
Jegliche Interaktionen möglich
Developer Friendly
Cons
Developer Friendly
27@nilseckelt
Live demo…
28@nilseckelt
UND IN WIRKLICHKEITSo arbeite ich jeden Tag
29@nilseckelt
PROTOTYPE LIFE CYCLE
30
Vier initiale Screens
@nilseckelt
PROTOTYPE LIFE CYCLE
31
Vier initiale Screens
User tests
@nilseckelt
PROTOTYPE LIFE CYCLE
32
Vier initiale Screens
User tests
Feedback auswerten
@nilseckelt
Vier initiale Screens
PROTOTYPE LIFE CYCLE
33
Screens anpassen
User tests
Feedback auswerten
@nilseckelt
USER TESTSMit wem teste ich was? Und wie?
34@nilseckelt
MIT WEM TESTE ICH?
▫︎Mit dem End-Anwender
▫︎Mit Projekt-fremden Personen
▫︎Guerrilla testing auf der Straße
35@nilseckelt
WAS TESTE ICH?
▫︎ Information ArchitectureWelche Informationen sind wann nötig und erwünscht?
▫︎User InteractionsSind die Workflows verständlich?
▫︎Nützlichkeit einer Funktion
▫︎Designs
36@nilseckelt
WIE BEKOMME ICH DAS BESTE HERAUS?
▫︎ Tja…
37@nilseckelt
WIE BEKOMME ICH DAS BESTE HERAUS? — TIPPS
▫︎ Kleine Aufgaben geben
▫︎Offene Fragen
▫︎ Ermutigen Gedanken laut auszusprechen
▫︎ Realistische Umgebung
38@nilseckelt
Fragen? Ergänzungen? Anregungen?
[email protected] @nilseckelt
DANKESCHÖN
We’re hiring — just talk to me, if you are interested