UX & UI Design
Ein Interface ist die Stelle, an der Menschen und Software sich verständigen. UI-Design gestaltet, was man sieht und bedient: Layout, Schrift, Farbe, Bedienelemente und ihre Zustände. UX-Design fragt, ob der ganze Ablauf funktioniert. Gutes UI-Design macht die richtige Handlung offensichtlich und den Rest ruhig.
Lernziel: Du kannst UI und UX unterscheiden, die Grundprinzipien guter Interfaces benennen und ein bestehendes Interface damit begründet beurteilen.
Ein gutes Interface erklärt sich, bevor man fragt.
Klarheit, Hierarchie, Konsistenz.
Fast jede gute Gestaltungsentscheidung im Interface lässt sich auf drei Prinzipien zurückführen:
01
Klarheit
Man erkennt sofort, was etwas ist und was es tut.
02
Hierarchie
Das Wichtigste fällt zuerst auf.
03
Konsistenz
Gleiches sieht gleich aus und verhält sich gleich.
Konsistenz gilt auch nach aussen: Menschen erwarten, dass sich deine Website verhält wie andere, die sie kennen. Eigenständig sein darf sie im Ausdruck, nicht in der Bedienung.
Überrasche mit Inhalt, nicht mit Bedienung.
Die Form verrät die Handlung.
Affordanz beschreibt, welche Handlungen ein Ding anbietet: Ein Knopf will gedrückt, ein Regler geschoben werden. Signifier sind die Hinweise, die diese Möglichkeit sichtbar machen: Schatten, Rahmen, Unterstreichung, ein Pfeil.
Flaches Design hat viele Signifier entfernt. Darum braucht es bewusste Entscheidungen: Wie erkennt man ohne Schatten, was klickbar ist? Meist durch Farbe, Form und Position, die sich durch das ganze Produkt ziehen.
Was klickbar ist, muss klickbar aussehen.
UI ist die Oberfläche, UX die ganze Erfahrung.
UX-Design klärt, was Menschen brauchen und wie der Ablauf aussieht. UI-Design gibt dem eine Form. Visual Design sorgt für Ausdruck und Marke, Interaction Design für Bewegung und Rückmeldung. In kleinen Teams macht eine Person alles, in grossen gibt es dafür Spezialistinnen und Spezialisten.
Wichtig ist ein gemeinsamer Arbeitsstand: ein Design System, ein klickbarer Prototyp und eine Sprache, die Gestaltung und Entwicklung teilen.
Gute Oberflächen entstehen aus guten Abläufen.
Ein Interface lesen
Aufgabe: Analysiere die Startseite einer Website, die du gut kennst.
SCHRITT 1
Mach einen Screenshot und markiere die Hauptaktion.
SCHRITT 2
Nummeriere die Elemente in der Reihenfolge, in der dein Blick sie trifft.
SCHRITT 3
Suche drei Stellen, an denen Konsistenz fehlt.
SCHRITT 4
Skizziere eine verbesserte Version mit klarer Hierarchie.
Auswertung: Stimmt die Reihenfolge deines Blicks mit dem überein, was die Seite will?