Design vs. Usability: Wo Sie Prioritäten setzen sollten

Vor ein paar Monaten hat mich ein Mittelständler aus dem Maschinenbau angerufen. Sein Problem: Die neue Website war seit drei Monaten live, sah fantastisch aus — und niemand füllte das Kontaktformular aus. Keine Anfragen. Keine Leads. Nichts.

Die Agentur, die das Projekt umgesetzt hatte, war stolz auf sich. Award-verdächtig. Parallax-Scrolling. Animationen, die beim Scrollen einfliegen. Ein Hamburger-Menü auf dem Desktop. Alles sehr hübsch. Und komplett an der Zielgruppe vorbei.

Die Einkäufer und technischen Leiter, die diese Website besuchen, wollten keine Erlebniswelt. Sie wollten Spezifikationen, Lieferzeiten und einen Ansprechpartner. Stattdessen mussten sie sich durch fünf Scroll-Sektionen kämpfen, bevor sie überhaupt verstanden, was das Unternehmen verkauft.

Das ist kein Einzelfall. Es ist die Regel.

Die meisten Unternehmen, die zu uns kommen, haben eine klare Vorstellung davon, was eine gute Website ausmacht: Sie soll gut aussehen. Modern. Aufgeräumt. Am besten so wie die Website von Apple oder Tesla. Was sie nicht auf dem Schirm haben: Apple und Tesla verkaufen Lifestyle-Produkte an Endkonsumenten. Ein mittelständischer Zulieferer für Hydraulikkomponenten hat eine völlig andere Aufgabe.

Die Verwechslung von Design und Usability ist einer der teuersten Fehler im digitalen B2B-Geschäft. Design fragt: Wie sieht es aus? Usability fragt: Wie gut funktioniert es? Beide Fragen sind berechtigt. Aber wenn Sie nur eine beantworten können — und im echten Leben mit echten Budgets müssen Sie fast immer priorisieren — dann sollte die Antwort klar sein.

Eine Website, die großartig aussieht, aber nicht funktioniert, ist Dekoration. Eine Website, die nicht besonders hübsch ist, aber ihre Nutzer zum Ziel führt, ist ein Werkzeug. Und Werkzeuge verdienen Geld.

Es gibt ein psychologisches Phänomen, das die Sache kompliziert macht. Forscher haben in den frühen 1990ern am ATR Media Integration & Communications Lab in Japan herausgefunden, dass Menschen ästhetisch ansprechende Interfaces als benutzerfreundlicher wahrnehmen — unabhängig davon, ob sie es tatsächlich sind. Masaaki Kurosu und Kaori Kashimura haben diesen Effekt 1995 erstmals dokumentiert. Er heißt Aesthetic-Usability-Effekt.

Das bedeutet: Wenn Ihre Website gut aussieht, verzeihen Nutzer kleinere Usability-Probleme. Sie finden die Navigation vielleicht etwas umständlich, aber sie denken sich: Wird schon passen, sieht ja professionell aus. Dieses Phänomen führt zu einem gefährlichen Trugschluss bei Unternehmen und ihren Agenturen. Weil die Stakeholder die Website als benutzerfreundlich empfinden — sie sieht ja toll aus — wird nie hinterfragt, ob sie es tatsächlich ist.

Der Aesthetic-Usability-Effekt hat aber Grenzen. Er funktioniert bei kleinen Problemen. Wenn Nutzer aber fundamental nicht finden, was sie suchen, hilft auch die schönste Oberfläche nicht mehr. Dann verlassen sie die Seite. Und im B2B-Kontext, wo der einzelne Lead tausende Euro wert sein kann, ist jeder verlorene Besucher ein echtes Problem.

Jakob Nielsen, einer der einflussreichsten Usability-Forscher, hat ein Gesetz formuliert, das jeder Auftraggeber kennen sollte: Nutzer verbringen die meiste Zeit auf anderen Websites. Das bedeutet, sie erwarten, dass Ihre Website so funktioniert wie die Websites, die sie bereits kennen.

Das Logo oben links, das zur Startseite verlinkt. Die Navigation oben oder links. Der Warenkorb oben rechts. Der Footer mit Kontaktdaten und Impressum. Das sind keine kreativen Entscheidungen — das sind Konventionen. Und Konventionen existieren, weil sie funktionieren.

Wenn ein Designer Ihre Navigation in ein kreatives Hamburger-Menü auf dem Desktop verpackt, weil es cleaner aussieht, dann hat er ein Usability-Problem geschaffen. Nicht weil Hamburger-Menüs per se schlecht sind — auf Mobilgeräten sind sie Notwendigkeit. Aber auf dem Desktop verstecken sie Informationen, die Nutzer erwarten, sofort zu sehen. Studien zeigen konsistent, dass sichtbare Navigation zu höherer Engagement-Rate führt als versteckte Navigation. Das ist kein Bauchgefühl. Das sind Daten.

Ich habe in meiner Zeit in der Werbeagentur selbst genug Projekte gesehen, bei denen die kreative Idee wichtiger war als die Funktion. Ein Autohändler, dessen Website so designlastig war, dass die Suchfunktion für Fahrzeuge erst nach zwei Scrolls auftauchte. Ein Softwareanbieter, dessen Produktseite so mit Animationen überladen war, dass sie auf den Firmenrechnern der Zielgruppe drei Sekunden zum Laden brauchte. Kreativität, die ihren Zweck verfehlt.

Es gibt noch ein zweites Gesetz, das im Webdesign-Kontext unterschätzt wird. Hicks Gesetz besagt: Die Zeit, die ein Mensch braucht, um eine Entscheidung zu treffen, steigt mit der Anzahl und Komplexität der verfügbaren Optionen. Das klingt banal, hat aber massive Auswirkungen auf die Gestaltung von Websites.

Jede zusätzliche Option in Ihrer Navigation, jeder weitere Call-to-Action auf einer Seite, jedes zusätzliche Formularfeld erhöht die kognitive Last Ihrer Besucher. Und kognitive Last ist der Feind der Conversion. Wenn ein Besucher auf Ihrer Startseite ankommt und gleichzeitig neun Navigationspunkte, drei Hero-Banner, einen Chatbot, ein Newsletter-Popup und einen Cookie-Banner sieht, dann hat er zu viele Entscheidungen zu treffen. Also trifft er die einfachste: Er geht.

Designer neigen dazu, Vollständigkeit mit Qualität zu verwechseln. Alles muss auf die Startseite. Alle Produkte, alle Dienstleistungen, alle Referenzen, alle News. Das Ergebnis ist eine Seite, die zwar alles zeigt, aber nichts kommuniziert. Die guten B2B-Websites, die ich kenne, machen genau das Gegenteil. Sie reduzieren radikal. Sie führen den Nutzer durch einen klaren Pfad. Eine Botschaft. Ein Ziel. Ein Call-to-Action pro Seite.

Es gibt Websites, die nach allen ästhetischen Maßstäben hässlich sind und trotzdem außerordentlich gut funktionieren. Amazon ist das offensichtlichste Beispiel. Die Seite ist überladen, visuell inkonsistent und in vielen Bereichen schlicht nicht schön. Aber sie konvertiert wie verrückt, weil jedes Element auf der Seite eine klare Funktion hat. Die Bewertungen sind sofort sichtbar. Der Kaufen-Button ist immer da, wo man ihn erwartet. Die Lieferzeit steht direkt am Produkt.

Craigslist ist ein anderes Beispiel. Die Seite sieht aus wie 1998 und ist eine der meistbesuchten Websites der Welt. Oder Wikipedia. Kein Designer würde dieses Layout als Portfolio-Stück verwenden. Aber Millionen Menschen nutzen es täglich, weil die Informationsarchitektur stimmt.

Im B2B-Bereich sehe ich das Gleiche. Ein Kunde von uns — ein Anbieter für industrielle Messtechnik — hatte eine Website, die visuell eher zurückhaltend war. Keine Hero-Videos, keine Animationen, kein visuelles Feuerwerk. Aber: klare Produktkategorien, technische Datenblätter zum Download direkt auf der Produktseite, ein Anfrageformular mit drei Feldern statt zwölf, und die Telefonnummer sichtbar im Header. Die Conversion-Rate lag bei über vier Prozent. Zum Vergleich: Der Branchendurchschnitt im B2B liegt bei ein bis zwei Prozent.

Das ist keine Anekdote. Das ist ein Muster. Websites, die Funktion über Form stellen, performen im B2B-Kontext konsistent besser als visuell aufwendige Seiten, die ihre Nutzer durch unnötige Komplexität verlieren.

Die Lösung für das Spannungsfeld zwischen Design und Usability heißt nicht: Design abschaffen. Hässliche Websites sind kein Ziel. Die Lösung heißt: Design Systems.

Ein Design System ist mehr als ein Style Guide. Es ist ein Set aus wiederverwendbaren Komponenten mit klaren Regeln für ihre Anwendung. Ein Button sieht immer gleich aus. Ein Formular hat immer die gleiche Struktur. Eine Fehlerbehandlung folgt immer dem gleichen Muster. Das hat zwei Vorteile: Erstens schafft es visuelle Konsistenz — die Seite sieht professionell aus, ohne dass jede einzelne Seite individuell gestaltet werden muss. Zweitens und wichtiger erzwingt es Usability-Standards. Wenn der primäre Call-to-Action immer der gleiche Button ist, in der gleichen Farbe, an der gleichen Position, dann lernen Nutzer schnell, wo sie klicken müssen.

Wir setzen in unseren Projekten auf Tailwind CSS in Kombination mit einer komponentenbasierten Architektur in Next.js. Das ist kein Zufall. Tailwind erzwingt ein System. Statt dass Designer beliebige Farben, Abstände und Schriftgrößen wählen, arbeiten alle innerhalb eines definierten Rasters. Das Ergebnis sind Websites, die konsistent aussehen und konsistent funktionieren. Kein Pixel-Pushing, keine willkürlichen Design-Entscheidungen, sondern systematische Gestaltung.

Der Unterschied zu dem, was viele Agenturen liefern — einmalige Photoshop-Layouts, die dann von Entwicklern so gut es geht in Code übersetzt werden — ist fundamental. Ein Design System lebt. Es wächst mit dem Produkt. Und es stellt sicher, dass neue Seiten und Features automatisch den Usability-Standards entsprechen, die von Anfang an definiert wurden.

Einer der größten Fehler, den ich in Webprojekten sehe: Design-Entscheidungen werden auf Basis von Meinungen getroffen. Der Geschäftsführer findet Blau besser als Grün. Die Marketingleiterin will ein größeres Logo. Der Designer bevorzugt minimalistische Typografie. Niemand fragt die tatsächlichen Nutzer.

Usability-Testing ist keine Raketenwissenschaft. Sie brauchen fünf bis acht Personen aus Ihrer Zielgruppe, eine Liste von Aufgaben, die sie auf Ihrer Website erledigen sollen, und jemanden, der zuschaut und dokumentiert. Das kostet einen Bruchteil dessen, was ein Redesign kostet. Und es liefert Erkenntnisse, die kein Designer der Welt aus seiner Erfahrung ableiten kann.

Jakob Nielsen hat gezeigt, dass fünf Nutzer bereits etwa 85 Prozent aller Usability-Probleme aufdecken. Fünf Personen. Ein Nachmittag. Das ist alles, was zwischen Ihnen und einer Website steht, die tatsächlich funktioniert.

In einem unserer Projekte haben wir vor dem Redesign einer B2B-Plattform genau das gemacht. Wir haben acht Nutzer eingeladen — Einkäufer und Projektleiter, die die Plattform täglich nutzen — und sie gebeten, typische Aufgaben zu erledigen. Die Ergebnisse waren ernüchternd. Funktionen, die das Unternehmen für zentral hielt, wurden von keinem einzigen Nutzer gefunden. Und eine kleine, unscheinbare Filterfunktion, die fast aus dem Redesign gestrichen worden wäre, war das Feature, das am häufigsten genutzt wurde.

Ohne diesen Test hätten wir eine visuell beeindruckende Plattform gebaut, die an den Bedürfnissen der Nutzer komplett vorbeigeht. Mit dem Test konnten wir gezielt investieren: in die Features, die tatsächlich genutzt werden. Das hat nicht nur die Usability verbessert, sondern auch das Budget geschont, weil wir nicht in Dinge investiert haben, die niemand braucht.

Ich will hier nicht den Eindruck erwecken, dass Design irrelevant ist. Das wäre genauso falsch wie die Annahme, dass Design alles ist. Es gibt Situationen, in denen visuelles Design einen echten Unterschied macht.

Im B2B-Geschäft geht es um Vertrauen. Große Aufträge, lange Geschäftsbeziehungen, hohe Investitionen. Eine Website, die aussieht wie aus dem Jahr 2005, sendet ein Signal: Dieses Unternehmen investiert nicht in sich selbst. Warum sollte ich als Kunde darauf vertrauen, dass sie in mein Projekt investieren? Ein professionelles visuelles Erscheinungsbild ist also durchaus wichtig — aber als Hygienefaktor, nicht als Differenzierungsmerkmal. Ihre Website muss professionell aussehen. Sie muss nicht den Red Dot Design Award gewinnen.

Wenn Sie in einem Markt agieren, in dem alle Wettbewerber vergleichbare Produkte und vergleichbare Websites haben, kann ein überlegenes visuelles Design tatsächlich den Unterschied machen. Aber auch hier gilt: nur in Kombination mit guter Usability. Ein schönes Design allein hat noch nie einen B2B-Deal entschieden. Aber ein schönes Design, das gleichzeitig benutzerfreundlich ist, kann den Ausschlag geben, wenn ein Einkäufer zwischen drei gleichwertigen Anbietern wählen muss.

Hier ist ein Bereich, in dem Design tatsächlich einen überproportionalen Einfluss hat. Wenn Sie junge Talente ansprechen wollen, die zwischen fünf Arbeitgebern wählen können, dann ist Ihre Karriereseite ein entscheidender Touchpoint. Und junge Talente achten auf Design. Sie wachsen mit Instagram und TikTok auf. Ihre visuelle Erwartungshaltung ist hoch. Eine modern gestaltete Karriereseite kann hier tatsächlich den Unterschied machen — solange die Bewerbungsfunktion dann auch einwandfrei funktioniert.

Was ich aus über zehn Jahren in der Webentwicklung gelernt habe — sechs davon in einer Werbeagentur, wo Design König war, und die Jahre danach mit happycoding, wo wir das Gegenteil praktizieren — lässt sich auf eine einfache Reihenfolge reduzieren.

Schritt eins: Verstehen Sie Ihre Nutzer. Nicht Ihre Stakeholder, nicht Ihren Geschäftsführer, nicht Ihren Designer. Ihre Nutzer. Was wollen sie auf Ihrer Website tun? Welche Informationen suchen sie? Welche Aufgaben müssen sie erledigen? Führen Sie Interviews. Machen Sie Usability-Tests mit der bestehenden Seite. Schauen Sie sich Ihre Analytics-Daten an. Wo steigen Nutzer aus? Wo klicken sie hin? Wo bleiben sie hängen?

Schritt zwei: Definieren Sie die Informationsarchitektur. Welche Inhalte gibt es? Wie sind sie strukturiert? Wie findet ein Nutzer von A nach B? Das ist die Grundlage, auf der alles aufbaut. Ein häufiger Fehler ist, diese Phase zu überspringen und direkt mit dem visuellen Design zu beginnen. Das ist so, als würden Sie ein Haus einrichten, bevor die Wände stehen.

Schritt drei: Bauen Sie Wireframes. Keine Pixel-perfekten Mockups, sondern grobe Skizzen, die zeigen, welche Elemente auf jeder Seite sind und wie sie angeordnet sind. Testen Sie diese Wireframes mit echten Nutzern. Ja, schon in dieser frühen Phase. Fehler, die Sie jetzt finden, kosten einen Bruchteil dessen, was sie kosten, wenn das Design fertig ist und der Code steht.

Schritt vier: Erst jetzt kommt das visuelle Design. Und es kommt nicht aus dem Nichts, sondern basiert auf dem Design System, das die Usability-Entscheidungen der vorherigen Schritte kodifiziert. Der Designer gestaltet nicht frei, sondern innerhalb eines Rahmens, der sicherstellt, dass die Website nicht nur gut aussieht, sondern auch funktioniert.

Schritt fünf: Testen Sie erneut. Mit echten Nutzern. Mit dem fertigen Design. Und seien Sie bereit, Dinge zu ändern, die nicht funktionieren — auch wenn der Designer sie für sein bestes Werk hält.

Wenn Sie gerade ein Redesign planen oder eine neue Website beauftragen wollen, stellen Sie der Agentur oder dem internen Team eine Frage: Wie viel Prozent des Budgets fließen in visuelles Design und wie viel in Usability-Research und Testing? Wenn die Antwort 80/20 zugunsten von Design ist — und das ist bei den meisten Projekten der Fall — dann haben Sie ein Problem.

Die Websites, die ich in den letzten Jahren gebaut habe und die am besten performen, hatten alle eines gemeinsam: Das Budget für User Research und Testing war mindestens genauso groß wie das Budget für visuelles Design. Manchmal größer. Nicht weil Design unwichtig ist, sondern weil ohne Usability-Grundlage jeder Euro für Design ein Euro ist, der im schlimmsten Fall in die falsche Richtung investiert wird.

Der Maschinenbauer, den ich am Anfang erwähnt habe? Wir haben seine Website nicht komplett neu designed. Wir haben die Informationsarchitektur überarbeitet, die Navigation vereinfacht, das Kontaktformular auf drei Felder reduziert und die technischen Datenblätter prominent auf den Produktseiten platziert. Visuell hat sich wenig geändert. Funktional alles. Die Anfragen haben sich innerhalb von drei Monaten verdreifacht.

Das ist keine Magie. Das ist die konsequente Anwendung einer simplen Erkenntnis: Im B2B-Web geht es nicht darum, beeindruckend auszusehen. Es geht darum, nützlich zu sein. Und Nützlichkeit schlägt Schönheit. Jedes Mal.

Investieren Sie in Usability, bevor Sie in Design investieren. Testen Sie mit echten Menschen, bevor Sie auf die Meinung von Designern vertrauen. Und bauen Sie Websites, die funktionieren — nicht solche, die nur gut aussehen. Ihre Kunden werden es Ihnen danken. Nicht mit Likes, aber mit Aufträgen. Und darauf kommt es am Ende an.