Startseite News UI/UX Fallstricke im Webdesign – 10 Tipps für eine gute Usability
Eine Person steuert einen Computer mit einer Maus, die in der rechten Hand gehalten wird.

Fallstricke im Webdesign – 10 Tipps für eine gute Usability

Der Weg zu leicht bedienbarem und effektivem Webdesign

Oft sind es Kleinigkeiten, die die Bedienbarkeit einer Webseite beeinflussen. Und manchmal liegt eine verringerte User Experience tatsächlich an ungünstig umgesetztem Webdesign. Es geht hier nicht um persönlichen Geschmack, sondern um die Dinge, die die Usability Ihrer Besucher negativ beeinflussen.

Das Erstellen einer Webseite ist nicht schwer. Wenn man sie allerdings auf Besucher ausgerichtet designen möchte, benötigt man Skills.

Oliver Wehle, Webdesign-Experte unserer Webdesign-Agentur

1. Herausforderung Startseite

Die Startseite ist eigentlich die wichtigste Seite Ihres Webauftritts, da Ihre Besucher, falls Sie nicht suchmaschinentechnisch immer auf Ihren Unterseiten landen, hier auf Ihr Unternehmen treffen. Und genau hier besteht dann die Herausforderung in der Usability, sozusagen auf einen Blick das Beste von Ihnen und dem gesamten Webauftritt zu vermitteln.

Doch leider ist oft das Gegenteil der Fall. Man möchte dem Besucher so viele Informationen wie möglich zukommen lassen und das endet oft in einer Art Inhaltsverzeichnis. Vielleicht noch untermalt mit einem Slider, der die verschiedensten Bilder und Buttons ablaufen lässt, was sich kein Besucher komplett anschaut.

Als erfahrene Content-Marketing-Agentur legen wir Ihnen ans Herz: Verwirren Sie den Besucher nicht. Ein aussagekräftiges Bild, eine prägnante Headline und eine klare Aussage lassen hierfür keinen Platz. Und zu viele Aussagen verwässern Ihre Kernbotschaft. Finden Sie diese, formulieren Sie sie knapp und prägnant und teilen Sie Ihre Inhalte auf.

Individuelle Beratung zur optimalen Usability

Individuelle Beratung zur optimalen Usability

Konzipiert & umgesetzt durch Experten

  • Kostenfreies 30-minütiges Erstgespräch
  • Analyse Ihres aktuellen Webdesigns enthalten
  • Online oder bei uns – individuell für Sie!

2. Navigation überdenken

Ihre Navigation ist eines der wichtigsten Bestandteile einer guten Usability, besonders im E-Commerce. Die meisten Navigationen beruhen auf einem Standard, der in Produkte, Leistungen und auch die „Über uns“ -Seite unterteilt. Überdenken Sie, ob in Ihrem Fall ein intuitives Navigieren aus der Sicht Ihres Besuchers nicht auch anders zu betrachten wäre. Am Beispiel PayPal ist es hier sicherlich günstiger gleich auf der Startseite in Privat- und Geschäftskunden sowie in Partner und Entwickler zu splitten, also eine Aufteilung nach Zielgruppen. Überdenken Sie also Ihre Informationsarchitektur gründlich.

3. Klischeehafte Bildwelt

Hübsche, nette, lächelnde Menschen im Gespräch wie auch schöne Landschaften – wie oft sind solche Klischeebilder auf Webseiten anzutreffen. Mit einer authentischen Bildwelt oder auch dem Thema der Webseite haben diese Bilder aber meistens nichts zu tun. Gekaufte Bilder aus einer Stockagentur sind leider oft gesehen und beliebig austauschbar. Wählen Sie individuelle Bilder, die Ihre Besucher nicht langweilen und einen Bezug zu Ihrem Unternehmen haben.

4. Schlecht lesbare Schrift

Die Auswahl an Schriften ist mittlerweile sehr groß. Viele verschiedene Webfonts-Anbieter sind hier am Start. Doch eine außergewöhnliche Schrift geht oft zu Lasten der Lesbarkeit. Unter Berücksichtigung einer guten Usability schlägt die Lesbarkeit oft die Schönheit – mag die Ästhetik der Schrift Ihnen noch so sehr gefallen. Beachten Sie auch, dass manche Schriften als Heads noch lesbar sind, was dann aber im Fließtext nicht mehr der Fall ist.

5. Zeilen über die gesamte Breite

Eine zu lange Zeilenbreite, also ein Fließtext, der sich über die gesamte Breite erstreckt, geht auch zu Lasten der Lesbarkeit. Wir empfehlen ein Maximum von höchstens 90 Zeichen, um einen Richtwert zu nennen. Natürlich hängt auch die Breite der Zeilen von Ihrer gewählten Schriftart und -größe ab. Unsere Experten für UX/UI-Design stehen Ihnen bei diesen Themen gerne als kompetenter Partner zu Seite.

6. Kontrastarme Gestaltung

Text und Hintergrund sollten in einem Kontrast zueinander stehen. Sollte das nicht der Fall sein und der Hell-Dunkel-Kontrast ist zu gering, geht auch das auf Kosten der Lesbarkeit, da der Text sich nicht gut genug vom Hintergrund abhebt. Klassiker ist der Kontrast von schwarzem Text auf weißem Hintergrund, was dann auch manchmal zu krass wirken kann. Doch bei der Schrift dann auf ein zu helles Grau zu schwenken, was durchaus als Gesamtes gut wirken mag, kann die Lesbarkeit und damit Ihre Usability auch negativ beeinflussen.

7. Größe und Ausrichtung des Textes

Der aktuelle Trend geht zu größeren Texten und Schriftgrößen. Oft hängt die Lesbarkeit, gerade in der mobilen Version, von der Schriftgröße ab, die leider zu klein gewählt wurde. Hat man früher 12 oder 14 Pixel gewählt, so kann man aktuell Schriftgrößen unter 16 Pixeln nicht mehr ohne Grund empfehlen.

8. Bleiben Sie links

Auch sollten Sie weitestgehend darauf verzichten, Ihre Texte zu zentrieren. Was für Zitate noch gehen mag, gut lesbarer Text im Web ist linksbündig. Verzichten Sie ebenfalls auf Blocksatz, auch dieser verringert die Lesbarkeit.

Experten für effektives & leicht bedienbares Webdesign

Gemeinsam konzipieren wir Webdesign, das Ihre Zielgruppe mit hoher Usability überzeugt. Überzeugen Sie jetzt Ihre Zielgruppe mit einem perfekt bedienbaren Webauftritt. Fragen Sie direkt bei unseren erfahrenen Experten an.

9. Geringer Zeilenabstand

Ein weiterer Fehler in der Typografie und damit auch in der Usability: Keiner hat auf den Zeilenabstand geachtet, der oft zu klein ausfällt und somit auch auf Kosten der Lesbarkeit. Erstaunlicherweise beträgt in vielen Grafikprogrammen der Zeilenabstand gegenüber der Schrift 120 Prozent. Das ist für eine Webseite nicht genug, was Sie direkt im Browser überprüfen und beurteilen können. Wir empfehlen durchaus einen Mindestabstand von 150 Prozent.

10. Die mittelgraue Maus

Oft fällt auf, dass man sich bei den verwendeten Grautönen auf Webseiten meistens auf einen mittleren Ton einschwingt. Grau ist eine durchaus gute Farbe für Ihr Farbschema im Web, da sich ein sehr heller Ton wunderbar als Hintergrund eignet, ein dunkler Ton sehr gut für die Schrift ist und insgesamt Grau gut mit kräftigen Farben in Kontrast zu setzen ist. Aber nehmen Sie Abstand von einem mittleren Grauton, wählen Sie sehr helle oder dunkle Abstufungen, sonst geht das in die Richtung graue Maus und kann Ihre Usability auch schnell wieder beeinträchtigen.

Relevanz einer guten Usability

Nochmals möchten wir als Webdesign-Agentur in Nürnberg zusammenfassend und mit Nachdruck erwähnen, dass in Zeiten von Google & Co. beim Webdesign Lesbarkeit und Benutzbarkeit Schönheit und Ästhetik schlägt. Beachten Sie auch grundsätzlich, dass die Lesbarkeit ein Teil der Barrierefreiheit ist und somit von Google mit ins Ranking einfließt. Aber noch mehr wird Google in Zukunft Ihre Webseite nach der Usability ranken. Die Bewertungskriterien werden die neuen Google Core Web Vitals sein, welche Sie keines Falls außer Acht lassen sollten, wenn Sie auch in Zukunft ein gutes Ranking haben möchten. Nachdem Sie also ein Webdesign-Konzept der Usability anhand Ihrer Personas erstellt haben, sollten Sie die oben aufgeführten Fehler vermeiden. Wenn diese Grundlagen beachtet werden, können Sie danach alles an Optik und Ästhetik aus Ihrem Design herausholen. Oder überprüfen Sie Ihre Webseite, ob Sie nicht die eine oder andere Optimierung vornehmen sollten. Für weitere Tipps zum Thema Webseiten-Redesign lesen Sie gerne diesen Beitrag. Wir sind auch gerne für Sie da!

0 Gedanken zu „Fallstricke im Webdesign – 10 Tipps für eine gute Usability“

  1. Auch wenn man eine Webseite nur optisch betrachtet gibt es viel worauf man achtern muss. Der Seitenbesucher ist ungeduldig also muss die Seite schnell laden und darf somit nicht mit vielen Bildern und Videos überladen sein. Der BEsucher muss sich auch gut auf der Seite zurecht finden also ist auch die Navigation wie du bereits in deinem Beitrag geschrieben hast wichtig damit aus einem Webseitenbesucher ein Kunde wird.

    Antworten

Schreibe einen Kommentar

Webdesign-Spezialist für Webdesign-Trends

Webdesign Trends 2025 – diese Faktoren müssen Sie kennen! 

Aktuelle Webdesign-Trends 2025: Das Webdesign bestimmt den Look und schlussendlich auch den Erfolg einer Internetseite.

Above-the-Fold optimieren: Der Schlüssel zu erfolgreichem Webdesign 

Ein gut gestalteter Above-the-Fold-Bereich einer Website ist der perfekte Einstieg in die Nutzerreise. Er entscheidet, ob aus Besuchern interessierte Nutzer und schließlich Kunden werden.
Mitarbeiter beraten sich zu Relaunch-Projekt.

KI-Einsatz beim Relaunch von Internetseiten und Online-Shops

Möglichkeiten für den KI-Einsatz beim Relaunch Die Integration von Künstlicher Intelligenz (KI) in Relaunch-Projekte eröffnet mittelständischen Unternehmen zahlreiche Chancen. Der KI-Einsatz beim Relaunch kann in verschiedenen Phasen des Projekts stattfinden, um die Effizienz zu steigern, Kosten zu senken und die Ergebnisse zu verbessern. Im Fokus dieser Betrachtung steht dabei ChatGPT, die künstliche Intelligenz von OpenAI, ...

Mehr erfahren

WordPress Performance

Wie man eine benutzerfreundliche Designstrategie entwickelt

Die Gestaltung einer benutzerfreundlichen Bedienoberfläche ist ein zentraler Aspekt für den Erfolg von Websiten und digitalen Anwendungen. Eine benutzerfreundliche Oberfläche trägt maßgeblich dazu bei, eine positive Benutzererfahrung zu gewährleisten und die Zufriedenheit der Nutzer zu verbessern. Dieser Artikel untersucht die Grundlagen der Benutzerfreundlichkeit im User-Interface-Design sowie bewährte Praktiken für die Entwicklung einer benutzerfreundlichen Oberfläche. Der ...

Mehr erfahren

Olanung einer Webseite mit Wireframes.

Inhaltskonzept beim Relaunch – Wie Sie Ihre Website optimal strukturieren

Ein Website-Relaunch ist nicht nur eine technische Aufgabe, sondern vor allem eine inhaltliche Herausforderung. Um eine effektive und benutzerfreundliche Website zu schaffen, muss das Inhaltskonzept sorgfältig geplant werden. In unseren Workshops zur Erstellung eines Inhaltskonzepts bei einem Relaunch bearbeiten wir diese Schlüsselkomponenten: Struktur, Informationsarchitektur sowie Text- und Bildkonzept. Struktur Die Struktur einer Website bildet das Fundament ...

Mehr erfahren

UX / UI-Designer arbeiten an einem Webdesign

Das Zusammenspiel von UI/UX-Design und künstlicher Intelligenz

Die digitale Welt erlebt durch die Verschmelzung von Design und Technologie eine Revolution, an deren Spitze die künstliche Intelligenz (KI) steht. Dieser Beitrag wirft einen Blick auf die Grundlagen der KI, führt in das UX/UI-Design ein, untersucht wie der Designprozess von der KI bereichert werden kann und geht auf das Zusammenspiel von UI/UX-Design und künstlicher ...

Mehr erfahren

accessibility-im-ui-ux-design-richtlinien-fuer-barrierefreie-webseiten

Accessibility im UI/UX-Design: Richtlinien für barrierefreie Webseiten

So gut wie jeder hat heutzutage Zugriff auf das Internet. Doch nicht jeder kann die digitalen Inhalte gleichermaßen nutzen. Hier kommt die Accessibility im UI/UX-Design ins Spiel, die sicherstellt, dass Webseiten und Online-Dienste für alle Menschen, einschließlich jener mit Behinderungen, zugänglich sind. Dieser Blogbeitrag beleuchtet, was Accessibility bedeutet, ihre Wichtigkeit, die Vorteile eines barrierefreien Designs, ...

Mehr erfahren

Zwei Mitarbeiter betrachten ein Webdesign auf einem Tablet. Erfahren Sie, wie Design und Technologie zusammenkommen, um beeindruckende Benutzererfahrungen zu schaffen.

Die Kunst der Benutzerführung: Ein Blick in die Psychologie des UI/UX-Designs

Heutzutage ist die Benutzererfahrung (User Experience, UX) und das Benutzerinterface (User Interface, UI) von entscheidender Bedeutung für den Erfolg einer Webseite, einer App oder eines Produkts und gewinnt immer mehr an Bedeutung. Doch was genau macht gutes UI/UX-Design aus? Und warum ist es so wichtig? In diesem Blogbeitrag werden wir uns genauer mit der Psychologie ...

Mehr erfahren

Das Farbschema Ihres Webauftritts – Darauf müssen Sie bei der Entwicklung achten

Wie Farbpsychologie die Nutzererfahrung beeinflusst

In der Welt des Webdesigns und der Online-Marketingstrategien spielt Farbpsychologie eine entscheidende Rolle, wenn es darum geht, die Nutzererfahrung zu gestalten und zu verbessern. Die sorgfältige Auswahl und Anwendung von Farben kann nicht nur die Markenidentität stärken, sondern auch gezielt die Emotionen und Handlungen der Website-Besucher beeinflussen. In unserem heutigen Blogbeitrag tauchen wir tief in ...

Mehr erfahren

Zwei Mitarbeiter/innen am Tablet

10 grundlegende UI/UX-Designfehler, die Sie vermeiden sollten

Hohe Absprungraten, niedrige Konversionen und weitere Folgen, die auf Fehler im UI/UX-Design zurückzuführen sind, hinterlassen bei den meisten einen schlechten Beigeschmack. Fehler passieren – auch im UX-Design. Diese können jedoch frühzeitig erkannt und durch proaktives Handeln minimiert werden. Eine verbesserte Marktanalyse, nachhaltige Kundenbindung und klare Nutzerführung sind dabei entscheidend. Um Sie dabei zu unterstützen, haben ...

Mehr erfahren

Zwei Mitarbeiter betrachten ein Webdesign auf einem Rechner

Die Evolution von UI/UX Design: Vergangenheit, Gegenwart und Zukunft

Die Geschichte des UI/UX-Designs hat eine faszinierende Reise hinter sich. Von seinen Anfängen bis hin zu seiner entscheidenden Rolle bei der heutigen Gestaltung digitaler Benutzeroberflächen hat sich das UI/UX-Design ständig weiterentwickelt und verändert. In diesem Beitrag werden wir einen tiefen Einblick in die Vergangenheit, Gegenwart und Zukunft des UI/UX-Designs nehmen, um Ihnen wertvolle Einblicke zu ...

Mehr erfahren

Eine Person schreibt auf ein Whiteboard und verwendet dabei bunte Haftnotizen zur Visualisierung von Ideen.

6 Merkmale, dass Sie einen Website-Relaunch brauchen

Ihre Website ist mittlerweile schon älter und Sie spielen mit dem Gedanken, sie zu überarbeiten oder Relaunch zu starten? Aber ist das denn wirklich nötig? Wir zeigen Ihnen in diesem Beitrag wichtige Faktoren auf, an denen Sie erkennen, ob Ihre Website wirklich in die Jahre gekommen ist. Relaunch – Definition des Begriffs Ein Relaunch bezeichnet, ...

Mehr erfahren