Merksatz: UI ist das Versprechen, das die Seite gibt („Ich sehe gut aus!“). UX ist der Beweis, dass die Seite hält, was sie verspricht („Ich funktioniere einfach!“).
UI beim Webdesign
Im Webdesign steht UI für User Interface, auf Deutsch: Benutzeroberfläche.
Stell dir vor, du besuchst ein Restaurant. Die Speisekarte, die hübsch gedeckten Tische, die Beschilderung zur Toilette und sogar die Form der Kaffeetassen – das alles ist vergleichbar mit dem UI (User Interface).
Was genau ist das UI?
Das UI ist alles, was du auf einer Website siehst und womit du interagierst. Es ist die Brücke zwischen dir und dem Code, der im Hintergrund läuft. Ohne ein UI müsstest du Befehle direkt in den Computer eintippen, um eine Website zu nutzen.
Die wichtigsten Bestandteile eines UI
Damit eine Website funktioniert und gut aussieht, nutzt ein UI-Designer verschiedene Elemente:
- Visuelle Elemente: Farben, Schriftarten (Typografie), Bilder und Icons.
- Interaktive Elemente: Buttons (Knöpfe), Eingabefelder für Text, Schieberegler und Menüs.
- Layout: Die Anordnung dieser Dinge. Wo steht das Logo? Wo ist der “Kaufen”-Button?
Ein einfaches Beispiel: Der “Suchen”-Button
Stell dir das UI einer Suchmaschine vor:
- Du siehst ein Textfeld (UI-Element).
- Du siehst eine Lupe oder einen Button mit der Aufschrift “Suche” (UI-Element).
- Die Tatsache, dass das Feld weiß ist und der Button vielleicht blau hervorsticht, ist das UI-Design.
UI vs. UX: Der feine Unterschied
Oft hört man auch den Begriff UX (User Experience). Die beiden gehören zusammen, sind aber nicht dasselbe:
- UI (Interface): Wie sieht der Button aus? (Schön, glänzend, blau).
- UX (Experience): Finde ich den Button sofort und passiert genau das, was ich erwarte, wenn ich draufklicke? (Das Gefühl und die Logik dahinter).
Kurz gesagt: Wenn UX das Skelett und die Organe einer Website sind (die Funktion), dann ist das UI die Haut und die Kleidung (das Aussehen).
UX einer Webseite
Während das UI (User Interface) die Oberfläche ist (das, was du siehst), ist die UX (User Experience) das Erlebnis (das, was du fühlst).
Man kann es so sagen: UI ist die Party-Deko, UX ist die Stimmung auf der Party.
UX einfach erklärt: Das “Gefühl” beim Benutzen
UX steht für User Experience, auf Deutsch: Nutzererfahrung. Es beschreibt, wie einfach, logisch und angenehm der Weg eines Nutzers ans Ziel ist.
Stell dir vor, du bist mitten im Wald und suchst einen Geocache:
- Schlechte UX: Du öffnest dein Handy, die Webseite lädt ewig, weil die Bilder zu groß sind. Dann suchst du verzweifelt den Button für die Karte, aber er versteckt sich in einem riesigen Menü. Wenn du ihn endlich findest, ist er so klein, dass du ihn mit kalten Fingern dreimal verfehlst. Ergebnis: Du bist genervt und packst das Handy weg.
- Gute UX: Die Seite ist sofort da. Ein großer, oranger Button sagt „Karte öffnen“. Mit einem Klick siehst du deinen Standort. Alles ist dort, wo du es erwartest. Ergebnis: Du bist zufrieden und findest den Cache.
Die 3 Säulen der UX bei deiner Webseite
| Säule | Was bedeutet das? | Beispiel für dein Forum |
| Nützlichkeit | Hilft die Seite dem Nutzer wirklich weiter? | Findet er im Forum schnell die Hilfe für sein Rätsel? |
| Bedienbarkeit | Versteht man sofort, wie es funktioniert? | Kann man ohne Anleitung ein Foto hochladen? |
| Freude (Joy of Use) | Macht es Spaß, die Seite zu nutzen? | Sieht das Design so schick aus, dass man gerne verweilt? |
Der klassische Vergleich: Das Ketchup-Beispiel
Dieses Beispiel nutzen Designer weltweit, um den Unterschied zu erklären:
- Die Glasflasche (Schönes UI): Sie sieht klassisch und hochwertig aus. Das Design ist toll. Aber man muss hinten draufschlagen, das Ketchup kommt unkontrolliert raus oder gar nicht. (Schlechte UX).
- Die Plastikflasche auf dem Kopf (Gute UX): Sie sieht vielleicht nicht ganz so edel aus wie Glas, aber sie ist aus weichem Plastik, steht auf dem Deckel (Ketchup ist sofort am Verschluss) und lässt sich perfekt dosieren. (Hervorragende UX).
Warum UX für dein Projekt entscheidend ist
Du kannst das schönste UI der Welt haben (tolles Waldgrün, schicke Icons), aber wenn die UX nicht stimmt, kommen die Leute nicht wieder.
Gute UX bei einem Forum bedeutet:
- Dass man mit einem Klick von überall zurück zur Foren-Übersicht kommt.
- Dass man beim Tippen am Handy nicht ständig aus Versehen auf Werbung klickt.
- Dass die Suche im Forum auch wirklich das ausspuckt, was man eingegeben hat.