Je nach Branche können auch weitere Schnittstellen eine Rolle spielen. Dazu gehören etwa sprachgesteuerte Interfaces (z. B. Alexa, Google Assistant) für Bestellungen per Sprachbefehl oder Interfaces für Wearables wie Smartwatches im Gesundheits- und Sportbereich. Auch Augmented Reality (AR) und Virtual Reality (VR) kommen zum Einsatz, etwa für virtuelle Produktpräsentationen. Dabei erweitern AR-Anwendungen die reale Umgebung um digitale Elemente, während VR-Anwendungen Nutzende vollständig in eine virtuelle Welt eintauchen lassen.  

Welcher UI-Typ für ein Unternehmen sinnvoll ist, hängt von der Zielgruppe, dem Angebot und den technischen Möglichkeiten ab. Für die meisten KMU steht das Graphical User Interface im Mittelpunkt. 

Ein gutes UI-Design verbindet visuelle Elemente und interaktive Komponenten zu einer klaren, konsistenten und intuitiv bedienbaren Oberfläche. Wie stark Inhalte oder Funktionalität im Vordergrund stehen, hängt vom Seitentyp ab: Auf Landingpages und Produktseiten zählen vor allem verständliche Inhalte und klare Argumente, während bei Formularen, Buchungssystemen oder Kundenportalen die reibungslose Funktionalität entscheidet. Nutzende sollten sich schnell orientieren, Inhalte leicht erfassen, Fehler vermeiden und gewünschte Aktionen sicher ausführen können. 

 

Ein Designsystem legt fest, wie diese Elemente gestaltet und eingesetzt werden. Es enthält wiederverwendbare Komponenten wie Buttons, Formulare und Navigationselemente sowie Regeln für Farben, Abstände und Typografie. Dadurch bleibt das User Interface auf allen Seiten einheitlich und verständlich. Das UI-Design ist dabei ein zentraler Bestandteil des gesamten Webdesigns, das neben der Oberfläche auch Aspekte wie Informationsarchitektur, Markenidentität und Content-Strategie umfasst. 

Kreativität und Funktionalität gehen beim UI-Design nicht immer automatisch Hand in Hand. Designer versuchen manchmal, durch Animationen, ungewöhnliche Layouts oder experimentelle Navigation Aufmerksamkeit zu erzeugen. Was kreativ aussieht, kann jedoch die Bedienbarkeit beeinträchtigen.  

 

Die wichtigste Regel lautet deshalb: Form und Funktion sollten in Balance gehalten werden, statt gegeneinander ausgespielt zu werden. Ein Button darf ansprechend gestaltet sein; in erster Linie muss er jedoch erkennbar und anklickbar sein. 

Ein gutes User Interface ist auch für Menschen mit Einschränkungen nutzbar. Barrierefreiheit sollte deshalb von Anfang an zu den Grundprinzipien eines UI gehören. Als rechtlicher Mindeststandard gilt in vielen Ländern (u. a. Deutschland) die Konformitätsstufe WCAG 2.1 Level AA. Das World Wide Web Consortium (W3C), das internationale Gremium zur Entwicklung von Web-Standards, empfiehlt inzwischen jedoch die Anwendung von WCAG 2.2 Level AA, da sie weitgehend abwärtskompatibel zu 2.1 ist und zusätzliche Kriterien enthält, etwa zur Mindestgröße von Klickflächen.  

Praktisch bedeutet das: Alle wichtigen Funktionen müssen per Tastatur erreichbar sein, Bilder benötigen Alternativtexte, das aktuell ausgewählte Element muss sichtbar markiert sein und zwischen Text und Hintergrundfarbe gilt ein Mindestkontrast von 4,5:1. Konkret heißt das: Die hellere Farbe sollte rechnerisch 4,5-mal heller als die dunklere sein. Außerdem sollte die Website semantisches HTML verwenden, damit Screenreader die Inhalte korrekt erfassen können. 

Ein gutes UI-Design lässt sich mithilfe von Checklisten und Usability-Heuristiken bewerten. Hierbei handelt es sich um praxiserprobte Faustregeln, mit denen sich die Bedienbarkeit einer Oberfläche einschätzen lässt. Eine Heuristik ist dabei wie eine Checkfrage, die man an eine Website stellt, beispielsweise: „Sehen Nutzende, dass ihre Bestellung gerade verarbeitet wird?“ Wenn diese Frage mit „Ja“ beantwortet wird, ist dieser Punkt gut gelöst; bei „Nein“ weiß man, wo nachgebessert werden muss.  

Besonders bekannt sind die zehn Usability-Heuristiken von Nielsen und die Interaktionsprinzipien der Norm ISO 9241-110. Beide bieten praxisnahe Orientierung für die Bewertung eines Interfaces. 

 

Ein professioneller UI-Design-Prozess besteht aus mehreren aufeinanderfolgenden Phasen. In diesen Phasen wird das Interface analysiert, geplant, getestet und schrittweise verbessert. 

1. Recherche: Zielgruppe, Nutzerbedürfnisse und Geschäftsziele werden analysiert. 

2. Ziele definieren: Auf Basis der Recherche werden konkrete Anforderungen und Funktionen festgelegt. 

3. Wireframes: Grobe Skizzen zeigen die Struktur und den Aufbau einzelner Seiten, meist noch mit Platzhaltertexten statt fertigem Content. 

4. Visuelles Design: Farben, Typografie, Icons und andere visuelle Elemente werden festgelegt. Spätestens jetzt sollten echte Inhalte statt Platzhaltertexte verwendet werden, um Textlängen und Lesbarkeit realistisch zu prüfen. 

5. Prototyping: Klickbare Prototypen machen geplante Funktionen testbar. 

6. Usability-Tests: Echte Nutzende testen das Interface und zeigen, wo Probleme auftreten. 

7. Übergabe an Entwickelnde: Das fertige Konzept wird mit allen notwendigen Spezifikationen zur technischen Umsetzung übergeben. In der Website-Entwicklung wird das Design dann in funktionierenden Code übersetzt. Zunehmend kommen dabei auch KI-gestützte Tools und Vibe Coding zum Einsatz, bei dem Entwickelnde per Sprachbefehl oder Prompt direkt Code generieren lassen. 

 

Dieser schrittweise Ansatz stellt sicher, dass das User Interface nicht nur gut aussieht, sondern auch tatsächlich funktioniert und die Bedürfnisse der Nutzenden erfüllt. 

Doch selbst ein sorgfältig geplanter Designprozess schützt nicht vor typischen Fehlern, die auf vielen KMU-Websites auftreten. Welche das genau sind, erfährst du im nächsten Abschnitt. 

Auf vielen KMU-Websites treten vermeidbare UI-Fehler auf, die potenzielle Kunden abschrecken und zum Verlassen der Seite oder zum Abbruch des Kaufprozesses führen können. Die gute Nachricht: Die meisten dieser Fehler lassen sich mit überschaubarem Aufwand beheben. 

Stelle sicher, dass Telefonnummer, E-Mail-Adresse und Anschrift überall übereinstimmen. Wenn sich die Telefonnummer im Header von der Nummer im Website-Footer unterscheidet oder die E-Mail-Adresse auf einzelnen Unterseiten fehlt, kann das das Vertrauen der User beeinträchtigen. 

Beispiel: Der Header zeigt 030-12345, der Footer 030-67890. Kunden wissen nicht, welche Nummer aktuell ist. 

Fachbegriffe ersetzen klare Aussagen zum konkreten Nutzen eines Angebots. Formuliere aus Sicht deiner Kunden und beantworte dabei vor allem zwei Fragen: Was erhält der Kunde und welches Problem wird damit gelöst? 

Beispiel: Statt „Ganzheitliche Lösungsarchitektur“ schreibe „Website, Online-Shop & Buchungssystem aus einer Hand“. 

Eine große Sammlung wenig aussagekräftiger Elemente lenkt von den wichtigen Inhalten ab. Beschränke dich auf die Elemente, die für die Kernfunktion deiner Seite wirklich relevant sind. 

Beispiel: 15 verschiedene Gütesiegel im Footer, die Kunden nicht kennen, überlagern die eigentlichen Kontaktinformationen. 

Buttons haben auf verschiedenen Seiten unterschiedliche Farben, Formulare nutzen unterschiedliche Feldgrößen oder Menüs sind jeweils anders angeordnet. Halte Farben, Abstände, Schriftgrößen und die Position wichtiger Elemente auf allen Seiten einheitlich. 

Beispiel: Der „Kontakt“-Button ist auf der Startseite blau, auf der Leistungsseite grün und auf der Über-uns-Seite orange. 

Nach dem Absenden eines Formulars erhalten Nutzende keine Bestätigung und wissen nicht, wie es weitergeht. Zeige nach dem Absenden eine Bestätigungsseite mit den nächsten Schritten. Zusätzlich kannst du eine automatische E-Mail-Bestätigung versenden. 

Beispiel: Nach dem Klick auf „Absenden“ erscheint keine Rückmeldung oder nur ein „Danke“ ohne Informationen zu den nächsten Schritten. 

Die Website ist auf dem Smartphone oder Tablet schlecht lesbar oder nicht richtig bedienbar. Nutze ein responsives Layout und teste deine Website auf verschiedenen Geräten. Achte auf ausreichend große Touchflächen (siehe Abschnitt „Barrierefreiheit“).  

Beispiel: Buttons sind auf dem Smartphone nur sehr klein und mit dem Daumen kaum zu treffen, ohne versehentlich daneben zu klicken. 

Die wichtigsten UI-Grundlagen lassen sich mit fünf Quick Wins umsetzen. Du musst nicht alle Maßnahmen gleichzeitig realisieren, sondern kannst mit den Punkten beginnen, die für deine Website besonders relevant sind. 

1. Klare Navigation: Beschränke dich auf möglichst wenige Menüpunkte und platziere die Navigation auf allen Seiten an derselben Stelle. 

2. Mobile First: Verwende ein responsives Layout und ausreichend große Touchflächen. 

3. Schnelle Ladezeiten: Strebe einen Google-Lighthouse/PageSpeed-Performance-Score von 90–100 („Good“) an. 

4. Einheitliche Gestaltung: Sorge dafür, dass Buttons, Farben und Formulare auf allen Seiten gleich aussehen. Als Faustregel gilt: maximal drei Farben und zwei Schriftarten. 

5. Barrierefreiheit: Achte auf ausreichende Kontraste, Alternativtexte, eine Bedienung per Tastatur und ausreichend große Touch-/Klickflächen. 

 

Hinweis: Bei grundlegenden strukturellen Problemen kann ein Website-Relaunch die effizientere Lösung sein. 

Für UI selbst gibt es kaum eigenständige Kennzahlen, da sich die Qualität einer Oberfläche vor allem daran zeigt, wie gut Nutzende damit zurechtkommen. Die folgenden Metriken stammen deshalb überwiegend aus dem UX-Bereich, liefern aber indirekt auch Hinweise auf UI-Schwächen; zum Beispiel, wenn eine hohe Error Rate auf unklar gestaltete Formularfelder zurückgeht.  

Wichtig: Exakte Zielwerte lassen sich nicht pauschal festlegen. Sie hängen stark von Branche, Zielgruppe, Produktkomplexität und Nutzungskontext ab. Die folgende Übersicht zeigt eine Auswahl der wichtigsten Kennzahlen, wofür sie eingesetzt werden und ob sie primär der UX oder dem UI zuzuordnen sind.