Hand mit Stift über Blättern mit einem UX-Design
Digitalisierung

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

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.

Inhaltsverzeichnis

UI/UX: Historie

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 Benutzer:innen sehen 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 sollen Website-Besucher:innen
  • alle 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 sie schnell, intuitiv und ohne lästige Doppelungen ausfüllen können.

Typische Fehler im UI: Kein Nutzungskomfort

Kaum etwas vertreibt Website-Besucher:innen so zuverlässig wie ein miserables User Interface. Umständliche Eingabemasken sollten beispielsweise vermieden werden: Müssen Kund:innen 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. Unangenehm ist es, wenn etwa 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 Zielgruppen, sollte Ihr Web-Team das berücksichtigen: Gehören die Kund:innen ü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 Kund:innen zumuten, sich umständlich durch eine lange Liste aller möglichen Geburtsjahre zu scrollen. Ein User Interface sollte möglichst einfach aufgebaut sein, um auch die Erwartungen an die Conversion Rate erfüllen zu können.

Wichtige Aufgaben des UI: Sicherheit und Datenqualität

Daneben muss ein/e UI-Designer:in aber auch auf die Logik von Formularinhalten achten. Fehleingaben können erkannt werden, und gar nicht erst in Ihrer Kundendatenbank landen: Geben etwa neue Benutzer:innen persönliche Mailadressen 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 Hackingangriffen. Hacker:innen 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). UI-Designer:innen gestalten also nicht nur Menüs und Formulare, sondern sind auch für die Datenqualität und die Gefahrenabwehr mitverantwortlich.
Mann sitzt zuhause in der Küche beim Onlineshopping
Sinnvolles UI, gut durchdaches UX-Design: Eine positive Erfahrung auf Ihrer Webseite sorgt dafür, dass Kunden gern wiederkommen.

Die User Experience – positive Erlebnisse schaffen den Unterschied

Anders als beim UI geht es bei der User Experience in erster Linie um die Kundenzufriedenheit: Alle Besucher:innen Ihrer Website sollen nicht nur schnell finden, was sie suchen. Sie sollen auch einen positiven und wertigen Eindruck von der Website gewinnen und gerne wiederkommen. 
Um dies alles zu erreichen, machen sich UE-Designer:innen am Anfang viele Gedanken über Nutzungs-Typen und Nutzungsarten der Website. In der Regel werden gemeinsam mit dem Marketing die typischen Kund:innen mit ihren wichtigsten Eigenschaften definiert, sogenannte Personas. 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 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.
Junge Frau nutzt ein VR-Headset

Whitepaper: AR/VR mit 5G

Augmented und Virtual Reality mit 5G: Expertenwissen teilen und mit Service punkten. Erfahren Sie mehr in unserem 5G-Whitepaper zu AR/VR.

  • Unterschiede AR & VR
  • Anwendungsszenarien & Beispiele
  • Voraussetzungen und erste Schritte
Jetzt downloaden

Die User Experience gestalten: Die wichtigsten Fragen

Lernen Sie immer weiter aus den Erfahrungen, die Nutzer:innen 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 Kund:innen von Trends und Mitbewerberaktivitäten beeinflusst, so dass sich ihr Verhalten mit der Zeit ändert. Für eine gelungene UE stehen diese Fragen im Mittelpunkt:
  • Welche Benutzungstypen (personas) besuchen die Website?
  • Was sind die Interessen der Benutzer:innen und welche Informationen erwarten sie von Ihnen?
  • Welche Ziele haben Sie als Website-Betreiber:in 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:innen?
  • Wie schaffen Sie wertige Inhalte, die auch von Suchmaschinen leicht gefunden werden?
All diese Fragen stellen sich UE-Expert:innen – und um diese zu beantworten, greifen sie auf zahlreiche Informationsquellen zurück. Neben regelmäßigen qualitativen Benutzungs-Interviews gehört dazu beispielsweise die Auswertung von Server-Daten: Wie lange bleiben Nutzer:innen 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?
UE-Designer:innen prüfen auch im laufenden Betrieb regelmäßig, ob die Besucher:innen mit den Angeboten der Website zufrieden sind und steuert nach, wenn es hier Probleme gibt. Daneben suchen sie – genau wie UI-Designer:innen – regelmäßig nach Verbesserungen, um Wege auf der Website zu verkürzen oder die Conversion Rate zu verbessern.
Empfohlener externer Inhalt
Hier ist ein Video-Inhalt von YouTube. Er ergänzt die Informationen auf dieser Seite.
Sie können ihn mit einem Klick anzeigen und wieder ausblenden.
Ich bin einverstanden, dass externe Inhalte angezeigt werden. So können personenbezogene Daten an Drittplattformen übermittelt werden. Mehr in unserer  Datenschutzerklärung.
Datenschutzerklärung

UI und UX: Gemeinsam stark

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

Flexible Speicher-Lösung: Vodafone Total Cloud Storage

Storage wird zu einem der größten Kostenfaktoren unter den IT-Ausgaben.

Buchen Sie unsere Angebote einfach zu Ihrer Vodafone Total Cloud-Lösung dazu.

Vodafone Total Cloud Storage hat die ISO 27001-Zertifizierung und basiert auf aktuellster Technologie.

Wir garantieren wir Ihnen bis zu 99,99 % Verfügbarkeit, je nach Lösung.

Durch umfangreiche Back-up- und Restore-Lösungen schützen Sie Ihre Produktionsdaten vor Korruption, Verlust und versehentlichen Löschungen.

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 Expert:innen in Ihrem Team besser verständigen können, haben wir Ihnen die wichtigsten Begriffe einmal zusammengefasst: 
  • User Interface: Die Benutzungsoberfläche (englisch: User Interface) ist die Verbindung zwischen Mensch und Maschine. Ist diese Oberfläche gut gestaltet, finden sich Benutzer:innen schnell zurecht, haben alle gewünschten Informationen auf einen Blick und freuen sich über ein angenehmes Besuchs- oder Einkaufserlebnis.
  • User Experience: Mit diesem Begriff aus dem Marketing wird die Benutzungserfahrung von Besucher:innen und Kund:innen beschrieben. Gefallen ihnen Gestaltung, Funktionsumfang und angebotene Inhalte des Produktes – hier also der Website – oder wenden sie sich frustriert ab und kommen nie wieder?
  • Frontend: Die für Besucher:innen 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 Besucher:innen sind diese Datenbanken nicht direkt sichtbar und erreichbar, vergleichbar mit dem Warenlager oder den Büroräumen Ihres Unternehmens. UI-Designer:innen stellen eine intuitive, kundenfreundliche Verbindung zwischen Backend und Frontend her – die auch vor Eingabefehlern und Missbrauch möglichst gut geschützt sein sollte.
  • Conversion Rate: Die Conversion Rate gibt an, wie viele Besucher:innen die Inhalte Ihrer Website tatsächlich genutzt haben. Das können bei einem Webshop alle Besucher:innen sein, die etwas gekauft haben. Das können bei einer reinen Informations-Seite aber auch Besucher:innen 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 Gesamtbesucher:innen (Klicks) zu Besucher:innen, die die Seite so genutzt haben wie von Ihnen geplant.
  • HTML: Die Hyper Text Markup Language (HTML) ist die grundlegende Seitenbeschreibungssprache, in der Internetseiten 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 Benutzungs-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 Computermonitor. 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:innen mit jedem Endgerät das gleiche positive Nutzererlebnis haben.
Empfohlener externer Inhalt
Hier ist ein Video-Inhalt von YouTube. Er ergänzt die Informationen auf dieser Seite.
Sie können ihn mit einem Klick anzeigen und wieder ausblenden.
Ich bin einverstanden, dass externe Inhalte angezeigt werden. So können personenbezogene Daten an Drittplattformen übermittelt werden. Mehr in unserer  Datenschutzerklärung.
Datenschutzerklärung
Das könnte Sie auch interessieren:
Connectivity
Ein Netzwerkstecker mit etwas Abstand vor dem Ethernet-Anschluss eines Netzwerkrouters. Zwischen Anschluss und Stecker helle Lichtblitze.

Power over Ethernet (PoE): So sparen Sie sich den Stromanschluss

Geräte im Büro einfach über das geplante oder vorhandene Netzwerk mit Strom versorgen? Der Standard „Power over Ethernet“ (PoE) verspricht genau dies und vereinfacht in der Praxis die Installation von neuen Telefonen, Netzwerk-Hubs oder Überwachungskameras. Was ist dran am Strom über das Netzwerkkabel und wie genau funktioniert die Technik? Je mehr Geräte sich in Ihrem Büro ansammeln, desto unübersichtlicher wird die Verkabelung. Power over Ethernet (PoE) kann hier Abhilfe schaffen, indem es bei vielen Geräten das zusätzliche Stromkabel überflüssig macht. Doch damit das funktioniert, müssen Netzwerk und Endgeräte bestimmte Voraussetzungen erfüllen.

Telefon

Digitalisierungs-Beratung

Sie haben Fragen zur Digitalisierung? Jetzt kostenlos beraten lassen. Montag-Freitag von 8-18 Uhr, außer an Feiertagen.

0800 505 4539

Hilfe und Service

Montag bis Freitag von 8 bis 20 Uhr, außer an Feiertagen.

0800 172 1234
Online
Vor Ort