UX-Webdesign: Grundlagen, die jede Firmenwebsite braucht

UX steht für User Experience und beschreibt, wie sich der Besuch deiner Website für einen Menschen anfühlt. Im UX-Webdesign läuft das auf eine einfache Frage hinaus: Findet jemand ohne Nachdenken, was er sucht, und fühlt er sich dabei gut aufgehoben? Die Grundsätze dafür sind seit Jahrzehnten gut erforscht und gelten für die Seite eines Handwerksbetriebs in Trier genauso wie für einen großen Onlineshop. Hier erfährst du, was UX von UI und Webdesign trennt, welche sieben Grundsätze zählen und wie du deine eigene Seite ohne Budget selbst prüfst.

Woher der Begriff UX kommt und was UX-Webdesign umfasst

Wer nachliest, was UX-Design ist, landet schnell bei Apps. Dabei ist der Begriff älter als die meisten Websites. Bekannt gemacht hat ihn der Kognitionswissenschaftler Don Norman, der in den Neunzigerjahren bei Apple als User Experience Architect arbeitete. Ihm waren Wörter wie Benutzeroberfläche und Usability zu eng. Die Normenreihe DIN EN ISO 9241 zur Ergonomie der Mensch-System-Interaktion beschreibt User Experience heute als Wahrnehmungen und Reaktionen einer Person, die aus der Nutzung oder der erwarteten Nutzung entstehen.

Das Wort „erwartet“ verdient einen zweiten Blick. Die Erfahrung mit deiner Website beginnt, bevor jemand sie öffnet, schon im Suchergebnis bei Titel und Beschreibung. Sie endet erst, wenn die Frage beantwortet ist, mit der jemand gekommen ist. Für UX-Webdesign heißt das: Gestaltet wird der ganze Weg, die einzelne Seite ist nur ein Teil davon.

Oft gleichbedeutend benutzt wird Usability, zu Deutsch Gebrauchstauglichkeit oder schlicht Benutzerfreundlichkeit. Dieselbe Normenreihe misst sie daran, ob jemand sein Ziel erreicht, mit welchem Aufwand und wie zufrieden er dabei ist. Usability ist damit der am leichtesten messbare Teil der User Experience. UX fragt zusätzlich, ob jemand dir vertraut und wiederkommt.

Jemand sucht an einem Samstagmorgen eine Bäckerei in Trier-Süd, die heute geöffnet hat. Findet er die Öffnungszeiten auf einen Blick, war die Usability gut. Steht direkt daneben noch die Einladung zum Sommerfest vom letzten Jahr, fragt er sich, ob hier überhaupt noch jemand die Seite pflegt. Die Öffnungszeiten hat er gefunden. Ob er ihnen glaubt, ist eine andere Frage.

UX, UI und Webdesign: wer was entscheidet

UI steht für User Interface, die Benutzeroberfläche. Gemeint ist alles, was man sieht und anklickt: Schaltflächen, Menüs, Farben, Schriften, Symbole, Abstände. UI-Design entscheidet, wie eine Schaltfläche aussieht. UX-Design entscheidet, ob an dieser Stelle überhaupt eine Schaltfläche nötig ist und wohin sie führt.

Nimm ein Restaurant. Seine UI ist die Speisekarte: Papier, Schrift, Aufbau, das Foto vom Flammkuchen. Die UX ist der ganze Abend. Bekommst du einen Tisch, verstehst du die Karte, kommt das Essen warm, stimmt die Rechnung? Eine wunderschön gestaltete Karte rettet keinen Abend, an dem die Küche eine Stunde braucht.

Webdesign ist der Oberbegriff für das Handwerk, eine Website zu planen, zu gestalten und zu bauen. Dazu gehören UX und UI, Technik, Texte und die Frage, wie die Seite bei Google gefunden wird. Große Teams verteilen das oft auf eigene Berufe. Der Jobtitel UI/UX-Designer steht dagegen für Stellen, in denen eine Person UX und UI zusammen übernimmt. Bei der Website eines kleinen Betriebs liegt meist alles in einer Hand, und das ist kein Nachteil, solange diese Hand UX und UI auseinanderhält.

Als Auftraggeber bewertest du bei einem Entwurf fast automatisch die UI, also ob er dir gefällt. Die UX zeigt sich erst, wenn ein Mensch mit einer Aufgabe durch die Seite geht.

Sieben Grundsätze, an denen sich gute UX messen lässt

Niemand muss UX nach Gefühl beurteilen. Jakob Nielsen hat 1994 zehn Heuristiken zur Bewertung von Benutzeroberflächen veröffentlicht. Die Norm DIN EN ISO 9241-110 beschreibt Prinzipien der Interaktion zwischen Mensch und System. Fünf der folgenden sieben Grundsätze gehen auf diese beiden Quellen zurück. Lesbarkeit und Barrierefreiheit stehen in keiner der beiden Listen als eigener Punkt, gehören für eine Firmenwebsite aber dazu.

• Nutzerziel vor Selbstdarstellung. Jede Seite dient einer Aufgabe, die der Besucher mitbringt: einen Preis einschätzen oder einen Termin vereinbaren. Die Firmengeschichte darf da sein, sie darf nur nicht im Weg stehen.
• Erwartungskonformität. Die Seite verhält sich so, wie Besucher es von anderen Seiten kennen. Das Logo führt zur Startseite, unterstrichener Text ist ein Link, und Kontakt heißt Kontakt.
• Konsistenz. Gleiches sieht gleich aus und heißt gleich. Wer im Menü „Leistungen“ schreibt, auf der Startseite „Angebot“ und im Fußbereich „Service“, lässt Besucher rätseln, ob das drei Dinge sind.
• Rückmeldung. Die Seite zeigt, was gerade passiert. Wo bin ich im Menü, hat mein Klick etwas ausgelöst, lädt da noch etwas?
• Fehlertoleranz. Fehler sind eingeplant. Eine vertippte Adresse endet auf einer Fehlerseite mit einem Weg zurück, und die Zurück-Taste des Browsers bringt dich dorthin, wo du herkamst.
• Lesbarkeit. Text ist zum Lesen da. Ausreichend große Schrift, kurze Absätze, Zwischenüberschriften, die etwas aussagen, und Zeilen, die nicht über die ganze Breite eines großen Monitors laufen.
• Barrierefreiheit. Die Seite funktioniert auch für Menschen, die schlecht sehen, keine Maus benutzen oder die Schrift vergrößern, weil die Lesebrille im Auto liegt. Die Web Content Accessibility Guidelines, kurz WCAG, geben dafür prüfbare Kriterien vor.

In dieser Liste fehlt ein Wort: schön. Nielsen führt Ästhetik zwar als eigene Heuristik, meint damit aber Gestaltung, die sich auf das Wesentliche beschränkt. Eine Seite darf gut aussehen, und sie sollte es auch. Eine benutzerfreundliche Website wird sie dadurch allein nicht, denn Schönheit macht Besucher nachsichtiger, ersetzt aber keinen der sieben Punkte.

Warum Gewohnheit bei UX mehr zählt als Originalität

Von Nielsen stammt noch eine zweite Beobachtung, bekannt als Jakobs Gesetz: Menschen verbringen die meiste Zeit auf anderen Websites als deiner. Ihre Erwartungen haben sie dort gelernt. Wer auf deiner Seite ankommt, weiß also schon, wo das Menü steht und was ein Symbol mit drei Strichen bedeutet.

Jede Abweichung davon kostet Aufmerksamkeit, und die fehlt dann für das, was du eigentlich zeigen willst. Ein Menü, das erst beim Scrollen auftaucht, eine Navigation am rechten Rand, Links, die wie normaler Text aussehen: Jedes für sich wirkt harmlos. Zusammen fühlt sich die Seite an wie eine Ferienwohnung, in der alle Lichtschalter an ungewohnten Stellen sitzen. Man kommt zurecht, gemütlich wird es nicht.

Gleich aussehen müssen Websites deshalb nicht. Ein Weingut an der Mosel darf eine eigene Bildsprache haben und in einem Ton schreiben, der nach Schiefer und Steillage klingt. Der Weg zur Weinprobe und zum Bestellformular liegt trotzdem dort, wo ihn jeder sucht.

Wo UX auf Suchintention, Ladezeit und Conversion trifft

UX überschneidet sich mit drei Bereichen, die eigene Werkzeuge haben. Zuerst die Suchintention. Hier kommt die erwartete Nutzung aus der Definition ins Spiel. Wer bei Google sucht, erwartet eine bestimmte Art von Antwort, mal eine Erklärung, mal nur eine Telefonnummer. Verfehlt deine Seite diese Erwartung, ist das Erlebnis schlecht, bevor irgendein Grundsatz greifen kann. Wie du die Absicht hinter einem Suchbegriff erkennst, erklärt mein Beitrag zur Suchintention mit Beispielen aus Trier.

Dann das Tempo. Nach dem Klick ist die Ladezeit der erste Moment auf deiner Seite, noch vor dem ersten Wort. Eine Seite, die lange weiß bleibt, verstößt gegen den Grundsatz Rückmeldung, bevor sie überhaupt etwas zu sagen hat. Welche Bremsen du selbst lösen kannst, zeigt die Checkliste Ladezeit optimieren.

Bleibt die Conversion, also etwa eine Anfrage oder ein Anruf. Der Anteil der Besucher, die so handeln, heißt Conversion-Rate. Sie ist ein messbares Ergebnis guter UX, aber nicht das einzige: Wer sich deinen Namen merkt und Wochen später direkt anruft, taucht in keiner Quote auf. Wie du die Strecke bis zur Anfrage prüfst, auch mit einem einfachen Usability-Test, steht im Beitrag zur Conversion-Optimierung für kleine Betriebe.

Die Unterscheidung sagt dir, wo du zuerst nachsehen solltest. Google bietet dafür zwei kostenlose Dienste. Zeigt die Search Console, dass deine Seite in der Suche weit oben steht, aber selten angeklickt wird, passen Titel und Beschreibung oft nicht zur Suchintention. Meldet PageSpeed Insights für Mobilgeräte schlechte Werte, bremst die Ladezeit. Sind Besucher da, bleiben Anfragen aber aus, liegt es oft an der Bedienung selbst oder am fehlenden Vertrauen. Die Bedienung prüft der Rundgang im nächsten Abschnitt. Woran Vertrauen hängt, zeigt der Beitrag zur Conversion-Optimierung.

UX selbst prüfen: ein Rundgang ohne Budget

Für eine erste Prüfung brauchst du weder Software noch Labor. Du brauchst eine Stunde und die Bereitschaft, deine Seite zu benutzen, als hättest du sie nie gesehen. Ganz gelingt das nie, weil du zu viel weißt. Die Schritte helfen trotzdem.

1. Drei Aufgaben aufschreiben. Notiere die drei häufigsten Gründe für einen Besuch, bei einer Physiotherapiepraxis in Konz etwa das Behandlungsangebot prüfen oder einen Parkplatz finden. Starte jede Aufgabe auf einer Unterseite, denn wer über Google kommt, landet oft gar nicht auf der Startseite.
2. An jeder Hürde den Grundsatz notieren. Wo du stockst, schreibst du auf, welcher der sieben Grundsätze verletzt ist. So wird aus einem Gefühl ein Befund.
3. Die Maus weglegen. Geh nur mit der Tabulatortaste durch die Seite. Am Mac klappt das zuverlässig in Chrome, in Safari mit Wahltaste und Tab. Siehst du jederzeit, wo du gerade bist? Erreichst du Menü, Links und Formular, und kannst du sie auch bedienen?
4. Auf 200 Prozent vergrößern. Drück mehrmals Strg und Plus, am Mac Cmd und Plus, bis der Browser 200 Prozent anzeigt. Nach WCAG sollen dabei weder Inhalt noch Funktion verloren gehen. Überlappt etwas oder verschwindet ein Menü ersatzlos, hast du einen Befund.
5. Den Kontrast messen. Normaler Text braucht nach WCAG 2.2, Stufe AA, einen Kontrast von mindestens 4,5 zu 1. Für großen Text ab etwa 24 Pixel oder fett ab etwa 18,7 Pixel reichen 3 zu 1. Den Wert zeigt Chrome: Rechtsklick auf den Text, Untersuchen, dann in den Stilangaben auf das Farbquadrat neben color klicken. Hellgraue Schrift auf Weiß fällt hier oft durch.
6. Einen Fehler provozieren. Tipp eine Adresse auf deiner Domain absichtlich falsch ein. Was die Fehlerseite dann anbietet, zeigt, wie fehlertolerant deine Seite ist.

Die Schritte 1, 2 und 6 wiederholst du danach am Smartphone, denn dort verschärfen sich viele Befunde. Was bei der Planung für den kleinen Bildschirm zusätzlich zählt, steht im Beitrag zu Mobile First im Webdesign.

Am Ende hast du eine Liste, und die ist der Anfang jeder UX-Optimierung. Sortiere sie nach einer Frage: Hindert dieser Punkt jemanden daran, seine Aufgabe zu erledigen? Was blockiert, kommt zuerst, was nur stört, danach. Fremde Augen ersetzt der Rundgang nicht. Auch die Schritte 3 bis 5 sind nur Stichproben aus den WCAG, keine vollständige Prüfung der Barrierefreiheit.

Was du einen Webdesigner zur UX fragen solltest

Bei einer neuen Website siehst du zuerst Entwürfe. Gutes UX-Webdesign steckt in den Fragen davor. Diese fünf zeigen dir, ob jemand an deine Besucher denkt oder an sein Portfolio.

• Wie wird geklärt, wer die Seite besucht und was diese Menschen dort erledigen wollen? Wer das nicht klärt, kann nur nach deinem Geschmack gestalten.
• Wie wird die Bedienbarkeit vor dem Start geprüft? Eine gute Antwort nennt ein Verfahren, etwa einen Durchgang mit festen Aufgaben. Eine schwache lautet: „Sieht doch gut aus.“
• Wird mit echten Texten entworfen oder mit Platzhaltern? Ein Entwurf mit Platzhaltertext zeigt seine UX erst mit dem echten Inhalt, und der passt dann oft nicht mehr in die vorgesehenen Kästen.
• Was passiert, wenn später Seiten dazukommen? Eine Navigation, die heute mit fünf Punkten elegant aussieht, muss auch mit acht noch funktionieren.
• Welche Kriterien der WCAG werden berücksichtigt? Kontrast, Tastaturbedienung und Vergrößerung lassen sich konkret zusagen, oder eben nicht.

Eine einzig richtige Antwort gibt es nicht. Aussagekräftig ist, ob sie konkret wird. Was ein Projekt bei mir umfasst und wie es abläuft, steht unter Website zum Festpreis. Die fünf Fragen darfst du mir im Erstgespräch genauso stellen wie jedem anderen.

Wenn du deiner eigenen Website zu nahe bist

Wer seine Website seit Jahren kennt, sieht sie nie wieder mit fremden Augen. Ich bin Dominique Feld und baue in Trier Websites, die ihre Besucher nicht zum Nachdenken zwingen. Schick mir den Link. Im kostenlosen Erstgespräch schaue ich mir deine aktuelle Situation an und gebe dir eine ehrliche Einschätzung, auch wenn sie lautet: „Das brauchst du nicht.“

Den Link schickst du über das Kontaktformular oder per E-Mail an kontakt@jolie-webdesign.de. Hast du den Rundgang oben gemacht, schreib deine drei Aufgaben gleich dazu. Du hörst innerhalb von 24 Stunden von mir.