Mobile Prototyping
Usability Coffee, Zug, 19. Februar 2015
Usability Erfahrung seit 2013
Bachelor Thesis zum Thema Usability Tests
und Testleitereffekt
Studium:
Pädagogische Hochsch...
soultank AG | Usability Coffee | 18. Februar 2015
Wissenschaftlich fundiertes Beratungsunternehmen
Seit 1996 im Bereich Us...
Referenzen soultank AG
soultank AG | Usability Coffee | 18. Februar 2015 | Folie 4
Weitere Referenzen: www.soultank.ch/con...
soultank AG | Usability Coffee | 18. Februar 2015 Seite 5
User Centred Design (UCD)
soultank AG | Usability Coffee | 18. Februar 2015 Seite 6
User Centred Design (UCD)
soultank AG | Usability Coffee | 18. Februar 2015 Seite 7
User Centred Design (UCD)
soultank AG | Usability Coffee | 18. Februar 2015 Seite 8
User Centred Design (UCD)
soultank AG | Usability Coffee | 18. Februar 2015 Seite 9
User Centred Design (UCD)
soultank AG | Usability Coffee | 18. Februar 2015 Seite 10
Wenn immer möglich, baue früh einen Prototypen
Was ist das Ziel...
Was ist (mobile) Prototyping?
Vorteile und Nachteile des Prototyping
Mobile Prototyping
Mit Balsamiq
Mit Axure
Auf was ach...
12
Verschiedene Arten von Prototyping
1
2
soultank AG | Usability Coffee | 18. Februar 2015
13
Verschiedene Arten von Prototyping
3
soultank AG | Usability Coffee | 18. Februar 2015
14
Definition "Prototyp"
1.
Nutzungs-
kontext-
analyse
2.
Anforderungs-
spezifikation
3. Entwicklung
Prototypen
4.
Evaluat...
Visualisieren von Anforderungen
Diskutieren von Design-Lösungen im Projekt
Evaluieren von Design-Lösungen mit Benutzern
Ve...
Wieso Prototyping?
| Folie 16soultank AG | Usability Coffee | 18. Februar 2015
Was ist (mobile) Prototyping?
Vorteile und Nachteile des Prototyping
Mobile Prototyping
Mit Balsamiq
Mit Axure
Auf was ach...
Ermöglicht produktspezifisches Testing von Fragen, die
nicht durch allgemeine Forschungsergebnisse oder
Richtlinien beantw...
Reduziert Missverständnisse
Geht tiefer als Bilder oder Skizzen (zeigen und erzählen) →
lässt einem das Design erleben
Bes...
Begrenzungen und Randbedingungen, auf die das reale
Produkt trifft, werden oft während des Prototyping zu stark
vernachläs...
Was ist (mobile) Prototyping?
Vorteile und Nachteile des Prototyping
Mobile Prototyping
Mit Balsamiq
Mit Axure
Auf was ach...
Welches Tool?
Wichtigste Frage:
Was ist mein Ziel?
Welche Frage will ich beantworten?
Idee überprüfen? Lo-Fi
Benennung & F...
Skizzieren von Hand
App: Camscanner Plus
(2CHF)
Prototyp erstellen: von Hand
fast and easy
| Folie 23soultank AG | Usabili...
Papier, Bleistift, Post-it etc.
Mit kleben, kopieren
kombinierbar
Whiteboard
Anderes
Präsentationsmaterial
Vorteile: schne...
Büro-/Grafik Software
Spezialisierte Prototyping-
Applikationen
Entwicklungs-Umgebungen
Vorteile: Änderungen und Variation...
Balsamiq
Schnell, verteilbar und unfertig aussehend
| Folie 26soultank AG | Usability Coffee | 18. Februar 2015
Als PDF au...
Vorteile:
Sieht unfertig aus (wie bei Paper & Pencil)
Elektronisch und darum verteilbar
PDF auf Tablet oder Smartphone lau...
Axure
Aufwändiger, mächtiger und verteilbar
| Folie 28soultank AG | Usability Coffee | 18. Februar 2015
Vorteile:
Per Mausklick gibt es einen HTML-Prototypen
Auch auf Tablets und Mobiltelefonen einsetzbar
Interaktionen können ...
Nachteile:
HTML kann/sollte nicht weiterverwendet werden
Kein „Design-Tool“ zum z.B. schöneabgerundete Buttons zu
gestalte...
Was ist (mobile) Prototyping?
Vorteile und Nachteile des Prototyping
Mobile Prototyping
Mit Balsamiq
Mit Axure
Auf was ach...
Den Prototyp möglichst früh auf dem Zielgerät
(Smartphone oder Tablet) anschauen
Gründe:
Probleme mit der Darstellung (z.B...
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 ...
Was ist (mobile) Prototyping?
Vorteile und Nachteile des Prototyping
Mobile Prototyping
Mit Balsamiq
Mit Axure
Auf was ach...
Beispiel Waschmaschine V-Zug
| Folie 35soultank AG | Usability Coffee | 18. Februar 2015
Was ist (mobile) Prototyping?
Vorteile und Nachteile des Prototyping
Mobile Prototyping
Mit Balsamiq
Mit Axure
Auf was ach...
Gezielt die Seiten prototypen, welche nötig sind um die
offenen Fragen im Usability Test nachher zu klären
Orientieren Sie...
Immer mit Zeichnen beginnen. Ist schneller als mit
Software
Profitipp: App «CamScanner» verwenden zum
fotografieren
Protot...
Was ist (mobile) Prototyping?
Vorteile und Nachteile des Prototyping
Mobile Prototyping
Mit Balsamiq
Mit Axure
Auf was ach...
Literatur
40
Carolyn Snyder - Paper Prototyping Todd Zaki Warfel - Prototyping
soultank AG | Usability Coffee | 18. Februa...
Herzlichen Dank für Ihre Aufmerksamkeit
Bei Fragen stehen wir gerne zur Verfügung
Nächste Termine in Zug
Do, 15. April 2015, 07.30-08.30 Uhr
Usability Coffee „Visual Thinking“
http://soultank.ch/content/u...
Team
soultank AG | Usability Coffee | 18. Februar 2015 | Folie 43
soultank AG
Bahnhofplatz
Postfach 4744
6304 Zug
Tel: +41...
Nächste SlideShare
Wird geladen in …5
×

Usability coffee-mobile protptyping

427 Aufrufe

Veröffentlicht am

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. .

Veröffentlicht in: Mobil
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
427
Auf SlideShare
0
Aus Einbettungen
0
Anzahl an Einbettungen
4
Aktionen
Geteilt
0
Downloads
4
Kommentare
0
Gefällt mir
0
Einbettungen 0
Keine Einbettungen

Keine Notizen für die Folie

Usability coffee-mobile protptyping

  1. 1. Mobile Prototyping Usability Coffee, Zug, 19. Februar 2015
  2. 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. 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. 4. Referenzen soultank AG soultank AG | Usability Coffee | 18. Februar 2015 | Folie 4 Weitere Referenzen: www.soultank.ch/content/referenzen
  5. 5. soultank AG | Usability Coffee | 18. Februar 2015 Seite 5 User Centred Design (UCD)
  6. 6. soultank AG | Usability Coffee | 18. Februar 2015 Seite 6 User Centred Design (UCD)
  7. 7. soultank AG | Usability Coffee | 18. Februar 2015 Seite 7 User Centred Design (UCD)
  8. 8. soultank AG | Usability Coffee | 18. Februar 2015 Seite 8 User Centred Design (UCD)
  9. 9. soultank AG | Usability Coffee | 18. Februar 2015 Seite 9 User Centred Design (UCD)
  10. 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. 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. 12 Verschiedene Arten von Prototyping 1 2 soultank AG | Usability Coffee | 18. Februar 2015
  13. 13. 13 Verschiedene Arten von Prototyping 3 soultank AG | Usability Coffee | 18. Februar 2015
  14. 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. 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. 16. Wieso Prototyping? | Folie 16soultank AG | Usability Coffee | 18. Februar 2015
  17. 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. 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. 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. 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. 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. 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. 23. Skizzieren von Hand App: Camscanner Plus (2CHF) Prototyp erstellen: von Hand fast and easy | Folie 23soultank AG | Usability Coffee | 18. Februar 2015
  24. 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. 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. 26. Balsamiq Schnell, verteilbar und unfertig aussehend | Folie 26soultank AG | Usability Coffee | 18. Februar 2015 Als PDF auf dem Smartphone oder Tablet Klickbar
  27. 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. 28. Axure Aufwändiger, mächtiger und verteilbar | Folie 28soultank AG | Usability Coffee | 18. Februar 2015
  29. 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. 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. 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. 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. 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. 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. 35. Beispiel Waschmaschine V-Zug | Folie 35soultank AG | Usability Coffee | 18. Februar 2015
  36. 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. 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. 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. 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. 40. Literatur 40 Carolyn Snyder - Paper Prototyping Todd Zaki Warfel - Prototyping soultank AG | Usability Coffee | 18. Februar 2015
  41. 41. Herzlichen Dank für Ihre Aufmerksamkeit Bei Fragen stehen wir gerne zur Verfügung
  42. 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. 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

×