ui/ux design

Ohne kluges UI-Design kein Erfolg!

Wir Designer müssen die User Erwartungen antizipieren.

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

UX-Design: 10 Tipps für Onlineshops

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.

UI/UX Design

UI-Design: Einige Regeln

Einige Tipps, wie man ein ansprechendes UI designt und eine gute User Experience sicher stellt.

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.


fehlerseite

4. Fehler antizipieren

Es ist kein Geheimnis, das wir bei Usersnap große Mailchimp-Fans sind. Besonders die Markenkommunikation und das Design begeistert uns immer wieder. Bevor man bei Mailchimp eine E-Mail-Kampagne verschickt, erhält man diesen Screen, ob man die Kampagne auch wirklich schicken will.


Fehler antizipieren

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.



Etablierte Symbole

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.


Personas ermitteln

Bei der Erstellung einer Persona geht es darum, den potenziellen Nutzer so genau wie möglich zu beschreiben. Auf diese Weise erhalten wir einen personifizierten Anwender, der eine klar abgegrenzte Benutzergruppe repräsentiert. Diese Persona ist quasi Gesprächspartner und kann wie folgt helfen:


» Der psychologische Vorteil einer sehr konkreten Definition besteht darin, dass es dem Entwickler leichtfä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 Currywurscht in Mittagspause

Nachbarshaus 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 Motoradausfahrten. Träumt von Route 66.

Freundinnen verstehen sie selten.