UI/UX-Design: Oberflächen und Nutzererfahrung
UI/UX-Design, das sich vom ersten Klick an intuitiv anfühlt. Wir gestalten Oberflächen und Nutzererlebnisse für Websites und Webanwendungen mit klaren Abläufen, Wireframes, Prototypen und echten Usability-Tests. Gutes UI/UX-Design verringert Frust, steigert die Conversion und macht das Produkt für alle leicht bedienbar.
Was wir tun
So arbeiten wir
Recherche und Anforderungsanalyse
Eine gute Oberfläche beginnt mit dem Verständnis ihrer Nutzer. Wir führen Gespräche mit Beteiligten und Nutzerbefragungen durch, analysieren Wettbewerber und Nutzungsdaten und erstellen detaillierte Nutzerprofile und Ablaufkarten. So erkennen wir Hindernisse, Motive und Verhaltensmuster.
Informationsarchitektur und Wireframes
Wir ordnen Inhalte und Funktionen in logische, intuitive Hierarchien. Einfache Wireframes bilden Abläufe, Layouts und Interaktionen vor dem visuellen Design ab. Früh erkannte Bedienungsprobleme sparen Wochen in der Entwicklung.
Visuelles Design und Prototypen
Detailgetreue Entwürfe setzen die Marke präzise um. Wir erstellen ein vollständiges Designsystem mit Schriftgrößen, Farbwerten, Abständen und Komponentenbibliothek. Interaktive Figma-Prototypen machen die gesamte Nutzung vor der Entwicklung erlebbar.
Usability-Tests und Weiterentwicklung
Echte Nutzer testen Prototypen in moderierten und unmoderierten Sitzungen. Wir messen Abschlussquoten, Bearbeitungszeiten, Fehler und Zufriedenheit. Heatmaps und Sitzungsaufzeichnungen zeigen, wo Nutzer stecken bleiben. Verbesserungen beruhen auf Beobachtungen statt Meinungen.
Der Unterschied zwischen UI und UX in der Praxis
UI ist das Sichtbare: Farben, Schriften, Schaltflächen und Abstände. UX entscheidet, ob du dein Vorhaben erledigen kannst. Der Unterschied zeigt sich im Budget: Eine schöne Website, auf der niemand Preis oder Formular findet, hat gute UI und schlechte UX. Das Geld floss in die sichtbare Ebene. Wir planen zuerst den Ablauf, die Reihenfolge und die Informationen je Schritt, danach die Gestaltung.
Formulare: Hier gehen die meisten Nutzer verloren
Jedes zusätzliche Feld verringert die Zahl der Abschlüsse. Wir fragen nur benötigte Daten ab und setzen Beschriftungen über das Feld, weil Platzhalter beim Tippen verschwinden. Fehlermeldungen stehen am betroffenen Feld statt in einem roten Block am Seitenanfang. Die Prüfung erfolgt nach der Eingabe, nicht nach jedem Buchstaben.
Kontrast und Schriftgröße sind keine Geschmacksfragen
Hellgrauer Text auf Weiß wirkt am Studiomonitor elegant, kann auf dem Telefon in der Sonne oder für einen 45-jährigen Leser aber unlesbar sein. Wir beachten messbare Mindestkontraste und Mindestschriftgrößen. Unter einer bestimmten Schriftgröße vergrößert iOS die Seite beim Fokussieren eines Eingabefelds automatisch. Wir prüfen das mit Werkzeugen, nicht nach Augenmaß.
Tastaturbedienung und Screenreader
Ein Teil der Menschen verwendet keine Maus. Die Seite muss mit der Tabulatortaste in logischer Reihenfolge bedienbar sein, mit deutlich erkennbarem aktivem Element. Wird die Fokusmarkierung aus optischen Gründen entfernt, fehlt jede Orientierung. Wir erhalten und gestalten sie. Als Schaltflächen verwendete div-Elemente brauchen die passende Semantik, sonst werden sie vom Screenreader nicht als solche erkannt.
Was im ersten halben Augenblick auffällt
Noch vor dem Lesen erkennt das Gehirn über Größen, Kontraste und Abstände eine Hierarchie. Drei gleich wichtige Schaltflächen lassen die Entscheidung offen. Wir geben jedem Bildschirm ein Hauptelement und ordnen den Rest visuell unter. Die Hierarchie prüfen wir mit unscharfem Blick auf den Entwurf: Bleibt erkennbar, was anzuklicken ist, funktioniert sie.
Ein Designsystem lohnt sich erst ab einem gewissen Umfang
Gemeinsame Farben, Abstände und Komponenten machen neue Seiten günstiger und einheitlich. Ein Designsystem verursacht jedoch zunächst Aufwand. Für fünf Seiten ohne geplantes Wachstum lohnt es sich nicht, und das sagen wir offen. Es rechnet sich bei Verwaltungsoberflächen, mehreren Seitentypen oder mehreren Beteiligten am selben Produkt.
Tests mit fünf Personen zeigen die meisten Probleme
Um Hindernisse zu erkennen, braucht es keine große Testgruppe. Fünf Personen aus der tatsächlichen Zielgruppe, jeweils mit einer konkreten Aufgabe, machen die meisten ernsten Probleme sichtbar. Wir fragen nicht nach Designvorlieben, sondern geben eine Aufgabe und beobachten still. Was Menschen mögen und was sie tatsächlich erledigen können, ist nicht dasselbe.
Was die Entwicklung erhält und warum das Format wichtig ist
Wir liefern mehr als schöne Bilder: Jeder Bildschirm enthält leere Zustände, Ladeanzeigen, Fehler, sehr lange Texte und Listen mit tausend Zeilen. Dort scheitert die Umsetzung eher als im Idealbild. Präzise Farb-, Abstands- und Schriftwerte verhindern, dass Entwickler die Hälfte der Entscheidungen selbst erfinden müssen. Das Ergebnis entspricht dem freigegebenen Entwurf.
Lieferumfang
Was du erhältst
Häufige Fragen
Was unsere Kunden fragen
Was unterscheidet UI-Design und UX-Design?
UI betrifft das Erscheinungsbild der Oberfläche. UX betrifft ihre Nutzung: nötige Schritte, Hindernisse und die Verständlichkeit des nächsten Schritts. Ein fundiertes Projekt umfasst beides, zuerst Ablauf und Struktur, dann Gestaltung. In umgekehrter Reihenfolge entsteht oft eine schöne Website ohne Abschlüsse.
Ich habe bereits ein schönes Design. Brauche ich trotzdem UX?
Wenn Besucher kommen, dich aber nicht kontaktieren, ja. Ein schönes Design ohne Abschlüsse hat meist strukturelle Ursachen: zu viele Schritte, versteckte entscheidende Informationen, ein zu langes Formular oder eine unbeantwortete Frage. Andere Farben lösen das nicht.
Liefert ihr auch Code oder nur Design?
Beides ist möglich, je nach Bedarf. Wir können Design und Umsetzungsdokumentation an dein Team übergeben oder die funktionsfähige Website entwickeln. Bei reiner Designübergabe gehören vollständige Angaben zu Zuständen und Werten dazu, damit die Umsetzung nicht von Vermutungen abhängt.
Mit wie vielen Nutzern sollte ein Design getestet werden?
Fünf Personen aus der tatsächlichen Zielgruppe decken die meisten ernsten Probleme auf. Ab der sechsten wiederholen sich viele Beobachtungen. Entscheidend ist eher die Auswahl als die Anzahl: Fünf echte potenzielle Kunden sind wertvoller als dreißig Bekannte, die freundlich sein wollen.
Wie lange dauert ein UI/UX-Projekt?
Das hängt von unterschiedlichen Bildschirmen ab, nicht von der Gesamtzahl der Seiten. Sechs Unternehmensseitentypen unterscheiden sich von einer Verwaltung mit dreißig Ansichten und mehreren Rollen. Wir schätzen nach Festlegung der Liste. Ändert sie sich, ändert sich auch die Schätzung, rechtzeitig angekündigt statt erst am Ende.
Was ist ein Designsystem und brauche ich eines?
Ein Designsystem bündelt Farben, Abstände, Typografie, wiederverwendbare Komponenten und Nutzungsregeln. Es hilft bei vielen Seitentypen, einem Verwaltungsbereich oder mehreren Personen, die länger am selben Produkt arbeiten. Für eine kleine Website ohne Wachstum amortisiert sich der Anfangsaufwand nicht; dann empfehlen wir es nicht.