UX/UI-Design 2026: Leitfaden für benutzerfreundliche digitale Produkte

Was ist UX/UI-Design und warum entscheidet es über Umsatz?

UX-Design legt fest, wie ein digitales Produkt funktioniert: Nutzerführung, Struktur, Abläufe. UI-Design legt fest, wie es aussieht: Layout, Typografie, Farbwerte, Zustände. Zusammen entscheiden beide, ob ein Besucher sein Ziel erreicht oder abbricht. Der Effekt ist messbar, nicht nur ästhetisch.

Das Baymard Institute wertet seit 14 Jahren Usability-Tests im E-Commerce aus: 25 Runden qualitativer Tests mit über 4.400 Sitzungen, dazu 54 Benchmark-Runden über 344 große Shops. Die durchschnittlich dokumentierte Warenkorbabbruchquote liegt bei 70,22 Prozent. Bei den Abbrüchen, die nicht auf reines Stöbern zurückgehen, sind zu hohe Zusatzkosten mit 40 Prozent der häufigste Grund. Baymard beziffert das Conversion-Potenzial einer besseren Checkout-Führung auf 35 Prozent.

Zu diesem Thema kursiert eine zweite Zahl, die Sie kennen sollten: jeder in UX investierte Euro komme laut Forrester hundertfach zurück. Die Quelle ist ein kostenpflichtiger Forrester-Bericht von 2016, die Rechnung dahinter ist nicht öffentlich. Wir führen die Zahl deshalb nicht als Beleg. Die Baymard-Werte sind nachprüfbar, die 1:100 ist ein Marketingsatz.

Worin unterscheiden sich UX und UI konkret?

UX ist die Frage, ob jemand sein Ziel erreicht. UI ist die Frage, ob die Oberfläche dabei verständlich und markengerecht wirkt. Beide Disziplinen nutzen heute dasselbe Werkzeug und oft dieselbe Person, bleiben aber getrennte Arbeitsschritte mit unterschiedlichen Ergebnissen.

In der Praxis fällt der Unterschied auf, wenn etwas schiefgeht. Ein UI-Fehler sieht falsch aus. Ein UX-Fehler kostet Geld, ohne dass jemand ihn im Entwurf bemerkt.

Wie läuft ein UX/UI-Projekt in fünf Schritten ab?

Recherche, Wireframe, visuelles Design mit Prototyp, Test, Iteration samt Übergabe an die Entwicklung. Die Reihenfolge ist nicht verhandelbar, der Aufwand pro Schritt schon. Bei einer Unternehmenswebsite dauert der gesamte Ablauf 6 bis 10 Wochen, bei einer Webanwendung entsprechend länger.

1. Recherche und Analyse

Bevor etwas gezeichnet wird, klären wir vier Punkte: wer die Zielgruppe ist und wie sie heute arbeitet, wie der Wettbewerb dieselbe Aufgabe löst, welches Geschäftsziel die Seite bedienen soll und was die vorhandenen Daten zeigen. Analytics, Heatmaps und fünf bis acht Interviews reichen für den Start. Wer diesen Schritt streicht, spart eine Woche und bezahlt sie später doppelt.

2. Wireframe und Informationsarchitektur

Das Wireframe ist das Skelett der Seite, ohne Farbe und ohne Bilder. Hier entscheiden sich Seitenhierarchie, Navigationsstruktur, Priorität der Inhalte und Position der Handlungsaufforderungen. Graustufen sind Absicht: Solange nichts hübsch ist, diskutieren alle Beteiligten über Inhalt statt über Blautöne.

3. Visuelles Design und Prototyp

Steht die Struktur, folgt die visuelle Ebene auf Basis Ihrer Markenvorgaben. Der Prototyp ist ein klickbares Modell ohne Code. Ihre Kollegen können ihn bedienen, bevor eine Zeile programmiert wird, und genau da fallen die teuren Missverständnisse auf.

4. Test mit echten Nutzern

Jakob Nielsen beschrieb im Jahr 2000, dass eine Studie mit fünf Teilnehmenden 85 Prozent der Usability-Probleme findet. Diese Zahl ist der Grund, warum Nutzertests kein Budgetposten für Konzerne sind. Fünf bis acht Personen pro Runde, moderiert, laut denkend. Ergänzend arbeiten wir mit A/B-Tests bei ausreichendem Traffic und mit einer Heuristik-Analyse, die in ein bis zwei Tagen die gröbsten Brüche aufdeckt.

5. Iteration und Übergabe an die Entwicklung

Nach zwei bis drei Korrekturrunden geht das Design in die Umsetzung. Zur Übergabe gehören die Spezifikation mit Abständen und Farbwerten, die Komponentenbibliothek, die Beschreibung der Interaktionszustände und die Breakpoints. Wenn Entwurf und Webentwicklung im selben Team liegen, entfällt der übliche Reibungsverlust an dieser Nahtstelle.

Was kostet UX/UI-Design 2026?

Wir verkaufen Design nicht als eigenen Posten, sondern als Teil des Projekts. Eine Broschüren-Website liegt bei 830 bis 2.200 EUR, eine Unternehmenswebsite mit eigenem Figma-Entwurf bei 2.200 bis 4.130 EUR, eine Webanwendung bei 4.130 bis 13.800 EUR. Alle Werte netto.

Drei Faktoren verschieben den Preis innerhalb dieser Spannen. Die Zahl der eigenständigen Seitentypen zählt mehr als die Zahl der Seiten, weil 20 Blogbeiträge dieselbe Vorlage nutzen. Bestehende Markenvorgaben sparen eine halbe Designphase, ein fehlendes Logo kostet sie. Und Anbindungen an ERP, CRM oder Warenwirtschaft treiben den Aufwand, selbst wenn die Oberfläche schlicht bleibt. Was den Zeitplan dagegen am häufigsten sprengt, ist keiner dieser Punkte, sondern fehlende Texte und Bilder auf Kundenseite.

Zwei Hinweise zur Abrechnung. Gegenüber deutschen Geschäftskunden greift das Reverse-Charge-Verfahren, die Rechnung geht ohne ungarische Umsatzsteuer in EUR heraus, umgerechnet zum MNB-Mittelkurs am Rechnungsdatum. Und der Preis hängt weniger an der Seitenzahl als an der Zahl der Korrekturrunden. Eine detaillierte Aufschlüsselung finden Sie unter Website-Kosten 2026.

Wie viel bringt gutes Design messbar?

Belastbar sind drei Werte: 35 Prozent Conversion-Potenzial durch bessere Checkout-Führung, 70,22 Prozent durchschnittliche Warenkorbabbruchquote als Ausgangslage und 85 Prozent gefundener Probleme bei einem Test mit fünf Personen. Alles Weitere hängt von Ihrem Ausgangsniveau ab.

Andere gern zitierte Zahlen halten der Prüfung nicht stand. Der McKinsey Design Index mit dem Faktor 2,1 beim Umsatzwachstum ist über die frei zugängliche Quelle derzeit nicht abrufbar, ebenso wenig die alte Google-Statistik zu 53 Prozent Absprüngen nach drei Sekunden. Wir lassen beides weg. Was Sie selbst nachrechnen können, steht in unserem Beitrag zur Conversion-Optimierung.

Wie prüfen Sie, ob ein Entwurf wirklich besser ist?

Mit zwei Verfahren, die sich ergänzen. Der A/B-Test misst an echtem Traffic, braucht aber Volumen und Geduld. Die Heuristik-Analyse braucht nur einen erfahrenen Prüfer und liefert in ein bis zwei Tagen eine Mängelliste. Kleine Projekte starten mit dem zweiten Verfahren.

A/B-Test

Sinnvolle Testobjekte sind die Beschriftung und Position der Handlungsaufforderung, die Länge eines Formulars, der Aufbau der Preisseite und der Inhalt des Hero-Bereichs. Üblich ist ein Konfidenzniveau von 95 Prozent. Der häufigste Fehler ist der Abbruch nach drei Tagen, weil eine Variante gerade vorn liegt. Bei wenigen hundert Sitzungen pro Woche ist ein A/B-Test schlicht das falsche Werkzeug.

Heuristik-Analyse nach den zehn Nielsen-Regeln

Die Prüfliste stammt aus dem Jahr 1994 und ist bis heute der schnellste Weg zu einer priorisierten Mängelliste:

1. Sichtbarkeit des Systemzustands: Der Nutzer weiß jederzeit, wo er steht und was gerade passiert.
2. Übereinstimmung mit der realen Welt: vertraute Begriffe statt interner Systemsprache.
3. Kontrolle und Freiheit: Jeder Schritt lässt sich zurücknehmen.
4. Konsistenz und Standards: Gleiches Element, gleiche Bedeutung, überall.
5. Fehlervermeidung: Der beste Fehler ist der, den die Oberfläche gar nicht zulässt.
6. Wiedererkennen statt erinnern: Optionen sichtbar machen, nicht abfragen.
7. Flexibilität und Effizienz: Abkürzungen für Vielnutzer, einfacher Pfad für alle anderen.
8. Ästhetik und Reduktion: Jedes zusätzliche Element schwächt die übrigen.
9. Hilfe bei Fehlern: Meldungen benennen Ursache und Ausweg.
10. Hilfe und Dokumentation: auffindbar an der Stelle, an der sie gebraucht wird.

Wir setzen die Analyse gern vor dem ersten Entwurf ein. Sie kostet zwei Tage und verhindert, dass ein bekannter Bedienfehler im neuen Layout einfach mitumzieht.

Ist Mobile-First in Deutschland noch die richtige Annahme?

Als Denkweise ja, als Ausschließlichkeit nein. Statcounter misst für Deutschland im Juli 2026 einen Anteil von 49,41 Prozent mobil gegenüber 48,97 Prozent Desktop und 1,61 Prozent Tablet. Das ist ein anderes Bild als in Märkten mit 70 Prozent Mobilanteil, und es verändert die Designentscheidung.

Wer im deutschen B2B ausschließlich für kleine Displays entwirft, liefert der Hälfte der Nutzer eine hochskalierte Handyansicht auf einem 27-Zoll-Monitor. Umgekehrt bleibt der Mobile-first-Ablauf sinnvoll, weil er zur Priorisierung zwingt und weil Google nach eigener Dokumentation die mit dem Smartphone-Crawler geladene Fassung für Indexierung und Ranking heranzieht. Unsere Konsequenz: Wir entwerfen zwei Ansichten ernsthaft und behandeln keine davon als Restposten.

Ladezeit gehört in dieselbe Diskussion. Die Core Web Vitals setzen LCP unter 2,5 Sekunden, INP auf höchstens 200 Millisekunden und CLS auf höchstens 0,1, jeweils am 75. Perzentil gemessen. Ein aufwendiger Hero-Bereich kann diese Werte allein kippen. Details dazu stehen in unserem Beitrag zur Ladezeit-Optimierung.

Was verlangt das BFSG von Ihrer Website?

Das Barrierefreiheitsstärkungsgesetz gilt seit dem 28. Juni 2025 und erfasst unter anderem Dienstleistungen im elektronischen Geschäftsverkehr gegenüber Verbrauchern. Kleinstunternehmen mit weniger als 10 Beschäftigten und höchstens 2 Millionen Euro Jahresumsatz oder Bilanzsumme sind bei Dienstleistungen ausgenommen.

Konkret wird es in der zugehörigen Verordnung. Nach § 19 BFSGV müssen im elektronischen Geschäftsverkehr Informationen zur Barrierefreiheit der angebotenen Produkte bereitgestellt werden, und Identifizierungs-, Authentifizierungs-, Sicherheits- sowie Zahlungsfunktionen müssen wahrnehmbar, bedienbar, verständlich und robust gestaltet sein. Diese vier Begriffe stammen aus der WCAG, die seit dem 12. Dezember 2024 in Version 2.2 als W3C Recommendation vorliegt.

Was das im Entwurf bedeutet:

• Kontrast von mindestens 4,5:1 bei normalem Text, 3:1 bei großer Schrift (WCAG 2.2, Kriterium 1.4.3).
• Jede Funktion ist ohne Maus erreichbar, mit sichtbarem Fokus.
• Semantisches HTML, Alternativtexte und ARIA-Attribute für Screenreader.
• Formularfehler benennen das Feld und den Weg zur Korrektur.
• Unterstützung für prefers-reduced-motion, damit Animationen abschaltbar sind.

Ein Satz zur Ehrlichkeit: Ob Ihr konkretes Angebot unter das BFSG fällt, entscheidet Ihre Rechtsberatung, nicht Ihre Agentur. Reine B2B-Angebote sind nach dem Wortlaut nicht erfasst. Technisch bauen wir trotzdem barrierefrei, weil die Nacharbeit an einer fertigen Anwendung deutlich teurer ist als die saubere Grundlage.

Wann lohnt sich ein Design-System?

Ab dem zweiten digitalen Produkt. Solange Sie eine Website betreiben, genügt ein Styleguide. Sobald Website, Kundenportal und interne Werkzeuge nebeneinander laufen, wird die Abweichung zwischen ihnen zum eigentlichen Kostentreiber.

Ein Design-System besteht aus Design-Tokens für Farbe und Typografie, einer Komponentenbibliothek, wiederkehrenden Mustern für Anmeldung oder Fehlerbehandlung und der Dokumentation dazu. Wir arbeiten intern mit einer Tailwind-basierten Komponentenbasis, die über Projekte hinweg wiederverwendet wird.

Zur oft genannten Ersparnis von 30 bis 50 Prozent Entwicklungszeit: Dafür kennen wir keine belastbare öffentliche Messung. Was wir beobachten, ist konkreter und kleiner. Wiederkehrende Oberflächen entstehen ohne neue Designrunde, und Barrierefreiheitsfehler werden einmal an der Komponente behoben statt an zwölf Stellen.

Welche Werkzeuge nutzen wir 2026?

Figma für Entwurf, Prototyp und Design-System, ein Analyse-Werkzeug für Heatmaps und Sitzungsaufzeichnungen, ein Testwerkzeug für entfernte Usability-Tests und die kostenlosen Prüfwerkzeuge für Barrierefreiheit. Mehr braucht ein Mittelstandsprojekt selten.

Eine Änderung, die viele Werkzeuglisten im Netz noch nicht abbilden: Hotjar gehört zu Contentsquare, die alte Preisseite leitet inzwischen dorthin weiter. Und Figma rechnet KI-Funktionen über monatliche AI-Credits ab, im Professional-Vollplatz sind 3.000 davon enthalten, in Dev- und Collab-Plätzen jeweils 500. Für die Kalkulation heißt das: Der Sitzplatzpreis ist nicht mehr die ganze Rechnung.

Welche UX-Fehler kosten am meisten Geld?

Aus unseren Projekten wiederholen sich sieben Muster. Sie sind alle vermeidbar und keines davon erfordert ein größeres Budget, nur eine andere Reihenfolge.

1. Die Recherche wird gestrichen, weil man die eigenen Kunden zu kennen glaubt. Annahmen sind der teuerste Rohstoff im Projekt.
2. Desktop wird als Nachgedanke behandelt oder umgekehrt Mobil. In Deutschland verlieren Sie mit beiden Varianten etwa die Hälfte der Nutzer.
3. Zu viele Funktionen im ersten Release. Der Umfang wächst, die Klarheit sinkt, der Starttermin rutscht.
4. Kein System hinter den Komponenten. Nach der dritten Unterseite existieren vier Buttonvarianten.
5. Ladezeit wird als Entwicklungsthema abgeschoben. Ein Entwurf mit vier Webfonts ist eine Performance-Entscheidung.
6. Fehlermeldungen ohne Inhalt. Ein Formular, das nur mitteilt, dass ein Fehler auftrat, verliert genau an dieser Stelle den Nutzer.
7. Barrierefreiheit erst nach dem Livegang. Nachrüsten kostet ein Vielfaches der sauberen Grundlage.

Woran erkennen Sie einen belastbaren Design-Partner?

An der Prozessbeschreibung und am Vertrag, nicht am Portfolio. Schöne Bilder zeigen, dass jemand gestalten kann. Ob das Ergebnis funktioniert hat, erfahren Sie nur, wenn Sie nach Ausgangslage und Messwert fragen.

• Fragen Sie zu jedem Referenzprojekt, welches Problem gelöst wurde und woran der Erfolg gemessen wurde.
• Lassen Sie sich den Ablauf erklären. Fehlt eine Recherchephase, kaufen Sie Grafik, nicht Design.
• Klären Sie Werkvertrag oder Dienstvertrag vor Projektbeginn, weil davon Abnahme und Gewährleistung abhängen.
• Lassen Sie AVV, Hosting-Region und den Umgang mit personenbezogenen Daten schriftlich festhalten.
• Bestehen Sie auf der Übergabe von Quellcode und Figma-Datei, ohne Lizenzbindung an die Agentur.

Für uns kommt der Nearshore-Aspekt dazu. Budapest liegt in derselben Zeitzone wie Berlin, im selben Rechtsraum und unter derselben DSGVO-Grundlage, mit rund zwei Flugstunden Abstand. Abstimmungen laufen zur normalen Arbeitszeit statt zeitversetzt. Weitere Kriterien haben wir im Beitrag zur Auswahl einer Webagentur gesammelt.

Was Sie aus diesem Leitfaden mitnehmen

Wenn Sie wissen möchten, wo Ihre Oberfläche heute Nutzer verliert: Schildern Sie uns den Fall, wir sehen uns die Strecke an und melden uns innerhalb von 24 Stunden mit einer Einschätzung. Angebot anfordern.

Quellen

• Baymard Institute zu Warenkorbabbrüchen, 50 ausgewertete Studien: baymard.com
• Baymard Institute zur Checkout-Usability, 25 Testrunden und 344 Benchmark-Shops: baymard.com
• Jakob Nielsen, Why You Only Need to Test with 5 Users, 18.03.2000: nngroup.com
• Jakob Nielsen, 10 Usability Heuristics for User Interface Design, erstmals 1994: nngroup.com
• Statcounter Global Stats, Plattformanteile Deutschland, Juli 2026: gs.statcounter.com
• Google Search Central zur Mobile-First-Indexierung, Crawling mit dem Smartphone-Agent: developers.google.com
• Barrierefreiheitsstärkungsgesetz, Anwendungsbereich nach § 1 Absatz 3, Geltung ab 28.06.2025, Ausnahme für Kleinstunternehmen in § 3 Absatz 3, Definition in § 2 Nummer 17: gesetze-im-internet.de
• § 19 BFSGV, zusätzliche Anforderungen an Dienstleistungen im elektronischen Geschäftsverkehr: gesetze-im-internet.de
• WCAG 2.2, W3C Recommendation vom 12.12.2024, Kontrastkriterium 1.4.3: w3.org
• Core Web Vitals und ihre Schwellenwerte: web.dev
• Figma-Preise und AI-Credits, abgerufen am 14.08.2026: figma.com
• Hotjar-Preisseite, leitet auf Contentsquare weiter, geprüft am 14.08.2026: hotjar.com
• Maze, Preisübersicht des Anbieters: maze.co
• Wechselkurs 1 EUR = 363,28 HUF, MNB-Mittelkurs vom 14.08.2026: mnb.hu
• Die kursierende Forrester-Angabe zum UX-Return stammt aus dem kostenpflichtigen Bericht The Six Steps For Justifying Better UX (2016): forrester.com
• Preisgrundlage: die veröffentlichte AppForge-Preisliste in HUF, appforge.hu/pricing.json