Ein ansprechendes, einfach zu verwendendes User Interface (Benutzerschnittstelle) kann den Erfolg einer Anwendung maßgeblich beeinflussen. Die Herausforderung für einen Designer liegt darin, zu überlegen, wie User das UI navigieren und welche Aktionen sie erwarten. Dabei geht es darum zu überlegen, welche Fähigkeiten und technisches Verständnis, man von Usern erwarten kann.
USER INTERFACE
USER EXPERIENCE
CONVERSION RATE
CUSTOMER JOURNEY
1. Nutzerzentriert denken
Die gesamte Benutzererfahrung sollte grundsätzlich so gestaltet werden, dass sie den Bedürfnissen und Erwartungen der Anwender entspricht. Sie ist ein elementarer Teil der gesamten „Customer Journey“ – ganz besonders bei Händlern, die Waren ausschließlich online anbieten. Deshalb ist es wichtig, im Vorfeld die Zielgruppe der Käufer genau zu definieren. Außerdem ist der Einsatz von Marktforschungsinstrumenten wie einzelnen Nutzertests und Nutzerinterviews sowie Fokusgruppen sinnvoll. Dabei handelt es sich um eine moderierte Gruppendiskussion mit „typischen“ Vertretern der Zielgruppe, die sich in diesem Fall über ihre Erwartungen an die Benutzererfahrung in einem Webshop austauschen.
2. Nutzerpfade zu Ende denken
Wenn ein Besucher des Webshops plötzlich nicht mehr weiterkommt oder sich in einer Sackgasse befindet, ist er mit Recht verärgert. Beispiele dafür sind etwa Meldungen über fehlende Seiten während einer Suche, wenn der Rückwärtspfeil nicht zurück, sondern auf die Startseite führt oder wenn der Nutzer auf einer Seite ankommt, die weder über weiterführende Links noch ein Menü verfügt. Um so etwas zu verhindern, sollten Shopbetreiber jeden einzelnen Prozess, den ein Besucher durchlaufen kann, von Anfang bis Ende nachverfolgen – am besten aus Sicht eines Anwenders, der nur wenig Vorwissen hat und den Shop noch nicht kennt.
3. Usability-Tests einsetzen
Viele Entscheidungen im UX-Design müssen sich erst in der Praxis bewähren. Hierbei sind Usability-Tests hilfreich. Sie können mit ausgewählten Testnutzern, aber auch im Regelbetrieb durchgeführt werden. Ein häufig genutzter Usability-Test ist der A/B-Test. Hier werden zwei verschiedene Versionen einer Seite an zufällig ausgewählte Besucher ausgespielt. Durch die üblichen Methoden der Performance-Messung können die Betreiber nun ermitteln, welches Design effizienter ist. Typische Messwerte sind die Conversion Rate oder die Anzahl der Kaufabbrüche. Um die Nutzererfahrung und die Webseite kontinuierlich zu verbessern, ist es außerdem wichtig, die Erkenntnisse des A/B-Tests zu analysieren und auszuwerten sowie weitere Tests anzuwenden, um die erfolgreichere Variante immer wieder zu optimieren.
4. Lean-Methodik einsetzen
Viele Unternehmen aus der Digitalwirtschaft sind mit dem Prinzip des „Lean Startup“ erfolgreich. Dabei kommt zunächst ein Produkt auf den Markt, das „gut genug“, aber noch nicht perfekt ist. Anschließend wird es schrittweise und unter Berücksichtigung der Benutzerwünsche angepasst und erweitert. Diese Vorgehensweise ist auch beim Launch eines Shops ein guter Ansatz. Zunächst sollten alle dringend notwendigen Funktionen verwirklicht werden. Anschließend kann das UX-Design anhand von Reaktionen und Feedback der Nutzer verbessert und Schritt für Schritt perfektioniert werden. Die Lean-Methodik vermeidet teure Fehlentwicklungen, die umgesetzt, aber vom Kunden gar nicht gewünscht werden. Es ist sinnvoll, diesen Optimierungsprozess am Anfang der User Journey zu beginnen – schließlich bringt auch der nutzerfreundlichste Warenkorb oder Checkout-Prozess wenig, wenn der Kunde aufgrund eines negativen Erlebnisses die Seite schon lange vorher wieder verlassen hat.
5. Responsives Design nutzen
Damit ein Webshop auf jedem Gerät (Smartphone, Tablet, Laptop, Desktopcomputer) optisch attraktiv wirkt und gut zu benutzen ist, ist ein „Responsives Design“ notwendig. Die Shop-Oberfläche wird dabei mit Stylesheets und Skripten an Größe, Format und Ausrichtung des Displays angepasst. Leider gibt es keine einfache Lösung für gutes Design auf allen Endgeräten. In der Regel muss die Benutzeroberfläche für jede Geräteklasse speziell angepasst werden. Ein Beispiel: Ein großer Slider auf der Startseite wirkt auf einem 27-Zoll-Monitor beeindruckend. Aber auf Smartphones sollte dieses Element ausgeblendet werden, da es den größten Teil des Displays bedeckt.
6. Online-Shop personalisierbar machen
Ein Webshop sollte personalisierbar sein und sich an die Bedürfnisse des Kunden anpassen. Dazu kann etwa die Möglichkeit gehören, mehrere Lieferadressen für Geschenke an Verwandte oder Nachsendungen in den Urlaub anzugeben, mehrere Girokonten oder Kreditkarten zu nutzen, Merklisten oder Wunschzettel anzulegen und auf ein übersichtliches Bestellarchiv zugreifen zu können. Mobile Shops können zudem die Benachrichtigungsfunktion des Mobilbetriebssystems für Rabattaktionen und Sonderangebote nutzen. Auch diese Benachrichtigungen sollten konfigurierbar sein, damit der Kunde lediglich solche Marketingaktionen sieht, die für ihn auch relevant sind. Hierfür gibt es Tools, die die Ausrichtung auf den Nutzer je nach dessen Verhalten in Echtzeit anpassen.
7. Selbsterklärende Elemente einsetzen
Sämtliche Elemente der Benutzeroberfläche sollten auf den ersten Blick erkennbar machen, worum es hier geht. Wenn zum Beispiel mehrere Buttons die Beschriftung „Weiter“ tragen, ist die genaue Wirkung jedes einzelnen nicht erkennbar. Besser sind präzise Beschriftungen, beispielsweise „Nächste Seite“, „Zur Kasse“ oder „Produktdetails“. Zudem unterstützen Kontexthilfen bei unklaren Punkten, die auf verschiedene Weisen umgesetzt werden können: So sind etwa Hilfeseiten sinnvoll, die nach dem Anklicken oder Antippen eines Hilfe-Buttons in einem neuen Tab erscheinen. Alternativ kann jedes Element mit einem „Tooltip“ ausgestattet sein, der erscheint, sobald der Benutzer den Mauszeiger darüber bewegt. Bei Mobilgeräten sind Tooltips weniger gängig, sie können aber durch langes Antippen angezeigt werden. Hier können auch alternative Lösungen, beispielsweise ein aufklappbarer Hilfebereich, zum Einsatz kommen.
8. Formulare übersichtlich gestalten
Alle Formulare zur Eingabe von Adress-, Zahlungs-und Bestellinformationen müssen übersichtlich und leicht bedienbar sein. Zudem sollten die Formulare nur die jeweils notwendigen Dinge abfragen. Ein Beispiel ist das Anmeldeformular. Im ersten Schritt reicht es völlig aus, lediglich Name, E-Mail-Adresse und Kennwort abzufragen. Anschrift und Kontoinformationen muss der Kunde bei einer Bestellung ohnehin nachtragen. Auch hier ist es wichtig, stets auf die mobile Darstellung zu achten. Gegebenenfalls müssen bei Formularen gezielte Änderungen für die mobile Optimierung vorgenommen werden.
9. Dialogfenster sparsam einsetzen
Ein häufiger Grund für vorzeitige Kaufabbrüche sind zu frühe und zu viele Dialogfenster, etwa die Aufforderung zum Abonnement eines Newsletters direkt beim Besuchen der Webseite. Jeder Dialog ist eine Unterbrechung, die den Besucher von seinem eigentlichen Ziel ablenkt: Sich über ein Produkt zu informieren und es gegebenenfalls zu kaufen. Falsch eingesetzte Dialogfenster stören und führen häufig dazu, dass der Nutzer die Webseite wieder verlässt. Die Grundregel lautet also, Dialoge nicht gleich zu Anfang, möglichst sparsam und vor allem sinnvoll einzusetzen.
10. Regelmäßig Feedback geben
Auch fehlendes Feedback führt öfter zu Kaufabbrüchen. Der Besucher sollte jederzeit sehen können, an welcher Stelle er sich befindet. Es gibt einige Möglichkeiten für Feedback, etwa die Anzeige der Schrittfolge beim Checkout oder eine „Breadcrumb“-Navigation im Shop. Hier werden alle besuchten Stationen als klickbare Links aufgeführt – beispielsweise „Start / Alle Produkte / Elektronik / Monitore“. Ein weiteres Standardverfahren ist die Anzeige von auffälligen Dialogfeldern, wenn der Besucher eine kritische Aktion durchführt – etwa das Löschen eines Adresseintrags oder einer Zahlungsinformation. Aber auch hier gilt: Weniger ist mehr und Hinweise dieser Art sollten sparsam und bedacht eingesetzt werden. So sollte das Löschen eines Artikels aus dem Warenkorb nicht bestätigt werden müssen. Die meisten Nutzer würden sich dadurch wohl eher belästigt fühlen.
1. Intuitives Navigieren
Das wichtigste an einem guten UI ist, dass der User mühelos, intuitiv, navigieren kann. Aber was versteht man unter intuitivem Navigieren überhaupt? User sollten ohne langes Suchen in der Lage sein, eine Anwendung zu verwenden. Die Frage “Wie mache ich das?” sollte also am besten gar nicht aufkommen. Andererseits gibt es kulturell gelernte Handlungsweisen: Man kennt ein Hamburger Menü-Icon und man weiß inzwischen, dass sich hinter vielen Bildern “Ghost Links” verbergen, die zu Artikeln führen.
Die Frage ist daher auch immer: wie kann ich das, was kulturell bereits gelernt wurde, einsetzen, um müheloses Navigieren zu erleichtern. Auch Design-Neuerungen sind dann am besten, wenn sie mit bereits etablierten Mustern verbunden werden.
Nicht-intuitives navigieren bezeichnet genau das Gegenteil. Es tritt immer dann auf, wenn Design entgegen von kulturell erlernten Inhalten, entwickelt wird. Stellen Sie sich zum Beispiel einmal folgendes vor:
Warum sind diese Buttons so verwirrend? Weil diese nicht-intuitiv designt sind. Zum einen erwartet man den “Jetzt kostenlos testen!”-Button auf der rechten Seite und den “Abbrechen”-Button auf der linken. Außerdem ist die Schrift des “Abbrechen”-Buttons viel größer, als würde es sich hier um die wirklich wichtige Aussage handeln. Auch die Farbe “Rot” ist hier irreführend, da man eher einen Abbruch der Aktion verbinden würde.
Das Design widerspricht somit den Erwartungen, die man als User mit bestimmten Aktionen verbindet. Text und Design sollen sich dabei unterstützen, nicht widersprechen.
2. Wie verwenden User Ihr UI?
Bevor Sie ein User Interface designen, überlegen Sie, wie Ihre User dieses nutzen werden. Welche Gesten oder Interaktionen werden verwendet, gerade auch auf touch-zentrierten Mobilgeräten.
Sollen Ihre User einen Button anklicken?
Nach rechts oder links wischen?
Bieten Sie drag & drop-Funktionen an?
Gibt es ein Formular, das ausgefüllt werden soll?
Dies sind alles Entscheidungen, die Sie in Ihr Konzept miteinbeziehen sollten. Diese Fragen, die man bei der Konzeptionierung bereits mit überlegen sollte, sind der Grund, warum Webdesigner von statischen Designentwürfen zu interaktiven Prototypen übergehen und Erfahrungen designen wollen.
3. Feedback für Ihre User
Ihre User erwarten Reaktionen oder Feedback auf bestimmte Aktionen. Wenn User ein Formular ausfüllen, erwartet er oder sie danach eine Bestätigung. Feedback kann in ganz verschiedener Form stattfinden und verlangt werden. Es lohnt sich aber auch hier über kreative Lösungen nachzudenken. Wenn jemand auf unserer 404-Fehlerseite landet, dann erwartet ihn z. B. folgender Screen.
4. Fehler antizipieren
Mailchimp macht's vor. Die Markenkommunikation und das Design begeistern immer wieder. Bevor man bei Mailchimp eine E-Mail-Kampagne verschickt, erhält man diesen Screen, ob man die Kampagne auch wirklich schicken will.
5. Etablierte Symbole
Als Designer wollen Sie wahrscheinlich Ihrer Kreativität freien Lauf lassen. Aber dennoch sollten Sie nicht versuchen ein “Papierkorb” oder “Like-”Symbol neu zu erfinden. Es gibt standardisierte Symbole, die aus unserem Alltag nicht mehr wegzudenken sind, und die mit ganz bestimmten Funktionen verknüpft sind. Für iOS oder Android Apps gibt es dazu offizielle Style Guides.
Es gibt aber auch Beispiele, bei denen Symbole weniger etabliert sind, wie z. B. jenes zur Sprachumschaltung. Das Globus-Symbol ist z. B. nicht ganz eindeutig belegt, sondern wird von Facebook dazu genutzt, um Neuigkeiten anzuzeigen.
Fazit.
Wenn es um ansprechendes UI geht, ist es wichtig ein leicht erlernbares Interface zu designen. Dies gelingt mit standardisierten Icons, mit Feedback zu Aktionen und mit intuitivem User Design. Ihr UI sollte am besten leicht zu verstehen sein und die Beschäftigung mit einer Anwendung erfreulich und ohne lange Einarbeitungszeit möglich machen.
» Der psychologische Vorteil einer sehr konkreten Definition besteht darin, dass es dem Entwickler leicht fällt, sich mit der entsprechenden Persona zu identifizieren. Dadurch ist er in der Lage, deren Wünsche, Bedürfnisse und Anforderungen quasi zu erspüren und lösungsorientiert umzusetzen. Er kann durch die Augen der Persona auf das Projekt schauen.
» Eine konkrete Definition erlaubt es, sich exakt zu fokussieren. Einmal gefundene Anforderungsprofile lassen sich auf diese Weise konsequenter abarbeiten. Gibt es mehrere Personas, müssen diese priorisiert und einzeln bedient werden. Nicht gut wäre es, alle Anforderungsprofile zu mischen und so die Differenzierung zu verlieren. Es ist unmöglich, für jedermann zu designen, ebenso wie es unmöglich ist, „Everybody's Darling” zu sein. Cooper spricht in solchen Fällen vom „elastischen User”, den es natürlich nicht gibt.
» Die Persona-Definition stellt den Anwender als Ziel der Entwicklung auch den Projektteilnehmern zuverlässig vor, die an der Zieldefinition nicht beteiligt waren.
» Richtungsentscheidungen im Designfortschritt werden einfacher, wenn man ihnen eine klare Nutzerdefinition zugrundelegen kann.
» Zu guter Letzt erlaubt eine gute User Persona auch, dass sich ein Teammitglied in sie einfindet und die in Entwicklung befindliche App oder ein Design so handhabt, wie es eine solche Person voraussichtlich ebenfalls getan hätte. So lassen sich ohne viel Aufwand Nutzertests durchführen.
BEISPIELE PERSONAS
Kevin smart
Student Betriebswirtschaft 21 Jahre Single
WG mit Kommilitonen, Fährt MTB
Kümmert sich um sich und sein Studium
Joggt, spielt Volleyball und liebt Sportwagen
Kein Geld, zu schüchtern für FReundin
Lukas Nerdovski
Programmierer 26 Jahre Single
Hochhaus in Stadt, nutzt öffentliche Verkehrsmittel
sammelt alte Schallplatten. Leidenschaftlicher Konzertgänger
Liebt Kaffee, Cola und Pizza
Würde mal gerne Gleitschirm fliegen hat aber Angst
Rainer Mittig
Banker 48 Jahre verheiratet 3 Kinder
Reihenhaus in Vorstadt, Fährt SUV
Schaut Fussball, pflegt Auto, geht gern Billard spielen
Liebt Grillen und Currywurst in Mittagspause
Nachbars Haus ist schöner und größer
Sabine Mutter
Hausfrau 42 Jahre verheiratet 2 Kinder
Reihenhaus auf Dorf, Fährt Kleinwagen
Kümmert sich um Kinder, Haushalt, Garten und macht Yoga
Kocht gerne, besucht VHS Kurse
Hat zu wenig Zeit zum shoppen gehen
Christine Vorzimmer
Sekretärin 28 Jahre ledig
Wohnung in Stadt, Fährt Kleinwagen
sehr selbstbezogen. Wellness und Fitness
Geht gern in Urlaub all inklusiv ans Meer
Parkplatzsuche beim Shoppen ist immer eine Katastrophe
Nadine Derbic
Vertrieb
52 Jahre geschieden 1 erwachsenes Kind
Wohnung in der Vorstadt, Fährt Motorrad
Geniesst das Leben, kennt keine Tabus
Liebt Motorradausfahrten. Träumt von Route 66.
Freundinnen verstehen sie selten.
Emotional Design markiert sozusagen die Oberklasse. Wenn dein Design also funktional, zuverlässig und benutzbar ist, heißt das noch lange nicht, dass es auch emotional ist. Emotional ist hier natürlich stets in positiver Konnotation gemeint. Erst wenn dein Design etwa Spaß macht, die Benutzer sich freuen, es verwenden zu können, dann ist es in positivem Sinne ein Emotional Design. Hierzu gehört nicht nur die sprichwörtliche Schönheit des Designs, sondern vor allem das Gestalten perfekter Interaktionen, um das Design mit Leben zu füllen und fühlbar zu gestalten.
