Etage 02 · Web
UI/UX-Design. Klare Screens, weniger Fragen.
UI/UX-Design bestimmt, wie ein Produkt funktioniert und wie es aussieht: was Nutzer zuerst sehen, wie sie eine Aufgabe erledigen und wo sie hängen bleiben. yop ist eine UX-Agentur in Tallinn und gestaltet Apps, SaaS-Produkte und Websites, von Nutzerforschung und Wireframes bis zum Designsystem, nach dem Entwickler bauen. Auch eigene Produkte entwerfen und betreiben wir.
UI und UX
UI-Design oder UX-Design: Was deckt was ab?
UX-Design bestimmt, wie ein Produkt funktioniert: die Schritte der Nutzer, die Informationen auf jedem Screen, die Reihenfolge der Entscheidungen und was passiert, wenn etwas schiefgeht. UI-Design betrifft das Erscheinungsbild: Layout, Typografie, Farbe, Buttons, Zustände und Bewegung. Gute UX mit schwacher UI wirkt unseriös; gute UI mit schwacher UX sieht gut aus und verliert trotzdem Nutzer.
Wir machen beides, in dieser Reihenfolge. Ein Ablauf wird als graues Wireframe getestet, bevor Farbe dazukommt, denn eine Änderung kostet in diesem Stadium wenig und nach der Entwicklung viel.
- Forschung. Interviews, Analytics und Sitzungsaufzeichnungen zeigen, wo Menschen hängen bleiben.
- Struktur. Informationsarchitektur, User Flows und Wireframes.
- Interface. Visuelles Design, Komponenten, Zustände und Barrierefreiheit.
- Übergabe. Ein Designsystem und kommentierte Dateien, nach denen Entwickler bauen.
Selbsttest
Braucht Ihr Produkt mehr UX-Arbeit?
Haken Sie an, was Sie im letzten Monat erlebt haben. Jedes Zeichen lässt sich auf einen Screen zurückführen.
0/ 6
Noch nichts angehakt. Wählen Sie, was Sie erlebt haben.
Ein Zeichen: oft ein einzelner Screen oder Begriff.
Ein Muster. Ein kurzes UX-Audit zeigt, wo es beginnt.
Das Produkt verliert Nutzer. Starten Sie mit Forschung zu den Kernabläufen.
Was wir gestalten
Sechs Ergebnisse, nach denen man baut.
UX-Audit
Wir prüfen Ihr Produkt oder Ihre Website auf Usability und Barrierefreiheit und ordnen die Probleme danach, wie sehr sie Nutzern schaden.
Nutzerforschung
Kurze Interviews und Tests mit echten Nutzern, dazu Analytics zu den Stellen, an denen Menschen abspringen.
Wireframes und Flows
Jede wichtige Aufgabe Schritt für Schritt in Grau gezeichnet, damit die Logik steht, bevor das Styling beginnt.
Klickbarer Prototyp
Ein Figma-Prototyp, durch den sich Nutzer und Ihr Team klicken, am Laptop und am Handy.
UI-Design
Screens in Ihrem Markenauftritt, mit jedem Zustand: leer, ladend, Fehler und Erfolg.
Designsystem
Komponenten, Tokens und Regeln in Figma, abgestimmt auf den Code, damit neue Screens einheitlich bleiben.
Testen
Drei Menüs, eine Aufgabe.
Ein Tree-Test gibt Menschen eine Aufgabe und nur das Menü, ohne Design. Ihre Klicks zeigen, ob die Begriffe passen. Hier probiert eine Person drei Versionen.
Illustration eines Tree-Tests. Ein echter Test stellt einer Gruppe von Nutzern dieselbe Aufgabe und zeichnet jeden Pfad auf.
Aufgabe
Wo finden Sie die Rückgabebedingungen?
Klicks 4
Nicht gefunden
Alte Begriffe: vier Klicks, dann gibt die Person auf.
Ablauf
Vier Schritte zu klaren Screens.
Verstehen
Ziele, Nutzer und das aktuelle Produkt, aus Interviews, Analytics und einem Audit.
Struktur
Flows und Wireframes für die Kernaufgaben, mit Ihnen abgestimmt und mit einigen Nutzern getestet.
Design
Das Interface in Ihrem Markenauftritt, mit allen Zuständen, als klickbarer Prototyp.
Übergabe
Ein Designsystem und kommentierte Dateien, dazu Zeit mit den Entwicklern während der Umsetzung.
Oft gehört
Design-Mythen, die Produkte Nutzer kosten.
Drei Annahmen, die uns in fast jedem Erstgespräch begegnen. Jede klingt vernünftig, und jede macht das Produkt schwerer bedienbar.
Oft hören wir
„Die Nutzer lesen die Anleitung.“
Was wir sehen
Das tun sie selten. Braucht ein Screen eine Anleitung, ist der Screen das Problem; klare Begriffe und sinnvolle Voreinstellungen erklären von selbst.
Oft hören wir
„Mit Nutzern testen wir nach dem Launch.“
Was wir sehen
Das geht, aber dann ist jede Änderung Code. Eine Handvoll Menschen, die sich durch einen Prototyp klicken, findet die schlimmsten Probleme, solange eine Korrektur in Figma Minuten dauert.
Oft hören wir
„Barrierefreiheit betrifft nur wenige Nutzer.“
Was wir sehen
Kontrast, Fokuszustände und klare Beschriftungen helfen allen: in der Sonne, am langsamen Handy, mit einer freien Hand. In der EU macht der European Accessibility Act sie für viele digitale Produkte und Dienste zur Pflicht; in Deutschland gilt dafür das Barrierefreiheitsstärkungsgesetz.
Vergleich
Was jede Phase beantwortet.
| UX-Research, UX-Design und UI-Design im Vergleich | UX-Research | UX-Design | UI-Design |
|---|---|---|---|
| Die Frage | Was brauchen Nutzer, und wo hakt es? | Wie soll das Produkt funktionieren? | Wie soll es aussehen und wirken? |
| Ergebnis | Erkenntnisse und Prioritäten | Flows, Wireframes, Prototyp | Screens, Komponenten, Designsystem |
| Typische Dauer | Tage bis wenige Wochen | Wochen | Wochen |
| Bei yop | Ja | Ja | Ja |
Der Start
Die ersten zwei Wochen eines UX-Audits.
Ein Audit ist der übliche erste Schritt und bleibt bewusst kurz. So laufen die ersten zwei Wochen, vom ersten Call bis zur priorisierten Liste der Korrekturen.
Tag 1
Kickoff
Ziele, Nutzer und die wichtigsten Abläufe, in einem Call festgelegt. Sie teilen Analytics und vorhandene Aufzeichnungen.
Tage 2–5
Schauen, zuhören
Analytics, Sitzungsaufzeichnungen und Support-Tickets ausgewertet, dazu Interviews mit einigen Nutzern.
Woche 2
Testen
Echte Nutzer testen die Kernaufgaben im Live-Produkt oder an einem schnellen Prototyp.
Tag 10
Ergebnisse
Eine priorisierte Liste der Probleme, jeweils mit Screen, Beleg und Lösungsvorschlag.
Mehrere Sprachen
Können Sie Interfaces für mehrere Sprachen gestalten?
Ja. Die Textlänge ändert sich von Sprache zu Sprache, deutsche Begriffe werden lang, und Arabisch läuft von rechts nach links, was das ganze Layout spiegelt. Wir gestalten Komponenten, die sich dehnen, umbrechen und spiegeln, und testen die wichtigsten Screens vor der Übergabe in der längsten Sprache und in der arabischen Version.
Das spart später eine Korrekturrunde, wenn ein übersetzter Button nicht mehr passt oder eine Seite von rechts nach links zerfällt.
Ihr Produkt
Zeigen Sie uns, wo Nutzer hängen bleiben.
Schicken Sie einen Link oder ein paar Screenshots. Nach zwei Werktagen schreibt Ihnen einer der Gründer, was wir zuerst testen würden.
Fragen
Oft gefragt zum Design.
Was gehört zum UI/UX-Design?
UI/UX-Design plant, wie ein digitales Produkt funktioniert (UX) und wie es aussieht (UI), von Forschung und Wireframes bis zu visuellem Design, Prototypen und Designsystem. yop liefert es für Apps, SaaS-Produkte und Websites.
Was kostet UI/UX-Design?
Bei yop kostet Design einen Festpreis pro Phase, etwa für ein Audit, eine Reihe von Flows oder ein ganzes Designsystem, vereinbart nach einem kurzen Erstgespräch.
Wie lange dauert ein UI/UX-Projekt?
Ein Audit dauert einige Tage, höchstens zwei Wochen. Die wichtigsten Abläufe und das Interface eines Produkts zu gestalten braucht meist mehrere Wochen, bei großen Produkten mit vielen Rollen länger.
Was erhalten wir am Ende?
Figma-Dateien mit jedem Screen und Zustand, einen klickbaren Prototyp und ein Designsystem mit Komponenten und Hinweisen für Entwickler. Alle Dateien gehören Ihrem Unternehmen.
Sind Ihre Designs barrierefrei?
Ja. yop gestaltet nach WCAG 2.2 AA: Kontrast, Fokuszustände, Schriftgrößen, Beschriftungen und Tastaturbedienung werden vor der Übergabe geprüft.
Können Sie auch umsetzen, was Sie gestalten?
Ja. Die Etagen Software und Web bauen Apps, SaaS-Produkte und Websites aus denselben Dateien, damit zwischen Design und Code kein Detail verloren geht.
Mit wie vielen Nutzern testen Sie?
Meist fünf bis acht pro Runde bei aufgabenbasierten Tests: genug, um die Probleme zu sehen, an denen die meisten scheitern. Lieber mehrere kleine Runden mit Korrekturen dazwischen als ein großer Test am Ende.
Etage 02 · Web
Mehr auf der Etage Web
Schnelle Websites und Onlineshops, die in jeder Sprache verkaufen, die Sie brauchen.
Schnelle, mehrsprachige Websites und Web-Apps, die Ihr Team pflegt.
WordPress-Websites, die Ihr Team pflegt und Google lesen kann.
Onlineshops, die verkaufen, versenden und Bestände abgleichen.
Eine Seite, ein Angebot, gebaut für Anfragen aus Klicks.
Updates, Backups, Sicherheit und kleine Änderungen, jeden Monat.
Schnellere Seiten, bestandene Core Web Vitals, weniger Absprünge.