allcontentstrategy

User Interface Copy – Mit richtigem Webdesign und -inhalten Kunden überzeugen

Lesezeit: 8 Minuten

Eine ausgefeilte Benutzeroberfläche (User Interface) ist mehr als nur Webdesign. Neben einem ansprechenden Design müssen Webseiten mit Klarheit, Struktur und zeitgemäßem Layout überzeugen. Für den Kunden relevante Inhalte gepaart mit ansprechenden Texten sind ebenso wichtig. Dieser Blogartikel zur Vorlesung von Lisa Moore gibt Tipps, wie User Interface intuitiv gestaltet werden kann.

User Interface – schnell erklärt

Am Anfang steht die Frage: Was bedeutet User Interface? Als User Interface – kurz UI bezeichnet man eine Schnittstelle mit welcher eine Person eine Soft- oder Hardware kontrollieren kann. Das Ziel des UI ist es, dem Nutzer die Arbeit zu erleichtern1 und so schnell wie möglich an das von ihm definierte Ziel zu kommen. Man unterscheidet verschiedene Arten des UI – die wichtigsten acht hier im Überblick:2

  • Command Line Interface (CLI)

Dies stand ganz am Beginn des User Interfaces: Die Interaktion funktioniert über die Befehlseingabe an einer Kommandozeile.

  • Text User Interface (TUI)

Weiterentwicklung der CLI: Die Eingabe erfolgt über Daten und Texte.

  • Graphical User Interface

Dieser Begriff beschreibt eine graphische Benutzeroberfläche. Der Nutzer interagiert mit Hilfe von Maus und Tastatur.

  • Voice User Interface (VUI)

Die Interaktion findet über die Sprache mittels Sprachbefehle oder direkte Kommandos statt.

  • Tangible User Interface (TUI)

Beschreibt eine „greifbare“ Schnittstelle. Der Benutzer kann „spielerisch“ damit umgehen.

  • Natural User Interface (NUI)

Beschreibt eine natürliche und intuative Interkation. Dies erfolgt zum Beispiel über Gesten und tippen (etwa bei Touchscreens).

  • Perceptual User Interace (PUI)

Das ist eine Kombination aus GUI und VUI.

  • Brain Computer Interface (BCI)

Die Interaktion erfolgt mittels Gedanken bzw. Messung der Gehirnströme.

Zusammenfassend: Jedes Interface stellt eine Interaktion zwischen Person und Applikation (Soft- und Hardware) dar. Diese Interaktion kann auf unterschiedliche Arten, etwa visuell, sprachgesteuert, interaktiv, geschehen. Das User Interface und die Gestaltung des Designs haben einen direkten Einfluss darauf, wie gut oder wie einfach ein Programm anzuwenden ist. Und dies beeinflusst in weiterer Folge die User Experience.

Vom User Interface zur User Experience

Der Begriff User Experience (Abkürzung UX, bzw. zu Deutsch auch Nutzererlebnis oder Anwendererlebnis) im Web umschreibt alle Aspekte der Erfahrungen eines Nutzers, die dieser im Zusammenhang mit einer Website oder App, erfährt.3

Das Ziel jeder gut durchdachten UX-Strategie ist es, den Webauftritt des Unternehmens auf die Bedürfnisse seiner Kunden zuzuschneiden. Dies erreicht man durch die Integration und das perfekte Zusammenspiel von Webdesign, User Research, Business Planning und Datenanalyse.4

Im Wesentlichen besteht der Aufbau der User Experience im User Interface Content aus drei wesentlichen Säulen:

  • Visual Design: Stützt sich auf die Ästhetik einer Webseite und beinhaltet dabei unter anderem Farbe, Schriften oder Bilder. Diese sollen den Konsumenten an die Webseite binden – Bilder erzählen die Story hinter dem Text.
  • Interaction Design: Beschreibt wie sich der Konsument verhält und mit dem Interface agiert. Wie bewegt sich der Konsument durch die Website? Zum Beispiel durch scrollen oder klicken. Um zu verstehen, wie sich der Nutzer auf der Website verhält und was er von dieser erwartet, sind Nutzerforschung und User-Test notwendig. Hier können zum Beispiel A/B-Test nützliche Erkenntnisse bringen.
  • Language Design (Content Design): Mittels Wörtern und Phrasen soll die Navigation durch die Webseite unterstützt werden – neuerdings wird dies auch per Stimme unterstützt. Beispiele dafür sind Alexa von Amazon oder Siri von Apple.

Alle drei Bereiche bilden gemeinsam die User Experience in Bezug auf das User Interface.

img

Abbildung 1: Designing effective user interface content, Karen Scipi and Georgia Price: http://summit.stc.org/responsive/summit2014.htm#!Documents/designingeffectiveuserinterfacecontent.html

Das User Interface Design – die wichtigsten Aspekte

Wesentlich beim User Interface Design (UI Design) ist die Erstellung von benutzerfreundlichen Inhalten für die Website, wie etwa Texte für Formulare, Eingabefelder, Labels sowie Buttons oder Links. Diese Contentformen firmieren unter dem Begriff User Interface Copy, oder kurz UI-Copy. Diese Inhalte sollen die User Experience stützen und nicht hindern. Gutes UI-Copy soll den Kunden durch die Benutzeroberfläche leiten – es führt den Kunden so intuitiv wie möglich zum jeweils nächsten Schritt.

Um ein gutes User Interface Copy erstellen zu können, muss man die Aufmerksamkeit auf drei Hauptbereiche fokussieren:

  1. Wer ist die Zielgruppe, die meine Webseite oder App nutzt? Was erwartet Sie von mir? Welchen Inhalt erwarten Sie? Und wie soll dieser in Bezug auf Sprachstil, Ausdrücke, Begriffe aufgebaut sein? Daraus ergibt sich auch die Art und Weise, wie mit den jeweiligen Usern kommuniziert wird. (Kinder, Jugendliche, Erwachsene, Bildungsstatus). Der Inhalt bzw. die Inhalte sollen auch diesen Kundengruppen angepasst werden – vom Sprachstil über die Terminologie. Diese Informationen werden am besten und zuverlässigsten direkt von den Kunden abgefragt und in weiterer Folge analysiert. Als Methoden eignen sich hier Befragungen aller Art: Etwa Fokusgruppen-Runden, Tests, Umfragen.
  2. Wann und wo trifft der User auf meinen Content? Das Ziel ist es den richtigen Inhalt zur richtigen Zeit in der richtigen Form zu liefern. Dieser muss für alle Ausgabegeräte entwickelt werden, auf welchen dieser genutzt werden könnte: Mobil, Dektop, Tablet – oder in Zukunft auch via Spracheingabe).
  3. Voice and Tone – auch der Sprachstil, die Tonalität und das Vokabular müssen zielgruppenbasierend formuliert werden, um die User bestmöglich anleiten zu können. Den Text vorzulesen bzw. laut zu lesen kann, kann hier helfen, Fehler zu finden. Egal ob positive oder negative Informationen, es ist darauf zu achten, wie diese dem User kommuniziert werden. Schreibt man die Texte im Aktiv, erhöht sich auch die Lesbarkeit des Textes.

Vermeiden sollten man – wann immer möglich – zu technische bzw. zu lange Beschreibungen, unternehmens- oder brancheninternen Jargon, unbekannte oder zu spezifische Ausdrücke. Die klare Sprache für die jeweilige definierte Zielgruppe ist immer das oberste Ziel, ebenso wie die klar formulierte Botschaft.

Die User Interface Copy ist mehr als nur der Text auf der Webseite. Sie betrifft vielmehr alle Bereiche, die vom Konsumenten wahrgenommen werden. Immer sind die oben genannten Punkte zu bedenken: Trifft der Inhalt meine Zielgruppe? Ist er verständlich und unterstützt er den Konsumenten auf dem Weg durch die Webseite? Jeder Text, jede Beschriftung, jeder Button sollte einen Sinn haben und einen Zweck erfüllen. All diese Faktoren tragen zu einem guten oder schlechten User Interface bei.

An dieser Stelle ein Beispiel: Das Bestellformular. Was kann sich der Konsument unter einer Beschriftung “WEITER” vorstellen? Statt lediglich “WEITER” könnte man den Button auch “ZUR LIEFERANSCHRIFT” benennen. Dem User ist nun sofort klar, wohin ihn der nächste Klick führt.

Keep it short and simple: Der Konsument scannt seitenlange Formulare, auf der Suche nach einer bestimmten Information liest er niemals den gesamten Text bis zum letzten Wort. So können Fehler in der Bedienung der Website entstehen oder der User verlässt gleich enttäuscht die Site, weil er nicht gefunden hat, was er suchte. Aus diesem Grund sollten Inhalte kurz und klar formuliert werden. Mit schnellen und einfachen Inhalten und klaren Anweisungen (“Call to action”) kann sich der User einfach und schnell durch einen Bestellprozess navigieren.

Semiotics sind “In”: Icons machen Bereiche verständlicher und unterstützen die Aussage des jeweiligen Bereichs auf einer grafischen Ebene. Icons helfen dem User, Inhalte schneller zu erfassen.

Interaction Design – ein Praxisbeispiel

Im Zuge der Vorlesung wurde die UI und die UX anhand eines Praxisbeispiels in Form eines Flows (ein Kaufprozess auf www.steirerkraft.at) abgetestet und die notwendigen Verbesserungen herausgearbeitet.Die einzelnen Formulare (alle UI Copies ) des Kaufprozesses wurden in diesem Zusammenhang sowohl in Englisch als auch in Deutsch getestet.

Grundsätzlich wurde die Webseite in beiden Sprachen nach einem sehr guten UI Copy aufgebaut. Abläufe sind für den User gut ersichtlich und die Webseite ist übersichtlich gestaltet. Wording und Aufbau sind usergerecht. Nachfolgend ein kleiner Auszug der UI-Copy mit dazugehörigen Analysen und Empfehlungen.

Warnungen, Hinweise und Pflichtfelder

Generell werden diese sehr gut angezeigt und sind verständlich. Tooltips werden im gesamten Bestellverlauf allerdings nie verwendet.

In der untenstehenden Abbildung ist gut zu sehen, dass versucht wird den User stetig über das zu informieren was passiert ist. Mit einer kurzen Meldung oberhalb der Waren wird darauf aufmerksam gemacht, dass ein Produkt entfernt wurde. Falls dies nicht beabsichtigt war, kann der Vorgang schnell über den kleinen, unterstrichenen Schriftzug „Rückgängig?“ wieder behoben werden. So erspart sich der User langes Suchen nach dem gelöschten Produkt.

Rueckgaengig

Abbildung 2:

Auszufüllende Felder sind gut mit einem roten Stern gekennzeichnet und jedes Feld besitzt ein eindeutiges Label, an dem der User erkennen kann welche Information hinein gehört. Bei der Passworterstellung stehen die Anforderungen direkt darunter. Vorbildlich! So weiß der User genau, welche Zeichen das Passwort beinhalten darf oder eben nicht.

Labels

Abbildung:

Noch auszufüllende Felder bzw. Informationen werden gut erkenntlich rot markiert und beschrieben. Ein aufwändiges Suchen bleibt dem User so erspart.

Hinweis

Abbildung:

Käufe als Gast tätigen

Eine Registrierung kann das negative Gefühl einer Verpflichtung mit sich bringen. Niemand gibt heutzutage gern all seine Daten preis, denn oft landet dann Newsletter nach Newsletter im Email-Posteingang. Weiters verlangsamt eine Registrierung den Kaufprozess erheblich. Mit einem Onlineshop will man ja vordergründig verkaufen und nicht Daten sammeln.5

Gastlogin_Dont

Abbildung:

Gastlogin_Do

Abbildung 4:

Möglichkeit einer Benachrichtigung wenn ein Produkt wieder verfügbar ist

Der User ist selbstverständlich enttäuscht, wenn das Produkt der Wahl nicht bestellt werden kann. Für User, welche ein Produkt wirklich kaufen wollen, stellt die Emailbenachrichtigung eine gute Option dar. So wird der User zusätzlich an das Produkt und den Onlineshop erinnert, falls er nach ein paar Tagen wieder darauf vergessen hat.

Verfuegbarkeit_Dont

Abbildung:

Verfuegbarkeit_Do

Abbildung:

Nur vorrätige Produkte vorschlagen

Produkte, welche nicht auf Lager sind sollten den Usern nicht in Kategorien wie „Das könnte Sie auch interessieren …“ angezeigt werden, da diese aktuell nicht bestellt werden können. In der Gesamtansicht der Produktpalette gehören diese jedoch sehr wohl hinein, um auf alle Produkte aufmerksam zu machen.

Anzeige_Dont

Abbildung:

Anzeige_Do

Abbildung:

Conversational User Interfaces – Der nächste Schritt in der Evolution?

Sind Conversational User Interfaces die Zukunft im UI-Bereich? Die Idee von Conversational User Interfaces ist etwa teilweise sprachbasierte Chatbots einzusetzen. Mit Hilfe dieser Bots soll die Komplexität von GUIs reduziert werden und eine Kommunikationssituation zwischen Mensch und Maschine entstehen, die unseren zwischenmenschlichen Gesprächsgewohnheiten nachempfunden ist. Intuitiv erlernbare Techniken lassen sich einfacher und besser in den Alltag des Nutzers integrieren. Solche CUIs (Conversational User Interfaces) könnten zum großen Teil die Vielzahl an Graphical User Interfaces ersetzen: Der Content wird selbst zum Steuerelement, mit dem sich unterschiedliche Anwendungen bedienen lassen.6

mit Gastunterstützung von Martina Marx.


1 Vgl., User Interface Definition. (o. J.). Abgerufen 10. Dezember 2017, von https://www.gruenderszene.de/lexikon/begriffe/user-interface

2 User Interface. (o. J.). Abgerufen 10. Dezember 2017, von https://de.ryte.com/wiki/User_Interface

3 User Experience. (2017, November 22). In Wikipedia. Abgerufen von https://de.wikipedia.org/w/index.php?title=User_Experience&oldid=171263325

4 Nichols, K. P., & Chesnut, D. (o. J.). UX For Dummies Cheat Sheet [Educational Resources]. Abgerufen 5. Oktober 2016, von http://www.dummies.com/web-design-development/site-development/ux-for-dummies-cheat-sheet/

5 Amy Schade, Don’t force users to register before they can buy, Abgerufen 12. Dezember 2017, von https://www.nngroup.com/articles/optional-registration/

6 Thema: Die Zukunft des Conversational User Interface (CUI) | e-dynamics. (o. J.). Abgerufen 10. Dezember 2017, von http://www.e-dynamics.de/blog/thema-die-zukunft-des-cui-dem-conversational-user-interface.html

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

*

code