Was UI und UX Design unterscheidet, und wo beide zusammenkommen
Wenn ihr ein Produkt bauen lasst, hängt an dieser Unterscheidung, was ihr zuerst beauftragt. UX Design entscheidet, was in eurem Produkt geschieht. Aus wie vielen Schritten eine Bestellung besteht. Und was jemand vorfindet, wenn die Lieferadresse fehlt. UI Design entscheidet über die Form dieser Schritte. Wie groß der Knopf ist, welche Schrift er trägt und welche Farbe eine Fehlermeldung bekommt. Das eine funktioniert ohne das andere nicht, aber die Reihenfolge ist klar. Erst steht fest, was passiert. Dann, wie es aussieht.
Erst gehen wir die beiden Seiten einzeln durch. Danach kommt die Stelle, an der am meisten verloren geht. Und am Ende steht, wen ihr für beides braucht.
UX beantwortet, was passiert, UI beantwortet, was zu sehen ist
Nehmt eine Bestellung in einem Shop. Die UX-Frage lautet, was dabei passiert. Wer bestellt und in welcher Reihenfolge. Was das System danach weiß. Und was jemand sieht, wenn die Zahlung abgelehnt wird.
Die UI-Frage lautet, was dabei zu sehen ist. Wie viele Schritte auf einen Bildschirm passen. Wo der Preis steht und wie er sich ändert, sobald ein Gutschein greift. Welche Schaltfläche laut auftritt und welche leise.
Beide Fragen haben dieselbe Bestellung vor sich und kommen zu verschiedenen Antworten. Wer nur die zweite stellt, bekommt einen schönen Bildschirm für einen Ablauf, den vorher niemand geprüft hat.
Was UX-Arbeit konkret entscheidet
UX-Arbeit ist zuerst Ordnung. Was gehört auf die erste Ebene und was eine darunter. Und was braucht überhaupt keine eigene Ansicht, weil es in eine vorhandene gehört.
Danach kommen die Abläufe. Ein Ablauf ist keine Reihe von Bildschirmen, sondern eine Kette von Entscheidungen. An jeder Stelle kann jemand abbrechen, zurückgehen oder etwas eingeben, das niemand vorgesehen hat.
Der Teil, den Angebote am häufigsten auslassen, sind die unangenehmen Zustände. Sie sehen in keinem Entwurf gut aus. Sie entscheiden trotzdem darüber, ob jemand ein Produkt benutzt oder umgeht.
- Eine Ansicht ist noch leer, weil gerade erst angelegt wurde
- Etwas lädt und dauert länger als erwartet
- Ein Filter lässt nichts übrig
- Ein Speichern schlägt fehl, nachdem jemand zwanzig Minuten getippt hat
- Zwei Leute ändern dasselbe zur selben Zeit
Solche Fälle sind der Grund, warum ein Ablauf aufgezeichnet wird, bevor jemand eine Ansicht entwirft. Auf dem Papier kostet ein vergessener Zweig eine Linie. In einem laufenden Produkt kostet er einen Umbau.
Was UI-Arbeit konkret entscheidet
UI-Arbeit beginnt, wenn die Abläufe stehen. Sie entscheidet über Aufteilung, Schriftstufen, Farbe und Abstand. Also darüber, was zuerst gelesen wird und was warten kann.
Dazu kommen die Bausteine. Eine Tabelle, ein Formularfeld, eine Warnung. Jeder Baustein entsteht einmal und wird danach überall gleich benutzt. Sonst driftet die Oberfläche mit jeder neuen Ansicht weiter auseinander.
Farben und Schriften erfindet dabei niemand neu. Sie kommen aus dem Markensystem, das eure Marke ohnehin hat. Ein Produkt, das anders aussieht als die Marke davor, wirkt wie von einer anderen Firma.
Wie viel eine Aufteilung entscheidet, sieht man dort am besten, wo etwas Abstraktes sichtbar wird. Vier Bereiche nebeneinander auf einer Karte sagen in einem Blick, wofür sonst drei Absätze Text nötig wären.
An der Naht geht am meisten verloren
Die teuerste Stelle liegt zwischen Entwurf und Umsetzung. Der Entwurf liegt vor, dann wird gebaut. Machen das Leute, die den Entwurf nicht kennen, verliert er unterwegs die Teile, die man nicht sieht.
Verloren gehen selten die Farben. Es sind die Zustände und die Abzweigungen, die im Entwurf nur als Notiz am Rand standen. Sie fallen erst auf, wenn ein Kunde in sie hineinläuft.
Deshalb endet gute UX-Arbeit nicht mit einem Bild, sondern mit einem Prototyp zum Klicken. Wer klicken kann, merkt in fünf Minuten, dass ein Schritt fehlt. Wer ein Bild ansieht, merkt es nach dem Bauen.
Eine Website muss in Minuten überzeugen, ein Produkt über Jahre bedienbar bleiben
Eine Website muss in Minuten überzeugen, ein Produkt über Jahre bedienbar bleiben. Beide brauchen UX und UI, nur nicht im selben Verhältnis.
Auf einer Website trägt das Bild mehr. Es gibt wenige Seiten, und die Entscheidung fällt meistens oben. Ein starker erster Eindruck ist hier kein Luxus, sondern die eigentliche Aufgabe.
In einem Produkt dreht sich das um. Dieselben Leute öffnen dieselbe Ansicht jeden Tag. Was am ersten Tag beeindruckt, stört am dreißigsten, sobald es einen Klick zu viel kostet.
Wen ihr dafür braucht
Stellenanzeigen trennen UI und UX, die Arbeit tut es nicht. Für ein Vorhaben in eurer Größe braucht ihr keine zwei Rollen, sondern ein Team, das entwirft und danach baut. Dann gibt es die Naht gar nicht erst, an der etwas liegen bleiben könnte.
Fragt Anbieter deshalb nicht, ob sie UX oder UI machen. Fragt, wer den Prototyp klickbar macht und wer ihn danach umsetzt. Stehen dort zwei verschiedene Antworten, wisst ihr, wo ihr später nachsteuern müsst.
Wie das aussieht, könnt ihr an unserem eigenen Produkt Jardis® sehen. Die Abläufe darin haben wir selbst entworfen und danach selbst gebaut. Zwischen Entwurf und Oberfläche gibt es dabei keine Übergabe, bei der etwas verloren gehen kann.
Marke und Produkt, die zusammen wachsen.
In 30 Minuten klären wir, was bei euch ansteht und welches Programm dazu passt.
Häufige Fragen zu diesem Thema.
Offene Fragen?
30 Minuten mit Niklas und Rolf, kostenlos. Danach wisst ihr, wie es weitergeht.
GUI ist die grafische Unterart von UI. UI meint jede Schnittstelle zwischen Mensch und Maschine, also auch eine Kommandozeile oder eine Sprachsteuerung. GUI meint die Fassung mit Fenstern, Flächen und Zeigern. Im Alltag meinen beide dasselbe, weil fast jede Oberfläche heute grafisch ist.
Üblich sind Gespräche mit echten Nutzern, Nutzerflüsse, eine geordnete Struktur, Prototypen zum Klicken und Tests an fertigen Abläufen. Wir arbeiten vor allem mit Abläufen und Prototypen. Daran fällt am schnellsten auf, ob ein Schritt fehlt oder ein Zustand vergessen wurde.
UX steht für User Experience, auf Deutsch Nutzungserlebnis. Gemeint ist alles, was jemand mit einem Produkt erlebt, vom ersten Klick bis zum Fehlerfall. UI steht für User Interface, also für die Benutzeroberfläche. Das Erlebnis umfasst die Oberfläche, nicht umgekehrt.
Jede Ansicht, die jemand entworfen hat. Eine Tabelle mit Filtern, ein Formular, eine Karte mit Verbindungslinien. In unserem eigenen Produkt Jardis® ist es zum Beispiel der Prozess-Designer, in dem ein Ablauf als Karten und Linien erscheint statt als Formular.
Passt zu dem, was ihr gerade gelesen habt.
Build what's next.
Erzählt uns, was ihr vorhabt, und wir sagen euch, wie wir gemeinsam dorthin kommen.
Projekt starten