In aller Kürze: UX (User Experience) beschreibt, wie sich deine Website anfühlt: Finden Besucher, was sie suchen, und kommen sie zur Anfrage? UI (User Interface) ist die sichtbare Oberfläche. Beides muss zuerst auf dem Smartphone funktionieren, denn Google bewertet die mobile Fassung. Am Ende wartet eine Checkliste.
1. Was bedeuten UX und UI?
- UX steht für User Experience, also das Nutzungserlebnis. Die Norm ISO 9241-210 beschreibt UX als die Wahrnehmungen und Reaktionen, die aus der Benutzung eines Produkts entstehen.
- UI steht für User Interface, die Benutzeroberfläche: Navigation, Überschriften, Bilder, Formulare, Buttons.
Ein Bild, das sich gut merken lässt: UX ist der Grundriss eines Hauses, UI die Einrichtung. Ein schön eingerichtetes Haus mit verwinkeltem Grundriss nervt.
UX ist der Grundriss
Wo liegen die Räume, wie kommt man von der Tür in die Küche, wo ist der kürzeste Weg? Auf der Website: Struktur, Navigation und der Weg zur Anfrage.
UI ist die Einrichtung
Farben, Möbel, Licht: Wie fühlt sich der Raum an, und findet man den Lichtschalter? Auf der Website: Layout, Typografie, Farben und Buttons.
2. Wie unterscheiden sich UX- und UI-Design in der Praxis?
| UX-Design | UI-Design | |
|---|---|---|
| Leitfrage | Was sollen Besucher verstehen und tun? | Wie sieht das aus, und wie lässt es sich bedienen? |
| Ergebnis | Konzept und Wireframes | Gestaltete Seiten und ein Design System |
| Woran man Fehler merkt | Besucher finden nichts, springen ab, fragen nicht an | Seite wirkt unruhig, schwer lesbar, Buttons werden übersehen |
Wichtig ist die Reihenfolge: Erst wird geklärt, was die Website leisten soll, dann wird gestaltet.
3. Warum fängt gutes Design heute beim Smartphone an?
In Deutschland kamen im September 2026 laut StatCounter rund 60 Prozent der Seitenaufrufe von Smartphones, gut 38 Prozent vom Desktop und knapp 2 Prozent von Tablets.
Seitenaufrufe nach Gerät
Deutschland, September 2026.
Quelle: StatCounter Global Stats, gerundet.
Was sich seit unserem Artikel von 2020 geändert hat
- Seit Juli 2024 ist die Umstellung auf Mobile-First-Indexing abgeschlossen: Google bewertet deine Website so, wie sie auf dem Smartphone aussieht.
- Den Google-Test „Optimierung für Mobilgeräte“ gibt es seit Ende 2023 nicht mehr. Prüfen kannst du heute mit PageSpeed Insights oder Lighthouse.
- Bei den Core Web Vitals zählt seit März 2024 INP (Interaction to Next Paint) statt FID.
Die mobile Fassung ist also der Ausgangspunkt, keine verkleinerte Desktop-Seite:
- Das Wichtigste nach oben, denn ohne Scrollen siehst du nur einen kleinen Ausschnitt.
- Bedienen mit dem Daumen. Die WCAG 2.2 verlangen auf Stufe AA mindestens 24 × 24 Pixel für Buttons, empfohlen sind 44 × 44 Pixel.
- Lesbare Schrift, kurze Formulare, schnelles Laden. Eine schlanke Seite ist übrigens auch die nachhaltigere, mehr dazu in unserem Artikel über nachhaltiges Webdesign.
4. Was hat Barrierefreiheit damit zu tun?
Gute UX heißt, dass möglichst alle deine Website nutzen können, auch mit Screenreader oder in der Sonne auf dem Handy.
In der Sonne
Kontrast hilft allen, nicht nur Menschen mit Sehschwäche.
Hellgrau auf Weiß
Im Schatten noch lesbar, draußen in der Mittagssonne kaum.
Termin anfragenSchwacher KontrastText und Button verschwinden
Dunkel auf Hell
Auch bei Blendung gut lesbar, der Button bleibt sichtbar.
Termin anfragenStarker Kontrastbleibt auch bei Blendung erkennbar
Die WCAG verlangen für normalen Text ein Kontrastverhältnis von mindestens 4,5 : 1.
Seit dem 28. Juni 2025 gilt außerdem das Barrierefreiheitsstärkungsgesetz (BFSG), vor allem für Angebote, über die Verbraucher online Verträge abschließen, etwa Online-Shops. Kleinstunternehmen, die Dienstleistungen anbieten, sind ausgenommen. Ob es für dich gilt, hängt vom Einzelfall ab, wir geben hier keine Rechtsberatung. Eine Übersicht findest du bei der Bundesfachstelle Barrierefreiheit (öffnet neues Fenster).
5. Woran erkennst du gute UX und UI auf deiner Website?
Nimm dein Smartphone und geh deine Website durch, als wärst du zum ersten Mal dort:
- Erkennst du in wenigen Sekunden, was angeboten wird und für wen?
- Findest du die drei wichtigsten Inhalte ohne Suchen?
- Gibt es auf jeder Seite einen sichtbaren Weg zur Anfrage?
- Lassen sich alle Buttons bequem mit dem Daumen treffen?
- Kannst du alle Texte ohne Zoomen lesen?
- Lädt die Seite auch im Mobilnetz zügig? Ein schneller Test: PageSpeed Insights (öffnet neues Fenster).
- Funktioniert das Kontaktformular auf dem Handy ohne Frust?
- Sieht die Seite aus wie deine Marke?
6. Aus der Praxis: tobias-kehlenbach.de
Tobias Kehlenbach ist Physiotherapeut und Heilpraktiker in Bonn. Beim Relaunch 2026 standen zuerst UX-Fragen im Mittelpunkt, die wir gemeinsam mit Melanie Hoffmann in den Marketing-Basics geklärt haben.
- Struktur (UX): Jede Leistung hat eine eigene Seite, Kosten und Abrechnung stehen offen da, der Ablauf wird „in 3 einfachen Schritten“ erklärt.
- Oberfläche (UI): Tobias spricht in der Ich-Form und ist selbst zu sehen. Der Button „Termin vereinbaren“ ist auf der ganzen Seite schnell erreichbar.
Aus der Praxis
tobias-kehlenbach.de auf dem Smartphone.
Ohne Scrollen klar: was, wo und für wen. Der Button „Termin vereinbaren“ liegt gut erreichbar im Daumenbereich.
Screenshot vom 18.10.2026
Die ganze Geschichte findest du in der Case Study zu tobias-kehlenbach.de.
7. Fazit
UX sorgt dafür, dass deine Besucher verstehen und handeln, UI dafür, dass sie es gern tun. Bei uns beginnt das mit deiner Positionierung, dann folgen Konzeption & UX, Design und Umsetzung. Eine Website, die gut aussieht, aber nicht zur Anfrage führt, ist am Ende nur hübsch.
Wie steht es um deine Website?
Beim kostenlosen Experten-Check schauen wir uns deine wichtigste Seite an, auch auf dem Smartphone, und besprechen dann mit dir 5 bis 10 konkrete Hinweise, was du verbessern kannst.
Über den Autor: Benno Schmidtler hat memedia gegründet und baut seit über 30 Jahren Websites. Er führt jedes Projekt persönlich, von der Strategie bis zur Betreuung.
Quellen
- StatCounter Global Stats: Desktop vs. Mobile vs. Tablet, Deutschland (öffnet neues Fenster) (abgerufen 16.10.2026, Wert September 2026)
- Google Search Central: Mobile-First-Indexing (öffnet neues Fenster)
- PPC Land: Google Search completes transition to Mobile-First Indexing by July 5, 2024 (öffnet neues Fenster)
- Search Engine Land: Google drops Mobile Usability report and Mobile-Friendly Test (öffnet neues Fenster)
- web.dev: Interaction to Next Paint wird Core Web Vital am 12. März 2024 (öffnet neues Fenster)
- W3C: WCAG 2.2, Erfolgskriterium 2.5.8 Zielgröße (Minimum) (öffnet neues Fenster)
- Bundesfachstelle Barrierefreiheit: Barrierefreiheitsstärkungsgesetz (öffnet neues Fenster)
- ISO 9241-210:2019, Ergonomie der Mensch-System-Interaktion, Teil 210: Menschzentrierte Gestaltung interaktiver Systeme
