Paper Prototyping / 2019-01-12 / © Matthias Edler-Golla


|



 



Matthias Edler-Golla

Prof. für Web & Interaction Design an der Hochschule München
matthias.edler-golla@hm.edu


Und wer sind Sie?

… bitte nur ganz kurz vorstellen …


Gebrauchsanweisung meiner Scripte

… die Taste „Null“ (0) ruft den 1. Slide der Präsentation auf …

Responsive Design

Meine Scripte können auf fast allen modernen, Internet-fähigen Geräten angeschaut werden.

Probiert es doch mal auf Eurem Smartphone oder Tablet aus! Dort gibt es sogar waagrechte Wischgesten.


Themen heute

Vormittags

  • Mentale Modelle
  • User- bzw. Human Centered Design
  • Stakeholder im UX-Design-Prozess
  • Definition Software-Prototyp
  • Participatory Design
  • Paper Prototyping
  • Personas, Szenarios, Storyboards
  • Brainstorming im Team

Nachmittags

  • Ten Usability Heuristics
  • Gestaltgesetze
  • Fitt's Law, Hick's Law, Murphy's Law
  • Designing for Touch
  • Pop, Marvel & Invision
  • Ausarbeiten der Konzepte/Ideen im Team

Die Tür

Wie sieht für Sie eine typische Tür aus? Was sind die wichtigsten Elemente und wo befinden sich diese?

Skizzieren Sie diese bitte auf ein Post-it!


Eine kurze Geschichte …

… die erstaunlich viel mit „User Experience“ zu tun hat!


Deutsche Bahn, Behindertentoilette: Eingangssituation


Behindertentoilette: Türdetail, außen


Behindertentoilette: Blick hinein


Behindertentoilette: Blick hinaus


Behindertentoilette: Blick hinaus (2)


Behindertentoilette: Tür zu?


Was ging da schief?


Bad doors are everywhere

https://www.youtube.com/watch?v=yY96hTb8WgI

Don Norman started complaining about doors over 25 years ago. Doors shouldn't need instructions – the shape of them can guide you through just fine. So why do so many doors need instruction manuals right on the side of them?

Don Norman hat ein sehr empfehlenswertes Buch geschrieben, das jede(r) Designer*in gelesen haben sollte: The Design of Everyday Things


Wichtigste UX-Regel

stupid von Laura Lewis

Don't make the user feel stupid!


Unser Mentales Modell „Tür“ ist anders!

Mental models come from prior experience with similar devices, assumptions they have, and also from their direct experience with the product or device.


Mentale Modelle

A mental model is the representation that a person has in his mind about the object he is interacting with.

Video mit weiteren Erklärungen dazu – bitte anschauen!

Coursera: Mental Models


Konzeptionelles Modell [1]

iDrive von Benjamin Kraft

A conceptual model is the actual model that is given to the person through the design and interface of the actual product.

Als Designer realisieren wir Konzeptionelle Modelle und hoffen, dass diese den Mentalen Modellen der Benutzer entsprechen …


Konzeptionelles Modell [2]

Segway-the-City von Jon

Das Segway entspricht keinem Mentalen Modell, wie ein Verkehrsmittel auszusehen hat – und wird deswegen kaum angenommen …


Mismatch of Models

Flashing-Fog-Lights von calians.sevan, Red Beetle von Mishari Alreshaid

… if there is a mismatch between the person’s mental model and the product’s conceptual model, then the product or Web site will be hard to learn, hard to use, or not accepted.


User-centered design: Für wen entwerfen wir?

Crowd: Foto von davidChief

User-centered design zielt darauf ab, Produkte so zu gestalten, dass sie über eine hohe Gebrauchstauglichkeit (Usability) verfügen. Der (zukünftige) Nutzer eines Produktes wird dazu in den Mittelpunkt des Entwicklungsprozesses gestellt.

Ich benutze eigentlich noch lieber den Begriff Human Centered Design!


Was ist Human Centered Design?

http://www.designkit.org/

Human-centered design is a creative approach to problem solving and the backbone of our work at IDEO.org. It’s a process that starts with the people you’re designing for and ends with new solutions that are tailor made to suit their needs.


Human Centered Design

Wir fangen bei den Wünschen und Bedürfnissen der Menschen an – erst dann kommen die Überlegungen zur Herstellbarkeit…


Design Thinking

Design Thinking basiert auf der Annahme, dass Probleme besser gelöst werden können, wenn Menschen unterschiedlicher Disziplinen in einem die Kreativität fördernden Umfeld zusammenarbeiten, gemeinsam eine Fragestellung entwickeln, die Bedürfnisse und Motivationen von Menschen berücksichtigen und dann Konzepte entwickeln, die mehrfach geprüft werden.

Eine gute Zusammenfassung, was Design Thinking alles umfasst, finden Sie bei Wikipedia!


UX (User Experience) Design

Illustration von WitFlow

Der Begriff User Experience (Abkürzung UX, deutsch „Nutzererlebnis“) umschreibt alle Aspekte der Erfahrungen eines Nutzers bei der Interaktion mit einem Produkt, Dienst, Umgebung oder Einrichtung.


Elements of User Experience (UX)

Grafik von Jesse James Garret

Eine Software-Applikation (oder Website) muss von unten nach oben entwickelt werden!

  1. Wozu benötigen die Benutzer das Programm?
  2. Was soll die Applikation können?
  3. Welche inhaltlichen und funktionalen Anforderungen müssen eingehalten werden?
  4. Wie spielen Information Architecture und Interaction Design zusammen?
  5. Wie ist das Information Design strukturiert?
  6. Und – ganz am Schluss – wie sieht das Visuelle Design aus?

Stakeholder bei UX

Bild von PopTech

Für ein erfolgreiches, gut durchdachtes Projekt müssen alle Stakeholder von Anfang an an einen Tisch geholt werden!


Typische Stakeholder in der Produktentwicklung

Firmenchef, Marketing-Leiter, Auftraggeber

  • will (natürlich) Erfolg am Markt
  • möchte kurze Entwicklungszeiten
  • fordert überschaubare Kosten (auch bei Weiterentwicklung und Pflege)
  • kennt Konkurrenz-Produkte (Gefahr von „Me-too-Ideen“)

Entwickler/Programmierer

  • will soliden, einfach pflegbaren Code schreiben
  • nutzt gerne „Frameworks“, um auf Standardlösungen zugreifen zu können
  • möchte so arbeiten, dass der Code möglichst „Maschinen-optimiert“ funktioniert
  • mag keine Sonderfälle („DRY“ – Don't repeat yourself)
  • hat gerne alle Features unmittelbar sichtbar

Designer/Usability Experte

  • mag keine „08/15“-Lösungen – und entwirft häufig außerhalb der Möglichkeiten des Frameworks
  • reduziert Inhalte auf das Wesentliche – und will deswegen u.U. Features weglassen
  • ist mehr an einer guten Benutzerführung als am maschinenoptimierten Code interessiert
  • will mehr als nur „Me-too-Produkte“ entwerfen

Wann ist es zu spät, dass Stakeholder miteinander reden?

So nicht – es geht viel zu viel Wissen verloren!

Es macht keinen Sinn, wenn nur eine Gruppe von Experten das Projekt bestimmt…


Wann sollen die Stakeholder miteinander reden & arbeiten?

Immer wieder, von Anfang an!

Im Sinne des Agilen Developement sollten die Zyklen eher kurz sein…


Wie versteht man, was der andere meint?

Durch das gemeinsame Entwickeln eines (einfachen) Prototypen können unmittelbar die Ideen aller beteiligten Parteien deutlich gemacht werden.


Definition: Prototyp

A-gift-from-Hannah by jeanbaptisteparis

Vorab-Exemplar, erste Ausführung eines Produktes vor der Serienfertigung, das zur Erprobung von Eigenschaften dient.


Vier Dimensionen eines Software-Prototypen (1)

Breite

Wie viel der tatsächlichen Funktionalität wird im Prototypen dargestellt? Für einen sinnvollen Usability Test muss der Prototyp ausreichend „Breite“ haben, damit vernünftige Test-Ergebnisse herauskommen.

aus: Paper Prototyping, Position 2795ff


Vier Dimensionen eines Software-Prototypen (2)

Tiefe

Ist vielleicht der wichtigste Faktor beim Usability Test, weil eine ausreichende Tiefe dem User das Ausprobieren ermöglicht. Tiefe bedeutet hierbei, dass der Benutzer nicht nur eine Auswahlmöglichkeit hat und eben auch nicht nur ein Auswahlpfad zum gewünschten Ziel führt.

aus: Paper Prototyping, Position 2795ff


Vier Dimensionen eines Software-Prototypen (3)

Aussehen

Bezieht sich auf die Visuellen Aspekte des Prototypen (Farben, Schriften, Grafiken, Raster usw.)

aus: Paper Prototyping, Position 2795ff


Vier Dimensionen eines Software-Prototypen (4)

Interaction

Wie reagiert der Prototyp? Ist das Verhalten mit dem Verhalten mit dem fertigen Produkt vergleichbar? Werden die gleichen Interface-Elemente (Mouse, Tastatur, Touchscreen … ) verwendet, wie später beim „echten“ Produkt?

aus: Paper Prototyping, Position 2795ff


Prototyping-Sequenz

… es gibt noch viele weitere Arten von Software-Prototypen

Umso konkreter das Interface wird, desto aufwendiger werden die Prototypen – und desto schwieriger wird es, grundsätzliche Änderungen zu machen!

… aus diese Grund sollten schon möglichst viele Interface- und Bedienvarianten bei den Papier-Prototypen getestet werden! Da ist der Aufwand am geringsten…


Iterative Design-Entwicklung

Egal, welche Art von Prototypen Sie erstellen:
Testen Sie Ihre Ideen immer mit mindestens 4 – 5 potentiellen BenutzerInnen!


Designmodell vs. Prototyp

Diplomarbeit „Stehgerät“ von Daniel Gilgen & Matthias Edler-Golla

Ein Designmodell hat seinen Schwerpunkt auf dem Aussehen, die Dimensionen Breite, Tiefe und Interaction können daran nur sehr eingeschränkt überprüft werden!


Rough-looking Prototype

mintyboost von ladyada

A rough-looking prototype can encourage users and other stakeholders to respond in a more creative manner.

Paper Prototyping, Position 2815


Low Fidelity vs. High Fidelity

Especially in the early stages of a project, you might deliberately choose a prototyping method with a rough look to get the benefit of honest user feedback

Paper Prototyping, Position 2815


Participatory Design

EFEU Paper Prototyping 2011

Participatory design is an approach to design attempting to actively involve all stakeholders in the design process

Wie bringt man Stakeholder dazu, miteinander zu reden & zu entwerfen?


Tom Wujec: Verzwickte Probleme lösen – Wie toasten Sie eigentlich Ihr Brot?

Eine Scheibe Brot zu toasten scheint nicht besonders schwer zu sein – bis man gebeten wird, den Vorgang Schritt für Schritt aufzuzeichnen. Tom Wujec fragt die Menschen gerne, wie sie Toast machen, da dies unverhoffte Hinweise darauf gibt, wie man die kompliziertesten Probleme lösen kann.


Paper Prototyping in der Brainstorming Phase

Paper Prototype von Samuel Mann

It's probably most accurate to describe paper prototyping as a subset of participatory design

Paper Prototyping, Position 294


Paper Prototyping zur Reduktion von Komplexität

SimplePocket-WireFrames von fguillen

By sketching first you allow yourself time to really focus on the idea you need in a rough enough stage to not get hung up on things like imagery and color usage and kerning


Zwei Stufen von Papier-Prototypen (1)

Freshdesk-sketch-4 von Yandle

1. Stufe: Papier-Prototyp zum gemeinsamen Brainstorming:

  • Umfang/Funktionalität
  • Wording
  • Informations-Architektur
  • Grob-Layout
  • Experimente zu Leserichtung & Bedienabläufen

Zwei Stufen von Papier-Prototypen (2)

Paper-based-prototyping-1 von Samuel Mann

2. Stufe:

Produktion von ausreichend Screen-Material als Vorbereitung für das User Testing


Benötigte Materialien zum Erstellen des Papier Prototypen

  • Schneideunterlage und -Lineal (wenn man mit Skalpell/Cutter arbeiten möchte)
  • Schere
  • Reichlich Papier
  • Post-It® Notes in verschiedenen Größen und Farben
  • Tesa-Film
  • Doppelseitige Klebepads
  • Karteikarten
  • Fixogum o.ä. (Klebeverbindung soll wieder getrennt werden können)
  • Korrekturband
  • diverse, nicht zu dünne Filzstifte
  • evtl. vorgefertigte Templates (Browser, Hardware-Proportionen usw.)

Paper Prototyping: A How-To Video (1)

$ 68.- // Bezug über die Nielsen Norman Group

  1. Erstellen von Papier-Prototypen mit einfachen Mitteln: 2.10 bis 5.26
  2. Interface Widgets und Interaction: 5.40 bis 9:55

Rollenverteilung

Paper-based-prototyping von Samuel Mann

Beim Testen mit Papier-Prototypen sind mindestens 3 Personen notwendig:

  1. Der Computer – gibt der Testperson jeweils den richtigen „Screen“
  2. Der Beobachter/Moderator – bringt die Testperson u.a. dazu, laut zu denken, beobachtet, dokumentiert und befragt
  3. Die Testperson – sollte die geforderte Zielgruppe präsentieren

Zusätzlich kann man jemanden dazu beauftragen, den Test zu filmen


Paper Prototyping: A How-To Video (2)

$ 68.- // Bezug über die Nielsen Norman Group

  1. Testing Low Fidelity Website: 9:55 bis 21.24
  2. Testing Hardware-Based Interactions: 29:30 bis Ende

Vorbereitung Paper Prototyping User-Test

Wenn man unsicher ist, welche Bedienvariante die sinnvollste ist, sollte man mehrere Varianten erstellen und diese dann bei den User-Tests überprüfen …

Task Design

Welche Aufgaben soll die Test-Person bekommen?

Test Material

Alle den Tasks entsprechende „Screens“und Interface-Widgets müssen vorbereitet werden.

Rollenverteilung

Wer spielt den Computer, die Moderatorin, die Testperson?

Testablauf

In welcher Reihenfolge soll getestet werden?


Paper Prototyping: Der Artikel

http://www.alistapart.com/articles/paperprototyping/

Paper prototypes invite people with little-to-no technical background into the design process


Paper Prototyping: Das Buch

http://www.paperprototyping.com/ von Carolyn Snyder

... a wonderful book with all the practical information you need to make paper prototypes ...

Jakob Nielsen, Principal, Nielsen Norman Group


Paper Prototyping: Druckvorlagen


Zielgruppen, Personas, Szenarios & Storyboards

Celtic-Tiger aus National Library of Ireland

Bevor man versucht, irgendeine Art von Prototypen zu erstellen, sollte man mittels Personas, Szenarios und Storyboards eine konkrete Vorstellung davon haben, für wen man etwas entwickelt!


Zielgruppe = graue Masse?

Foto von State Library of New South Wales

Empathy, Einfühlen und Entwerfen für eine „graue Masse“ ist schwer!


Personas

Iowa City von Alan Light

Die Persona stellt einen Prototyp für eine Gruppe von Nutzern dar, mit konkret ausgeprägten Eigenschaften und einem konkreten Nutzungsverhalten.

Personas sind fiktive Personen, die der Zielgruppe entsprechen und helfen, sich den Umgang mit Produkt/Website/Software besser vorstellen zu können

Für jede Zielgruppe sollte es folglich mindestens eine Persona geben!

Negative Personas

Auch das kann manchmal hilfreich sein, um eine klare Abgrenzung zu erreichen: Personas, für die das jeweilige Produkt nicht gedacht sind …

weitere gute Online-Quelle

http://www.steptwo.com.au/papers/kmc_personas


Beispiel-Persona

Atenta von Guillermo Vasquez

Personas are archetypal users that represent the needs of larger groups of users, in terms of their goals and personal characteristics. They act as ‘stand-ins’ for real users and help guide decisions about functionality and design.

Man erzeugt eine Persona, damit man sich in den (zukünftigen) Nutzer hineinfühlen kann! → Empathie …

Demo

meine Beispiel-Persona als PDF


Design Persona

Mailchimp Mascot

If your website were a person, who would it be? Is it serious, buttoned up, all business, yet trustworthy, and capable? Is it a wisecracking buddy that makes evan mundane tasks fun?

Following a similar structure as a user persona, you can flesh out the personality of your design by creating a design persona. Personality can manifest itself in an interface through visual design, copy, and interactions.

A design persona describes the methods of channeling personality in each of these areas, and will help a team of web professionals construct a unified and consistent result.

Aarron Walter


Szenarios

Mural_Bancomat von Franco Folini

Ein Szenario ist die Beschreibung, wie ein Mensch mit einem System interagiert. Szenarios helfen, gestalterischen Überlegungen auf die Bedürfnisse des Anwenders zu focussieren. Diese Bedürfnisse unterscheiden sich deutlich von technischen und geschäftlichen Rahmenbedingungen.

Beim Schreiben von Szenarios ist es wichtig, in einfachen Worten die Interaction zu beschreiben, die stattfinden soll.

Beispiel eines guten Szenario-Textes

Es ist Dienstag Nachmittag und Klaus muss nach Frankfurt fliegen. Er ist spät dran, hat aber nicht genug Geld fürs Taxi. Er sucht schnell einen Geldautomaten und identifiziert sich an der Maschine.

Klaus teilt dem Geldautomaten mit, dass er € 100.- von seinem Girokonto abbuchen möchte und dass er den Betrag in € 20.- Scheinen ausgezahlt haben möchte. Damit kann er sicher sein, dass der Taxi-Fahrer keine Probleme beim Geldwechseln hat.

Er meldet sich vom Geldautomat ab, auf die Ausgabe einer Quittung verzichtet er.

Der Text ist gut, weil er auf technischen Jargon verzichtet und auch keine Lösungen (EC-Karte, PIN usw.) vorwegnimmt, die u.U. die Kreativität in der Entwurfsphase einschränken können!


Storyboards

CCF storyboard (visitor registration) von Rob Enslin

Je komplexer der zu präsentierende Inhalt, desto entscheidender wird die Struktur der Argumentation. Der Storyboard-Ansatz ist eine Methode, um komplexe Themen in nachvollziehbare und überzeugende Präsentationen […] umzusetzen.

Inhalt von Storyboards

  • Es geht darum, Ideen zu kommunizieren, nur sehr eingeschränkt um eine „schöne Zeichnung“
  • ähnlich wie ein Comic
  • Menschen und deren Aufgaben zeigen
  • kaum oder gar kein Focus auf das eigentliche Interfacees muss noch nicht gezeigt werden, welche Knöpfe es gibt und wie diese positioniert sind!
  • dafür aber den Ablauf (z.B. wie etwas zu bedienen ist) deutlich machen
  • andeuten, wo und wann sich die „Story“ ereignet
  • Nicht in Details verlieren!

See What I Mean

See What I Mean $ 22.-

Using images and text in unique ways, comics can engage readers in ways traditional methods can't. In See What I Mean, you'll learn how to create comics about your products and processes


Swimlane

UX-Swimlanes von mastermaq

Swimlanes are a great tool for helping clients understand users, business needs and technology all at once. They help bridge the differences between multiple stakeholders by showing all the moving parts of an experience in one document

Swimlanes zeigen gleichzeit, was der Benutzer und das System machen, zusätzlich ist noch Platz für weitere Informationen…

mehr dazu…


Action!

its_fun_to_stay by JD Hancock


Brainstorming: 3 Teams | 1 Thema

Hospital Dove by Ιωάννης Πρωτονοτάριος

SmartPhone/Tablet im Arzt/Krankenhaus-Einsatz (Visite, Patientendaten, Pflegepersonal, Orientierung …)

Vormittags

  1. Teams von 3 Leuten
  2. ca. 60 min Brainstorming-Session zum Entwickeln geeigneter Konzepte, Personas & Szenarios
  3. Präsentation der Arbeitsergebnisse; pro Team ca. 5 min

Nachmittags

  1. ca. 60 min zum Erstellen eines Papier-Prototypen (einfache Abläufe der wichtigsten Schritte sollen möglich sein)
  2. Präsentation der Arbeitsergebnisse; pro Team ca. 10 min

Auslosen der Team-Mitglieder

Seven von Niklas Morberg

Bitte merken Sie sich, in welche Gruppe Sie gelost wurden – diese Teams arbeiten auch am Nachmittag zusammen!


Vielen Dank für Ihre Aufmerksamkeit!

war-of-the-roses von jm3

Jetzt sind Sie dran …

Weitere Vorträge: