Guide

UI Design for Humans

Eine Schritt-für-Schritt-Anleitung zur Anwendung von Interaction Archetypes
Zuletzt aktualisiert: May 2023

Jetzt hast du alles an der Hand, um User Interfaces zu gestalten, die das menschliche Verhalten in den Mittelpunkt der Interaktion stellen.

Robert Goesch
Autor
Robert Goesch
Lukas Rütten
Autor
Lukas Rütten

Was steht in diesem Guide?

01 Interaction Archetypes im Überblick
 Mit nur drei Arten von Content spielst du die gesamte Klaviatur einer Interaktion.
02 So kommt es zur User Experience Content, User Goals, Interaction und Business Goals stehen in Beziehung. Das UI führt diese zusammen und kreiert damit Experience.
03 Wie du das Archetype Canvas einsetzt Nutze das Archeteype Canvas als Designmethode, als Denkwerkzeug, als Entscheidungsgrundlage und als Kommunikationsrahmen.
04 Das Archetype Canvas – 
Das große Ganze fixieren Das Canvas hilft dir, deine Gedanken zu strukturieren und den Content deiner Interaktion in Relation zueinander zu setzen.
05 Spot – 
Interaktionsmoment lokalisieren Starte immer mit dem Interaktionsmoment und verschaffe dir Gewissheit über den Zweck deiner Interaktion.
06 Plan – 
Interaction-Strategy aufstellen Definier die strategische Ausrichtung der Interaktion. Sie bildet die Referenz, um Content zu priorisieren und zu bewerten.
07 Nutzungsabsicht – Content gewichten Gewichte Core, Extend und Jump entsprechend der Nutzungsabsicht, welche du adressieren willst.
08 Play – 
Content-Hierarchy ableiten Beschreibe die Maßnahmen, mit denen du die strategischen Ziele erreichen willst. Entscheide, in welcher Relation zueinander du Inhalte platzierst.
09 Nutzungskontext – 
Content justieren Beachte bei der konkreten Ausprägung der Informationen und Funktionen den Nutzungskontext, in dem die Interaktion stattfindet.
10 Check — Design Review durchführen Nutz Daumenregeln bei der Design Review deiner Entwürfe. Sie helfen dir dabei, die Interaktion mit deinem Produkt effizient und effektiv zu machen.
11 Interaktionsmuster – Mit Interaction Archetypes das Nutzungsverhalten stützen Nutzer:innen klicken, scrollen, scannen. Durch Interaction Archetypes wirst du diesen Mustern gerecht.
12 Die Grundlagen und Benefits von Interaction Archetypes Auf Basis von Interaction Archetypes entwickelte digitale Services und Produkte performen besser. Darauf deuten Messungen von verschiedenen KPI hin.
13 Intuitive Interfaces dank Interaction Archetypes Interaktion, strategische Ausrichtung, Content-Maßnahmen, Nutzungsabsicht, Nutzungskontext und Daumenregeln. Fertig.

Dieser Guide erklärt dir, wie du die Interaction Archetypes einsetzt: um User Interfaces zu gestalten, um Anforderungen zu bewerten und zu synthetisieren und um Designvorschläge sicher zu artikulieren. Welche Informationen und Funktionen sind wirklich wichtig? Wo und wann platzierst du sie? Wie verleihst du ihnen den gestalterischen Ausdruck, den sie brauchen, um zu funktionieren? Und welches Ziel verfolgst du damit? Fragen wie diese gehören zum Arbeitsalltag von allen, die digitale Produkte entwickeln – nicht nur von Designer:innen. Sie alle benötigen Kriterien zur Entscheidung, nach denen sie Anforderungen und User Interfaces bewerten.

Nur wenn Nutzer:innen meinen, dass sie mit dem Produkt Fortschritte machen, setzen sie die Interaktion mit ihm fort. Und nur dann kann das Produkt unternehmerischen Ziele erreichen.

Interaction Archetypes im Überblick


Du kannst die Interaction Archetypes jedem User Interface zugrunde legen. Sie beschreiben wie Content beschaffen sein muss, um die Absicht der Nutzung bestmöglich zu adressieren. Damit verfügst du über ein Modell, das dir dabei hilft User Interfaces effizient und effektiv zu entwickeln.

Content nach drei Typen unterscheiden

Das Framework Interaction Archetypes unterscheidet drei Arten von Content, die ein grundlegendes Interaktionsmuster für digitale Produkte adressieren.

Core-Content

Content, den Nutzer:innen brauchen, um eine Aufgabe zu erledigen. Content dieser Art verkörpert das Wesen der Interaktion. Er ist leicht zu erfassen. In gewisser Weise bildet er die minimalste Ausprägung von Information und Funktion, um eine Aufgabe zu erledigen. Definier den Core.

Content nach Nutzungsabsicht gewichten

Das Framework Interaction Archetypes adressiert drei Kategorien grundlegender Nutzungsabsichten. Diese Arten von Intentionen geben dir Aufschluss darüber, wie du Content in verschiedenen Kontexten einsetzen und gewichten kannst.

Act

Nutzer:innen verfolgen ein klares Ziel. Der konkrete Lösungsweg steht für sie bereits fest. Alles, was sie noch abhält, sind die notwendigen Schritte, um das Ziel zu erreichen. Der Content braucht einen Fokus auf den Core.

So kommt es zur User Experience

Beim Gestalten von Interfaces treffen immer wieder zwei unterschiedliche Ziele aufeinander. Die Ziele der Unternehmung auf der einen Seite und die Ziele der Nutzer:innen auf der anderen. Beide sind nur allzu selten deckungsgleich. Dazwischen liegt das Produkt. In unserem Fall ein digitales Produkt oder ein digitaler Service. Mit seinem Interface bildet es die Brücke, über welche beide Parteien auf nahezu magische Art und Weise ihre Ziele erreichen können. Dazu bietet das Unternehmen Content an, mit dem Nutzer:innen in Interaktion treten können.

Content meint alle Informationen oder Funktionen, die ein digitales Produkt oder ein digitaler Service zugänglich macht, sodass Nutzer:innen eine Aufgabe erledigen können.

Interaktion bedeutet dann, dass Nutzer:innen diesen Content nutzen, und zwar in einer bestimmten Reihenfolge, zu einer bestimmten Zeit, in einem bestimmten Kontext und mit einer spezifischen Intention. Sie wollen dadurch eine Aufgabe erledigen und Fortschritt machen.

CUBI User Experience Model nach Corey Stern mit Content, User Goals, Interaction und Business Goals.

Die Dimensionen Content, User Goals, interaction und Business Goals stehen in einer wechselseitigen Beziehung. Das User-Interface führt diese vier Dimensionen zusammen und kreiert damit Nutzungserlebnisse.

Dazu setzt das Unternehmen zur Kommunikation Content ein, um Nutzer:innen mithilfe von Informationen und Funktionen anzusprechen. Diese reagieren auf das Angebot sofern es für sie Relevanz hat. In diesem Fall treten sie in Aktion und nutzen den Content, um eine Aufgabe zu erledigen und ihrem angestrebten Ziel näher zu kommen. Diese Interaktion führt im Gegenzug zu einer Transaktion, welche einen unternehmerischen Wert kreiert und die Organisation ihren eigenen Zielen näher bringt.

Die Aufgabe von Produktteams ist also: Content so zu kommunizieren, dass Nutzer:innen effektive und effiziente Interaktionen erleben. Effektiv sind Interaktionen, wenn sie dabei helfen, deren Ziele zu erreichen. Und effizient ist das Ganze, wenn es runtergeht wie Butter.

Das Archetype Canvas hilft, die Brücke zwischen Business Goals und User Goals zu schlagen und mit Hilfe von Content die passenden Interaktionen zu modellieren.

Wie du das Archetype Canvas einsetzt

Wir haben das Framework Interaction Archetypes entwickelt: unser Leitfaden zeigt dir, wie du das Archetype Canvas einsetzt, um das Modell in deinem Design-Workflow zu berücksichtigen.

Als Designmethode

Wir setzen das Archetype Canvas gezielt als Interaction Blueprint ein, um die Interaction-Strategy und zugleich auch die Content-Hierarchy für dein User-Interface zu entwickeln – und beides aufeinander abzustimmen. Damit strukturierst du Inhalte effektiv und effizient. Die Methode spielt ihre Stärken dann aus, wenn viele spezifische Anforderungen den Prozess zur Herausforderung machen und komplexe Aufgaben der Nutzer:innen in verständliche und angenehme Interaktionen heruntergebrochen werden müssen. Sie hilft dir, auf strategischer Ebene Klarheit über den Zweck und die Ziele einer Interaktion zu schaffen und gestalterische Aktivitäten zu fokussieren. Du gewinnst an Struktur, um deine Designentwürfe kontrolliert zu modellieren.

Als Denkwerkzeug

Das Archetype Canvas ermöglicht es dir, die Struktur für den Content lösungsorientiert aus verschiedenen Blickwinkeln zu betrachten. Du schaffst so Spielräume und kannst unterschiedliche Designalternativen erkunden. Das erhöht die Chance, das Produkt erfolgreich zu differenzieren und sein Potenzial voll zu entfalten.

Als Entscheidungsgrundlage

Das Archetype Canvas dient als Grundlage, um Inhalte zu priorisieren und Designentwürfe zu bewerten. Du formulierst Ziele für den Content. Alle Projektbeteiligten verfügen mit diesen im weiteren Verlauf über Entscheidungskriterien, um konstruktiv an einer Lösung zu arbeiten.

Als Kommunikationsrahmen

Das Archetype Canvas eignet sich auch als Rahmen für die Kommunikation im Team oder mit Stakeholdern. Einer der größten Vorteile besteht darin, dass du deine gestalterische Arbeit auf verständliche Weise artikulieren kannst — auch gegenüber Leuten ohne Design-Background. Es hilft dem gesamten Produktteam bei Diskussionen und gemeinsamen Entscheidungen. Es nutzt ein Vokabular, mit dem alle Beteiligten ein gemeinsames Verständnis herstellen können.

Das Archetype Canvas – 
Das große Ganze fixieren

Dreh- und Angelpunkt ist das Canvas selbst, was dir hilft, deine Gedanken zu strukturieren und den Content deiner Interaktion in Relation zueinander zu setzen. Auf dem Archetype Canvas beschreibst du den Moment deiner Interaktion, stellst eine Interaction-Strategy auf und leitest eine Content-Hierarchy ab.

1. Interaktionsmoment

Der Interaktionsmoment beschreibt den Zweck deiner Interaktion. Er gibt Aufschluss über die Aufgabe und die damit einhergehenden Ziele der Nutzer:innen. Er veranschaulicht, woran der Erfolg einer Interaktion gemessen werden kann und welchem Zweck dein User-Interface dient.

2. Interaction-Strategy

Die Interaction-Strategy beschreibt die Nutzerführung über den gesamten Verlauf einer Interaktion. Sie markiert das grundsätzliche Ziel aller deiner Maßnahmen. Aus dem Plan leitest du ab, wie die Interaktion gestaltet sein muss, damit Nutzer:innen bestmöglich Fortschritt machen. Je besser der Plan, desto effektiver die Interaktion.

3. Content-Hierarchy

Die Content-Hierarchy beschreibt, wie du deine strategischen Ziele erreichen willst. Dabei geht es vor allem darum, welche Informationen und Funktionen du einsetzt, und in welcher Relation diese zueinander stehen.



Entscheidend ist die grundsätzliche Mechanik mit der wir uns dem Interface nähern. Erst verschaffen wir uns einen Überblick und lokalisieren den Moment, in dem unsere Interaktion stattfindet. Dann stellen wir die strategischen Ziele auf, die wir mit der Interaktion verfolgen. Und leiten den entsprechenden Content ab, mit dem wir eine intuitive User Experience schaffen. So stellen wir sicher, dass unsere Designaktivitäten maximale Wirkung zeigen.

Nochmal in aller Kürze

  • Der Interaktionsmoment beschreibt den Zweck der Interaktion. Wozu soll es das Interface geben?
  • Die Interaction-Strategy beschreibt die strategischen Ziele der Interaktion. Was genau soll das Interface tun?
  • Die Content-Hierarchy beschreibt, wie deine Interaktion aufgebaut ist. Wie willst du das im Interface umsetzen?

Spot – 
Interaktionsmoment lokalisieren

Mit dem Interaktionsmoment grenzen wir den Lösungsraum ein. Eine Interaktion steht immer im Zusammenhang mit vorausgegangenen und folgenden Interaktionen. Bevor wir Ziele definieren, müssen wir zunächst umreißen, welchem Zweck eine Interaktion dient. So verorten wir nicht nur die einzelne Interaktion entlang der Customer Journey, sondern schaffen Maßstäbe, an denen Erfolg gemessen werden kann.

Beschreib die Aufgabe

Die Aufgabe beschreibt, wozu die Interaktion dient. Also die Funktion vom User-Interface. Damit definiert sie den Sinnzusammenhang, in welchem der Content zum Einsatz kommt. Wichtig dabei ist, dass sich die Aufgabe über unterschiedliche Ausprägung eines Interface hinweg erstrecken kann. Wenn die Aufgabe des User-Interface die »Authentifizierung zur Nutzung« ist, kann sie sowohl in einem als auch in mehreren Schritten gelöst werden. Und auch über unterschiedliche Interaktionen hinweg. Entscheidend ist, dass die Interaktion im Kontext derselben Aufgabe steht. Damit setzt du unterschiedliche Interaktionen in Relation zueinander und gewinnst an Klarheit über das mentale Modell der Nutzer:innen.

Beschreib die Nutzungsabsicht

Die Nutzungsabsicht beschreibt die treibende Kraft, mit der Nutzer:innen die Aufgabe lösen. Es gibt keine Nutzung ohne Absicht – egal, ob sie der handelnden Person bewusst ist oder nicht. Die Absicht entsteht aus der Motivation heraus, ein Ziel zu erreichen. Durch Interaction Archetypes sind wir in der Lage, auf unterschiedliche Nutzungsabsichten einzugehen. Entscheidend sind jedoch drei Kategorien, die uns dabei helfen den Zweck der Interaktion zu bestimmen: Act, Understandund Explore. Im Beispiel der Authentifizierung folgen Nutzer:innen der Absicht Act. Sie verfolgen dabei ein klares Ziel und stehen dabei vor einer konkreten Aufgabe. Die Nutzungsabsicht wird im weiteren Verlauf die Art und Weise deines Contents prägen.

Beschreib den Erfolg

Jede gelöste Aufgabe führt zu einem Erfolgserlebnis. Aber auch während der Auseinandersetzung mit einer Aufgabe kann es bereits zu Teilerfolgen kommen. Je mehr Etappenziele, desto tiefer zoomst du in die Aufgabe hinein. Je weniger Etappenziele, desto weiter zoomst du hinaus. Du bestimmst in gewisser Weise die Flughöhe deiner Interaktion. Du kannst die Authentifizierung in einem Schritt, zwei Schritten oder gar x Schritten erledigen. Bei der Zoomstufe einer Interaktion ist entscheidend, ob die Mehrwerte für Nutzer:innen größer sind als die Reibung, die dadurch entsteht. Der nächste Erfolg der Nutzer:innen wird so auch zu einem Erfolgsindikator für deine Interaktion.

Beschreib das Ziel

Das Ziel beschreibt den Fortschrittswunsch der Nutzer:innen. Unser Ziel ist es, Nutzer:innen mit jeder einzelnen Interaktion dem Ziel näher zu bringen. Das Ziel sorgt dafür, dass wir auf dem richtigen Pfad bleiben und das große Ganze nicht aus den Augen verlieren. Beim Log-in dürfen wir nicht vergessen, dass der Log-in selbst in der Regel kein Ziel der Nutzer:innen darstellt. Es ist das Mittel zum Zweck, um dem Zielzustand näher zu kommen. Dennoch bringt auch diese Interaktion beide Seiten weiter. Check!

Plan – 
Interaction-Strategy aufstellen

Mit der Interaction-Strategy definierst du Ziele, die du mit den unterschiedlichen Inhalten einer Interaktion verfolgst. Sie beschreibt, was wir mit dem Core, dem Extend und dem Jump erreichen wollen. Die Bereiche stehen in Relation zueinander. Sie bauen in gewisser Weise aufeinander auf. Jedoch sind sie nicht als Layout oder Abfolge zu verstehen. Es geht darum, sie zu definieren und miteinander in Beziehung zu setzen.

Definier den Core

Der Core definiert das Ziel der Interaktion. Du formulierst damit ein Versprechen an die Nutzer:innen: »Diese Interaktion ermöglicht es dir, deine Aufgabe zu erledigen und so Fortschritt in Richtung deines Ziels zu machen.« Denk dran: Nutzer:innen verfolgen mit der Nutzung deines Produkts ein ganz bestimmtes Ziel. Unabhängig davon, ob ihnen dies bewusst ist oder nicht. Dein Angebot soll sie ihrem Ziel näher bringen. Je schneller und deutlicher der Core vermittelt, welche Aufgabe Nutzer:innen mit der Interaktion erledigen können, desto besser fühlen sie sich aufgehoben.

Das bedeutet im Umkehrschluss, dass Nutzer:innen, die sich nicht angesprochen fühlen, nicht interagieren werden – ja sogar nicht interagieren sollen. Das mag komisch klingen, ist allerdings nur konsequent.

Für den Core gelten folgende Prinzipien:
  • Zahlt unmittelbar auf den Erfolgsfaktor ein
  • Schnell erkennbar
  • Spürbar und erfahrbar
  • Bietet Orientierung
  • Befördert das Engagement

Definier den Extend

Der Extend wirkt unterstützend. Er vermittelt ein Gefühl der Sicherheit, die Aufgabe auch tatsächlich bewältigen zu können. Dazu gilt es, Wissen zu vermitteln und Hürden abzubauen. Alle Informationen und Funktionen beziehen sich auf das für den Core definierte Ziel. Mit dem Core hast du eine Erwartung geweckt, auf die du nun einzahlen musst, um Nutzer:innen nicht zu enttäuschen. Im Extend gibst du ihnen alle weiteren Werkzeuge an die Hand, die sie zur Erledigung der Aufgabe über den Core, also die minimalste Ausprägung, hinaus noch benötigen.

Mit dem Extend berücksichtigst du außerdem die unterschiedlichen Erfahrungen und Kenntnisse der Nutzer:innen. Ist die Aufgabe alltäglich oder setzt sie gar Fachwissen voraus? Definiere, in welcher Form der Extend Nutzer:innen befähigt, ihre Aufgabe zu erledigen. Der Content aus dem Extend ermöglicht eine aktive Auseinandersetzung mit der Aufgabe.

Für den Extend gelten folgende Prinzipien:
  • Berücksichtigt unterschiedliche Vorkenntnisse
  • Baut Hürden ab
  • Vermittelt ein Gefühl der Selbstsicherheit, die Aufgabe lösen zu können
  • Bietet Hilfestellung bei der Erledigung einer Aufgabe

Definier den Jump

Der Jump bietet andere Lösungswege als der Core. Er zahlt jedoch auf dasselbe Ziel der Nutzer:innen ein. Damit aktivierst du Nutzer:innen und hältst sie am Browsen. Du verhinderst, dass sie in eine Sackgasse laufen, weil ihnen die angebotene Interaktion nicht weiterhilft. Du willst erreichen, dass sie weiter Fortschritte machen – am besten mit deinem Produkt.

Mit dieser Komponente weichst du somit vom ursprünglichen Ziel der Interaktion ab und eröffnest alternative Lösungsräume, um Fortschritt zu machen. Nutzer:innen kommen zwar mit einer Absicht auf die Seite. Dein Angebot ist jedoch nur eines von vielen. Sie haben sich nicht gegen, aber auch nicht für dein Angebot entschieden. Mit dem Jump wechselt nun scheinbar die Ausrichtung der Interaktion, tatsächlich adressiert sie aber weiterhin ihr Ziel.

Für den Jump gelten folgende Prinzipien:
  • Aktiviert Nutzer:innen
  • Hält Nutzer:innen am Browsen
  • Verhindert Sackgassen
  • Ermöglicht Fortschritt

Nutzungsabsicht – Content gewichten

Hinter jedem Verhalten steht eine Absicht, bewusst oder unbewusst. Wissenschaftliche Modelle der Verhaltenspsychologie sehen die Intention als wesentliche Kraft hinter den Handlungen von Menschen. Das gilt auch für digitale Interaktionen.

Mit dem Framework bist du in der Lage, aktiv auf die Nutzungsabsicht einzugehen. Sie bildet die Grundlage für die Gewichtung von Core, Extend und Jump. Das heißt, du adressierst unterschiedliche Absichten und optimierst das Interaktionserlebnis der Nutzer:innen dadurch maßgeblich. Indem du einzelne Bereiche betonst, bedienst du unterschiedliche Verhaltensabsichten. Im ersten Schritt ist es wichtig, ein Gefühl für die Ausrichtung zu bekommen. Erst danach machst du dir Gedanken über den konkreten Content und seine Gestaltung. Es gibt unzählige Absichten, denen Menschen folgen, wenn sie sich für ein digitales Angebot entscheiden. Verschiedene Studien kommen jedoch zum Schluss, dass sich ein Großteil der Nutzungsabsichten kategorisieren lässt, sie kommen zu ähnlichen Ergebnissen. Jede dieser Arten von Intention zieht ein für sie typisches Verhalten nach sich. Wir leiten aus den Studien drei wesentliche Kategorien für unser Framework Interaction Archetypes ab.

Act: Fokus auf den Core

Nutzer:innen verfolgen ein klares Ziel und stehen dabei vor einer konkreten Aufgabe. Der Lösungsweg steht für sie bereits fest. Daher können Nutzer:innen die Ergebniserwartung in der Regel klar benennen. Typischerweise gehen sie fokussiert und strukturiert vor. Sie möchten im Rahmen ihres Wissens und ihrer Fähigkeiten möglichst zeitsparend und ohne Umwege ans Ziel kommen. Nutzer:innen erwarten ein eindeutiges Ergebnis. Alles, was sie noch von der Lösung trennt, sind die notwendigen Schritte.

Fokus auf den Core: Verfolgt die Mehrheit der Nutzer:innen die Nutzungsabsicht Act, betonst du den Core. Stell ihn ins Zentrum der Gestaltung, dann erzeugst du maximalen Fokus auf die Aufgabe, die der Interaktion zugrunde liegt. Der Fokus wirkt umso stärker, je weniger informative oder inspirierende Elemente von der Interaktion ablenken. Diese Ausprägung kennzeichnet etwa Interaktionen, die einen Kaufabschluss verfolgen.

Understand: Fokus auf Extend

Nutzer:innen verfolgen zwar ein übergeordnetes Ziel, die Lösung steht jedoch noch nicht fest. Sie brauchen weitere Informationen, um den richtigen Lösungsweg zu finden. Ihr Verhalten ist durch eine gründliche Vorgehensweise gekennzeichnet, die Zeit in Anspruch nehmen darf. Sie möchten Erkenntnisse gewinnen, Fragen beantworten, Informationen vergleichen und so ihr Gefühl von Unsicherheit auflösen.

Fokus auf den Extend: Wenn die Nutzungsabsicht dem Schema Understand entspricht, bietet der Fokus auf den Extend das Futter für die Nutzer:innen. Sie können sich relevante Informationen aneignen und ihr Verständnis vertiefen. Sukzessive baut der Extend Hürden für den weiteren Fortschritt ab. Diese Ausprägung findet sich in Interaktionen wieder, die dem Überzeugen und Vergleichen dienen. Diese nutzt du beispielsweise dann, wenn du ein Unternehmen oder ein Produkt vorstellst.

Explore: Fokus auf Jump

Nutzer:innen haben weder eine konkrete Aufgabe noch einen bestimmten Lösungsweg im Sinn. Sie folgen einem Bedürfnis wie Unterhaltung, Entdecken oder Zerstreuung – sie möchten etwas erleben. Charakteristisch ist der Konsum vieler verschiedener Inhalte in kurzer Zeit.

Fokus auf den Jump: Mithilfe des Jump bedienst du die Verhaltensabsicht Explore. Mit unterschiedlichem Content regst du Nutzer:innen zum Browsen an. Entscheidungen rücken in den Hintergrund, Inspiration in den Vordergrund. Diese Gewichtung findet sich bei erlebnisorientierten Interaktionen wie beispielsweise auf Youtube oder Pinterest wieder.

Play – 
Content-Hierarchy ableiten

Mit der Content-Hierarchy beschreibst du die konkreten Maßnahmen, mit denen du die Ziele deiner Interaction-Strategy erreichen willst, und setzt sie in Relation zueinander. Mit der Interaction-Strategy hast du Kriterien geschaffen, nach denen du jetzt entscheidest, welchen Content du platzierst.

Spiel den Core aus

Der Core steht für das Versprechen der Interaktion. Um ihn auszuspielen, musst du die Funktion oder Information finden, mit der Nutzer:innen ihre Aufgabe auf Anhieb erledigen können. Ohne Kompromisse, ohne Umwege. Es geht um den einen Zug, mit dem du das Versprechen einlöst.

Folgende Leitfragen helfen, die passende Funktion oder Information zu finden:
  • Mit welchen Funktionen oder Informationen können Nutzer:innen ihre Aufgabe sofort erledigen?
  • Was verleiht dem Core Ausdruck, sodass das Wesen der Interaktion auf Anhieb erfahrbar ist?
  • Ist es möglich, mit nur einer Call-to-Action (CTA) auf den Core der Interaktion einzuzahlen?
  • Wie steuerst du den Autopiloten der Nutzer:innen an und förderst schnelles Denken?
  • Wie reduzierst du Komplexität und schaffst Fokus?

Spiel den Extend aus

Nicht alle Nutzer:innen verfügen über dasselbe Wissen, dieselbe Erfahrung oder befinden sich im selben Umfeld. Im Extend räumst du die Hürden aus dem Weg. Hier gilt es, den Kontext zu berücksichtigen. Dabei gestaltest du das Angebot so, dass Nutzer:innen ein Gefühl von Sicherheit erlangen. Alle Inhalte im Extend helfen ihnen dabei, die Aufgabe zu erledigen und Fortschritt zu machen.

Folgende Leitfragen unterstützen dabei, die passenden Hilfestellungen zu identifizieren:
  • Welche weiteren Informationen und Funktionen helfen, die Aufgabe zu erledigen?
  • Welches Wissen könnte fehlen?
  • Auf welche Weise lassen sich die wichtigsten Aspekte kommunizieren?
  • Welche Pattern setzt du ein, um gezielt Orientierung zu bieten?
  • Wie gelingt es, das langsame Denken zu stimulieren und so ein tieferes Verstehen zu ermöglichen?

Spiel den Jump aus

Hier geht es darum, Nutzer:innen on track zu halten. Tritt einen Schritt zurück und überlege: Welchem Ziel könnten Nutzer:innen näher kommen wollen, wenn ihnen Core und Extend zuvor nicht weiterhelfen konnten? Es gilt weitere Angebote zu finden, die Fortschritt ermöglichen. Gefragt sind passende Alternativen, die den Kontext der Nutzung berücksichtigen.

Folgende Leitfragen helfen, Angebote für den Plan B auszuwählen:
  • Welches Ziel liegt der Interaktion der Nutzer:innen zugrunde?
  • Gibt es alternative Angebote, die zu diesem Bedürfnis passen?
  • Welche Pains verspüren Nutzer:innen?
  • Können andere Anreize Nutzer:innen am Browsen halten?
  • Welchen Job versuchen Nutzer:innen zu erledigen?

Nutzungskontext – 
Content justieren

Interaktionen mit digitalen Produkten oder Services finden nicht unter Laborbedingungen statt. Nicht alle Einflüsse sind vorherzusehen. Es gibt jedoch eine Handvoll Faktoren, die jede Interaktion beeinflussen. Wir bezeichnen sie in Anlehnung an die Verhaltenspsychologie als den Nutzungskontext. Der Nutzungskontext beeinflusst die Art und Weise der Interaktion. Seine Einflüsse haben das Potenzial, die Interaktion maßgeblich zu behindern oder zu bestärken. Sie verraten dir, wie du die Interaktion so gestaltest, dass Nutzer:innen sie als angenehm empfinden. Das Wissen über den Nutzungskontext nutzt du, um bei der Interaktion wenig dem Zufall zu überlassen.

Folgende Faktoren offenbaren, welchen Content du konkret benötigst und wie dieser beschaffen sein muss:

  • Welches Wissen und welche Fähigkeiten bringen Nutzer:innen mit?
  • Wie viel Aufmerksamkeit messen sie der Interaktion bei?
  • Mit welchen Gewohnheiten ist der Kontext der Nutzung verknüpft?
  • In welcher Form prägt die Technologie die Art und Weise der Interaktion?
  • Welche Angebote der Organisation stehen in Einklang mit dem Zweck der Interaktion?

Wissen und Fähigkeiten

Menschen greifen auf unterschiedliche Kenntnisse und Erfahrungen zurück. Einige sind vertraut mit der Interaktion, für andere ist sie neu. Manchen ist das Thema bekannt, anderen ist dieses neu. Entsprechend unterschiedlich fällt der Bedarf an Informationen und Sicherheit aus, um die Aufgabe bewältigen zu können.

Mit der Content-Hierarchy balancierst du dazu den Core und den Extend aus. Der direkte und schnelle Weg über den Core steht Leuten mit Wissensvorsprung offen. Aber im Extend bietest du allen anderen gezielte Hilfestellungen. Check24 reichert beispielsweise jedes Input-Field mit zusätzlichen Informationen an. Nutzer:innen, denen etwa die Fachbegriffe einer Autoversicherung nicht geläufig sind, gelangen trotzdem zum eigenständigen Abschluss. Auf eine solche Weise befähigst du Nutzer:innen dazu, die Aufgabe in ihrem persönlichen Tempo zu erledigen.

Aufmerksamkeit

Bestimmte Handlungen werden eher nebenbei erledigt als andere. Sei es, weil sie zum wiederholten Mal ausgeführt werden. Sei es, weil die Umgebung gerade ablenkt. Aufmerksamkeit ist eine begrenzte Ressource. Deshalb musst du sie an den richtigen Stellen fördern.

Grundsätzlich schaffst du mit den Interaction Archetypes immer Fokus. Im Zentrum einer Interaktion steht jeweils nur eine Aufgabe. Ergänzenden Content sieht das Framework nur vor, wenn das Gefühl von Sicherheit danach verlangt. Je schwerer und kritischer die Aufgabe ist, desto eher ist zusätzlicher Fokus gefragt. Dazu kannst du etwa vollständig auf Extend und Jump verzichten.

Nimm als Beispiel das Senden von Geld via Paypal. Um Eingabefehler zu vermeiden, verzichtest du auf jeglichen Content, der nicht zwingend notwendig ist, um einen erfolgreichen Geldtransfer sicher zu stellen. So vermeidest du Kommafehler oder die ein oder andere Null zu viel.

Technologie

Das Spektrum an Geräten, auf denen wir Inhalte konsumieren, wird immer breiter. Oftmals sind die Geräte über ein Ökosystem miteinander vernetzt, dezentral gespeicherte Inhalte werden auf unterschiedlichen Bildschirmgrößen ausgespielt. Form und Steuerung unseres Contents müssen sich fluide anpassen.

Beim Erarbeiten der Content-Hierarchy helfen dir die Interaction Archetypes noch vor jeder Arbeit am Design, die entscheidenden Schlüsselkomponenten zu identifizieren. Die radikale Reduktion eröffnet dir bei der gestalterischen Arbeit Freiräume. Du kannst sowohl auf unterschiedliche Bildschirmgrößen wie auch auf verschiedene Steuerungsmechanismen reagieren.

Gewohnheit

Je nachdem, wie oft Menschen ein Medium nutzen oder eine bestimmte Seite besuchen, erweitern sie ihre Expertise. Sie eignen sich Muster an, nach denen Informationen und Funktionen kommuniziert werden. Daraus entwickeln sich Routinen, die sich sowohl positiv als auch negativ auf die Nutzung auswirken können.

Beim Ausarbeiten deiner Content-Hierarchy nutzt du verbreitete Muster dazu, eine Erwartungshaltung aufzubauen. Im Core und Extend bieten gut erkennbare Muster Orientierung. Nutzer:innen schalten dann den Autopiloten ein, du förderst damit das schnelle Denken. Ein Beispiel: Zwei Input-Felder und ein Button suggerieren eine Log-in-Maske. Damit bedienst du einen mentalen Shortcut, es findet keine aktive Auseinandersetzung mit Information und Funktion statt. Umgekehrt weckt der offensichtliche Bruch mit Gewohnheiten die Aufmerksamkeit und regt die bewusste Auseinandersetzung mit den Inhalten an – langsames Denken eben.

Angebot und Nachfrage

Eine besondere Rolle spielen Angebote, die um die Gunst der Nutzer:innen buhlen. Das können unterschiedliche Offerten derselben Organisation sein. Dazu können aber auch Drittangebote gehören. Sie alle versprechen auf andere Weise Fortschritt in Richtung des Ziels der Nutzer:innen. Diese Angebote konkurrieren miteinander und prägen die Wahrnehmung deines Angebots wie auch die weitere Interaktion mit deinem Produkt oder Service.

Kläre für jede Interaktion, welche Angebote mit dem Ziel der Nutzer:innen in Einklang und welche im Widerspruch dazu stehen. Mit diesem Kriterium findest du für geschäftliche Ziele die passenden Stellen entlang der Customer Journey. Du platzierst sie zu einem anderen Zeitpunkt oder in einem anderen Kontext. Ohne die Effizienz und Effektivität der einzelnen Interaktion zu gefährden.

Ein Beispiel: Die Registrierung zum Vielfliegerprogramm einer Airline genießt eine hohe unternehmerische Priorität. Aber sie im Verlauf einer Flugbuchung zu platzieren, ist ein gefährliches Unterfangen. Sie konkurriert dort unnötig mit dem Abschluss der Flugbuchung. Das Ziel ist, pünktlich zu einem Geschäftstermin in einer entfernten Stadt zu erscheinen. Dafür ist in diesem Moment der Abschluss der Buchung relevant. Und nicht die Option, demnächst von günstigeren Konditionen zu profitieren. Ist der Flug gebucht, sind Nutzer:innen empfänglich für neue Angebote, die auf ein anderes Ziel oder Motiv einzahlen.

Check — Design Review durchführen

Bei der Design Review helfen dir die Daumenregeln, das Zusammenspiel zwischen Nutzer:innen und Angebot zu optimieren. Sie entsprechen Mustern, nach denen Menschen digitale Angebote nutzen und helfen dir dabei, das Framework zielführend einzusetzen. Unsere Daumenregeln sind keine dogmatischen Prinzipien. Sie unterstützen zusätzlich dabei, Fokus zu schaffen.

Only one Core permitted

Jede Interaktion verfügt über einen Core, nicht mehr. Gibt es mehr als einen, brauchst du mehrere Interaktionen.

Proximity is key

Alles, was du in der Nähe des Core platzierst, muss auch inhaltlich eng damit verbunden sein. Je weiter du Inhalte vom Core entfernst, desto allgemeiner und inspirierender fallen sie aus.

Keep it brief

Reduziere Extend-Content auf die Kernaspekte – je weniger, desto besser. Das betrifft auch den Jump, der am besten nur einen Themenkomplex anreißt. Begrenze dich auf Jump-Content, der tatsächlich relevant ist. So entsteht Klarheit.

Always keep ‘em browsing

Halte die Nutzer:innen am Browsen. Sie sollten nicht in eine Sackgasse gelangen, sondern stetig Fortschritt machen. Wenn du ihnen mit deinem Produkt eine alternative Interaktion anbietest, hilftst du ihnen, ihrem Ziel näher zu kommen.

The Core is all you need

Der Core ist für jede Interaktion obligatorisch. Extend und Jump sind beide optional, da sie an den Zweck der jeweiligen Interaktion geknüpft sind. Prüfe für jede Interaktion von Neuem, ob Extend und Jump zusätzlichen Wert für Nutzer:innen stiften.

One topic per line

Vermische keine Themen. Damit hilfst du bei der Orientierung und bei der Verarbeitung der Inhalte.

Interaktionsmuster – Mit Interaction Archetypes das Nutzungsverhalten stützen

Die Nutzung interaktiver Medien ändert sich. Deshalb gilt es, jede einzelne Methode und jedes Framework immer wieder mit der Realität abzugleichen: Stimmen die Voraussetzungen noch? Das Gleiche gilt auch für im UX-Design verbreitete Glaubenssätze über Verhaltensmuster, die sich als Mythen erweisen. Auf drei wichtige Interaktionsmuster – von denen viele denken, das Gegenteil sei wahr – wollen wir dich hinweisen. Mit Interaction Archetypes schaffst du einerseits eine Struktur, um diesen Verhaltensmustern gerecht zu werden. Umgekehrt kannst du dir diese Muster auch zunutze machen. Sie eröffnen Freiräume, wo andere Beschränkungen sehen.

Nutzer:innen klicken

Interaction Archetypes hilft dir dabei, das Ziel deiner Nutzer:innen in Aufgabenpakete herunterzubrechen, die sie gut bewältigen können. Aufschluss darüber, wie viele Klicks nötig sind, um das Ziel zu erreichen, gibt dir der Kontext der Interaktion. Je weniger Erfahrung Nutzer:innen haben, desto mehr Stress bringt der Lösungsweg mit sich. Bringt die Situation auch noch Risiken mit sich, erhöht sich der Stresslevel. Stress wiederum führt zu Abwehrreaktionen. Dem versuchst du vorzubeugen, indem du die Aufgabe in kleine Etappenziele herunter brichst. Damit sind sie leichter zu erfassen und erzeugen das Gefühl von Sicherheit.

Eruiere dazu den Moment der Interaktion. Indem du den Kontext erforschst, findest du die passende Anzahl an Schritten. So viele wie nötig, so wenige wie möglich.

Merk dir:
  • Reduziere durch eine sinnvolle Anzahl an Klicks die Komplexität, um den kognitiven Aufwand gering zu halten.
  • Setz Klicks als Kontrollmechanismen ein, um das Gefühl von Sicherheit zu erzeugen.
  • Das Klicken kann dir helfen, die Usability für besonders limitierte Geräte zu optimieren.

Nutzer:innen scrollen

Interaction Archetypes hilft dir, eine ganz klare Erwartungshaltung der Nutzer:innen an den Inhalt aufzubauen und darauf einzuzahlen. Wenn der Core das Versprechen der Interaktion kommuniziert, entscheiden Nutzer:innen selbst, ob die Aufgabe sie ihrem Ziel näher bringt. Ihnen wird klar, ob sie sich sicher genug fühlen, diese Aufgabe auszuführen. Sie beschließen, ob sie Interesse an der Interaktion haben oder nicht.

Nutzer:innen scrollen, das steht fest. Der Kampf um den Raum »above the fold«, wie er häufig geführt wird, ist irreführend.

Merk dir:
  • Der Core (das Versprechen an Nutzer:innen) triggert das Scrollen.
  • Nutzer:innen müssen nicht mit allen Inhalten interagieren, um eine Aufgabe zu erledigen.
  • Der Extend zahlt auf den Core ein und bricht nicht mit dem Versprechen an Nutzer:innen.

Nutzer:innen scannen

Interaction Archetypes hilft dir, Content zu strukturieren. Inhalte werden nicht linear konsumiert. Nutzer:innen scannen sie. Sie suchen nach Ankern, die ihnen Fortschritt versprechen. Dabei helfen Muster, Keywords oder visuelle Impulse. Am Ende spielt es keine Rolle, ob Nutzer:innen deine Inhalte tatsächlich lesen. Entscheidend ist, dass sie die Informationen finden, die sie benötigen, um ihre Aufgabe zu erledigen.

Nutzer:innen brechen ab, wenn sie nicht mehr vorhersehen, was auf sie zukommt. Das irritiert sie. Berücksichtige das insbesondere bei der Gestaltung des Extend.

Merk dir:
  • Nutzer:innen konsumieren Inhalte nicht linear.
  • Erleichtere das Scannen mit Mustern, Keywords und visuellen Ankern – insbesondere im Extend.
  • Nutzer:innen suchen Hinweise, die ihrem mentalen Modell entsprechen – etwas, das sie wiedererkennen.

Die Grundlagen und Benefits von Interaction Archetypes

Auf Basis von Interaction Archetypes entwickelte digitale Services und Produkte performen besser. Darauf deuten Messungen von verschiedenen KPI hin. Sie zeigen zumeist eine höhere Conversion Rate, schnellere Interaktionen und eine gestiegene Customer Satisfaction.

Die Rückmeldungen aus den Projektteams zeigen zudem, dass sich Interaction Archetypes positiv auf den Workflow auswirkt. Es ermöglicht, konzeptionelle Fragen unabhängig von gestalterischen Diskussionen zu beantworten. Interaction Archetypes integriert fachfremde Stakeholder besser in den Prozess der Entscheidung, die Kommunikation wird einfacher.

Wir haben das Interaction Archetypes Framework aus der Praxis heraus entwickelt. Mit der Methode Interaction Archetypes gestalten wir viele digitale Produkte für Unternehmen wie die Deutsche Telekom, AXA, EnBW und Yello. Die Ergebnisse evaluieren wir in qualitativen Interviews, quantitativen Erhebungen und Multivarianten-Tests. Immer wieder arbeiten wir die gewonnenen Erkenntnisse in unser Framework ein.

2020 wurde unser Framework im Rahmen einer Masterarbeit auch wissenschaftlich untersucht. Lena Pietsch konnte nachweisen, dass unser Framework verhaltenspsychologischen Erkenntnissen über menschliches Handeln entspricht. Die Interaction Archetypes berücksichtigen besonders gut, was Menschen bei der Interaktion mit digitalen Medien brauchen.

Intuitive Interfaces dank Interaction Archetypes

Schritt für Schritt
1
Starte immer mit dem Interaktionsmoment und verschaffe dir Gewissheit über den Zweck deiner Interaktion.
2
Definiere die strategische Ausrichtung der Interaktion. Sie bildet die Referenz, um Content zu priorisieren und zu bewerten.
3
Beschreibe die Maßnahmen, mit denen du die strategischen Ziele erreichen willst. Entscheide, in welcher Relation zueinander du Inhalte platzierst und begründe, warum.
4
Gewichte Core, Extend und Jump entsprechend der Nutzungsabsicht, welche du adressieren willst.
5
Beachte bei der konkreten Ausprägung der Informationen und Funktionen den Nutzungskontext, in dem die Interaktion stattfindet.
6
Nutze die Daumenregeln bei der Design Review deiner Entwürfe. Sie helfen dir dabei, die Interaktion mit deinem Produkt effizient und effektiv zu machen.
7
Denk daran: Der Core definiert das Ziel der Interaktion. Der Extend unterstützt Nutzer:innen dabei, ihr Ziel zu erreichen. Der Jump ist das alternative Angebot, um das Ziel der Nutzer:innen auf einem anderen Weg zu erreichen.
Graphic cover for a UI design guidebook titled 'UI Design for Humans,' featuring bold typography, geometric shapes in red, and a subtitle in German about interaction archetypes.
Du nimmst gerne etwas mit? Dann schnapp dir unsere PDF-Version des Guides.