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

Usability coffee-mobile protptyping

Embed Size (px)

Citation preview

Page 1: Usability coffee-mobile protptyping

Mobile Prototyping

Usability Coffee, Zug, 19. Februar 2015

Page 2: Usability coffee-mobile protptyping

� 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

[email protected]

Stefanie FriedliUsability Consultant

| Folie 2soultank AG | Usability Coffee | 18. Februar 2015

Page 3: Usability coffee-mobile protptyping

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

Page 4: Usability coffee-mobile protptyping

Referenzen soultank AG

soultank AG | Usability Coffee | 18. Februar 2015 | Folie 4

Weitere Referenzen: www.soultank.ch/content/referenzen

Page 5: Usability coffee-mobile protptyping

soultank AG | Usability Coffee | 18. Februar 2015 Seite 5

User Centred Design (UCD)

Page 6: Usability coffee-mobile protptyping

soultank AG | Usability Coffee | 18. Februar 2015 Seite 6

User Centred Design (UCD)

Page 7: Usability coffee-mobile protptyping

soultank AG | Usability Coffee | 18. Februar 2015 Seite 7

User Centred Design (UCD)

Page 8: Usability coffee-mobile protptyping

soultank AG | Usability Coffee | 18. Februar 2015 Seite 8

User Centred Design (UCD)

Page 9: Usability coffee-mobile protptyping

soultank AG | Usability Coffee | 18. Februar 2015 Seite 9

User Centred Design (UCD)

Page 10: Usability coffee-mobile protptyping

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

Page 11: Usability coffee-mobile protptyping

� 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

Page 12: Usability coffee-mobile protptyping

12

Verschiedene Arten von Prototyping

1

2

soultank AG | Usability Coffee | 18. Februar 2015

Page 13: Usability coffee-mobile protptyping

13

Verschiedene Arten von Prototyping

3

soultank AG | Usability Coffee | 18. Februar 2015

Page 14: Usability coffee-mobile protptyping

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

Page 15: Usability coffee-mobile protptyping

� 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

Page 16: Usability coffee-mobile protptyping

Wieso Prototyping?

| Folie 16soultank AG | Usability Coffee | 18. Februar 2015

Page 17: Usability coffee-mobile protptyping

� 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

Page 18: Usability coffee-mobile protptyping

� 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

Page 19: Usability coffee-mobile protptyping

� 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

Page 20: Usability coffee-mobile protptyping

� 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

Page 21: Usability coffee-mobile protptyping

� 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

Page 22: Usability coffee-mobile protptyping

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

Page 23: Usability coffee-mobile protptyping

� Skizzieren von Hand� App: Camscanner Plus

(2CHF)

Prototyp erstellen: von Handfast and easy

| Folie 23soultank AG | Usability Coffee | 18. Februar 2015

Page 24: Usability coffee-mobile protptyping

� 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

Page 25: Usability coffee-mobile protptyping

� 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

Page 26: Usability coffee-mobile protptyping

BalsamiqSchnell, verteilbar und unfertig aussehend

| Folie 26soultank AG | Usability Coffee | 18. Februar 2015

� Als PDF auf dem Smartphone oder Tablet

� Klickbar

Page 27: Usability coffee-mobile protptyping

� 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

Page 28: Usability coffee-mobile protptyping

AxureAufwändiger, mächtiger und verteilbar

| Folie 28soultank AG | Usability Coffee | 18. Februar 2015

Page 29: Usability coffee-mobile protptyping

� 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

Page 30: Usability coffee-mobile protptyping

� 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

Page 31: Usability coffee-mobile protptyping

� 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

Page 32: Usability coffee-mobile protptyping

� 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

Page 33: Usability coffee-mobile protptyping

� 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

Page 34: Usability coffee-mobile protptyping

� 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

Page 35: Usability coffee-mobile protptyping

Beispiel Waschmaschine V-Zug

| Folie 35soultank AG | Usability Coffee | 18. Februar 2015

Page 36: Usability coffee-mobile protptyping

� 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

Page 37: Usability coffee-mobile protptyping

� 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

Page 38: Usability coffee-mobile protptyping

� 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

Page 39: Usability coffee-mobile protptyping

� 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

Page 40: Usability coffee-mobile protptyping

Literatur

40

Carolyn Snyder - Paper Prototyping Todd Zaki Warfel - Prototyping

soultank AG | Usability Coffee | 18. Februar 2015

Page 41: Usability coffee-mobile protptyping

Herzlichen Dank für Ihre Aufmerksamkeit

Bei Fragen stehen wir gerne zur Verfügung

Page 42: Usability coffee-mobile protptyping

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

Page 43: Usability coffee-mobile protptyping

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