Usability coffee-mobile protptyping

Mobile Prototyping

Usability Coffee, Zug, 19. Februar 2015

� 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 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 5

User Centred Design (UCD)

� 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

Verschiedene Arten von Prototyping

Definition "Prototyp"

1. Nutzungs-kontext-analyse

2. Anforderungs-spezifikation

3. Entwicklung Prototypen

4. Evaluation Prototypen

intuitiv zu bedienendes Produkt

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

� 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

Einsatzgebiet von Prototypen

Quelle: Christian Hübscher, 2007

Wieso Prototyping?

� Literatur

Inhaltsübersicht

� 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

Vorteile des Prototyping

� 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

� 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)

Nachteile des Prototyping

� Literatur

Inhaltsübersicht

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

� Skizzieren von Hand� App: Camscanner Plus

(2CHF)

Prototyp erstellen: von Handfast and easy

� 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

� 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

BalsamiqSchnell, verteilbar und unfertig aussehend

� 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

Balsamiq Mockups

AxureAufwändiger, mächtiger und verteilbar

� 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

Axure: Vorteile

� Nachteile:� HTML kann/sollte nicht weiterverwendet werden

� Kein „Design-Tool“ zum z.B. schöneabgerundete Buttons zu gestalten (wie Visio, Photoshop)

Axure: Nachteile

� Literatur

Inhaltsübersicht

� 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

� 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

� Literatur

Inhaltsübersicht

Beispiel Waschmaschine V-Zug

� Literatur

Inhaltsübersicht

� 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

� 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

� Literatur

Inhaltsübersicht

Literatur

Carolyn Snyder - Paper Prototyping Todd Zaki Warfel - Prototyping

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 UhrUsability Coffee „Visual Thinking“

http://soultank.ch/content/ueber-uns/events/usability-coffee-zug/usability-coffee-zug-mi-15-april-2015/

Usability Coffee 2015

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

Usability coffee-mobile protptyping

Mobile

Wie messe ich den Erfolg eines Redesigns? - Vorher-Nachher-Befragung vs. Conversion Rate, Usability Coffee, Zug, 20.05.2015

[Mobile Usability Study] Tablet-Nutzer auf Shopping-Tour in Mode-Webshops

Diplomlehrgang Design & Narration...Storytelling für die Zukunft: mobile, locative, personal. User Experience UX und Usability Entdeckungsreise auf den Spuren von User Experience

"Texten fürs Web", Usability Coffee, Zug, 22.01.2015

Usability Im Mobile Web

HCI 15 Einführung in die Mobile Usability - schmiedecke · 2018-01-02 · Einführung in die Mobile Usability … am Beispiel der Android UX . Quelle: ... •Apps -unbegrenzte Möglichkeiten

Do's und Dont's bei Online-Formularen, Usability Coffee, Zug und St.Gallen

Usability vs. User experience?ubicomp/... · Agenda •Motivation •Usability •User experience •Umsetzung •Ausblick •Fazit 14.01.2010 Usability vs. User experience? | Torsten

Usability Benchmark und Aktivitäts-Analyse mit Eye Tracking von Mobile Augmented Reality unterstützten Ernährungsempfehlungen

[Mobile Usability Testing] Zahlen, Daten, Fakten Mobil - World Usability Day 2013

Usability Engineering VU Einheit 1-2 „Methoden des Usability Engineering“

Dank Storytelling zum erfolgreichen Produkt. Warum Use Cases im Projekt nicht ausreichen. Usability Coffee, St.Gallen, 18.09.2014

Usability-Testing BildungsWikiwiki.bildungsserver.de/bilder/upload/Usability-Testing_BildungsWiki.pdf · Karlsruhe, 04.02.09 | Anke Reinhold | Learntec | Usability-Testing BildungsWiki

Die mobile Zukunft. Neuheiten und aktuelle Trends rund um mobile Endgeräte und Usability

The Usability / UX Profession Berufsfeld Usability · The Usability Professionals. Compared to others, the profession ‘Usability Profession-al’ is still a very young one. In fact,

Usability Engineering

Scrum und User Centered Design – wie geht das?, Usability Coffee, Bern, 12.04.2016

Coffee Machine

Mobile Usability · 2014-12-12 · Lothar Mühlbach: Mobile Usability / Statements zum Panel „Gelingt Brückenschlag?“ Unterschiedliche Anforderungen und Randbedingungen • Viele

The Usability / UX Profession - Berufsfeld Usability