UI & UX Erfahrungen und Einfluss auf unsere Arbeit im Webdesign
Was macht ein gutes User Interface auf einer Website aus? Die Antwort kann eigentlich jede*r geben. Ein gutes Webdesign führt dazu, dass ich mich auf der Website wohl fühle. Ich bin gerne dort, weil ich mich zurechtfinde und schnell ans Ziel gelange. Doch wie entwickelt man ein User Interface, auf der sich Nutzer wohl fühlen und positive Erfahrungen sammeln? Aus jahrelanger Praxiserfahrung als Webdesign Agentur erklären wir was User Interface (UI) und User Experience (UX) bedeuten, worauf man bei der Erstellung und Optimierung einer Website achten sollte und wie und wo wir uns informieren und weiterbilden.
Inhalte:
Bedeutung von User Interface (UI) und User Experience (UX)
Einführung: Was bedeuten UI & UX?
User Interface (UI) ist der englische Begriff für Benutzeroberflächen oder Benutzerschnittstellen. Gemeint ist immer eine Schnittstelle, über die Menschen mit einem digitalen Produkt, System oder einer Dienstleistung interagieren. Dazu gehören beispielsweise visuelle, textbasierte, sprachbasierte oder multimodale Interaktionen.
Man unterscheidet meist drei Arten von User Interface:
- Graphical User Interface (GUI) = Grafische Benutzeroberfläche
- Text User Interface (TUI) = Textgesteuerte Benutzeroberfläche
- Voice User Interface (VUI) = Sprachgesteuerte Benutzeroberfläche
In der Praxis können mehrere Formen miteinander verbunden sein, zum Beispiel in multimodalen Interfaces, die visuelle, sprachliche und andere Eingaben kombinieren.
Ein bekanntes Beispiel aus dem Alltag für Graphical User Interface (UI) ist der Fahrkartenautomat. Über einen Touchscreen wählt man das gewünschte Ticket und die Bezahloption aus. Das User Interface von Fahrkartenautomat sollte so einfach und verständlich aufgebaut sein, dass möglichst viele Menschen, unabhängig vom Alter und Bildung, es schaffen ein Ticket zu kaufen, und nicht frustriert den Vorgang abbrechen und ohne Ticket in die Bahn steigen.
Wir konzentrieren uns in diesem Artikel auf Graphical User Interface im Internet und benutzen dafür der Einfachheitshalber von nun an den Begriff User Interface (UI).
Ein gutes User Interface (UI) macht Inhalte, Funktionen und nächste Schritte verständlich. Es unterstützt unterschiedliche Nutzerziele, erleichtert die Orientierung und gibt klares Feedback zu Interaktionen. Bei Websites sollte den Besucher durch die Website leiten und zum gewünschten Ziel führen. Das Ziel kann je nach Benutzer und Website unterschiedlich sein: Informationen sammeln, Kontakt aufnehmen oder ein Kaufvorgang.
Eine Website sollte responsiv und robust umgesetzt sein und auf den für die Zielgruppe relevanten Geräten, Bildschirmgrößen, Betriebssystemen und Browsern zuverlässig funktionieren. Dafür braucht es eine priorisierte Testmatrix, die reale Nutzungssituationen abbildet. Es ist nicht notwendig, jede mögliche Kombination vollständig zu testen. Entscheidend ist, dass zentrale Inhalte und Funktionen auch bei unterschiedlichen Eingabemethoden, Bildschirmgrößen und technischen Voraussetzungen zugänglich bleiben.
„Die Seite kenne ich. Die ist gut.“
„Unter User Experience (UX), das sich als Nutzungserfahrung oder Nutzungserlebnis übersetzen lässt, versteht man die erlebte und gefühlte Qualität der Interaktion eines Nutzers insbesondere im Bereich digitaler Medien.“ Lexikon Gründerszene
UX umfasst damit nicht nur die Interaktion während der Nutzung, sondern auch Erwartungen und Erfahrungen vor, während und nach der Nutzung.
Die User Experience (UX) erweitert also den Begriff der Usability um eine emotionale Komponente beim Besuch einer Website:
- Wie schnell lädt die Website?
- Wirkt die Website vertrauenswürdig?
- Wie einfach finde ich, wonach ich suche?
- Wie gut passt sich die Seite meinem Bildschirm an?
- Wie einfach lässt sich die Seite bedienen?
- Wie attraktiv sieht die Seite aus und spiegelt sie die Marke wider?
- Habe ich eine Vorprägung gegenüber der Marke?
User Experience unterscheidet sich je nach Person, Nutzungskontext, Erwartungen, Vorerfahrungen und individuellen Fähigkeiten. Sie lässt sich deshalb nicht auf eine einzige, für alle Menschen gleichermaßen richtige Lösung reduzieren. Durch Nutzerforschung, zugängliche Gestaltung, technische Standards, qualitative und quantitative Tests sowie kontinuierliche Auswertung kann eine Website jedoch für relevante Zielgruppen gezielt verbessert werden.
Gute UX entsteht nicht erst durch die Gestaltung einzelner Benutzeroberflächen. Ein nutzerzentrierter Prozess beginnt damit, Nutzungskontext, Zielgruppen, Aufgaben und Anforderungen zu verstehen. Darauf aufbauend werden Struktur, Inhalte und Interaktionen entwickelt, prototypisch geprüft und mit relevanten Nutzer:innen evaluiert. Die Ergebnisse fließen iterativ in die weitere Gestaltung und Umsetzung ein.
Barrierefreiheit gehört zur Qualität einer digitalen Nutzererfahrung. Websites sollten so gestaltet und entwickelt werden, dass Menschen mit unterschiedlichen visuellen, auditiven, motorischen, kognitiven und sprachlichen Voraussetzungen sie wahrnehmen, verstehen, navigieren und bedienen können. Als technische Orientierung dienen die Web Content Accessibility Guidelines (WCAG) 2.2 des World Wide Web Consortiums. Besonders wichtig sind unter anderem verständliche Inhalte, ausreichende Kontraste, sichtbare Fokuszustände, Tastaturbedienbarkeit, sinnvolle Alternativtexte, zugängliche Formulare und verständliche Fehlermeldungen.
In der Einführung haben wir die Begriffe User Experience und User Interface für uns definiert. Dabei ist herausgekommen: Die User Experience einer Website kann sich je nach Benutzer unterscheiden und ist von vielen technischen Faktoren abhängig. Wie entscheiden wir also was auf einer Website richtig ist und umgesetzt wird? Wie schaffen wir es, dass möglichst viele Besucher einer Website eine möglichst positive Nutzererfahrung haben?
Erfahrungen und Umgang mit User Experience (UX)
Hilfreich bei der Entwicklung von Websites ist unser erfahrenes, interdisziplinäres Team mit teilweise über 15 Jahren Berufserfahrung. Manche Entwickler von uns arbeiten nebenbei noch selbstständig an anderen Web-Projekten. Wir arbeiten bei bestimmten Projekten gezielt mit Freelancern zusammen. Dadurch werden immer wieder neue Sichtweisen und Erfahrungen ins Team eingebracht.
Neben den Fähigkeiten ist uns auch die Einstellung wichtig. Offenheit für Neues und für Veränderung. Dinge ansprechen, die man ändern würde und warum. Regelmäßiges Hinterfragen der benutzen Techniken. Die eigenen und die Prozesse und Arbeitsweisen im Team optimieren.
Unsere Mitarbeiter aus dem Online-Marketing werden früh in die Projekte involviert. Sie unterstützen durch Recherchen für Struktur, Inhalte und Nutzerführung. Je nach Fragestellung kommen unterschiedliche Methoden zum Einsatz. Qualitative Usability-Tests, Interviews und Beobachtungen helfen dabei, Probleme im Nutzungserlebnis zu verstehen. Analytics, Heatmaps, Klickpfade, Scrollverhalten und Interaktionsdaten zeigen, wie sich Menschen auf einer Website tatsächlich verhalten. A/B-Tests vergleichen zuvor definierte Varianten anhand festgelegter Zielgrößen.
Hilfreich ist auch ein enger Austausch mit unseren Kunden. Für die Unternehmen haben wir häufig auch die Marke entwickelt und kennen daher das Alleinstellungsmerkmal, die Branche, die Zielgruppe und die Wettbewerber. Nach dem Launch können Feedback von Nutzer:innen und Mitarbeitenden, qualitative Usability-Tests, Analytics-Daten und – sofern sinnvoll – A/B-Tests miteinander verbunden werden. So lassen sich konkrete Nutzungshürden erkennen, Hypothesen überprüfen und priorisierte Verbesserungen ableiten.
Aktuelle Webdesigns von ooniyo
Klickt euch gerne durch unsere abgeschlossenen Webdesign Projekte und entdeckt verschiedenste Websites, von Hotel Websites über wohltätige Organisationen bis hin zu B2B Websites für mittelständische Unternehmen ist alles dabei…
Tipp: Websites, Tools und Quellen für Inspiration, Trends & Best Practice
UI Design & teils auch UX Design
UX Design & UX Engineering
UX, Barrierefreiheit und Web-Performance
UX Nutzerverhalten
- Content Square (ehem. Hotjar)
- mouseflow
- Google Analytics 4 (GA 4)
- Google Tag Manager
- Matomo
Martin Prosch
Senior Web DeveloperNeue Website oder Relaunch?
Eure Website soll nicht nur gut aussehen, sondern Menschen sicher zu ihrem Ziel führen und eure Marke verständlich erlebbar machen? Dann sprecht mit uns über euer Vorhaben.
