Wenn Benutzer eine Website oder App öffnen, fallen ihnen zuerst die offensichtlichen Designelemente auf: Logo, Farben, Symbole, Illustrationen und Bilder. Diese Elemente tragen zwar zum Gesamterlebnis des Nutzers bei, sind aber eigentlich nur Teile eines größeren Puzzles: Interaktionsdesign. Dieses Konzept kann für den Endnutzer subtiler sein als eine auffällige neue Homepage, aber es ist für die Schaffung eines ansprechenden, intuitiven digitalen Erlebnisses von entscheidender Bedeutung.

Was ist Interaktionsdesign?

Beim Interaktionsdesign geht es um die Erleichterung von Interaktionen zwischen Nutzern und Produkten (meistens handelt es sich bei diesen Produkten um Anwendungen oder Websites). Laut der Interaction Design Foundation besteht das Ziel des Interaktionsdesigns darin, „Produkte zu entwickeln, die es dem Benutzer ermöglichen, seine Ziele bestmöglich zu erreichen.“ Mit anderen Worten: Interaktionsdesigner sind für die Gestaltung aller Elemente auf einem Bildschirm verantwortlich, mit denen ein Benutzer interagieren kann, sei es durch Klicken, Streichen, Tippen oder eine andere Art von Aktion.

Die fünf Dimensionen des Interaktionsdesigns dienen als hilfreiches Modell, um zu verstehen, was es beinhaltet. Das Modell wurde erstmals von Gillian Crampton Smith, einer Wissenschaftlerin im Bereich Interaktionsdesign, vorgestellt und umfasste zunächst nur vier Dimensionen. Kevin Silver, ein leitender Interaktionsdesigner bei IDEXX Laboratories, fügte die fünfte Dimension hinzu.

1D: Worte sollten einfach zu verstehen sein und dem Benutzer die richtige Menge an Informationen vermitteln (zu viele Details können überwältigen, während zu wenig Informationen Verwirrung stiften können).

2D: Visuelle Darstellungen wie Bilder, Typografie und Symbole sollten die Worte ergänzen, um dem Benutzer Informationen zu vermitteln.

3D: Physische Objekte oder der Raum bezieht sich auf die tatsächliche Hardware und Objekte, mit denen ein Benutzer interagiert. Benutzt er zum Beispiel ein Smartphone oder einen Laptop mit einer Maus? Und wo befinden sie sich, an ihrem Schreibtisch oder in einer überfüllten U-Bahn?

4D: Zeit bezieht sich auf die Art und Weise, wie die Nutzer den Fortschritt messen, z. B. mit Ton und Animation, und wie lange sie mit den ersten drei Dimensionen interagieren.

5D: Verhalten wurde von Kevin Silver hinzugefügt und umfasst die Art und Weise, wie die vorherigen Dimensionen die Interaktionen mit einem Produkt definieren. Es umfasst auch die Reaktionen der Nutzer und des Produkts.

Verwandt: 6 Gründe, warum UX-Designer gestische Interaktion erforschen sollten

10 Beispiele für Interaktionsdesign

Wie sieht Design-Interaktion im echten Leben aus? Hier sind einige unserer Lieblingsbeispiele, die wir auf Dribbble gefunden haben.

Von Jony vino. Die Rechnung mit seinen Freunden zu teilen, ist nicht immer so einfach, wie es scheint, vor allem, wenn man eher ein visueller Mensch ist als ein Zahlenmensch. Mit diesem App-Konzept können Sie die Gesamtrechnung eingeben, den Prozentsatz des Trinkgelds auswählen und dann sehen, wie viel jede Person zahlen wird. Und das Beste daran? Anstatt den Anteil jeder Person manuell anzupassen und ständig zu aktualisieren, können Sie einfach die Größe des Bereichs jeder Person in der App ändern, und die Zahlen werden automatisch für alle neu berechnet.

Von Prem Gurusamy. Auf den meisten E-Commerce-Websites müssen Sie zu einem völlig anderen Teil der Website oder App navigieren, um Ihren Warenkorb zu sehen. Bei dieser Interaktion können Sie sofort sehen, wie Ihre Artikel in den Warenkorb „fliegen“, sobald Sie auf die Schaltfläche „In den Warenkorb“ klicken. Der Einkaufswagen zeigt Ihre Artikel auch dann an, wenn Sie andere Bereiche der Website besuchen.

Von Igor Pavlinski. Social-Media-Apps sind berüchtigt für ihre Informationsflut: Sie zeigen alle Top-Storys, aktuelle Videos oder Artikel und aktuelle Nachrichten auf einmal an. Dieses Konzept für eine neue Social-Media-App legt die Kontrolle wieder in die Hände des Nutzers, indem es die Inhalte nach Quellen (wie YouTube, Vimeo, Twitter oder Reddit) ordnet und den Nutzer wählen lässt, welchen Kanal er erkunden möchte. Dank des kartenähnlichen Layouts müssen Sie nicht mehr zwischen verschiedenen Apps hin- und herspringen, um Ihre Lieblingsinhalte zu konsumieren. Stattdessen ist es einfach, innerhalb ein und derselben Anwendung zwischen verschiedenen Quellen zu wechseln.

Von tubik. Es gibt eine Million Möglichkeiten, deinen Burger zu personalisieren. Und wenn man mit dem Smartphone bestellt, kann die Auswahl jeder einzelnen Zutat auf einem kleinen Bildschirm zu einer Übung in Fingerfertigkeit werden. Dieses UI-Konzept für die Tasty Burger App vereinfacht das Bestellverfahren, indem es die Zutaten nach Typ gruppiert. Anstatt eine lange Liste mit allen möglichen Variationen von Käse, Produkten, Fleisch oder Brötchen anzuzeigen, klickt man zunächst auf die Kategorie der Zutat (z. B. Käse) und erhält dann die verschiedenen Arten, wie Gouda oder Comte.

von Rahul.Design. Wenn Sie auf Wohnungssuche sind und die Immobilie nicht persönlich besichtigen können, ist die nächstbeste Option eine virtuelle Tour. Dieses Konzept für die Immobilien-App Spec macht sich unser natürliches Verhalten zunutze, wenn wir uns einen neuen Raum ansehen. Sie können in jeden beliebigen Raum klicken, z. B. in die Küche oder das Wohnzimmer, und Ihr Telefon bewegen, um eine 360-Grad-Ansicht zu erhalten. Mit nur einem Fingertipp kann man zwischen den Räumen wechseln.

Von Forest Plasencia. Filter bieten eine leistungsstarke und einfache Möglichkeit, verschiedene Informationsbereiche zu visualisieren. Das Problem bei vielen Filterinteraktionen ist jedoch, dass sie ein Popup oder eine neue Seite in der App öffnen und genau die Informationen verbergen, die Sie filtern möchten. Mit dieser Mikro-Interaktion bleibt alles in der gleichen Ansicht, auch wenn Sie filtern. Auf diese Weise können Sie sehen, wie sich die Daten sofort ändern, wenn Sie verschiedene Filterkriterien auswählen.

Von Dmitro Petrenko. Dank Smartphone-Apps ist es einfacher denn je, das eigene Haus zu bewaffnen und zu überwachen, aber zwischen 94 % und 99 %

der Daten: Erstellen eines Tools, das Benutzerinteraktionen aufzeichnet

Von Gil. Diese einfache Seiteninteraktion verbessert das Nutzererlebnis vor Ort und hilft dem Unternehmen, die Besucher länger auf seinen Seiten zu halten. Der Hauptzweck der Website besteht darin, zu zeigen, wie diese Immobilien in der Natur, als Büro und als Nebengebäude genutzt werden können. Anstatt für jeden Zweck separate Erlebnisse zu schaffen, ahmt diese Seite den Benutzerfluss nach, indem sie die verschiedenen Verwendungszwecke vergleicht und gegenüberstellt und nahtlos zwischen ihnen hin- und herspringt.

Von Dominik Martin. Interaktionen müssen nicht plakativ und auffällig sein, um Eindruck zu machen. Dieses App-Konzept vereinfacht ein Verhalten, das wir alle verabscheuen – die Auswahl des Wohnsitzlandes aus einer langen Liste. Anstatt die Benutzer durch die Liste scrollen zu lassen, um ihr Land zu finden, müssen sie bei dieser Mikrointeraktion zuerst den ersten Buchstaben ihres Landes auswählen und es dann aus einer viel kleineren, konzentrierten Liste von Ländern finden.

Von Mykolas Puodziunas. Immer mehr Einzelhandelswebsites erleichtern Ihnen die „Schnellansicht“ eines Artikels, so dass Sie nicht mehr auf jede Detailseite klicken und dann zu den Suchergebnissen zurückkehren müssen, um weitere Artikel zu durchsuchen. Dieses Konzept geht noch einen Schritt weiter und ermöglicht es Ihnen, jedes Produkt in seinen verschiedenen verfügbaren Farben anzusehen, ohne die Kategorieseite verlassen zu müssen.

Haben wir Ihr Lieblingsbeispiel für Interaktionsdesign verpasst? Teilen Sie es mit uns auf Twitter: @InVisionApp.