UI/UX Design: Wege zu einer optimalen Nutzererfahrung im Web

• Ein gut gemachtes User-Interface erleichtert die Dateneingabe und führt den Benutzer schnell durch alle Menüs und Formulare.
• Durch regelmäßige Nutzerbefragungen und passend zur Zielgruppe gestaltete Websites lässt sich die User Experience messbar verbessern.
• Die wichtigsten Begriffe zur Website-Gestaltung haben wir hier zusammengefasst und kurz erklärt.

Wer mit seiner eigenen Website oder seinem eigenen Webshop ins Netz gehen will, der stößt schnell auf jede Menge Fachbegriffe. Das User Interface (UI) und die User Experience (UX) sind zwei davon. Beide werden oft verwechselt. Damit Ihre Besucher zufrieden sind und gerne wiederkommen, sollten Sie UI und UX Ihrer Webseite auf Ihre Zielgruppen ausrichten. Wir erklären Ihnen, was sie bedeuten und worauf Sie bei Ihrem Internetauftritt achten müssen.

In der Anfangszeit des Internets sahen Webseiten völlig anders aus als heute. Zu einer guten Bedienbarkeit von den neuen Online-Auftritten gab es noch keinerlei Erkenntnisse. So schuf jeder Web-Designer seine Seiten nach ganz eigenen Regeln und Vorstellungen. Das Internet der 1990er Jahre war bunt, mit Informationen überfrachtet und voller komplizierter Menüpunkte – und später dann auch noch blinkend und mit Musik unterlegt. Einer der Wendepunkte war Googles radikaler Schritt, die Startseite seiner Suchmaschine bis auf das Eingabefeld und minimalistische Einstellmöglichkeiten leer zu lassen. 

Nach und nach setzten sich Erkenntnisse durch, mit denen die Entwickler von Webseiten heute eine intuitive Bedienbarkeit schaffen. Auch die Anpassung an unterschiedliche Nutzertypen und wechselnde Endgeräte ist inzwischen eine selbstverständliche Überlegung im Entwicklungsprozess. 

Im Gegensatz zu den Anfängen des World Wide Webs liegen die Aufgaben des ursprünglichen „Web Designers“ heute verteilt bei zahlreichen Spezialisten. Dazu gehören Marketing, Grafik, Text, Technik – und eben auch UI und UX.

Das User Interface – die richtige Verbindung zwischen Mensch und Maschine entscheidet über den Erfolg

Jede größere Website verbindet zwei Welten: Das Frontend, das der Benutzer sieht und die Datenschicht, die tief im Inneren des Web-Servers verborgen liegt. Aufgabe des UI-Experten ist es, beide Ebenen zweckmäßig miteinander zu verbinden. Dabei soll der Website-Besucher

• alle von ihm gesuchten Inhalte auf direktem Weg erreichen
• dank eines übersichtlichen Designs alle anzuklickenden Objekte wie Schaltflächen oder Bildlaufleisten schnell erkennen und verstehen
• übersichtliche Formulare vorfinden, die schnell, intuitiv und ohne lästige Doppelungen ausgefüllt werden können.

Typische Fehler im UI: Kein Komfort für den Nutzer

Kaum etwas vertreibt Website-Besucher so zuverlässig wie ein miserables User Interface. Umständliche Eingabemasken sollten beispielsweise vermieden werden: Müssen Kunden Ihres Webshops beispielsweise ein Adressformular ausfüllen, wollen sie sich nicht umständlich durch lange Listen klicken. Ein verbreitetes Beispiel für vermeidbare Fehler ist die Länderauswahl im Drop-Down-Menü mit allen 185 Ländernamen dieser Erde. Besonders unangenehm ist es, wenn, der Deutschland versteckt unter G für „Germany“ einsortiert ist, weil die Software Ihres Webshops im Original mit englischen Ländernamen arbeitet.

Richtet sich Ihr Webshop etwa an bestimmte Kundengruppen, sollte Ihr Web-Team das berücksichtigen: Gehören die Kunden überwiegend zu einer älteren Zielgruppe (sogenannte Silver Surfer), sollte die Auswahlliste der Geburtsjahre nicht beim Jahr 2020 beginnen. Ebenso, wenn es ohnehin ein Mindestalter von 16 oder 18 Jahren gibt. Warum wollen Sie Ihren Kunden zumuten, sich umständlich durch eine lange Liste aller möglichen Geburtsjahre zu scrollen. Wer ein User Interface so umständlich aufbaut, darf sich nicht wundern, wenn seine Conversion Rate hinter den Erwartungen bleibt.

Wichtige Aufgaben des UI: Sicherheit und Datenqualität

Daneben muss der UI-Designer aber auch auf die Logik von Formularinhalten achten. Fehleingaben können erkannt werden, und gar nicht erst in Ihrer Kundendatenbank landen: Gibt etwa ein neuer Benutzer eine persönliche Mailadresse ohne @-Zeichen ein, sollte eine Fehlermeldung erscheinen und dieser Adressdatensatz nicht gespeichert werden. So bauen Sie eine Datenbank mit validen Kundendaten auf.

Das User Interface hat eine weitere Aufgabe, nämlich die Abwehr von Hackerangriffen. Hacker könnten versuchen, gefährliche Steuerbefehle in scheinbar harmlosen Formulareingaben zu verstecken. So könnte Schadcode auf den Server der Website eingeschleust werden (sogenannte Buffer-Overflow-Attacke). Ein UI-Designer gestaltet also nicht nur Menüs und Formulare, er oder sie ist auch für die Datenqualität und die Gefahrenabwehr mitverantwortlich.

Sinnvolles UI, gut durchdaches UX-Design: Eine positive Erfahrung auf Ihrer Webseite sorgt dafür, dass Kunden gern wiederkommen – bei Onlineshops bedeutet das langfristig mehr Umsatz.

Die User Experience – positive Erlebnisse schaffen den Unterschied

Anders als beim UI geht es bei der User Experience in erster Linie um die Kundenzufriedenheit: Jeder Besucher Ihrer Website soll nicht nur schnell finden, was er sucht. Er soll auch einen positiven und wertigen Eindruck von der Website gewinnen und gerne wiederkommen. 

Um dies alles zu erreichen, macht sich der UE-Designer am Anfang viele Gedanken über Nutzer-Typen und Nutzungsarten der Website. In der Regel werden gemeinsam mit dem Marketing die typischen Kunden mit ihren wichtigsten Eigenschaften, sogenannte Personas, definiert. In dieser Phase eines Webprojektes werden möglichst umfassende Daten genutzt: Erkenntnisse aus einer Vorgänger-Webseite, Marktforschung oder Branchen-Informationen.

Maßgeschneiderte UX: Auf die Zielgruppe kommt es an

Diese Erkenntnisse wirken sich auf Design, Inhalte und Technik aus. Zwei Beispiele: 

Soll eine Website für Heimwerkerinnen erstellt werden, stehen bei der Konzeption möglicherweise praktische Handwerks-Tipps im Vordergrund. Je nach Art Ihres Geschäfts kombinieren Sie die Tipps mit einem Webshop oder Affiliate-Links zu nützlichen Produkten rund ums Heimwerken. Die hierfür skizzierte Besucher-Persona ist die geschickte und selbständige Macherin. Sie interessiert sich  für regelmäßige Projektvorstellungen, nutzt Foren zum Ideen-Austausch mit Gleichgesinnten und plant ihre Vorhaben sorgfältig. Das bevorzugte Endgerät ist vermutlich ein Desktop-Rechner während der Planungsphase – und ein Tablet, mit dem Tutorials während der Ausführung angesehen werden können. 

Eine Website für Fußball-Interessierte wird den Fans des runden Leders eher einen Newsticker zu einzelnen Teams, Ligen oder Turnieren bieten oder die aktuelle Tabelle als Schnellansicht – das aber sekundengenau und optimiert fürs Smartphone.

Die User Experience gestalten: Die wichtigsten Fragen

Lernen Sie immer weiter aus den Erfahrungen, die Nutzer mit Ihrer Webseite machen. Stellen Sie sich die folgenden Fragen bei der Planung Ihres Webprojektes, doch lassen Sie es nicht dabei bewenden. Unter anderem werden Ihre potenziellen Kunden von Trends und Mitbewerber-Aktivitäten beeinflusst, so dass sich ihr Verhalten mit der Zeit ändert. Für eine gelungene UE stehen diese Fragen im Mittelpunkt:

• Welche Benutzertypen (personas) besuchen die Website?
• Was sind die Interessen der Benutzer und welche Informationen erwarten diese von Ihnen?
• Welche Ziele haben Sie als Website-Betreiber und wie möchten Sie Ihre Inhalte den Kunden am besten präsentieren?
• Wie erreichen Sie eine hohe Conversion Rate und regelmäßig wiederkehrende Besucher?
• Wie schaffen Sie wertige Inhalte, die auch von Suchmaschinen leicht gefunden werden?

All diese Fragen stellt sich der UE-Experte und um diese zu beantworten, greift er auf zahlreiche Informationsquellen zurück. Neben regelmäßigen qualitativen Benutzer-Interviews gehört dazu beispielsweise die Auswertung von Server-Daten: Wie lange bleiben Nutzer auf der Seite? Welche Unterseiten rufen sie häufig auf? Welche Suchanfragen stellen sie auf der Website? Finden sie, was sie suchen? Füllen sie Formulare aus und abonnieren sie Newsletter oder brechen sie Bestell-Prozesse regelmäßig ab?

Der UE-Designer prüft auch im laufenden Betrieb regelmäßig, ob die Besucher mit den Angeboten der Website zufrieden sind und steuert nach, wenn es hier Probleme gibt. Daneben sucht er – genau wie der UI-Designer – regelmäßig nach Verbesserungen, um Wege auf der Website zu verkürzen oder die Conversion Rate zu verbessern.

Video: YouTube / Ryte

UI und UX: Gemeinsam stark

Am Ende müssen also beide Disziplinen gut zusammenarbeiten, damit die Besucher Ihrer Website auch alles finden was sie suchen, ein angenehmes Nutzererlebnis haben und gerne wiederkommen. Eine gute Website ist eine Website, die in den Lesezeichen Ihrer Besucher ganz oben gespeichert wird. Denn für Ihre Website gilt, was auch für Ihre Lieblings-Italiener gilt: Zahlreiche Stammgäste sind das schönste Kompliment und der beste Beweis, dass Sie alles richtig gemacht haben.

Unser UI/UX-Glossar: Diese Fachbegriffe sollten Sie kennen

Bei Projekten rund um Ihre Webseite werden Sie mit verschiedenen Fachbegriffen konfrontiert. Damit Sie sich mit den Experten in Ihrem Team besser verständigen können, haben iwr Ihnen die wichtigsten Begriffe einmal zusammengefasst: 

• User Interface: Die Benutzeroberfläche (englisch: User Interface) ist die Verbindung zwischen Mensch und Maschine. Ist diese Oberfläche gut gestaltet, findet sich der Benutzer schnell zurecht, hat alle gewünschten Informationen auf einen Blick und freut sich über ein angenehmes Besuchs- oder Einkaufserlebnis.
• User Experience: Mit diesem Begriff aus dem Marketing wird die Benutzererfahrung eines Besuchers oder Kunden beschrieben. Gefallen ihm Gestaltung, Funktionsumfang und angebotene Inhalte des Produktes – hier also der Website – oder wendet er sich frustriert ab und kommt nie wieder?
• Frontend: Die für den Besucher der Website sichtbaren Inhalte zum Beispiel Ihres Webshops sind das Frontend, vergleichbar mit dem Schaufenster oder dem Verkaufsraum eines Ladengeschäftes.
• Backend: Hier liegen auf Ihrem Server die Kunden- und Produktdatenbanken Ihrer Website. Für den Besucher sind diese Datenbanken nicht direkt sichtbar und erreichbar, vergleichbar mit dem Warenlager oder den Büroräumen Ihres Unternehmens. Der UI-Designer stellt eine intuitive, kundenfreundliche und natürlich auch gegen Eingabefehler und Missbrauch möglichst gut geschützte Verbindung zwischen Backend und Frontend her.
• Conversion Rate: Die Conversion Rate gibt an, wie viele Besucher die Inhalte Ihrer Website tatsächlich genutzt haben. Das können bei einem Webshop alle Besucher sein, die etwas gekauft haben. Das können bei einer reinen Informations-Seite aber auch Besucher sein, die beispielsweise Ihren dort vorgestellten Newsletter abonniert oder an Ihrer Umfrage teilgenommen haben. Die Conversion Rate beschreibt hierbei in Prozent das zahlenmäßige Verhältnis von Gesamtbesuchern (Klicks) zu Besuchern, die die Seite so genutzt haben, wie von Ihnen geplant.
• HTML: Die Hyper Text Markup Language (HTML) ist die grundlegende Seitenbeschreibungssprache, in der Internet-Seiten programmiert sind. Daneben gibt es mittlerweile noch eine Vielzahl von weiteren Sprachen und Standards wie JavaScript um Bewegtbildinhalte darzustellen oder die Cascaded Style Sheets (CSS) um beispielsweise das Aussehen von Dokumenten und Schaltflächen zu definieren und zu vereinheitlichen.
• Responsives Design: Eine technisch gut gemachte Website funktioniert heute auf möglichst vielen unterschiedlichen Endgeräten. Das Benutzer-Interface passt sich dabei an die Besonderheiten des jeweiligen Gerätes an. Auf einem Smartphone werden Menüs automatisch kompakter dargestellt als auf einem großen Computer-Monitor. Auf einem Tablet mit Touchscreen haben alle Schaltflächen die richtige Größe um bequem per Fingerdruck ausgewählt zu werden und selbst auf der Smart-Watch sind wichtige Inhalte schnell erkenn- und aktivierbar. Responsives Design gewährleistet, dass Ihre Besucher mit jedem Endgerät das gleiche positive Nutzererlebnis haben.

Video: YouTube / Indra Burkhart

Haben auch Sie schon besonders gute oder schlechte Erfahrungen mit dem UI/UX-Design von Webseiten gemacht? Gibt es ein Best-Practice-Beispiel, von dem Sie richtig begeistert sind? Schildern Sie uns Ihre Erlebnisse in den Kommentaren.