Themen heute
- Jakob Nielsen: Ten Usability Heuristics
- Definition „Prototyp“
- Paper Prototyping
- Marvel App für interaktive Prototypen
Druckdialog als Paper-Prototyp
Wie schauen Eure Dialoge aus? War es schwierig, eine Lösung für das Problem zu finden? Wir brauchen Eure Konzepte heute gleich noch mal…
Folgende Sachen müssen einstellbar sein
- Bild 1 und Bild 3 auswählen, um diese zu drucken
- Beide auf einem A4-Blatt (Hochformat) positionieren, Bild 3 oben, Bild 1 unten
- Anzahl der Kopien (3 Kopien drucken)
- Farbig oder Schwarz/Weiß (Farbig drucken)
- Papiergröße (A2, A3, A4, A5) (A4 auswählen)
- Hoch- oder Querformat (Hochformat)
- Welcher Drucker (HP, Epson, Sony, Canon) (Epson auswählen)
- Auflösung/Qualität (stufenlos einstellbar) (Qualität ca. 80%)
- Druckbefehl erteilen bzw. abbrechen
Versucht dabei, möglichst mit Bildern und Symbolen zu arbeiten! Wie lässt sich die Informations-Flut reduzieren?
Verwendet dazu die ausgeteilten Vorlagen!
Jakob Nielsen: Ten Usability Heuristics
Heuristik bezeichnet die Kunst, mit begrenztem Wissen und wenig Zeit zu guten Lösungen zu kommen.
Jakob Nielsen hat 10 Regeln aufgestellt, mit Hilfe deren man schon recht gut die Benutzbarkeit eines User Interfaces bewerten kann (ähnlich wie eine Checkliste)
Auf den nächsten Slides habe ich versucht, diese Faustregeln zu übersetzen und mit anschaulichen Bildern verständlich zu machen …
Original-Titel
Der System-Status muss sichtbar sein
Loading-Gifs generiert via ajaxload.info
Das System muss den User jederzeit darüber informieren, was gerade passiert – und dies durch geeignetes Feedback in einem sinnvollen Zeitrahmen
Wenn man den Zeitraum relativ genau abschätzen kann:
Anpassung des System an die reale Welt
Photoshop Variationen Interface
Das System sollte die Sprache des jeweiligen Anwenders sprechen, mit Worten, Sätzen und Konzepten, die diesem vertraut sind – und nicht die Sprache des jeweiligen Systems. Verwendet Sachen, die auch im „echten Leben“ vorkommen → Metaphern…
Freiheit und Kontrolle des Benutzers
Benutzer wählen oft versehentlich System-Funktionen und benötigen dann einen eindeutig markierten Fluchtweg. Das System sollte sowohl Undo als auch Redo ermöglichen.
Wiedererkennen ist besser Erinnern
Reduzieren Sie die Belastung Ihres Users indem Sie Objekte, Aktionen und Optionen sichtbar machen. Der Benutzer sollte sich nicht Informationen von einem Teil des Dialoges zu einem anderen merken müssen. Hinweise zur Benutzung sollten entweder immer sichtbar oder aber einfach aufrufbar sein, wenn man diese benötigt.
Flexibilität und Effektivität
OS X, Finder Short-Cuts
Short-Cuts – die von Einsteigern gar nicht wahrgenommen werden – können oft die Interaktions-Schritte für Experten beschleunigen. Damit kann das System sowohl von Anfängern wie Experten gut genutzt werden. Geben Sie den Anwendern die Möglichkeit, häufig ausgeführte Aktionen für ihre Bedürfnisse anzupassen und entsprechende Short-Cuts einzurichten.
Eigene Shortcuts definieren
Bei häufig benutzten Programmen super praktisch …
OS X: Keyboard Shortcuts
Konsistenz und Standards
Anwender sollten nicht darüber rätseln müssen, ob verschiedene Bezeichnungen, Situationen oder Aktionen das gleiche bedeuten. Nutzt die Konventionen, die die jeweilige Plattform anbietet.
iOS vs. Android
iOS und Android-Smartphones haben unterschiedliche Hardware-Buttons – dies beeinflusst unmittelbar, wie Eure App-Layouts aufgebaut sein müssen!
Wollt Ihr beide Plattformen unterstützen, müsst Ihr Eure Screens jeweils anpassen…
Fehler-Vergebung
Helfen Sie dem Anwender, Fehler zu erkennen, diese zu verstehen und geben Sie ihm Möglichkeiten, die Fehler rückgängig zu machen. Fehler-Meldungen sollen in allgemein verständlicher Sprache verfasst sein und keine Fehler-Codes enthalten. Sie sollen das Problem exakt beschreiben und am besten auch gleich eine Lösung anbieten.
Fehler-Vermeidung (Poka Yoke)
Poka Yoke: Type A Plug Coloured.svg
Noch besser als gute Fehler-Meldungen ist ein sorgsam durchdachtes Design, das von Anfang an dafür sorgt, dass keine Fehler auftreten. Dazu sollte man entweder Situationen, die fehleranfällig sind, eliminieren oder aber – wenn sich diese nicht vermeiden lassen – dem Anwender die Möglichkeit geben, seine Entscheidung zu bestätigen, bevor etwas unwiederbringlich ausgeführt wird.
Fehler-Vermeidung (Poka Yoke) (2)
Der Bedienablauf am Geldautomaten erfolgt nach dem selben Poka-Yoke-Prinzip: Man muss zuerst die Karte rausziehen und dann kommt das Geld …
Andersrum würden viele Karten in den Automaten stecken bleiben!
Ästhetik und Minimalistisches Design
OS X, Word
Dialoge sollten keine Informationen enthalten, die irrelevant sind oder kaum benötigt werden. Jede Zusatz-Information steht in Konkurrenz zu den wirklich wichtigen Informationen und reduziert deren Wahrnehmbarkeit.
Ästhetik und Minimalistisches Design (2)
iA Writer is the quintessential writing machine for iOS, Mac and Android. Writer is designed so you can keep your hands on the keyboard and the mind in the text.
Hilfe und Dokumentation
Auch wenn es besser ist, wenn ein System ohne Dokumentation benutzt werden kann, ist es manchmal notwendig, Hilfe und Dokumentation vorzusehen. Die dort enthaltenen Information sollen einfach zu finden sein, sich auf die Aufgaben des Anwenders konzentrieren, konkrete Schritte auflisten, die ausgeführt werden sollen und kurz und prägnant geschrieben sein.
Definition: Prototyp
Vorab-Exemplar, erste Ausführung eines Produktes vor der Serienfertigung, das zur Erprobung von Eigenschaften dient.
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 Ihr erstellt:
Testet Eure Ideen immer mit mindestens 4 – 5 potentiellen Benutzer*innen!
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?
Paper Prototyping in der Brainstorming Phase
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
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)
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)
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
- Erstellen von Papier-Prototypen mit einfachen Mitteln: 2.10 bis 5.26
- Interface Widgets und Interaction: 5.40 bis 9:55
Rollenverteilung
Beim Testen mit Papier-Prototypen sind mindestens 3 Personen notwendig:
- Der Computer – gibt der Testperson jeweils den richtigen „Screen“
- Der Beobachter/Moderator – bringt die Testperson u.a. dazu, laut zu denken, beobachtet, dokumentiert und befragt
- 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
- Testing Low Fidelity Website: 9:55 bis 21.24
- Testing Hardware-Based Interactions: 29:30 bis Ende
Beziehung Szenarios + Paper Prototypes
Die Szenarios geben Euch vor, welche Funktionalitäten Eure Paper-Prototypen ermöglichen sollen.
Ihr braucht also nicht den kompletten Funktionsumfang Eurer App darstellen, sondern nur die Punkte, die zum erfolgreichen Testen Eurer Szenarios nötig sind!
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?
Einführung Marvel
Simple design, prototyping and collaboration
Die „Marvel App“ könnt Ihr Euch kostenlos im jeweiligen App-Store herunterladen und installieren!
Online-Demo
Meine „tolle“ Demo online: https://marvelapp.com/8ajcfhe/screen/41263463
Wenn Ihr Eure Demos online (z.B.) im Team teilen möchtest, müsst Ihr Euch bei Marvel anmelden – auch das ist kostenlos!
Getting Started Video
In der App selbst gibt es ein Video, das die ersten Schritte mit Marvel gut erklärt
Paper Prototyping: Druckvorlagen
Druck-Vorlagen zum Download (SmartPhone)
Wenn Ihr eine genau zu Eurem (ausgewählten) Smartphone passende Druck-Vorlagen verwenden möchtet, müsst Ihr diese selber herstellen!
Einfach Höhe und Breite des Screens messen und im Illustrator entsprechend anlegen. Wenn die Screens in Original-Größe zu groß sind, könnt Ihr diese auch skalieren – nur die Proportionen müssen erhalten bleiben…
Druckdialog als Marvel-App
Ladet Euch die Marvel-App und erstellt einen kleinen, interaktiven Prototypen Eures Druckdialogs!
Überlegt dabei auch, welche Art von Übergängen („Transitions“) zwischen den einzelnen Screens sinnvoll sind:
Im unteren Teil des Link-Screens können unterschiedliche Transitions ausgewählt werden
Bis zum nächsten Treffen (1)
Lynda.com | User Interface Design – Grundlagen
Bitte schaut Euch folgende, kurzen Filme an:
Bis zum nächsten Treffen (2)
- Druckdialog in Marvel soweit fertig machen, dass man sich dort „durchklicken“ kann (jede(r) einzeln)
- Screenlayouts Eurer eigenen Smartphone-App auf Papier-Druckvorlagen anfangen
- Was sind wichtige Screens?
- Wie navigiert man?
- Wie lässt sich Direct Manipulation gut einsätzen?
- Prüft Eure Ideen aufgrund der heute vorgestellten 10 Usability Heuristics