mobile protptyping, usability coffee, zug, 19.02.105
TRANSCRIPT
� 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 FriedliUsability Consultant
| Folie 2soultank AG | Usability Coffee | 18. Februar 2015
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
Referenzen soultank AG
soultank AG | Usability Coffee | 18. Februar 2015 | Folie 4
Weitere Referenzen: www.soultank.ch/content/referenzen
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
� 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
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
� 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
� 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
� Ermöglicht produktspezifisches Testing von Fragen, die nicht durch allgemeine Forschungsergebnisse oder Richtlinien beantwortet werden können
� Liefert relativ schnell bedeutungsvolle Rückmeldungenvom 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
� 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
� 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
� 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
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
� Skizzieren von Hand� App: Camscanner Plus
(2CHF)
Prototyp erstellen: von Handfast and easy
| Folie 23soultank AG | Usability Coffee | 18. Februar 2015
� 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
� 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
BalsamiqSchnell, verteilbar und unfertig aussehend
| Folie 26soultank AG | Usability Coffee | 18. Februar 2015
� Als PDF auf dem Smartphone oder Tablet
� Klickbar
� 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
AxureAufwä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 sehr realistisch gemacht werden (Flyoutetc.)
� 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
� 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
� 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
� 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
� 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
� 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
� 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
� 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
� 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
� 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
Literatur
40
Carolyn Snyder - Paper Prototyping Todd Zaki Warfel - Prototyping
soultank AG | Usability Coffee | 18. Februar 2015
Nächste Termine in Zug
� Do, 15. April 2015, 07.30-08.30 UhrUsability 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
Team
soultank AG | Usability Coffee | 18. Februar 2015 | Folie 43
soultank AG
Bahnhofplatz
Postfach 4744
6304 Zug
Tel: +41 41 726 50 20Fax: +41 41 726 50 26www.soultank.ch
soultank AGc/o OstsinnBohl 29000 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