Usability Coffee - ein Event von soultank AG. Mitarbeiter stellen bei Kaffee und Gipfeli ein Thema mit praktischen Inputs rund ums Thema Usability vor. Stefanie Friedli, soultank AG, spricht zum Thema Mobile Prototyping. .

1. Mobile Prototyping
Usability Coffee, Zug, 19. Februar 2015

2. Usability Erfahrung seit 2013
Bachelor Thesis zum Thema Usability Tests
und Testleitereffekt
Studium:
Pädagogische Hochschule PHSH
(Bachelor of Arts Primary Education) seit 2006
Angewandte Psychologie
(B SC FHNW Angewandte Psychologie) seit 2014
stefanie.friedli@soultank.ch
Stefanie Friedli
Usability Consultant
| Folie 2soultank AG | Usability Coffee | 18. Februar 2015

3. soultank AG | Usability Coffee | 18. Februar 2015
Wissenschaftlich fundiertes Beratungsunternehmen
Seit 1996 im Bereich Usability und Ergonomie tätig
2000 Gründung soultank AG in Zug
6 Usability-Experten
Betrieb eines Usability-Labors in Zug
Europaweit tätig, Fokus Schweiz
Über soultank AG
| Folie 3
Wir sind die unabhängigen Usability-Experten mit
unvoreingenommenem Blick auf Ihr Produkt

4. Referenzen soultank AG
soultank AG | Usability Coffee | 18. Februar 2015 | Folie 4
Weitere Referenzen: www.soultank.ch/content/referenzen

5. soultank AG | Usability Coffee | 18. Februar 2015 Seite 5
User Centred Design (UCD)

6. soultank AG | Usability Coffee | 18. Februar 2015 Seite 6
User Centred Design (UCD)

7. soultank AG | Usability Coffee | 18. Februar 2015 Seite 7
User Centred Design (UCD)

8. soultank AG | Usability Coffee | 18. Februar 2015 Seite 8
User Centred Design (UCD)

9. soultank AG | Usability Coffee | 18. Februar 2015 Seite 9
User Centred Design (UCD)

10. soultank AG | Usability Coffee | 18. Februar 2015 Seite 10
Wenn immer möglich, baue früh einen Prototypen
Was ist das Ziel und Zeck des Prototypen?
Diese zwei Tools (Programme) fürs Prototyping haben
sich bewährt:
Balsamique
Axure
Teste so früh, wie möglich den Prototyp auf dem Zielgerät
(mobile Phone)
Teste den Prototyp mit realen Benutzern
Kernaussagen von heute

11. Was ist (mobile) Prototyping?
Vorteile und Nachteile des Prototyping
Mobile Prototyping
Mit Balsamiq
Mit Axure
Auf was achten bei mobile Prototyping?
Mobile Prototyping auch für Hardware
Mobile Prototyp fürs eigene Projekt: Tipps
Literatur
Inhaltsübersicht
| Folie 11soultank AG | Usability Coffee | 18. Februar 2015

12. 12
Verschiedene Arten von Prototyping
1
2
soultank AG | Usability Coffee | 18. Februar 2015

13. 13
Verschiedene Arten von Prototyping
3
soultank AG | Usability Coffee | 18. Februar 2015

14. 14
Definition "Prototyp"
1.
Nutzungs-
kontext-
analyse
2.
Anforderungs-
spezifikation
3. Entwicklung
Prototypen
4.
Evaluation
Prototypen
intuitiv zu
bedienendes
Produkt
Start
Durch Prototyping entsteht eine zum Teil funktionsfähige
Vorabversion einer Benutzeroberfläche. Mit ihr kann früh
getestet werden, ob die Anwendung die Anforderungen
erfüllt.
Quelle: Wikipedia / gc-upa
soultank AG | Usability Coffee | 18. Februar 2015

15. Visualisieren von Anforderungen
Diskutieren von Design-Lösungen im Projekt
Evaluieren von Design-Lösungen mit Benutzern
Vergleich von verschiedenen Varianten
Präsentation für Überzeugungsarbeit
15
Einsatzgebiet von Prototypen
Quelle: Christian Hübscher, 2007
soultank AG | Usability Coffee | 19. Februar 2015

16. Wieso Prototyping?
| Folie 16soultank AG | Usability Coffee | 18. Februar 2015

17. Was ist (mobile) Prototyping?
Vorteile und Nachteile des Prototyping
Mobile Prototyping
Mit Balsamiq
Mit Axure
Auf was achten bei mobile Prototyping?
Mobile Prototyping auch für Hardware
Mobile Prototyp fürs eigene Projekt: Tipps
Literatur
Inhaltsübersicht
| Folie 17soultank AG | Usability Coffee | 18. Februar 2015

18. Ermöglicht produktspezifisches Testing von Fragen, die
nicht durch allgemeine Forschungsergebnisse oder
Richtlinien beantwortet werden können
Liefert relativ schnell bedeutungsvolle Rückmeldungen
vom Benutzer
Reduziert die totalen Entwicklungskosten für ein Produkt
Kann früh im Entwicklungsprozess eingesetzt werden
18
Vorteile des Prototyping
soultank AG | Usability Coffee | 18. Februar 2015

19. Reduziert Missverständnisse
Geht tiefer als Bilder oder Skizzen (zeigen und erzählen) →
lässt einem das Design erleben
Beste Lösung überlebt → Survival the fittest
Adaptiv, immer veränderbar
Produziert fokussiert Produkte
Zeigt Fehler früh
Reduziert Risiko (Spart Zeit, Geld, Arbeit)
Vorteile des Prototyping
| Folie 19soultank AG | Usability Coffee | 18. Februar 2015

20. Begrenzungen und Randbedingungen, auf die das reale
Produkt trifft, werden oft während des Prototyping zu stark
vernachlässigt
Erzeugung unrealistischer Erwartungen für die Fähigkeiten des
Endproduktes
Gefahr der Überfrachtung des Prototyps
Der Prototypingprozess kann schwierig zu managen und zu
kontrollieren sein
Prototyp ist nur eine begrenzte Simulation des
schlussendlichen Produktes (flach/tief)
20
Nachteile des Prototyping
soultank AG | Usability Coffee | 18. Februar 2015

21. Was ist (mobile) Prototyping?
Vorteile und Nachteile des Prototyping
Mobile Prototyping
Mit Balsamiq
Mit Axure
Auf was achten bei mobile Prototyping?
Mobile Prototyping auch für Hardware
Mobile Prototyp fürs eigene Projekt: Tipps
Literatur
Inhaltsübersicht
| Folie 21soultank AG | Usability Coffee | 18. Februar 2015

22. Welches Tool?
Wichtigste Frage:
Was ist mein Ziel?
Welche Frage will ich beantworten?
Idee überprüfen? Lo-Fi
Benennung & Funktionsweise
prüfen? Lo-Fi
Überzeugungsarbeit leisten? Hi-
Fi
22soultank AG | Usability Coffee | 18. Februar 2015
Lo-Fi
Hi-Fi

23. Skizzieren von Hand
App: Camscanner Plus
(2CHF)
Prototyp erstellen: von Hand
fast and easy
| Folie 23soultank AG | Usability Coffee | 18. Februar 2015

24. Papier, Bleistift, Post-it etc.
Mit kleben, kopieren
kombinierbar
Whiteboard
Anderes
Präsentationsmaterial
Vorteile: schnell und einfach,
Erarbeitung in der Gruppe,
Material verfügbar, von jedem
benutzbar
Nachteile: Änderungen evtl.
umständlich
Paper and Pencil
| Folie 24soultank AG | Usability Coffee | 18. Februar 2015

25. Büro-/Grafik Software
Spezialisierte Prototyping-
Applikationen
Entwicklungs-Umgebungen
Vorteile: Änderungen und Variationen
schnell und einfach, einfach elektronisch
zu verteilen
Nachteile: Lernaufwand für
das Tool, für einfache Sachen
aufwändiger als von Hand
Prototyp erstellen: mit Computer
| Folie 25soultank AG | Usability Coffee | 18. Februar 2015

26. Balsamiq
Schnell, verteilbar und unfertig aussehend
| Folie 26soultank AG | Usability Coffee | 18. Februar 2015
Als PDF auf
dem
Smartphone
oder Tablet
Klickbar

27. Vorteile:
Sieht unfertig aus (wie bei Paper & Pencil)
Elektronisch und darum verteilbar
PDF auf Tablet oder Smartphone lauffähig
Relativ schnell eingearbeitet
Beschränkte Möglichkeiten bei Interaktivität und Visual Design
Nachteile:
Beschränkte Möglichkeiten bei Interaktivität und Visual Design
Interaktivität: Verlinkbare Seiten, keine Interaktion innerhalb der
Seite
27
Balsamiq Mockups
soultank AG | Usability Coffee | 18. Februar 2015

28. Axure
Aufwändiger, mächtiger und verteilbar
| Folie 28soultank AG | Usability Coffee | 18. Februar 2015

29. Vorteile:
Per Mausklick gibt es einen HTML-Prototypen
Auch auf Tablets und Mobiltelefonen einsetzbar
Interaktionen können sehr realistisch gemacht werden (Flyout
etc.)
Relativ schnell eingearbeitet (im Vergleich zu HTML/CSS lernen)
Masterelemente können definiert werden (z.B. Navigation,
Header)
Grosse Bibliothek und viele Komponenten für die grafische
Benutzeroberfläche
Man kann einzelne Elemente kommentieren und so auch eine
Word-Dokumentation generieren
29
Axure: Vorteile
soultank AG | Usability Coffee | 18. Februar 2015

30. Nachteile:
HTML kann/sollte nicht weiterverwendet werden
Kein „Design-Tool“ zum z.B. schöneabgerundete Buttons zu
gestalten (wie Visio, Photoshop)
30
Axure: Nachteile
soultank AG | Usability Coffee | 18. Februar 2015

31. Was ist (mobile) Prototyping?
Vorteile und Nachteile des Prototyping
Mobile Prototyping
Mit Balsamiq
Mit Axure
Auf was achten bei mobile Prototyping?
Mobile Prototyping auch für Hardware
Mobile Prototyp fürs eigene Projekt: Tipps
Literatur
Inhaltsübersicht
| Folie 31soultank AG | Usability Coffee | 18. Februar 2015

32. Den Prototyp möglichst früh auf dem Zielgerät
(Smartphone oder Tablet) anschauen
Gründe:
Probleme mit der Darstellung (z.B. Schriftgrösse und Kontrast)
Z.B. Times New Roman anders auf iPhone und Android
Ist es auch auf dem Zielgerät gut ersichtlich?
Grosser Unterschied zum Desktop
Besonders wichtig beim mobile Prototyping 1
| Folie 32soultank AG | Usability Coffee | 18. Februar 2015

33. Möglichst früh definieren, wie die Auflösung (px) des
Prototypen sein soll
Dies hängt ab davon, was für ein Zielgerät man verwendet
für Usability Tests. Dieses auch möglichst früh definieren.
Grund:
Die Auflösung (px) hat Einfluss auf die Platzverhältnisse und die
Darstellung des mobile Prototypen
Besonders wichtig beim mobile Prototyping 2
| Folie 33soultank AG | Usability Coffee | 18. Februar 2015

34. Was ist (mobile) Prototyping?
Vorteile und Nachteile des Prototyping
Mobile Prototyping
Mit Balsamiq
Mit Axure
Auf was achten bei mobile Prototyping?
Mobile Prototyping auch für Hardware
Mobile Prototyp fürs eigene Projekt: Tipps
Literatur
Inhaltsübersicht
| Folie 34soultank AG | Usability Coffee | 18. Februar 2015

35. Beispiel Waschmaschine V-Zug
| Folie 35soultank AG | Usability Coffee | 18. Februar 2015

36. Was ist (mobile) Prototyping?
Vorteile und Nachteile des Prototyping
Mobile Prototyping
Mit Balsamiq
Mit Axure
Auf was achten bei mobile Prototyping?
Mobile Prototyping auch für Hardware
Mobile Prototyp fürs eigene Projekt: Tipps
Literatur
Inhaltsübersicht
| Folie 36soultank AG | Usability Coffee | 18. Februar 2015

37. Gezielt die Seiten prototypen, welche nötig sind um die
offenen Fragen im Usability Test nachher zu klären
Orientieren Sie sich an den Szenarien
Die Szenarien definieren die wichtigsten Aufgaben
Für diese Aufgaben brauchen Sie Screens im Prototypen
Während dem Prototypen werden neue Ideen generiert
Iterative Natur des Entwicklungsprozesses erfahren
Daraus ergeben sich oft weitere Fragestellungen, welche Sie
beantworten möchten
Z.B. Verstehen Benutzer was «Produkte» bedeutet? Wäre
«Haushaltsgeräte» besser?
Mobile Prototyp fürs eigene Projekt: Tipps 1/2
| Folie 37soultank AG | Usability Coffee | 18. Februar 2015

38. Immer mit Zeichnen beginnen. Ist schneller als mit
Software
Profitipp: App «CamScanner» verwenden zum
fotografieren
Prototyp möglichst früh bereits auf Gerät auf welchem
Usability Test gemacht wird anschauen, ob Grösse stimmt
Z.B. Tablet, Smartphone, Desktop-Computer
Mobile Prototyp fürs eigene Projekt: Tipps 2/2
| Folie 38soultank AG | Usability Coffee | 18. Februar 2015

39. Was ist (mobile) Prototyping?
Vorteile und Nachteile des Prototyping
Mobile Prototyping
Mit Balsamiq
Mit Axure
Auf was achten bei mobile Prototyping?
Mobile Prototyping auch für Hardware
Mobile Prototyp fürs eigene Projekt: Tipps
Literatur
Inhaltsübersicht
| Folie 39soultank AG | Usability Coffee | 18. Februar 2015

40. Literatur
40
Carolyn Snyder - Paper Prototyping Todd Zaki Warfel - Prototyping
soultank AG | Usability Coffee | 18. Februar 2015

41. Herzlichen Dank für Ihre Aufmerksamkeit
Bei Fragen stehen wir gerne zur Verfügung

42. Nächste Termine in Zug
Do, 15. April 2015, 07.30-08.30 Uhr
Usability Coffee „Visual Thinking“
http://soultank.ch/content/ueber-uns/events/usability-
coffee-zug/usability-coffee-zug-mi-15-april-2015/
Usability Coffee 2015
| Folie 42soultank AG | Usability Coffee | 18. Februar 2015

43. Team
soultank AG | Usability Coffee | 18. Februar 2015 | Folie 43
soultank AG
Bahnhofplatz
Postfach 4744
6304 Zug
Tel: +41 41 726 50 20
Fax: +41 41 726 50 26
www.soultank.ch
soultank AG
c/o Ostsinn
Bohl 2
9000 St. Gallen
Gaby Surber Monique Andres
Marcel B.F. Uhr Iris Müller Bianca Redel Andreas Bossard
Adrian Lauper Stefanie FriedliSandro Fernandes Matthias Chavanne
Remo Bertschinger Jérome Fischer