UX und UI: Der Unterschied – und warum er über Anfragen entscheidet

Jemand findet deine Website über Google, will wissen, ob du die gesuchte Leistung anbietest, und überlegt, ob sich eine Anfrage lohnt. Diese Entscheidung fällt schnell. Die Nielsen Norman Group hat Daten zur Verweildauer auf Webseiten ausgewertet: Die ersten zehn Sekunden sind entscheidend dafür, ob jemand bleibt oder wieder geht. Der ästhetische Eindruck entsteht sogar noch schneller. In einer Studie aus dem Jahr 2006 bewerteten Versuchspersonen Websites nach einem Blick von nur 50 Millisekunden ähnlich wie nach längerer Betrachtung.

Ob aus einem Besuch eine Anfrage wird, hängt an zwei Disziplinen, die oft in einem Atemzug genannt werden: UX und UI. Hier erfährst du, was sie unterscheidet, wo sie über Anfragen entscheiden und wie du deine Website mit einfachen Mitteln selbst prüfst.

UI und UX: der Unterschied

UI steht für User Interface, die Benutzeroberfläche. Gemeint ist alles, was du siehst und anklickst: Farben, Schriften, Buttons, Icons, Abstände, Formularfelder und das Layout einer Seite.

UX steht für User Experience, das Nutzererlebnis. Die Normenreihe ISO 9241 beschreibt es als die Wahrnehmungen und Reaktionen einer Person, die aus der tatsächlichen oder erwarteten Nutzung eines Produkts, Systems oder einer Dienstleistung entstehen – vor, während und nach der Nutzung. Bei einer Website heisst das: Findet man sie? Lädt sie schnell? Versteht man das Angebot? Kommt man ans Ziel? Und meldet sich nach der Anfrage tatsächlich jemand?

Ein Bild dazu: Bei einer Tür ist die schön geformte Klinke das UI. Ob du auf Anhieb weisst, ob du ziehen oder drücken musst, ist UX.

Das UI ist also ein Teil der UX, aber nicht die ganze. Eine schöne Oberfläche rettet keine Website, auf der man die Telefonnummer nicht findet. Umgekehrt wirkt eine gut durchdachte Website mit lieblosem Design wenig vertrauenswürdig: Die Nielsen Norman Group zählt die Gestaltungsqualität zu den vier Faktoren, die bestimmen, ob Menschen einer Website vertrauen.

Fünf Stellen, an denen sich Anfragen entscheiden

1. Navigation: Findet man sich zurecht?

• Benenne Menüpunkte mit den Worten deiner Kundschaft, nicht mit internen Begriffen. «Badsanierung» versteht jeder, «Lösungen» oder «Kompetenzen» nicht. Jakob Nielsen nennt das in seinen zehn Usability-Heuristiken: Eine Website soll die Sprache ihrer Nutzerinnen und Nutzer sprechen.
• Halte das Hauptmenü kurz und ordne die Punkte so, wie deine Besucherinnen und Besucher denken, nicht wie dein Organigramm aussieht.
• Zeig die Hauptnavigation auf grossen Bildschirmen offen an. In einer Studie der Nielsen Norman Group schnitt Navigation, die hinter einem Menü-Symbol versteckt war, auf Desktop und Handy schlechter ab als sichtbare Navigation.
• Der Kontakt ist von jeder Seite aus mit einem Klick erreichbar.

2. Klarheit: Versteht man in Sekunden, was du anbietest?

Auf Websites wird mehr überflogen als gelesen. Nach einer Auswertung von Jakob Nielsen lesen Nutzerinnen und Nutzer bei einem durchschnittlichen Besuch höchstens 28 Prozent der Wörter einer Seite, wahrscheinlich eher rund 20 Prozent.

• Die Hauptüberschrift sagt, was du machst, für wen und wo.
• Zwischentitel, kurze Absätze und Listen machen Texte überfliegbar.
• Jede Seite hat ein klares Ziel und einen gut sichtbaren nächsten Schritt, etwa «Offerte anfragen» oder «Termin vereinbaren».
• Ablauf, Einzugsgebiet und, wenn möglich, ein Preisrahmen stehen auf der Website. Je weniger Fragen offen bleiben, desto leichter fällt die Anfrage.

3. Formulare: Wie leicht ist die Anfrage?

• Frag nur ab, was du für eine erste Antwort brauchst. Das Baymard Institute stellt in seinen Tests von Online-Shops seit Jahren fest, dass Bestellprozesse deutlich mehr Formularfelder enthalten als nötig. Prüf bei deinem Kontaktformular jedes Feld: Brauchst du es wirklich schon jetzt?
• Jedes Feld hat eine sichtbare Beschriftung über dem Feld. Ein grauer Platzhaltertext im Feld verschwindet beim Tippen, die Nielsen Norman Group rät davon ab, ihn als Ersatz für Beschriftungen zu verwenden.
• Fehlermeldungen sagen in Worten, was fehlt, und stehen beim betroffenen Feld.
• Nach dem Absenden erfährt man, wie es weitergeht, zum Beispiel: «Danke, wir melden uns innerhalb von zwei Arbeitstagen.»
• Telefonnummer und E-Mail-Adresse stehen neben dem Formular, für alle, die lieber direkt Kontakt aufnehmen.

4. Vertrauen: Wirkt deine Firma echt?

Das Stanford Web Credibility Project hat aus Untersuchungen mit über 4500 Personen Richtlinien für glaubwürdige Websites abgeleitet. Zwei davon: Zeig, dass eine echte Organisation hinter der Website steht, am einfachsten mit einer Postadresse. Und mach es leicht, dich zu kontaktieren. Konkret heisst das:

• Adresse, Telefonnummer und E-Mail-Adresse sind gut auffindbar, das Impressum ist vollständig.
• Echte Fotos von dir, deinem Team und deinen Arbeiten statt austauschbarer Stockbilder.
• Referenzen, die zeigen, was du schon gemacht hast.
• Aktuelle Inhalte: Ein Bereich «Neuigkeiten», dessen letzter Eintrag Jahre alt ist, wirkt schlechter als gar keiner.
• Mitgliedschaften, Zertifikate und Bewertungen, sofern sie echt und überprüfbar sind.

5. Barrierefreiheit: Teil einer guten UX

Eine Website, die nicht alle bedienen können, hat eine schlechte UX, nur eben nicht für alle. Laut der Weltgesundheitsorganisation WHO leben weltweit rund 1,3 Milliarden Menschen mit einer erheblichen Behinderung, etwa jede sechste Person. Dazu kommen Situationen, in denen alle eingeschränkt sind: grelles Sonnenlicht auf dem Display, eine Hand voller Einkäufe, eine laute Umgebung.

Guter Kontrast, ausreichend grosse Schrift, Bedienung per Tastatur, Alternativtexte für Bilder und verständliche Linktexte helfen allen. Welche Barrieren am häufigsten vorkommen und wie du sie behebst, zeigt unser Beitrag Die häufigsten Barrieren auf Websites. Wie wir dabei vorgehen, erfährst du auf unserer Seite zur Barrierefreiheit.

Zwei einfache Tests, die du selbst machen kannst

Für erste Erkenntnisse brauchst du kein Labor.

Der 5-Sekunden-Test

Zeig einer Person, die deine Firma nicht kennt, deine Startseite für fünf Sekunden. Dann nimm sie weg und frag:

• Was bietet diese Firma an?
• Für wen?
• Was würdest du als Nächstes tun?

Der Begriff geht auf die Usability-Expertin Christine Perfetti zurück, die die Methode Mitte der 2000er-Jahre bekannt gemacht hat. Der Test misst den ersten Eindruck und ob deine Kernbotschaft ankommt, nicht, wie gut sich die Seite bedienen lässt. Kann die Person die ersten beiden Fragen nicht beantworten, ist deine Botschaft zu wenig klar.

Der Nutzertest mit fünf Personen

Bitte fünf Personen aus deiner Zielgruppe, auf deiner Website konkrete Aufgaben zu lösen, und schau ihnen dabei zu. Zum Beispiel:

1. «Finde heraus, ob diese Firma auch in deiner Gemeinde arbeitet.»
2. «Finde heraus, wie eine Zusammenarbeit abläuft.»
3. «Schick eine Anfrage für ein Projekt.»

Bitte die Personen, laut zu denken, und hilf nicht, auch wenn es schwerfällt. Notiere, wo sie zögern, suchen oder aufgeben.

Warum fünf? Jakob Nielsen hat im Jahr 2000 ein Modell bekannt gemacht, das er mit Tom Landauer entwickelt hatte. Danach findet ein qualitativer Test mit fünf Personen rund 85 Prozent der Usability-Probleme. Das Modell geht davon aus, dass eine einzelne Person im Schnitt etwa 31 Prozent der Probleme aufdeckt und jede weitere weniger Neues bringt. Nielsen empfiehlt deshalb mehrere kleine Runden statt einer grossen: testen, verbessern, wieder testen.

Zwei Einschränkungen: Die 85 Prozent sind ein Durchschnittswert, keine Garantie. In einer Studie von 2003 fanden einzelne Fünfergruppen zwischen 55 und 99 Prozent der Probleme. Und für Kennzahlen wie Erfolgsquoten taugen fünf Personen nicht, für solche quantitativen Studien empfiehlt die Nielsen Norman Group rund 40 Teilnehmende. Um herauszufinden, wo deine Website hakt, reicht eine kleine Runde aber oft schon.

Checkliste: UX und UI deiner Website

• Die Startseite sagt in einem Satz, was du anbietest, für wen und wo.
• Menüpunkte verwenden die Worte deiner Kundschaft.
• Kontakt, Telefonnummer und Adresse sind von jeder Seite aus schnell erreichbar.
• Jede Seite hat einen klaren nächsten Schritt.
• Texte lassen sich überfliegen: Zwischentitel, kurze Absätze, Listen.
• Das Kontaktformular fragt nur das Nötige ab und hat sichtbare Beschriftungen.
• Nach dem Absenden ist klar, wie es weitergeht.
• Echte Fotos, Referenzen und aktuelle Inhalte schaffen Vertrauen.
• Kontraste, Schriftgrösse und Tastaturbedienung sind in Ordnung.
• Fünf Personen aus deiner Zielgruppe haben die wichtigsten Aufgaben getestet.

Projekt besprechen

Du willst wissen, wo deine Website Besucherinnen und Besucher verliert, oder planst einen neuen Auftritt? Wir verbinden UX und UI zu einer Website, die gut aussieht und sich einfach nutzen lässt. Mehr dazu auf unserer Seite zum Webdesign. Oder du besprichst dein Projekt direkt mit uns, telefonisch unter 071 688 58 36.