In diesem Vortrag gebe ich einen groben Überblick über Anforderungsquellen, sowie Arten, Eigenschaften und Vor- & Nachteile von verschiedenen Methoden und Tools zum Wireframing/Prototyping.
Gehalten wurde dieser Vortrag am World Usability Day 2013 in Stuttgart.
4. Woher kommen
die Anforderungen?
Welche Eigenschaften
haben die Methoden und
Tools?
4
Welche Arten von Methoden
und Tools gibt es?
Welche Vor- und Nachteile
haben die Methoden und
Tools in der Praxis?
11. Anforderungen
Woher kommen die Anforderungen?
Agentur
Kunde
Dienstleister
Prozesse
Weitere
Spezifika
Projekt
11
****
***
**
*
Priorisierte
Anforderungen
14. Arten von Methoden und Tools
Beschreibungen und abstrakte Daten
Content-Matrix
Sitemap
Mindmap
Text-Spezifikation
14
Bildquellen: Eigene Entwürfe
15. Arten von Methoden und Tools
Statische Prototypen
Paper Prototype
Designscreen
Skizzen
15
Bildquellen:
http://wireframes.linowski.ca/2011/08/3-ideas-for-capturing-feedback/
http://dribbble.com/shots/782399-Blueprint-Wireframe
16. Arten von Methoden und Tools
Dynamische Prototypen (analog)
Papier Origami
Papier Module
16
Bildquellen:
http://wireframes.linowski.ca/2009/04/engaging-paper-wireframe/
http://www.fastcodesign.com/1669513/using-origami-to-mock-up-ingenious-gestural-interfaces
17. Arten von Methoden und Tools
Dynamische Prototypen (digital)
Frontend-Programmierung
Klickdummies
17
Bildquellen:
Eigene Entwürfe
http://blocks.eightshapes.com/about/
18. Arten von Methoden und Tools
Mischformen
Stop-Frame
Animation
Video
Post it
18
Bildquellen: http://wireframes.linowski.ca/2009/12/rigged-paper-prototype-animations/
20. Eigenschaften von Methoden und Tools
Form
Analog
Wireframe
Digital
Statisch
Screendesign
Dynamisch
Wegwerf-Produkt End-Produkt
Überblick
Platzhalter
Realer Content
Low Fidelity
Form
Funktion
Beschränkt
20
Bildquellen:
Detail
Erweiterbar
High Fidelity
21. Eigenschaften von Methoden und Tools
Abstimmung und Technik
Fremde Server
Eigene Server
Intern
Extern
Steile Lernkurve Flache Lernkurve
Keine Doku
Dokumentiert
Keine Bearbeit.
Spezifische OS
Keine Notizen
Alle OS
Notiz-Funktion
Kein Feedback
21
Bildquellen:
Bearbeitbar
Feedback-Funkt.
23. Vor- und Nachteile von Methoden und Tools
#1: Skribbles und Paper Prototype
23
24. Vor- und Nachteile von Methoden und Tools
#1: Skribbles und Paper Prototype
VORTEILE
NACHTEILE
― Flache bis mittlere Lernkurve
― Form frei wählbar
― Statisch oder modular
― Keine digitale Dokumentation
― Änderungen bei statischen
― Geeignet für Tests in der
Research-Phase
― Geeignet für Usability Tests
24
Skribbles schwierig
― Wegwerf-Produkt
26. Vor- und Nachteile von Methoden und Tools
#2: PowerPoint
VORTEILE
NACHTEILE
― Flache Lernkurve
― Weit verbreitetes Tool
― Viele Plugins für Wireframe-
― Begrenzung auf festes Format
― Änderungen zeitraubend trotz
Elemente vorhanden
― Mischung der Inhalten möglich
― Statisch, bedingt dynamisch
― Format zum Ausdrucken
geeignet
26
Masterfolien
― Darstellung von Interaktionen
und Zuständen schwierig
― Keine reale Experience im
Browser
― Wegwerf-Produkt
30. Vor- und Nachteile von Methoden und Tools
#4: Programmierung
VORTEILE
NACHTEILE
― Viele Code-Snippets und
― Steile Lernkurve
― Programmierkenntnisse bei
Plugins vorhanden
― Direkte Prüfung der
Umsetzbarkeit
― Kein Wegwerf-Produkt
Konzeptern und Designern
notwendig
― Übertragungsleistung von
Code zum grafischen UI
notwendig
― Im Voraus Strategie- und
Konzeptionsphase für
Gesamtkonzept notwendig
30
32. Eigenschaften von ausgewählten Methoden und Tools
#1: Skribbles und Paper Prototype
Analog
Spezifische OS
Alle OS
Form
Funktion
Fremde Server
Eigene Server
Statisch
Dynamisch
Steile Lernkurve
Flache
Lernkurve
Low Fidelity
High Fidelity
Keine Bearbeit.
Bearbeitbar
Keine Notizen
Notiz-Funktion
Kein Feedback
FeedbackFunktion
WegwerfProdukt
32
Digital
End-Produkt
Keine Doku
Dokumentiert
33. Eigenschaften von ausgewählten Methoden und Tools
#2: PowerPoint
Analog
Spezifische OS
Alle OS
Form
Funktion
Fremde Server
Eigene Server
Statisch
Dynamisch
Steile Lernkurve
Flache
Lernkurve
Low Fidelity
High Fidelity
Keine Bearbeit.
Bearbeitbar
Keine Notizen
Notiz-Funktion
Kein Feedback
FeedbackFunktion
WegwerfProdukt
33
Digital
End-Produkt
Keine Doku
Dokumentiert
34. Eigenschaften von ausgewählten Methoden und Tools
#3: Axure
Analog
Spezifische OS
Alle OS
Form
Funktion
Fremde Server
Eigene Server
Statisch
Dynamisch
Steile Lernkurve
Flache
Lernkurve
Low Fidelity
High Fidelity
Keine Bearbeit.
Bearbeitbar
Keine Notizen
Notiz-Funktion
Kein Feedback
FeedbackFunktion
WegwerfProdukt
34
Digital
End-Produkt
Keine Doku
Dokumentiert
35. Eigenschaften von ausgewählten Methoden und Tools
#4: Programmierung
Analog
Spezifische OS
Alle OS
Form
Funktion
Fremde Server
Eigene Server
Statisch
Dynamisch
Steile Lernkurve
Flache
Lernkurve
Low Fidelity
High Fidelity
Keine Bearbeit.
Bearbeitbar
Keine Notizen
Notiz-Funktion
Kein Feedback
FeedbackFunktion
WegwerfProdukt
35
Digital
End-Produkt
Keine Doku
Dokumentiert
36. Wo kann ich mich
über Methoden und
Tools informieren?
36
37. Starter-Paket
Hier ein Starter-Paket an Links zum Thema
Prototyping-Methoden und Tools.
― The messy art of UX sketching
― PowerPoint
― Axure
― Wireframing: Tips, Tools, and Techniques Part 1 + Part 2
― Ultimate Guide to Website Wireframing
― Wireframing Techniques for a Peaceful Development Process
― 35 Excellent Wireframing Resources
― Alphabetical list of GUI prototyping tools
― 10 Wireframing and Prototyping Tools for 2013
― Designer’s Toolkit: Road Testing Prototype Tools
― 22 Good Prototype and Wireframe Tools for Mobile and Web Design
― Die besten Prototyping-Tools für Websites und Apps
37
38. Evolution never stops
Bassier, Bergmann & Kindler
Customer Experience Specialists Ludwigsburg GmbH
Lena Körpe
Senior Concept Developer
Rheinlandstr. 11, D-71636 Ludwigsburg
T +49 (0) 7141 643 86 - 42
F +49 (0) 7141 643 86 - 66
Lena.Koerpe@bb-k.com
www.bb-k.com
38
Alle Angaben basieren auf dem derzeitigen Kenntnisstand. Änderungen vorbehalten. Dieses Dokument
der Bassier, Bergmann & Kindler Customer Experience Specialists Ludwigsburg GmbH ist ausschließlich
für den Adressaten bzw. Auftraggeber bestimmt. Es bleibt bis zur einer ausdrücklichen Übertragung von
Nutzungsrechten Eigentum der Agentur. Jede Bearbeitung, Verwertung, Vervielfältigung und/oder
gewerbsmäßige Verbreitung des Werkes ist nur mit Einverständnis der Agentur zulässig.
All content is based on the current state of communication. Subject to change. This document of Bassier,
Bergmann & Kindler Customer Experience Specialists Ludwigsburg GmbH is only intended for the client.
It belongs to the agency until its explicit transfer of usage rights. Any adaptation, utilization, copy and/or
professional spreading has to be approved by the agency.