LEICHTGEWICHTIGE
PROTOTYPEN
für mobile Apps
1
WER? WAS? WIE?
2
▫︎Vorstellen
▫︎Experience Design
▫︎Prototypen
▫︎Werkzeuge
▫︎Life Cycle
▫︎User Tests
▫︎Fragen und hoffentli...
FRÜHER
3
Developer
@nilseckelt
Developer
FRÜHER
4
Anwender
@nilseckelt
FRÜHER
5
Todo Doing Done
Developer@nilseckelt
FRÜHER
6
Developer
Todo Doing Done
M
agic
@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 wi...
THOUGHTWORKS SAGT
13
Interaction
Design
Frontend
Engineering
Product
Strategy
Research
Visual
Design
Business Design Engin...
PROTOTYPEN
made 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
▫︎PowerP...
PAPER
PROTOTYPES
17@nilseckelt
PAPER
PROTOTYPES
Pros
Keine Anwendungen nötig
Keine Kenntnisse nötig
Schnell erstellt
Cons
Test-Person braucht etwas Fanta...
POP APP
19@nilseckelt
POP APP Pros
Vorteile von Paper-Prototypes
Trotzdem gewisses App-Feeling
Klick-Interaktionen möglich
Cons
Das aussehen gle...
KLICKBARES
PDF
Pros
Kaum Aufwand
Bekannte Anwendungen
Professionelleres Aussehen
Interaktionen bedingt möglich
Cons
Kein S...
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
POWERPOINT
IMPRESS
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
WIRKLICHKEIT
So 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 TESTS
Mit 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 Architecture

Welche Informationen sind wann nötig und
erwünscht?
▫︎User Interactions

Sind d...
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
▫...
Fragen? Ergänzungen? Anregungen?
neckelt@thoughtworks.com
@nilseckelt
DANKESCHÖN
We’re hiring — just talk to me, if you ar...
Nächste SlideShare
Wird geladen in …5
×

Leichtgewichtige prototypen für mobile apps

410 Aufrufe

Veröffentlicht am

In Kreisen der Software-Entwicklung ist die User Experience noch nicht überall eingezogen. Ich möchte hiermit einmal kurz erläutern, was mit User Experience gemeint ist und das ein Einstieg einfach und sinnvoll ist. Einfachstes Hilfsmittel sind die Prototypen auf die ich hier ganz besonders eingehen möchte. Einen kurzen Ausflug in das User Testing das man mit diesen Prototypen machen kann schließt diesen Vortrag ab.
Der Vortrag wurde auch in einer leicht gekürzten Fassung am Web-Montag (http://www.webmontag-hamburg.de) aufgezeichnet: http://youtu.be/sE-9kCyoe6k

Veröffentlicht in: Technologie
0 Kommentare
0 Gefällt mir
Statistik
Notizen
  • Als Erste(r) kommentieren

  • Gehören Sie zu den Ersten, denen das gefällt!

Keine Downloads
Aufrufe
Aufrufe insgesamt
410
Auf SlideShare
0
Aus Einbettungen
0
Anzahl an Einbettungen
3
Aktionen
Geteilt
0
Downloads
5
Kommentare
0
Gefällt mir
0
Einbettungen 0
Keine Einbettungen

Keine Notizen für die Folie

Leichtgewichtige prototypen für mobile apps

  1. 1. LEICHTGEWICHTIGE PROTOTYPEN für mobile Apps 1
  2. 2. WER? WAS? WIE? 2 ▫︎Vorstellen ▫︎Experience Design ▫︎Prototypen ▫︎Werkzeuge ▫︎Life Cycle ▫︎User Tests ▫︎Fragen und hoffentlich Antworten @nilseckelt
  3. 3. FRÜHER 3 Developer @nilseckelt
  4. 4. Developer FRÜHER 4 Anwender @nilseckelt
  5. 5. FRÜHER 5 Todo Doing Done Developer@nilseckelt
  6. 6. FRÜHER 6 Developer Todo Doing Done M agic @nilseckelt
  7. 7. UMWELT 7 Developer Anwender UX@nilseckelt
  8. 8. UMWELT 8 Developer Anwender UX@nilseckelt
  9. 9. UMWELT 9 Developer Anwender Kunde Produkt UX@nilseckelt
  10. 10. UMWELT 10 Developer Anwender Kunde Produkt UX@nilseckelt
  11. 11. UMWELT 11 Developer Anwender Kunde Produkt UX@nilseckelt
  12. 12. 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
  13. 13. THOUGHTWORKS SAGT 13 Interaction Design Frontend Engineering Product Strategy Research Visual Design Business Design Engineering @nilseckelt
  14. 14. PROTOTYPEN made easy 14@nilseckelt
  15. 15. Fake it before you make it 15@nilseckelt
  16. 16. 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
  17. 17. PAPER PROTOTYPES 17@nilseckelt
  18. 18. 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
  19. 19. POP APP 19@nilseckelt
  20. 20. 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
  21. 21. KLICKBARES PDF Pros Kaum Aufwand Bekannte Anwendungen Professionelleres Aussehen Interaktionen bedingt möglich Cons Kein Scrollen Keine Animationen 21@nilseckelt
  22. 22. BALSAMIQ Pros Kaum Aufwand Interaktionen bedingt möglich Cons Kein Scrollen Keine Animationen Kein Design 22@nilseckelt
  23. 23. AXURE Öhmm… 23@nilseckelt
  24. 24. AXURE Pros Alles ist möglich Cons Etwas teurer Etwas kompliziert 24@nilseckelt
  25. 25. KEYNOTE Pros Geringer Aufwand Design anpassbar Produziert klickbare PDFs Cons Kein Scrollen Keine Animationen 25@nilseckelt
  26. 26. POWERPOINT IMPRESS Pros Gewohntes Programm Design anpassbar Cons Klickbare PDFs nur mit Tricks möglich 26@nilseckelt
  27. 27. FRONTEND DEVELOPER PLAYGROUND Pros Jegliche Interaktionen möglich Developer Friendly Cons Developer Friendly 27@nilseckelt
  28. 28. Live demo… 28@nilseckelt
  29. 29. UND IN WIRKLICHKEIT So arbeite ich jeden Tag 29@nilseckelt
  30. 30. PROTOTYPE LIFE CYCLE 30 Vier initiale Screens @nilseckelt
  31. 31. PROTOTYPE LIFE CYCLE 31 Vier initiale Screens User tests @nilseckelt
  32. 32. PROTOTYPE LIFE CYCLE 32 Vier initiale Screens User tests Feedback auswerten @nilseckelt
  33. 33. Vier initiale Screens PROTOTYPE LIFE CYCLE 33 Screens anpassen User tests Feedback auswerten @nilseckelt
  34. 34. USER TESTS Mit wem teste ich was? Und wie? 34@nilseckelt
  35. 35. MIT WEM TESTE ICH? ▫︎Mit dem End-Anwender ▫︎Mit Projekt-fremden Personen ▫︎Guerrilla testing auf der Straße 35@nilseckelt
  36. 36. WAS TESTE ICH? ▫︎Information Architecture
 Welche Informationen sind wann nötig und erwünscht? ▫︎User Interactions
 Sind die Workflows verständlich? ▫︎Nützlichkeit einer Funktion ▫︎Designs 36@nilseckelt
  37. 37. WIE BEKOMME ICH DAS BESTE HERAUS? ▫︎Tja… 37@nilseckelt
  38. 38. WIE BEKOMME ICH DAS BESTE HERAUS? — TIPPS ▫︎Kleine Aufgaben geben ▫︎Offene Fragen ▫︎Ermutigen Gedanken laut auszusprechen ▫︎Realistische Umgebung 38@nilseckelt
  39. 39. Fragen? Ergänzungen? Anregungen? neckelt@thoughtworks.com @nilseckelt DANKESCHÖN We’re hiring — just talk to me, if you are interested

×