Vorheriger Artikel Nächster Artikel

Interaktionsdesign richtig einsetzen: Jeder Klick für die Marke!

Aus dem
t3n Magazin Nr. 41

09/2015 - 11/2015

Jetzt kaufen

Wir zeigen in unserer „Themenwoche Marketing: Content, SEO, CRM“, dass ein durchdachtes und gutes Interaktionsdesign dabei eine wichtige Rolle spielt. Für Marken ist es online immer schwieriger, ein Alleinstellungsmerkmal zu bieten. Ob Shop, App oder Services: Der nächste Anbieter ist oft nur einen Mausklick entfernt. Eine richtig gute User Experience kann Unternehmen und ihre Marken dennoch unverwechselbar machen.

Interaktionsdesign richtig einsetzen: Jeder Klick für die Marke!

Grafik: www.2015-is-yours.com

„Your design is an extension of your brand“, schreibt UX-Content-Strategist Jerry Cao in seinem E-Book „Interaction Design Best Practices“. Damit bringt er das Ziel vieler Websites auf den Punkt: Sie sollen dabei helfen, eine Marke auf- und auszubauen. Das ist besonders im digitalen Bereich wichtig, wo dank relativ geringer Markteintrittsbarrieren eine Unique Selling Proposition (USP) nicht einfach zu halten ist.

Markenforscher Dirk Engel empfiehlt digitalen Unternehmen daher auch, eine Marke mit Persönlichkeit aufzubauen und eine unverwechselbare Identität zu schaffen. Die Emotionen, die eine Marke erzeugt, basieren dabei auch auf einer guten User Experience – sie wird im Digitalen geradezu zur Marke.

Digitale Marken

User Experience umfasst dabei viele unterschiedliche Ebenen. Der UX-Designer Jesse James Garrett hat ein Modell erstellt, das die verschiedenen Faktoren darstellt und das Zusammenspiel von Bereichen beschreibt – von der Unternehmensstrategie über die Nutzerziele bis hin zur visuellen Oberfläche. Auf jeder Ebene gibt es inhaltliche und funktionale Aspekte.

Das Interaktionsdesign – also die Gestaltung der Konversation des Nutzers mit der Website oder App – liegt in diesem Modell im Herzen der User Experience. Man könnte auch sagen: Interaktionsdesign macht User Experience zur erlebten Realität.

Digitale Unternehmen wie Facebook, Twitter und Pinterest haben die Bedeutung von Interaktionen für die Markenbildung längst erkannt. So ist der Like-Button nicht nur durch seine Optik, sondern auch durch die damit ausgelösten Aktionen fester Bestandteil der Marke Facebook. Die Markenrichtlinien dieser Unternehmen beziehen sich auch nicht nur auf ihre visuellen Mittel – auch die Verwendung von Interaktionen wie „Tweet“ und „Pin“ ist der jeweiligen Marke vorbehalten.

Das User-Experience-Modell von Jesse James Garrett erläutert die Aspekte, die zu einer guten User Experience dazugehören. Interaktionsdesign ist als Teil der Schnittstelle zwischen App oder Website und Nutzer besonders wichtig.
Das User-Experience-Modell von Jesse James Garrett erläutert die Aspekte, die zu einer guten User Experience dazugehören. Interaktionsdesign ist als Teil der Schnittstelle zwischen App oder Website und Nutzer besonders wichtig.

Während einer Interaktion entscheiden die Nutzer, ob die Marke ihren Claim und ihr Image einlöst. Was kann eine Marke also tun, damit aus der Kommunikation zwischen Nutzer und Produkt ein positives Markenbild entsteht?

Usability als Grundlage

Grundlage positiver Interaktionen ist die Usability. Im Interaktionsdesign hängt sie oft schon von Kleinigkeiten ab: Wer bei Instapaper seinen Premium-Account bezahlen möchte, muss nicht auswählen, welche Kreditkarte er hat – mit der Eingabe der Kreditkartennummer zeigt der Zahlungsdienstleister Stripe automatisch ein kleines Icon des Anbieters. Solche kleinen Mikro-Interaktionen machen Prozesse wesentlich angenehmer.

Instapaper nutzt viele kleine Details, um die Usability beim Erwerb der Premium-Funktionalität zu verbessern. Beispielsweise blendet er die passende Kreditkarten-Marke anhand der eingegebenen Nummer ein.
Instapaper nutzt viele kleine Details, um die Usability beim Erwerb der Premium-Funktionalität zu verbessern. Beispielsweise blendet er die passende Kreditkarten-Marke anhand der eingegebenen Nummer ein.

Entscheidend für gutes Interaktionsdesign sind außerdem die sogenannten Affordances – im Deutschen manchmal etwas sperrig als Aufforderungscharakter übersetzt. Die Idee ist, dass ein Objekt bereits durch seine Form seine Nutzungsmöglichkeiten verdeutlicht – etwa aufgrund seiner Eigenschaften oder unserer Erfahrungen. Mit einer Gabel lässt sich ein Steak beispielsweise schlecht schneiden, aber hervorragend zum Mund führen.

Apples Anwendung „Fotos“ liefert gute Beispiele für Affordances auf dem Mac. Die Nutzer können ihre Bilder mit Hilfe eines kleinen Rädchens drehen. Durch das direkte Feedback ist das weniger abstrakt als ein Slider, den ein User nach links (gegen den Uhrzeigersinn) oder nach rechts (im Uhrzeigersinn) drehen muss, wie etwa bei iPhoto. Andere Affordances wie aktive Ecken zum Verkleinern eines Ausschnitts sind hingegen aus Bildverarbeitungsprogrammen bekannt, also erlernt.

Manche Affordances zeigen sich auch erst während der Interaktion, insbesondere auf Touchscreens. Mittels verschiedener Gesten (versteckte Affordances) können Nutzer weniger häufig genutzte Funktionen bedienen. Das macht das User Interface übersichtlicher, weil Anbieter nicht für jeden Anwendungsfall einen Button einfügen müssen.

Ein gutes Beispiel dafür ist die iPad-App von Vimeo. Neben dem Start eines Videos durch Antippen lassen sich die Vorschaubilder nach links oder rechts ziehen, um weitere Optionen zugänglich zu machen. Intelligent gelöst dabei: Auf jeder Seite liegen zwei Aktionen – je nachdem, wie weit ein Nutzer seinen Finger bewegt, wählt er eine andere Aktion aus. Damit versteckte Affordances funktionieren, müssen Interaction-Designer genau prüfen, ob der Nutzer eine Geste kennt. Exotische Gesten sollten sie für seltenere Handlungen reservieren.

Die Nutzung der Vimeo-iPad-App wird durch unsichtbare Affordances übersichtlich und intuitiv: Je nachdem, wie weit man nach links oder rechts wischt, erhält man als Nutzer unterschiedliche Funktionen zur Wahl.
Die Nutzung der Vimeo-iPad-App wird durch unsichtbare Affordances übersichtlich und intuitiv: Je nachdem, wie weit man nach links oder rechts wischt, erhält man als Nutzer unterschiedliche Funktionen zur Wahl.

Usability ist ein wichtiger, aber nicht der einzige Faktor. Sie ist ein Qualitätsmerkmal der Benutzeroberfläche, aber nur ein Teilaspekt der gesamten User Experience. Ein Onlineshop kann etwa eine hervorragende Benutzeroberfläche haben – wenn es das gesuchte Produkt jedoch dort nicht gibt oder ein Besucher sich emotional nicht angesprochen fühlt, ist die User Experience dennoch ausbaufähig. Gute Usability ist also keine Garantie für den Erfolg einer Website – eine schlechte Usability sorgt aber mit ziemlicher Sicherheit für Unzufriedenheit.

Interaktion als Trend

Ästhetische Überlegungen spielen in der Mensch-Computer-Interaktion eine immer wichtigere Rolle. Ob Parallax Scrolling, flächige Videos im Hintergrund, Animationen oder Mikro-Interaktionen – viele aktuelle Designtrends laden zur Interaktion und zum Entdecken ein. Interaktionsdesign ist hier kein rein visuelles Mittel, sondern bestimmender Faktor der User Experience. Die Verwendung von Interaktionen hat dabei handfeste Vorteile für Unternehmen: Sie bringen uns ein Produkt näher und machen die Persönlichkeit einer Marke erfahrbar.

Gute Usability liefert Orientierung , wie etwa die der Jägermeister-Website: Ein Nutzer sieht auf einen Blick, welche Inhalte er schon gesehen hat, welche besonders beliebt sind und wohin ihn seine Entdeckerfreunde am besten als nächstes leiten sollte.
Gute Usability liefert Orientierung , wie etwa die der Jägermeister-Website: Ein Nutzer sieht auf einen Blick, welche Inhalte er schon gesehen hat, welche besonders beliebt sind und wohin ihn seine Entdeckerfreunde am besten als nächstes leiten sollte.

Eine Studie der Robert Morris Universität zeigte, dass interaktive Elemente eine Website überzeugender machen. Sie führten in Tests sogar dazu, dass die Probanden eine positivere Einstellung gegenüber dem Nichtrauchen bekamen, als sie eine interaktive Antiraucher-Website besuchten.

NGOs wie der WWF sind gute Beispiele dafür, wie man mit Interaktionsdesign seine Nutzer aktivieren kann. Bei der Aktion #iamnature, die eine nachhaltige Lebensweise vermitteln möchte, spielen Interaktionen eine zentrale Rolle: Wer sich auf der Plattform anmelden will, muss erst einmal ein paar persönliche Fragen beantworten – danach gibt es kleine, aber wirkungsvolle Handlungstipps für ein umweltbewussteres Leben in verschiedenen Themenblöcken. Der WWF kann seine Inhalte so passend zu den Interessen des Nutzers präsentieren.

Gutes Interaktionsdesign macht neugierig: Wer sich für den Design-Web-Service Canva registriert, sieht beim Mouse-Over für einen kurzen Moment das eigentliche Interface. Sonst liegt es verschwommen im Hintergrund.
Gutes Interaktionsdesign macht neugierig: Wer sich für den Design-Web-Service Canva registriert, sieht beim Mouse-Over für einen kurzen Moment das eigentliche Interface. Sonst liegt es verschwommen im Hintergrund.

Interaktionen lassen sich auch nutzen, um die Besucher neugierig zu machen. Wer auf der Startseite des Design-Tools Canva landet, findet dort zunächst ein auffälliges Registrierungsformular vor einem verschwommenen Hintergrund im Stil von iOS. Fährt der Nutzer jedoch mit der Maus über den Hintergrund, kann er für einen kurzen Augenblick einen Blick auf die scharfe Oberfläche erhaschen.

Auch schon kleine Wortänderungen – sogenannte Micro-Copies – können die User Experience stark verändern. Der Copywriter Michael Aagard überprüfte zum Beispiel verschiedene Formulierungen für ein Newsletter-Anmeldeformular. Er fand dabei heraus, dass die Anmerkung „Wir werden keinen Spam schicken“ die Anmeldungen um 18,7 Prozent sinken ließ. Schon das bloße Wort „Spam“ bewirkte, dass die Besucher Zweifel bekamen. Viel wirkungsvoller war der Satz „Wir geben Ihre Daten nicht an Dritte weiter“. Das zeigt, dass Interaktionsdesign und testgetriebene Entwicklung kaum voneinander zu trennen sind.

Emotionen im Interaktionsdesign

Marken entfalten ihre Kraft durch die Emotionen, die mit ihnen verknüpft sind. Interaktionsdesign ist dabei wie das Verhalten der Mitarbeiter im realen Leben – sind sie freundlich, bleibt uns das Unternehmen in guter Erinnerung; sind sie es jedoch nicht, färbt dies zwangsläufig auf die Marke ab. Erfolgreiches Interaktionsdesign sollte so verführerisch sein, dass Nutzer kaum widerstehen können. Interaktionsdesign betrachtet die Nutzer dazu ganzheitlich und fragt auch nach den emotionalen Eindrücken. Humor ist dafür zum Beispiel ein sehr wirkungsvolles Mittel.

Sehr gut gelingt dies dem Berliner Unternehmen 5Cups, bei dem man sich seinen Tee zusammenstellen kann. Zu diesem individuellen Ansatz passt, dass auch Verpackung und Name des Tees personalisierbar sind. Und als besonderen Clou haben die Macher dem Shop einen Teenamen-Generator spendiert, der auf Knopfdruck fantasievolle und lustige Namen ausspuckt. Eine angenehme Überraschung, die Spaß macht und dafür sorgt, dass die Marke im Gedächtnis bleibt.

Beim Tee-Web-Shop 5Cups kann man sich Tee selbst zusammenstellen - und über einen Teenamen-Generator individuelle Labels mitbestellen. Ein Beispiel für gelungene User Experience.
Beim Tee-Web-Shop 5Cups kann man sich Tee selbst zusammenstellen - und über einen Teenamen-Generator individuelle Labels mitbestellen. Ein Beispiel für gelungene User Experience.

Ein Klassiker des humorvollen Interaktionsdesigns sind die vielen witzigen und kreativen 404-Fehler-Seiten oder Fehlermeldungen. Was auf den ersten Blick als Gimmick erscheint, hat einen tieferen Sinn: Die unangenehme Situation – ein Link ist veraltet oder ein Nutzer macht einen Tippfehler – wird so zu einem witzigen Moment. Im Idealfall bietet sie dem User auch einen Weg, den gesuchten Inhalt zu finden, etwa über eine gute Suchfunktion oder hilfreiche Links. Gute User Experience statt Frust.

Humor oder Spaßbremse?

Emotionen sollten natürlich für den jeweiligen Kontext angemessen sein. Bei schwerwiegenden Fehlern geht Humor schnell nach hinten los. Quittiert zum Beispiel ein Cloud-Speicher-Service den Dienst, fürchtet ein Nutzer schnell um seine Daten. Humor könnte ihn in diesem Fall schnell verärgern.

Nützliches und Emotionales lässt sich auch gut kombinieren, wie der Online-Shop myToys zeigt. Dort gibt es praktische und emotional aufgeladene Filtermöglichkeiten, um die Auswahl auf Gegenstände zu begrenzen, die den Kunden interessieren – etwa „Für kleine Prinzessinnen“ oder „erste Puppen“. Diesen Filter können Eltern für jedes Kind individuell einstellen und speichern. So wird aus dem digitalen Einkauf eine persönliche Erfahrung.

Witzige 404-Fehlerseiten machen aus einem frustrierenden ein humorvolles Erlebnis. Wie etwa die GitHub-Fehlerseite, die an eine Filmreihe erinnert, die den Nutzern sicherlich vertraut sein dürfte.
Witzige 404-Fehlerseiten machen aus einem frustrierenden ein humorvolles Erlebnis. Wie etwa die GitHub-Fehlerseite, die an eine Filmreihe erinnert, die den Nutzern sicherlich vertraut sein dürfte.

Fazit

Kunden möchten digitale Marken nicht mehr nur als einseitige Botschaften erleben – das ist im Zeitalter von Social Media und mündigen Verbrauchern nicht mehr gefragt. Zumal sich Markenbotschaft und User Experience bei einem digitalen Produkt gar nicht mehr klar voneinander trennen lassen.

Interaktionsdesign ist daher für Unternehmen ein wichtiges Instrument, um positive Erlebnisse zu erzeugen. Eine gute Strategie und Umsetzung macht aus Kunden treue Markenbotschafter. Oder, wie Designer und Gründer der Interactive Agentur Smashlab Eric Karjaluoto meint: „Die User Experience wird zur Marke und der Nutzer – und seine Aktivitäten – machen das Marketing.“

Links und Literatur

Softlink 3636
  1. 1 http://www.uxpin.com/knowledge.html
    Best Practices
  2. 2 http://t3n.me/marke-digital
    Digitale Marken
  3. 3 http://t3n.me/User-Brand-Experience
    User Brand Experience
  4. 4 http://t3n.me/Penn-State-University
    Studie
  5. 5 https://iamnature.wwf.de
    WWF-Aktion #iamnature
  6. 6 https://www.canva.com/
    Canva
  7. 7 http://t3n.me/micro-copy
    Micro Copy Test
  8. 8 http://5cups.de/
    5Cups
  9. 9 http://t3n.me/404-seiten
    404 Seiten
  10. 10 http://www.mytoys.de/
    myToys
Abonniere jetzt t3n-News über WhatsApp und bleib mobil auf dem Laufenden!
t3n-News via WhatsApp!
Vorheriger Artikel Zurück zur Startseite Nächster Artikel
Deine Meinung

Bitte melde dich an!

Du musst angemeldet sein, um einen Kommentar schreiben zu können.

Jetzt anmelden

Alle Hefte Jetzt abonnieren – für nur 35 €

Kennst Du schon unser t3n Magazin?