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:
Unified Communication
Frau schaut auf eine Videokonferenz im Homeoffice

So funktioniert virtuelle Zusammenarbeit

Die Art, wie Menschen zusammenarbeiten, hat sich grundlegend verändert. Mit digitalen Tools wie Microsoft Teams, Slack und Jira ist es heute möglich, Meetings abzuhalten, mit Kolleg:innen und Kund:innen zu kommunizieren, Projekte zu managen, Dateien zu teilen und Dokumente in Echtzeit gemeinsam zu bearbeiten – ohne am selben Ort zu sein. Wie Sie durch virtuelle Zusammenarbeit Ihre Produktivität steigern und Abläufe verbessern können und was Sie als Führungskraft dabei beachten sollten, erfahren Sie hier. Teamwork ist wichtiger denn je. Virtuelle Teams erledigen heute selbst anspruchsvolle Aufgaben wie die Produktentwicklung ohne jegliche Vor-Ort-Abstimmungen zwischen Mitarbeiter:innen und (externen oder internen) Zulieferern. Erschaffen auch Sie ein produktives digitales Arbeitsumfeld, das heutigen Bedürfnissen der Mitarbeitenden entspricht und zum Unternehmenserfolg beiträgt.

Connectivity
Ein Mann sitzt vor einem Computerbildschirm und hat eine Videokonferenz mit anderen Personen. Auf dem Bildschirm deren Gesichter.

Videokonferenz-Tools und -Programme im Überblick

Videokonferenz-Tools bieten oft bereits alle Möglichkeiten eines persönlichen Zusammentreffens. Die Tools unterstützen die Remote-Arbeit in Projektteams oder auch Kundenberatungen und Bewerbungsgespräche – ohne, dass die Beteiligten dazu am selben Ort sein müssen. Lernen Sie hier die wichtigsten Videokonferenz-Programme kennen und erfahren Sie, welche Anforderungen sie erfüllen. Tools für Videokonferenzen warten mit heute mit vielen Zusatzfunktionen auf und die Nachfrage steigt kontinuierlich an. Das liegt vor allem an der zunehmenden Verbreitung von Remote-Work; aber auch an höheren Bandbreiten, die die Digitalisierung beschleunigen. Bidirektionale Echtzeitverbindungen stellen damit kein Problem mehr dar. Hochauflösende Videokonferenzen wie mit Microsoft Teams, WebEx, Zoom oder Slack laufen in der Regel sehr zuverlässig. Doch welches ist das beste Tool für Videokonferenzen in Unternehmen? Wann lohnen sich Videokonferenz-Programme, die Sie in eine Unified Communications und Collaboration-Lösung integrieren können? Antworten auf diese Fragen finden Sie im Folgenden.

Connectivity
Ein abstrakter Zug bewegt sich auf Gleisen durch einen Tunnel; viele Lichtlinien an den Wänden und am Boden.

Datenübertragung einfach erklärt

Im Informationszeitalter spielt die Übertragung von Daten eine zentrale Rolle. Es gibt heute viele Methoden für die Datenübertragung und sie entwickeln sich ständig weiter. Was einfach klingt, wirft im Alltag auch Fragen auf: Welche Technik eignet sich für welchen Datentransfer? Wie funktioniert die Übertragung per Funk, Kabel oder Satellit und wie viele Empfänger kann man gleichzeitig erreichen? Hier finden Sie eine Übersicht über die verschiedenen Arten der Datenübertragung, leicht erklärt. Die schnelle Verfügbarkeit von Daten ist heutzutage ein entscheidender Erfolgsfaktor für Unternehmen. Ob beim Datenaustausch über das Firmennetzwerk oder die Cloud, im E-Commerce, in der E-Mail-Kommunikation oder in Videokonferenzen: Datenübertragungen zwischen räumlich voneinander entfernten Sendern und Empfängern sind ein Bestandteil zahlreicher Prozesse. Es stellt sich die Frage: Welche Art der Datenübertragung ist die beste, wenn man Kriterien wie Datenübertragungsformate, Übertragungsgeschwindigkeit, Sicherheit, IT-Infrastrukturen, Anwendungslandschaft und Kosten miteinbezieht?

Digitalisierungsberatung

Die Beraterinnen und Berater helfen Ihnen kostenlos und unabhängig bei praktischen Fragen und geben konkrete Tipps. Vereinbaren Sie einen unverbindlichen Termin um Ihr Anliegen zu besprechen.

Termin vereinbaren