Direct Manipulation, Ergonomie, Interface Elemente, Design for Touch / 2018-04-12 / Matthias Edler-Golla, CC BY-SA 4.0


|



 



Themen heute

  1. Metaphern Design
  2. Direct Manipulation
  3. Interface Toolbox
  4. Navigationsdesign
  5. Designing for Touch

Recherche & Interviews

  • Weiß jede Gruppe, welches Thema sie bearbeiten möchte?
  • Habt Ihr schon Interviews geführt?
  • Könnt Ihr damit Personas und Szenarios erstellen?

Medieval Helpdesk


Die Metapher

Foto von Steven Kay

Die Metapher (…) ist eine rhetorische Figur, bei der ein Wort nicht in seiner wörtlichen, sondern in einer übertragenen Bedeutung gebraucht wird

… und zwar so, dass zwischen der wörtlich bezeichneten Sache und der übertragen gemeinten eine Beziehung der Ähnlichkeit besteht. Man könnte sie auch als bildhaftes Gleichnis bezeichnen.

Textbeispiele

Der Zahn der Zeit, Stuhlbein, Rabeneltern, Gläserne Decke, bleierne Zeit, Kaderschmiede, rosarote Brille, Warteschlange, Zahlenfriedhof, graue Herren …

Zitate aus Wikipedia


Metaphern Design

Foto des Rank Xerox Star, 1981 von upload.wikimedia.org

Die Schreibtischmetapher ist eine bisher unübertroffen erfolgreiche Darstellung des Dateisystems eines Computers, weil jeder einen Schreibtisch und die darauf abgelegten Dokumente kennt.

Metaphern Design ist gerade im Bereich von Software und Interaction Design ein extrem erfolgreiches Mittel, um Menschen beim Verstehen und Bedienen von komplexen Systemen zu helfen. Durch dem Umgang mit etwas scheinbar Vertrautem reduziert sich die Angst, etwas falsch zu machen. Außerdem kann etwas schon in einem anderen Zusammenhang Erlernten einfach übertragen werden.

Dies funktioniert allerdings nur, wenn die Metapher konsequent angewendet wird – und es keine „Brüche“ innerhalb der Verwendung gibt.

Große Abbildung des Xerox Start Interface


Metapher „Karten-Stapel“ bei Hypercard

Hypercard war mein Einstieg ins Interaction Design und in das Arbeiten mit Code

Die Karten-Stapel-Metapher war sehr erfolgreich, weil man das Grundprinzip einfach verstehen konnte:

  • auf jeder Karte lassen sich verschiedene Sachen darstellen
  • durch Klicken auf eine Schaltfläche kann man von einer Karte zur anderen springen

Powerpoint, Keynote & Co.

… benutzen die gleiche Metapher!


Metaphern Design (2)

Director Score (Partitur) & Stage (Bühne)

Ein klar verständliches Mentales Modell, das durch leicht begreifbare Metaphern unterstützt wird, macht die Bedienung komplexer Software intuitiv und einfach erlernbar.

Metaphern können sehr gut dazu verwendet werden, bei den Anwendern die richtigen Mentalen Modelle auszulösen oder zu erzeugen!


Metaphern Design Mobile

Überlegt mal, welche Metapher bzw. Repräsentanten von realen Gegenständen jeweils zum Einsatz kommen!


Metapher-Bruch (1)

macos11 von http://www.guidebookgallery.org/screenshots/macos11

Ein klassischer „Metaphern-Bruch“ ist die Mülltone des frühen Macintosh-Interface: Zum Auswerfen von Disketten oder CDs musste man diese auf die Mülltonne ziehen, was bei den Anwendern Ängste auslöste, dass die Daten gelöscht werden könnten…


Metapher-Bruch (2)

iBook (alte Version), erste Seiten und letzte Seite…

…egal, wie weit man gelesen hat, das „Buch“ bleibt immer auf der gleichen Seite…


Skeuomorph – Wurzelholz forever!

Chrysler LeBaron Town Country Station Wagon

A skeuomorph /ˈskjuːəmɔrf/ is a derivative object that retains ornamental design cues from structures that were necessary in the original.


Kitsch

OS X, iCal (frühere Version)

What sells is sentimentalism, nostalgia, solemnity — what sells is kitsch. Kitsch interfaces makes the average user think: "I know how to use this!" (which is always a false promise) instead of "Looks like I need to learn to use this." (which is always the case)

Aktuelle Version: gleiche Funktionalität – ohne den visuellen Balast…


WYSIWYG

Wer weiss, was dieses Akronym bedeutet?


WYSIWYG 2

What you see is what you get!

Die Abbildung auf dem Bildschirm entspricht exakt dem, was dann z.B. aus dem Drucker kommt.

Dazu müssen Bildschirm und Drucker die gleiche Sprache (z.B. Postscript) sprechen …


Direct Manipulation

Direct manipulation is a human–computer interaction style which involves continuous representation of objects of interest and rapid, reversible, and incremental actions & feedback. The intention is to allow a user to directly manipulate objects presented to them, using actions that correspond at least loosely to the physical world. An example of direct-manipulation is resizing a graphical shape, such as a rectangle, by dragging its corners or edges with a mouse.

Video

Coursera > 04_direct_manipulation


Direct Manipulation macht ein Artefakt leicht bedienbar!

shapeways.com/creator/sake-set

Das gilt sowohl für Hard- wie Software …

  1. Visibility: zu bedienende Elemente sind (ständig) sichtbar
  2. Feedback: das System gibt unmittelbar Feedback
  3. Consistency: die Bedienung bleibt konsistent: Ähnliche Aktionen werden ähnlich bedient …
  4. Non-destructive: das System soll Fehler verzeihen können und somit zum Experimentieren einladen (z.B. können Bedienschritte rückgängig gemacht werden)
  5. Discoverability: Feature sollen auffindbar sein (z.B. durch das Auf- und Zuklappen des Menüs)
  6. Reliability: Das System muss zuverlässig sein und nicht immer „abstürzen“

Direct Manipulation im Auto

Fehlbedienung fast ausgeschlossen …


Affordance *

Tool-rack von L. Marie

An affordance is a quality of an object, or an environment, which allows an individual to perform an action. For example, a knob affords twisting, and perhaps pushing, while a cord affords pulling.

* „Affordance“ lässt sich wohl am besten mit „Anzeichenfunktion“ übersetzen: Das Objekt erklärt durch sein Aussehen, wie es zu benutzen ist.


Affordance – Software

iTunes Equalizer

Auch bei Grafischen User Interfaces [GUI] kann durch eine Imitation realer Objekte die Bedienung einfach & allgemein verständlich gemacht werden.


Constraint *

Mercedes-300-SL-Cabrio von Dominik Bartsch

A method of limiting the actions that can be performed on a system.

Universal Principles of Design, S. 50

* „Constraint“ = Einschränkung

Die Schieberegler bei der Lüftung haben eine Minimal- und Maximal-Position …


Constraint, User Interface Design

OS X, Systemeinstellungen

Use constraints in design to simplify usability and minimize errors.

Universal Principles of Design, S. 50

Die Schieberegler der Systemeinstellungen verhindern, dass man zu große oder kleine Werte eingibt.

Dies wäre z.B. möglich, wenn man statt des Schiebereglers ein Text-Eingabefeld anbietet. Dann könnten Benutzer in dem oben gezeigten Beispiel das Dock so klein machen, dass man es gar nicht mehr benutzen kann.


Drag & Drop

Drag & Drop, deutsch „Ziehen und Ablegen“, ist eine Methode zur Bedienung grafischer Benutzeroberflächen durch das Bewegen grafischer Elemente mittels eines Zeigegerätes. Ein Element wie z. B. ein Piktogramm kann damit gezogen und über einem möglichen Ziel losgelassen werden.

Drag & Drop wird – vorallem von Anfängern – häufig übersehen!


Natural Mapping

links: kein Mapping möglich; rechts: intuitive Bedienung durch Natural Mapping

The term natural mapping comes from proper and natural arrangements for the relations between controls and their movements to the outcome from such action into the world. The real function of natural mappings is to reduce the need for any information from a user’s memory to perform a task


Interface Toolbox

Toolbox von Florian Richter

Interface-Designer*innen haben einen umfangreichen Werkzeugkasten zum Erstellen der Interfaces…

Auf den nächsten Seiten stelle ich die wichtigsten vor – es gibt aber noch viele weitere!


Buttons

Gestaltet Buttons so, dass diese eindeutig als Bedien-Knöpfe zu erkennen sind – und haltet das jeweilige Aussehen auf allen Screens einheitlich!

Dann brauchen die User nur einmal verstehen, wie Bedienelemente aussehen…

Hover: Der Mouse-Zeiger befindet sich über dem Button – gibt es bei Touchscreens nicht mehr


Text-Eingabe



Text-Area

  • ein- oder mehrzeilige Texteingabe möglich
  • bei sensiblen Daten sollte die Eingabe unkenntlich (•••) gemacht werden!

Radio-Buttons

Weiblich
Männlich
sonstiges
  • es werden mehrere Optionen angeboten
  • nur eine der Optionen kann ausgewählt werden

Checkboxes

Welches Fahrzeug haben Sie?

Rennrad
Mountain Bike
Faltrad
Fixie
Tandem
  • es werden mehrere Optionen angeboten
  • mehrere Optionen können ausgewählt werden

Schieberegler


  • sehr genaue Einstellungen möglich – teilweise sogar mit fixen „Rast-Punkten“
  • Minimal- und Maximal-Wert ist für den User sichtbar (im Gegensatz zu einem Textfeld …)
  • Visuelles Feedback zum eingestellten Wert
  • durch das Verwenden von mehreren Schiebereglern sind auch komplexe Zusammenhänge darstellbar
  • meist vertikale oder horizontale Darstellung

Progress Bar

  • zeigt an, dass das System (noch) arbeitet und der Rechner nicht „abgestürzt“ ist
  • ermöglicht eine (grobe) Abschätzung, wie lange der gerade laufende Prozess noch dauert
  • sollte bei allen System-Prozessen gezeigt werden, die mehr als 1 Sekunde benötigen!

Datums-Auswahl

Durch Verwenden des Widgets kann sicher gestellt werden, dass das Datum richtig eingegeben wird und keine Angabe vergessen wird!


Pulldowns

  • Vorteil: Benötigen wenig Platz im zusammengeklappten Zustand
  • Nachteil: Benutzer sehen zuerst nicht, welche Auswahlpunkte sich dahinter verstecken.

Scrollbalken

Senkrechtes Scrollen

Lorem ipsum qui ex sale facilis, vel in quidam adolescens. Cum ut ludus homero liberavisse, ex nec lobortis scripserit reformidans. Ignota posidonium ea ius, eos atomorum pericula elaboraret eu. Mea inani deseruisse ea, at nam salutandi instructior, alii impetus dolorem cum at. Nibh eruditi definiebas an mea, per ut sonet debitis delectus.

Principes dignissim dissentias quo ea. Eirmod maluisset mnesarchum vix no, pri eu prodesset definiebas reprehendunt. Vis mutat numquam propriae ea, duo tollit quaeque gloriatur at. Vel ut odio repudiare consequat, qui ex congue inimicus temporibus. Pro cu imperdiet constituam persequeris, volumus facilisis in vis.

Vel ancillae offendit id, te eum nonumy mentitum, id per detracto postulant repudiandae. Tale disputationi et has, in eos feugiat alienum. Sit an amet detracto efficiantur, ut his aeque ridens eripuit. Posse ignota cu vel, in vel nonumy mucius. Et mei erat accumsan efficiendi, nobis nusquam atomorum pro id.

No usu nihil explicari dignissim, eos quod alterum adversarium ea, eu cum agam brute eripuit. Veri ponderum sit in, imperdiet conceptam honestatis et cum. In mea mnesarchum temporibus, nam fugit ridens inimicus ea. Ut audire tractatos mea, eum ei velit semper. Eirmod atomorum iudicabit no per, vix an enim propriae omittantur, agam puto et usu. Sint ferri ancillae at his, sed id ubique legendos sadipscing, no quis principes forensibus mea.

Waagrechtes & Senkrechtes Scrollen

Lorem ipsum qui ex sale facilis, vel in quidam adolescens. Cum ut ludus homero liberavisse, ex nec lobortis scripserit reformidans. Ignota posidonium ea ius, eos atomorum pericula elaboraret eu. Mea inani deseruisse ea, at nam salutandi instructior, alii impetus dolorem cum at. Nibh eruditi definiebas an mea, per ut sonet debitis delectus.

No usu nihil explicari dignissim, eos quod alterum adversarium ea, eu cum agam brute eripuit. Veri ponderum sit in, imperdiet conceptam honestatis et cum. In mea mnesarchum temporibus, nam fugit ridens inimicus ea. Ut audire tractatos mea, eum ei velit semper. Eirmod atomorum iudicabit no per, vix an enim propriae omittantur, agam puto et usu. Sint ferri ancillae at his, sed id ubique legendos sadipscing, no quis principes forensibus mea.

Screenshot von "Windows 3.1." von Wikipedia

Scrollbalken können senkrechtes und waagrechtes Scrollen ermöglichen. Auf modernen Betriebssystemen werden die Scrollbalken erst sichtbar, wenn man scrollt – früher waren sie immer (störend) sichtbar…

Waagrechtes Scrollen wird von vielen Mäusen nicht gut unterstützt


Symbols & Icons

thenounproject.com

Symbols have the ability to transcend cultural and language barriers and deliver concise information effortlessly and instantaneously. For the first time, this image-based system of communication is being combined with technology to create a social language that unites the world.

  • international (mehr oder weniger) verständlich
  • können natürlich auch als Buttons genutzt werden

Bildschirmtypografie

Gute Bildschirmschriften habe eine hohe x-Höhe und eine großzüge Punze

Für Überschriften und andere, groß dargestellte Texte kann man verspielte, detailreiche Schriften verwenden. Anders schaut es bei den Lesetexten aus: Dort ist eine Schrift notwendig, die auch in kleinen Größen eine gute Lesbarkeit gewährleistet!

Gut geeignet sind Schriften, die entweder für den Bildschirm gestaltet wurden (Verdana, Georgia, Lucida Grande … ), oder aber Schriften, die speziell für gute Lesbarkeit in kleinen Größen gestaltet wurden (also z.B. für Zeitungen, Telefonbücher, Lexikas … )

Als Grundregel kann man sagen, dass Schriften am Bildschirm gut lesbar sind, wenn deren Kleinbuchstaben im Verhältnis zu den Großbuchstaben "hoch" sind – wie die hier gezeigte "Meta" von Erik Spiekermann (der noch viele andere, sehr schöne & gut lesbare Schriften gestaltet hat!)

Google Fonts als Inspiration

Schaut Euch mal auf der fonts.google.com-Website um – dort findet Ihr viele Schriften, die für eine gute Darstellung auf Bildschirmen erstellt wurden!

Beispiele

Viele der genannten Fonts können kostenlos heruntergeladen und auf dem eigenen Rechner installiert werden!


Navigationsdesign

Smartphone-Apps werden nur gerne benützt, wenn sie eine einfache, klar verständliche Navigation haben und die Benutzer*innen immer die Möglichkeit haben, sich frei innerhalb der App zu bewegen!


Links

Ein Hyperlink, kurz Link, ist ein Querverweis in einem Hypertext, der funktional einen Sprung zu einem anderen elektronischen Dokument oder an eine andere Stelle innerhalb eines Dokuments ermöglicht. Wikipedia

Links sind eine einfach zu realisierende Möglichkeit des Navigierens innerhalb einer App(likation). Sie werden meist im Inhaltsbereich der App verwendet.

Übergeordnete Funktionen

Übergeordnete Bereiche und Funktionen werden über Tabs oder aufspringende Menüs (nächste Seiten) realisiert, weil diese ständig erreichbar sein müssen.


Burger-Menü

Der Burger (oben links) ist mittlerweile fast schon zum Standard-Symbol für ein aufspringendes Menü geworden. Er wird jedoch nicht von allen Menschen unmittelbar als Symbol/Button erkannt!

Die Menüpunkte innerhalb des Burger-Menüs dienen meist zur übergeordneten Navigation innerhalb der App

Suche

Die Such-Maske wird sichtbar, wenn man auf die Lupe klickt…


Tab Bar

Tab-Bars können sich am oberen und/oder unteren Rand des Bildschirms befinden und stellen häufig benutzte Funktionen zur Verfügung


Kartenreiter

Tabs können auch wie klassische Kartenreiter verwendet werden. Dies vermittelt den Benuter*innen ein einfaches Navigationsprinzip ohne Sorgen, nicht mehr „zurückzukommen“…


Gruppierung

Zusammenhänge können durch Hinterlegen von Farbflächen (links) oder einfach durch das Nutzen von Weißraum (rechts) klar gemacht werden.

Der Button „Speichern“ ist noch deaktiviert, weil noch nicht alle benötigten Eingaben (Name, eMail…) gemacht wurden!


Leserichtung beachten

Wird bei der Dialog-Gestaltung die Leserichtung nicht beachtet, führt dies bei den Usern zu Irrigationen und/oder Fehlbedienungen.

Auf dem linken Screen kann es gut passieren, dass die Anwenderinnen den Button „Submit“ drücken, bevor sie ihre Daten eingegeben haben!*


Konsistenz

DB Navigator: Einstellung der Zeiten

Warum gibt es bei dieser App zwei unterschiedliche Arten, die Uhrzeit und das Datum einzustellen? Für die User ist das verwirrend!

für gleiche Aufgaben die gleichen Bedienelemente verwenden… 


Ortskonstanz

Ein Interface hat sehr viel mit räumlicher Orientierung zu tun. Obwohl eine grafische Bedienoberfläche in der Regel zweidimensional aufgebaut ist, benötigen wir eine Ordnung für die Orientierung. Wir merken uns beim Erlernen, wo sich welche Funktionen verbergen, damit wir sie auch dort wiederfinden. Daraus leitet sich für die guten Regeln zur Gestaltung ab, dass Funktionen immer an derselben Stelle verortet werden sollten. Das bedeutet, dass eine Funktion wie Speichern oder Bearbeiten immer an derselben Stelle in der selben Form angeboten werden sollte.

Microsoft hat in einer früheren Version des Office-Pakets eine Funktion eingebaut, die häufig genutzte Menüpunkte automatisch nach oben umsortierte.

Benutzer gefiel dieses Feature überhaupt nicht, weil sie sich aufgrund ihrer räumlichen Orientierung gemerkt hatten, wo die Funktion zu finden war – jetzt mussten sie jedesmal genau schauen…

Achtet bei Euren Screen-Layouts darauf, dass Funktionen ortskonstant – auch über viele Screens hinweg – dargestellt werden, also z.B. der „Speichern“-Button immer unten rechts zu finden ist!


KISS principle

KISS is an acronym for "Keep it simple, stupid" as a design principle noted by the U.S. Navy in 1960. The KISS principle states that most systems work best if they are kept simple rather than made complicated; therefore simplicity should be a key goal in design and unnecessary complexity should be avoided.

Video iA Writer


Minimalismus

google.de

One of the strong sides of minimalism in interfaces is enhanced user concentration. Being focused on functionality and simplicity, the pages and screens of this kind don’t usually overload users attention with decorative elements, shades, colors, details, motion, so in this way, they support high attention ratio and often let users quickly solve their problems and navigate through the website or app.

Eine (kontroverse) Definition behauptet, dass ein Interface erst dann gut ist, wenn man nichts mehr weglassen kann…


User Interface Design patterns

User Interface Design patterns are recurring solutions that solve common design problems.

Design patterns helfen uns Gestalter*innen dabei, nicht immer wieder das Rad neu zu erfinden! Sie helfen uns, auf bewährte Lösungen zuzugreifen, z.B. um:

Schaut Euch auf der Website http://ui-patterns.com/ um, wenn Ihr merkt, dass Eure App Standard-Lösungen für die Bedienung nutzen kann!


Buchempfehlung: Designing for Touch

Touch introduces physicality to designs that were once strictly virtual, and puts forth a new test: How does this design feel in the hand? Josh Clark guides you through the touchscreen frontier

Das Buch kostet als eBook $ 9.-


Die Daumenzone

Josh Clark: Designing for Touch

While a thumb can sweep most of the screen on all but the most oversized phones, only a third of the screen is truly effortless territory: at the bottom, on the side opposite the thumb.

Bitte denkt beim Gestalten Eurer Layouts daran, wie die Leute ihre Geräte halten und wo deswegen wichtige und unwichtige Interface-Elemente liegen sollen!


Wie hält man das Telefon?

Josh Clark: Designing for Touch

Steven found that in nearly every case, they held their phones in one of three basic grips. At 49%, the one-handed grip was most popular; 36% cradled the phone in one hand and jabbed with the finger or thumb of the other; and the remaining 15% adopted the two-handed BlackBerry-prayer posture, tapping away with both thumbs

Wie haltet Ihr Eure Smartphones meistens – gibt es Situationen, wo Ihr es anders haltet als sonst?


Druckdialog als Paper-Prototyp

Überlegt Euch (einzeln), wie ein Dialog (über mehrere Screens) aussehen könnte, auf dem Ihr die Einstellungen zum Ausdrucken von zwei Bildern macht. Nutzt dazu die heute vorgestellten Interface-Elemente!

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!


Bis zum nächsten Treffen (1)


Bis zum nächsten Treffen (2)

  • Interviews, Personas, Szenarios
  • Smartphone, Druckdialog fertig machen

Danke!

Weitere Vorträge: