Steigern Sie Ihre UX mit diesen erfolgreichen Prinzipien des Interaktionsdesigns

Veröffentlicht: 2022-03-11

Es gibt einen schmalen Grat zwischen einer Interaktion, die funktioniert, und einer, die unbrauchbar ist. Prinzipien des Interaktionsdesigns helfen dabei, die Kluft zu überbrücken.

Gut ausgeführtes Interaktionsdesign spielt eine große Rolle bei der Implementierung großartiger UX und ist unbestreitbar eine der Grundlagen der UX-Designprinzipien.

„Unbrauchbar“ bedeutet „Ich mache weiter“, und egal wie „gut aussehend“ das visuelle Design ist – wie schick diese Animation ist – vermasseln Sie das Interaktionsdesign und Ihre UX ist kaputt. Wenn Sie es richtig machen, sind Sie auf dem besten Weg zu einer viel besseren UX, auch wenn die Ästhetik zu kurz kommt. Das Produkt wird eine viel bessere Chance auf Erfolg haben, was wiederum zum Endergebnis beiträgt.

Interaktionsdesign (IxD) wird von der Interaction Design Association (IxDA) als „die Struktur und das Verhalten interaktiver Systeme“ definiert. Interaktionsdesigner streben danach, sinnvolle Beziehungen zwischen Menschen und den von ihnen verwendeten Produkten und Dienstleistungen zu schaffen, von Computern über mobile Geräte bis hin zu Haushaltsgeräten und darüber hinaus.“

Erfahrung ist entscheidend, denn sie bestimmt, wie gern sich Menschen an ihre Interaktionen erinnern. – Don Norman in Das Design alltäglicher Dinge.

Das Befolgen der Prinzipien des Interaktionsdesigns trägt immens zu einem großartigen Interaktionsdesign bei, das wiederum zum Erlebnis beiträgt.

Mobile App Interaction Design und UX
Interaktionsdesign für mobile Apps (von Adam Kalin)

Es ist möglich, dass alle heutigen Geräte und Technologien über Nacht durch etwas völlig anderes ersetzt werden könnten, aber aufgrund seiner dauerhaften Prinzipien wäre ein großartiges Interaktionsdesign immer noch erreichbar. Bei diesen konstanten Prinzipien geht es darum, was Menschen motiviert, wie sie sich verhalten und wie sie denken.

Stellen Sie sich vor, jeder Türgriff an jeder Tür würde anders funktionieren. Zum einen müssten Sie zuerst in die Tür und dann nach unten drücken; bei einem anderen müssten Sie nach oben ziehen, anstatt nach unten zu drücken, und bei einem anderen müssten Sie zweimal nach oben und dann nach unten ziehen – eine totale Katastrophe. Tatsächlich geht der Ausdruck „den Türgriff drehen“ davon aus, dass es nur eine Möglichkeit gibt, dies zu tun.

Niemand wird gerne von „Folge den Regeln“-Rufen über den Kopf geschlagen, aber wirklich exzellentes Interaktionsdesign beruht auf einer Reihe von Standards, Best Practices, Konventionen und Faustregeln (Heuristiken). Es ist keine matschige Wissenschaft, aber sie bilden das Fundament von IxD und ermöglichen eine Interaktion mit der geringsten Reibung. Schnittstellenstandards ersticken Kreativität nicht – sie sind keine festen Regeln, sondern grundlegende Richtlinien, die einem Designer helfen, eine Basis für „brauchbares und vertrautes Design“ zu schaffen, von der aus er innovativ sein kann.

Prinzipien und Best Practices des Interaktionsdesigns

Interaktionsdesign fällt unter die Disziplin Mensch-Computer-Interaktion (HCI), „Ein multidisziplinäres Studiengebiet, das sich auf die Gestaltung von Computertechnologie und insbesondere auf die Interaktion zwischen Menschen (den Benutzern) und Computern konzentriert.“ – wie von der Interaktion definiert Design-Stiftung.

Großartiges UI-Design erreicht reine Benutzerfreude, indem grundlegende UI-Designprinzipien mit zielgerichtetem Interaktionsdesign kombiniert werden.

  • Erfolgreiches Interaktionsdesign verwendet einfache, klar definierte Ziele, einen starken Zweck und eine intuitive Benutzeroberfläche.
  • In dem Bemühen, Interaktionen einfach und leicht zu halten, stellt das zielorientierte Interaktionsdesign den Benutzern nicht mehr als das absolut Notwendige zur Verfügung, damit sie eine Aufgabe erledigen können.

Lassen Sie uns auf einige der wichtigsten Prinzipien eingehen (keine erschöpfende Liste):

Auffindbarkeit

Wenn der Benutzer es nicht finden kann, existiert es im Grunde nicht. Es muss blitzblank klar gemacht werden, welche Aktionen in einer UI in weniger als einer Mikrosekunde möglich sind – zum Beispiel das Beschriften von Icons als Best Practice. Unbeschriftete Symbole sind gleichbedeutend damit, einem Benutzer Straßensperren in den Weg zu legen, da er anhalten muss, um die Bedeutung zu entschlüsseln. Du unterbrichst den „Fluss“. Und hier ist ein Schocker … Sie sind nicht daran interessiert, Ihre Benutzeroberfläche zu lernen.

Best Practices für das Interaktionsdesign von LinkedIn- und Facebook-Benutzeroberflächen mit Symbolen
Um Rätselraten zu vermeiden, kennzeichnen LinkedIn, NPR und Facebook ihre Symbole.

Signifikanten

Die effektive Verwendung von Signifikanten, die eng mit der Auffindbarkeit verbunden ist, stellt sicher, dass Angebote – die Möglichkeit einer Aktion an einem Objekt – in der Benutzeroberfläche klar angezeigt werden. Signifikanten liefern starke Hinweise wie Signale oder Wegweiser. Sie zeigen eine verfügbare Interaktion an, indem sie dem Benutzer mit grünen Lichtern zurufen: „Hier bin ich, Sie können auf mich tippen (klicken, wischen usw.)!“ Ein Angebot kann in der Benutzeroberfläche vorhanden sein, kann aber ausgeblendet bleiben, da es ohne Signifikant unsichtbar bleibt. Ein Beispiel könnte eine „versteckte gestische Interaktion“ sein, die sich nicht zeigt, es sei denn, der Benutzer wischt versehentlich nach links oder rechts (um beispielsweise etwas zu löschen).

Affordances definieren, welche Aktionen möglich sind. Signifikanten geben an, wie Menschen diese Möglichkeiten entdecken: Signifikanten sind Zeichen, wahrnehmbare Signale dessen, was getan werden kann. Signifikanten sind für Designer von weitaus wichtigerer Bedeutung als Angebote. —Don Norman (Norman, 2013)

Prinzipien des Interaktionsdesigns, die von Apple Mail mit einem versteckten Angebot verletzt werden, weil es keinen Signifikanten gibt
Apple Mail mit einem versteckten Angebot. Mit einer Magic Mouse auf dem Desktop können Benutzer nach links wischen. Solange sie sich dessen nicht bewusst sind, bleibt die Interaktion verborgen, weil es keinen Signifikanten gibt.

Feedback

Nach Signifikanten ist Feedback die zweitwichtigste Mitteilung an den Benutzer. Feedback bedeutet: explizite Information über die Wirkung der Aktion . Es bedeutet auch ständige Sichtbarkeit des Systemstatus, d. h. das System sollte Folgendes sicherstellen:

  • Die Benutzer werden darüber informiert, was vor sich geht.
  • Über die Ergebnisse ihres Handelns und den aktuellen Zustand des Produktes (Systems) gibt es laufend Informationen.
  • Es gibt keine Verwirrung im Kopf eines Benutzers hinsichtlich des Zustands des Produkts, dh Verarbeitung, Laden, Suchen, Hochladen usw., oder irgendeiner anderen Zustandsänderung.
  • Nachdem eine Aktion ausgeführt wurde, lässt sich der neue Zustand leicht ermitteln.

Dokument-Upload-Animations-Feedback-Interaktions-Designprinzip
Diese Upload-Sequenz zeigt drei Zustände durch kontinuierliches Feedback: Ziehen eines Dokuments auf ein Symbol, Upload-Fortschritt und Abschlussbestätigung. (Von Jokubas)

Konzeptionelle Modelle und mentale Modelle

Ein hervorragendes Interaktionsdesign präsentiert alle Informationen, die ein Benutzer benötigt, um ein gutes konzeptionelles Modell des Systems zu erstellen, und führt so zu seinem Verständnis und einem Gefühl der Kontrolle. Ein konzeptionelles Modell verbessert sowohl die Auffindbarkeit als auch die Bewertung der Ergebnisse bei der Verwendung des Systems.

Mentale Modelle – oder kognitive Karten – sind die Bilder im Kopf eines Benutzers, die seine Erwartungen an eine bestimmte Interaktion und die Funktionsweise von etwas in der realen Welt informieren. Kognitive Karten sind interne Darstellungen unserer physischen Umgebung, insbesondere im Zusammenhang mit räumlichen Beziehungen. Durch die effektive Nutzung des mentalen Modells des Benutzers können Interaktionsdesigner Systeme erstellen, die sich intuitiv „anfühlen“.

Gestaltungsprinzipien für Interaktionen mit mentalen Modellen für die Einstellung von Autositzen
Die Autositzeinstellung in einem Mercedes ist ein großartiges Beispiel für ein Interaktionsdesign, das ein mentales Modell verwendet. Eine Autositzform für Bedienelemente macht es intuitiv leicht zu verstehen und zu bedienen.

Der Designer erfindet ein konzeptionelles Modell – das Designmodell, und so beabsichtigt der Designer, dass das Gerät oder die Software funktioniert. Die einzige Möglichkeit, dieses Modell den Benutzern mitzuteilen, besteht darin, es über eine Benutzeroberfläche zu implementieren. Benutzer interagieren dann mit dem konzeptionellen Modell und erstellen ihr eigenes mentales Modell, wie etwas funktioniert.

Designer können Benutzern nicht sagen , wie eine App funktionieren soll – sie müssen eine Benutzeroberfläche angemessen entwerfen, um ihren Zweck klar zu kommunizieren. Mit anderen Worten, machen Sie die Benutzeroberfläche einfach zu verstehen und zu verwenden. Schlechtes Interaktionsdesign läuft Gefahr, das falsche mentale Modell für den Benutzer zu erstellen. Dies führt zu Verwirrung und Benutzerfehlern, da sie versuchen, die App auf eine Weise zu bedienen, die der Designer nicht beabsichtigt hat.

Freiberufliche UX-Designer in Vollzeit in den USA gesucht

Zuordnungen

Mapping ist die Beziehung zwischen Kontrollen und ihrer Wirkung in der Welt. Das Feedback- Prinzip ist eng mit dem Mapping verwandt, da die beiden Prinzipien zusammenarbeiten, um ein nahtloses Erlebnis zu schaffen. Nahezu alle Artefakte benötigen eine Art Zuordnung zwischen Steuerelementen und Effekten – im Fall des Schnittstellendesigns ist es die Beziehung zwischen einem Steuerelement und seiner resultierenden Funktion.

Auto-Dashboard-Bildschirm mit visuellem Feedback, das ein Interaktionsdesignprinzip demonstriert
Auto-Interaktionsdesign: Lautstärkeregler auf einem Lenkrad verwenden natürliches Mapping: Tippen Sie nach rechts, um die Lautstärke zu erhöhen, nach links, um die Lautstärke zu verringern, und das Feedback erfolgt sofort auf dem Dashboard.

Natürliche Kartierung – die sich physikalische Analogien und kulturelle Standards zunutze macht – führt zu einem unmittelbaren Verständnis. Beispielsweise kann ein Designer räumliche Analogien in der Benutzeroberfläche verwenden:

  • Um einen Wert mit einer Schiebereglerkomponente zu erhöhen, wischen Sie einen Schieberegler nach rechts,
  • Wischen Sie zum Verringern nach links.

Einige natürliche Zuordnungen sind biologisch, wie in dem universellen Standard, dass ein steigendes Niveau mehr darstellt, ein abnehmendes Niveau weniger.

Beispiele für das Prinzip des Natural Mapping Interaction Design mit physikalischen Analogien
Zuordnung zu vertrauten physikalischen Analogien: Knöpfe und Schieberegler (von Anton Kudin)

Einschränkungen

Das Designkonzept der Beschränkungen ist eine Methode, um zu bestimmen, wie die Art der Benutzerinteraktion eingeschränkt werden kann, die in einem bestimmten Moment stattfinden kann. Beschränkungen des Interaktionsdesigns tragen zu einer effizienten Interaktion bei, indem sie „Leitlinien“ für Benutzer bereitstellen – fast wie eine leitende Hand, die die Interaktionen steuert, die auftreten können.

Einschränkungen im Design stellen sicher, dass nur bestimmte Dinge aktiviert oder sogar sichtbar sind, um den Benutzer zu bestimmten Interaktionen zu führen. Es berücksichtigt Größe, Maßstab, Proportion, Betonung und Zustand und wie diese, wenn sie harmonisch zusammenarbeiten, dazu beitragen, Hierarchien zu schaffen und folglich den Benutzer zu beeinflussen. Korrekt eingerichtete Einschränkungen tragen auch dazu bei, die Wahrscheinlichkeit von Benutzerfehlern zu verringern.

Das Gegenteil von Einschränkung ist, wenn dem Benutzer alle Optionen angeboten werden, was es ihm schwer macht, zu entscheiden, was als nächstes zu tun ist. Es ist das Prinzip der Wahl . Je mehr Optionen, desto schwieriger ist es, sich für eine davon zu entscheiden – wir werden von all den Möglichkeiten überwältigt.

Großartiges Interaktionsdesign bringt nicht alle verfügbaren Optionen auf die Benutzeroberfläche, sondern beschränkt sie auf das, was in einem bestimmten Moment am wichtigsten ist.

Foursquare verwendet Designeinschränkungen, um verfügbare Interaktionen in ihrem Interaktionsdesign einzuschränken
Foursquare verwendet Designbeschränkungen, um verfügbare Interaktionen einzuschränken und die Aufgaben des Benutzers zu fokussieren

Konsistenz, Standards und Heuristiken

Diese sind alle verwandt – Brüder zu Mustern (unten), wenn Sie so wollen. Um Benutzerfehler zu vermeiden und eine Anwendung leicht erlernbar zu machen, ist es wichtig, dass ein Interaktionsmodell konsistent ist. Konsistenz verbessert die UX, die allgemeine Benutzerfreundlichkeit und die Effizienz, mit der Benutzer digitale Produkte verwenden können.

Konsistenz bedeutet, ähnliche Elemente zu verwenden, um ähnliche Aufgaben zu erfüllen, und überall ähnliche Funktionen und Verhaltensweisen zu haben – eine konsistente Schnittstelle ist eine, die Regeln folgt, wie z. B. die Verwendung derselben Operation, um etwas zu tun.

Das Share-Menü der Apple News iPad App ist ein großartiges Interaktionsdesign
Das „Teilen“-Menü in allen iPad-Apps ist ein Musterbeispiel für Konsistenz. Es funktioniert immer gleich.

Produkte, die eine hohe Benutzerfreundlichkeit anstreben, folgen etablierten Konventionen, Standards, Best Practices und Usability-Heuristiken (allgemeine Faustregeln, keine spezifischen Usability-Richtlinien).

Die Einhaltung einer Konvention kann beispielsweise in der Art und Weise liegen, wie eine Seite gestaltet ist. Webbenutzer verbringen 69 % ihrer Zeit mit der linken Hälfte der Seite und 30 % mit der rechten Hälfte. Daher ist es wahrscheinlicher, dass eine Website rentabel ist, wenn sie einem herkömmlichen Layout folgt.

Ein Standard könnte ein Breadcrumb Trail sein (ein sofort erkennbares Orientierungs- und Navigationsgerät) oder ein globales Navigationsmenü oben auf der Seite wie auf der BCC-Site.

Muster und Erlernbarkeit

Wie einfach kann ein neuer Benutzer lernen, auf einer Benutzeroberfläche zu navigieren? Niemand möchte etwas Neues lernen, es sei denn, es bietet einen erheblichen Vorteil gegenüber dem, was davor war – dennoch werden wir ständig mit ungetesteten, unkonventionellen Interaktionen überschwemmt.

Gemeinsame Komponenten oder Muster sorgen für sofortige Erlernbarkeit. Wenn du einmal gelernt hast, wie man einen Löffel benutzt, wirst du immer wissen, wie man einen Löffel benutzt. Dasselbe gilt für Fahrradfahren, Skaten … dasselbe Konstrukt gilt für die UI-Komponenten, die wir jeden Tag verwenden: Schaltflächen, Textfelder, Dropdown-Menüs, Kontrollkästchen, Optionsfelder, Spinner, Schieberegler, Symbole, Akkordeons, Suchfelder usw.

Interaktionsdesignmuster bilden die Grundlage der Prinzipien des Interaktionsdesigns
UI-Kits verwenden bekannte Standardmuster wie Komponenten für Formulare (von Keynotopia)

Die besten Interaktionsdesigns versuchen nicht, das Rad neu zu erfinden, sondern nutzen Muster effizient und effektiv auf neue Weise.

Muster fördern nicht nur die Erlernbarkeit, sondern sorgen auch für Konsistenz (ein weiteres oben diskutiertes Prinzip) und bringen es in Einklang mit den Erwartungen des Benutzers, wie die Dinge funktionieren sollten.

Visuelle Hierarchie und Betonung

Während ihrer Interaktion mit einer Website oder einer App suchen Menschen nach den Informationen, die für ihre Suche am relevantesten sind. Visuelle Hierarchie betrifft die Anordnung von Elementen in einer Weise, die Wichtigkeit impliziert. Die visuelle Hierarchie im Design beeinflusst die Reihenfolge, in der das menschliche Auge wahrnimmt, was es sieht. Nicht alles wird gleich „gewichtet“; Ordnung entsteht durch visuellen Kontrast zwischen Objekten in einem Wahrnehmungsfeld. Visueller Kontrast (Hervorhebung) kann durch Größe, Nähe, Farbe, Opazität und tatsächlichen tonalen Kontrast zwischen Elementen erreicht werden.

Mobiles UI-Design unter Verwendung der visuellen Hierarchie, eines der Gestaltungsprinzipien für Interaktionen
Diese mobilen Bildschirme verwenden eine visuelle Hierarchie, um den Benutzer auf bestimmte Bereiche des Bildschirms zu fokussieren und die Schwerkraft der Inhalte festzulegen (mobiles UI-Kit von Vonn)

Unterschätzen Sie nicht die Macht der visuellen Hierarchie. Es wird seit Äonen sehr effektiv in allen Arten von Design eingesetzt, in der Architektur und im Industriedesign sowie im Druckdesign. Sehen Sie sich einige tolle Posterdesigns an. Wenn man diese Technik im Interaktionsdesign gut anwendet, scheinen die richtigen Dinge zur richtigen Zeit auf die richtige Weise zu erscheinen.

Große Interaktionsdesigner nutzen die Kraft der Betonung, um erfolgreich „schlanke und gemeine“ Schnittstellendesigns zu erzielen, die wie Magie zu funktionieren scheinen.

Das Gesetz von Fitts

Ob Sie es glauben oder nicht, dieses Gesetz stammt aus frühen Studien, die sich mit der menschlichen Muskelbewegung und der Aufgabenleistung von Telegraphenbedienern und Produktionslinien befassten, und wurde später an HCI (Human-Computer Interaction) angepasst. Es besagt im Wesentlichen: „Die Zeit zum Erfassen eines Ziels ist eine Funktion der Entfernung zum Ziel und der Größe des Ziels.“

Einfacher ausgedrückt geht es darum, wie weit und wie groß ein Ziel ist und wie nahe es im Verhältnis zu anderen Zielen ist. Kürzere Mausbewegungen oder Taps sind besser – es ist immer schneller, auf ein Ziel zu klicken oder zu wischen, wenn es näher an Ihrer Startposition ist. Verwandte Aufgaben sollten sich auch in unmittelbarer Nähe zueinander befinden, damit Benutzer nicht auf dem Bildschirm herumhuschen müssen, um mit der Benutzeroberfläche zu interagieren.

Das Gesetz von Fitts kann die Zeit, die benötigt wird, um sich zu einem Ziel zu bewegen und es auszuwählen, genau vorhersagen. Ein Ziel kann eine Schaltfläche, ein Dropdown-Menü oder ein anderes interaktives Element auf einem Bildschirm sein. Wenn es zu weit, zu klein oder anklickbare Elemente zu nah beieinander liegen, wird die Effizienz und Benutzerfreundlichkeit der Benutzeroberfläche stark beeinträchtigt.

Beispiel einer Fitts-Gesetz-Benutzeroberfläche unter Verwendung eines der UX- und Interaktionsdesign-Prinzipien
Große Schaltflächen lassen sich leicht anvisieren. Unter Ausnutzung des Fitts-Gesetzes kann man auch Beschränkungen einführen, um Fehler zu vermeiden: Beachten Sie die Platzierung der Schaltfläche "Abbrechen" ganz links.

Gutenberg-Diagramm, Z- und F-Muster-Layouts

Diese Muster sind je nach Inhalt in verschiedenen Situationen anwendbar und werden hauptsächlich von westlichen Zielgruppen verwendet. Das Gutenberg-Diagramm beschreibt ein allgemeines Muster, durch das sich die Augen bewegen, wenn sie gleichmäßig verteilte, homogene Informationen betrachten – meist textlastige Seiten wie Blogs oder Nachrichtenseiten. Das Gutenberg-Diagramm deutet darauf hin, dass die starken und schwachen brachliegenden Bereiche außerhalb des Lesegravitationspfads liegen und nur minimale Aufmerksamkeit erhalten, wenn sie nicht auf irgendeine Weise visuell hervorgehoben werden.

Gutenberg-Diagramm
Das Gutenberg-Diagramm zeigt allgemeines Benutzerverhalten, bekannt als Lesegravitation.

Das Z-Muster folgt der Form des Buchstabens Z. In bestimmten Fällen wird dieses Muster auch als Zig-Zag-Muster bezeichnet. Der Hauptunterschied zum Gutenberg-Diagramm besteht darin, dass das Z-Muster darauf hindeutet, dass die Betrachter durch die beiden Brachflächen gehen. Ansonsten beginnen und enden sie immer noch an denselben Stellen und gehen immer noch durch die Mitte. Wie bei Gutenberg würde ein Designer die wichtigsten Informationen entlang des Pfades des Z-Musters platzieren.

Beispiel für das Lesen von Z-Mustern für das Interaktionsdesign
Die Website von iZettle optimiert das visuelle Scannen mit dem Z-Muster-Design

F steht für schnell und bezieht sich darauf, wie Benutzer Inhalte lesen. Das F-Muster wurde durch eine Eyetracking-Studie der NNGroup populär, bei der mehr als 200 Benutzer beim Lesen von Inhalten im Internet erfasst wurden. Es stellte sich heraus, dass die Scan-Muster der Benutzer über viele verschiedene Arten von Websites hinweg ziemlich konsistent waren.

Eyetracking untersucht das Scannen von F-Mustern und das Lesen von Inhalten auf Websites, eines der vielen Prinzipien des Interaktionsdesigns
Eyetracking-Studien zeigen beim Scannen von Seiten eine F-Muster-Heatmap (von der NNGroup)

Warum ist das wichtig? Auf einer E-Commerce-Website zum Beispiel möchten Sie zur Maximierung des Scanvorgangs möglicherweise die wichtigsten Inhalte so anordnen, dass sie dem F-Muster folgen.

Erkennen statt Erinnern

Wiedererkennung bezieht sich auf unsere Fähigkeit, ein Ereignis oder eine Information als vertraut zu „erkennen“, während die Erinnerung viel eher eine „kognitive Belastung“ ist, bei der es darum geht, verwandte Details aus dem Gedächtnis zu ziehen. Benutzern Dinge zu zeigen, die sie erkennen können, verbessert die Benutzerfreundlichkeit gegenüber der Notwendigkeit, Elemente von Grund auf neu abzurufen.

Symbole in einer Benutzeroberfläche sind sofort erkennbar – großartiges Interaktionsdesign
Standardsymbole sind sofort erkennbar

Beispielsweise ist die Verwendung von Symbolen in einer Benutzeroberfläche leistungsfähig, da sie die sofortige Erkennung eines Symbols ermöglichen. Unser Gehirn verarbeitet (erkennt) Symbole etwa 1000x schneller als das Lesen von Text. Wenn ein Designer in einem Dialog ein standardmäßiges Warnzeichensymbol anzeigt, wird der Benutzer sofort fokussiert und aufmerksam, da die nächste Aktion destruktiv sein kann. Wenn ein Symbol jedoch so gestaltet ist, dass Benutzer gezwungen werden, sich an eine Bedeutung zu erinnern und diese zu entschlüsseln – beispielsweise eine hochgehaltene Hand anstelle des Warnsymbols –, verringert dies die Effizienz und die Benutzerfreundlichkeit der Benutzeroberfläche.

Ästhetisches und minimalistisches Design

Man muss die Essenz eines Produktes zutiefst verstehen, um unwesentliche Teile loswerden zu können. – Jonathan Ive.

Dies ist eines der herausforderndsten Prinzipien, weil es schwierig ist. Die Tendenz bei Designern und Produktmanagern geht dahin, jede verfügbare Option unter der Sonne hinzuzufügen und den Benutzer entscheiden zu lassen, welchen Weg er einschlagen möchte. Das ist wirklich der faule Ansatz und führt zu Produkten voller unwesentlicher Unordnung.

Ästhetisches und minimalistisches Design der Apple-Website, ein UX- und Interaktionsdesign-Prinzip
Apple ist seit langem ein Verfechter von großartiger Ästhetik und minimalistischem, schlichtem Design.

Schnittstellen müssen von unnötigen Elementen und Inhalten befreit werden, die die Ziele und Aufgaben des Benutzers nicht unterstützen. Designer sollten nicht nur ästhetisch ansprechende Benutzeroberflächen entwerfen, sondern auch Informationen von Bildschirm zu Bildschirm im Benutzerfluss priorisieren. Unter Verwendung visueller Hierarchie und der Magie der Betonung sollten nur die wesentlichen und absolut minimalen Informationen präsentiert werden, die der Benutzer benötigt, um eine Aufgabe zu erledigen.

Michelangelo sagte über seine Arbeit: „Ich sah den Engel in den Marmor und schnitzte, bis ich ihn befreite.“

Neugestaltung der Lufthansa-Bordkarte für ein besseres Interaktionsdesign
Von Unordnung zu Einfachheit. Neugestaltung der Bordkarte von Kelsey Raymond

Um eine Interaktion zu entwerfen, die minimalistisch, ästhetisch ansprechend und einfach ist, muss der Designer verstehen, was genau in dem Moment vor sich geht, in dem Menschen das Produkt verwenden, und alles Unnötige loswerden. Die Durchführung umfassender Benutzerrecherchen und Tests, um zu verstehen, wie Benutzer das Produkt verwenden werden, ist in der Regel der beste Ansatz.

Fehlervermeidung

Benutzer werden bei der Ausführung einer Aufgabe oft abgelenkt, daher ist es entscheidend, unbewusste Fehler durch visuelle Hervorhebung, das Anbieten von Vorschlägen und die Verwendung sorgfältig entworfener Einschränkungen zu vermeiden. Eine Form der Fehlersicherheit – auch bekannt als Poka-Yoke – bezieht sich auf die Implementierung von ausfallsicheren Mechanismen, um zu verhindern, dass ein Prozess Fehler produziert.

Eine der besten Möglichkeiten, Fehler zu vermeiden, besteht darin, ein besseres mentales Modell zu entwerfen. Viele Benutzerfehler treten auf, wenn das Modell des Designers und die Interpretation, wie das System funktionieren sollte, nicht mit dem mentalen Modell des Benutzers übereinstimmen.

Standardentwurfskonventionen helfen (eines der oben genannten Prinzipien), weil sie den Benutzern helfen zu verstehen, welche Aktionen sie ausführen können. Benutzer, die mit Ihrer Website oder Anwendung interagieren, haben Tausende anderer Websites und Apps verwendet und erwarten, dass gemeinsame interaktive Elemente auf eine bestimmte Weise aussehen und funktionieren. Fehleranfällige Situationen können entstehen, wenn Ihr Produkt von diesen Konventionen abweicht.

Komischer Fehler

Warnen Sie, bevor Fehler gemacht werden, und bestätigen Sie vor destruktiven Aktionen. Noch besser als gut implementierte Fehlermeldungen ist ein sorgfältiges Design, das verhindert, dass ein Problem überhaupt auftritt. Versuchen Sie, fehleranfällige Umstände zu eliminieren, und überprüfen Sie sie regelmäßig.

Die Zukunft des Interaktionsdesigns

Neue Geräte, Umgebungen und Schnittstellen werden mit neuen Interaktionsmöglichkeiten weiter voranschreiten. Videospiel-Controller entwickeln sich ständig weiter und bieten eine Vielzahl von Eingabesteuerungen sowie haptisches Feedback. Gestenschnittstellen werden von Touchscreens, die 2D- und 3D-Gesten unterstützen – z. B. Gesten auf iOS- und Android-Geräten – bis hin zur Verwendung von Handgesten in 3D-Räumen zur Interaktion mit Virtual-Reality-Räumen, Spielkonsolen und IoT-Geräten reifen, mit denen wir unsere Umgebung steuern können .

Wie im Fall von Googles Project Soli können wir Sayonara zu Maus, Trackpads und Joysticks sagen und zu natürlicheren gestischen Interaktionen wechseln, indem wir unsere Hand und Finger verwenden, um Geräte zu steuern. In bestimmten Fällen – beispielsweise in Konversations-UIs – können sich die Eingabemethoden von Tastatur zu Sprache ändern. Dennoch wird das Prinzip des unmittelbaren und kontinuierlichen Feedbacks in irgendeiner Form (sprachlich, haptisch und visuell) weiterhin benötigt.

Google Project Soli gestisches interaktives Schnittstellensteuerungs-Interaktionsdesign
Gestische Steuerung der Benutzeroberfläche von Google Project Soli mit den Fingern (der Schieberegler veranschaulicht den Effekt)

Grundlegende Prinzipien des Interaktionsdesigns werden beim Design zukünftiger Systeme immer eine zentrale Rolle spielen, und es ist wichtig, dass UX/UI-Designer sie im Auge behalten. Sie sind keine festen Regeln, aber sie werden zu besseren und ansprechenderen Produkten und Dienstleistungen führen. Genauso wie erfolgreiche Filme alte Techniken des Geschichtenerzählens verwenden, die einer erprobten und wahren, altehrwürdigen Struktur folgen, gibt es Prinzipien des Interaktionsdesigns, die aus gutem Grund existieren. Wenn Sie sie befolgen, profitieren alle Produktdesigner von der Verbesserung der Benutzerfreundlichkeit und der Förderung einer breiteren Akzeptanz ihrer Produkte.

• • •

Weiterführende Literatur im Toptal Design Blog:

  • Designprinzipien: Einführung in die Hierarchie
  • UI-Design Best Practices und häufige Fehler
  • Erforschung der Gestaltungsprinzipien des Designs
  • Der umfassende Leitfaden zur Informationsarchitektur