6 häufige Webdesign-Fehler - und Lösungen, wie du es besser machst

Im Schnitt rufe ich rund 455 verschiedene Internetseiten am Tag auf. Dabei fallen mir häufig immer wieder die gleichen “Fehler” in Sachen Webdesign auf. Das können Kleinigkeiten wie ein schlecht lesbares Typeface oder aber ein Call to Action sein, welcher sich nicht wirklich vom Content abhebt. Zugegeben: Als Webdesigner achte ich automatisch darauf, trotzdem lassen sich die meisten "Fehler" ziemlich einfach beheben. In diesem Artikel gebe ich dir die passenden Lösungen direkt an die Hand.

Veröffentlicht am
13
.
January
2022
Aktualisiert am
.
Lesedauer
9 Minuten
Kategorie
Webdesign
Darum gehts
  • Die häufigsten Gestaltungsfehler auf Webseiten und Tipps, um diese in den Griff zu bekommen
  • Deine Zielgruppe hat vielleicht ganz andere Wünsche an eine Website als du selbst bietest

01 Schlecht lesbare Typografie

Beim Thema Typografie scheiden sich die Geister nicht ganz ohne Grund. Denn eine hochwertige Font ist besonders auf kleineren Endgeräten enorm wichtig. Eine gute Schriftart lässt sich sowohl in großen und kleinen Schriftgrößen mühelos lesen. Viel zu oft sehe ich Websites, welche ihre Leser* mit einer 14 Pixel kleinen Font begrüßen.

Das macht sowohl auf dem Smartphone als auch auf einem hochauflösenden Desktop-Display keinen Spaß. Ein weiteres Problem ist eine zu geringe line-height, also die Zeilenhöhe. Auch hier leidet die Lesbarkeit - besonders bei kleinen Texten.

Verwende daher in deinen Website-Projekten eine Schriftgröße von mindestens 16, besser 18 Pixeln. Oder mache dich gleich mit den Einheiten "em" und "rem" vertraut. Du kannst die Lesbarkeit deiner Fließtexte verbessern, indem du die Zeilenhöhe erhöhst.

Bei kleineren H5 oder H6 Überschriften kannst du zudem den Wert des Letter Spacing, also den Abstand zwischen den einzelnen Buchstaben, erhöhen. Das reicht dir noch nicht? Dann probiere es einmal mit dem CSS-Wert "text-transform: capitalize" - hier werden alle Buchstaben in Großschrift transformiert, was besonders bei kleinen Schriftgrößen eine deutlich bessere Lesbarkeit nach sich zieht.

Zugegeben, ein krasses Beispiel: Links die berühmt-berüchtigte und nur schwer lesbare Comic Sans Font, auf der rechten Seite Helvetica mit 18 Pixeln und 24 Pixeln Zeilenabstand.

02 Das Hamburger-Menü: Fluch und Segen zugleich?

Bei der Verwendung der sogenannten Hamburger-Navigation gehen die Meinungen extrem weit auseinander. Die einen Webdesigner lieben sie, die anderen hassen sie (auf Desktop-Geräten!). Bis vor wenigen Jahren waren sie im Trend und man traf sie auf vielen Websites an, um einen minimalistischen Look zu erzeugen.

Jedoch darf dabei nicht die im direkten Vergleich zur konservativen Website-Navigation schlechtere User Experience aus den Augen gelassen werden. Der Nutzer muss einen ersten Klick machen, um einen Überblick der Website-Inhalte zu erhalten. Je nach Zielgruppe ist die Gefahr gegeben, dass der Besucher das Hamburger-Icon und dessen Verwendung gar nicht kennt oder im schlimmsten Fall übersieht.

Mache es deinem Besucher so einfach wie nur möglich sich einen Eindruck über die verschiedenen Inhalte machen zu können. In der Regel lassen sich 5-7 Navigationspunkte locker in der klassischen Ansicht darstellen. Verfügt deine Website über weitere Unterseiten, so kannst du entweder auf ein sogenanntes Mega-Menü oder aber auf ein Drop-down-Menü zurückgreifen.

Soll es wirklich zwingend eine Hamburger-Navigation werden, so solltest du deinen Besuchern den Hinweis geben, dass sich hinter diesem Icon die Navigation befindet. Weitere Tipps für deine Navigation habe ich in diesem Artikel ("8 Tipps für eine perfekte Website-Navigation" →) für dich zusammengefasst.

03 Text auf Bild

Anfang der 2010er-Jahre kam ein neuer Webdesign-Trend auf: Die Verwendung von vollflächigen Hero-Images auf einer Website. Ich persönlich liebe große und eindrucksvolle Bilder. Die Kombination aus Bild und Text ist jedoch nicht ganz einfach, denn die Lesbarkeit des Textes kann je nach Farbumfang sehr leiden.

Ragt ein Teil der weißen Überschrift in einen hellen Bildbereich, so wird es für jeden Leser schwer, diesen zu identifizieren.

Mit einem halbtransparenten Verlaufsfilter kannst du die Lesbarkeit von Text deutlich erhöhen und musst dabei nicht einmal auf die ungeliebten und altmodischen Konturen zurückgreifen. In Website-Tools wie Webflow oder Wix kannst du diese Verläufe ganz einfach über einzelne Sektionen oder Boxen legen und diese nach deinen Bedürfnissen anpassen.

Somit hast du jederzeit die volle Kontrolle und kannst auch deine Textdarstellung individualisieren.

Der Text lässt sich in der Größe von 40 Pixeln zwar lesen, wird jedoch nicht sofort wahrgenommen, da der Fokus zuerst auf dem Stuhl liegt.

04 Unseriöses Webdesign

Mit hoher Wahrscheinlichkeit bist du diesem Phänomen selbst schon einmal begegnet: Du rufst eine Website auf und irgendwas kommt dir mächtig verdächtig vor. Während der Mensch nur wenige Sekunden benötigt, um sich einen ersten Eindruck einer Internetseite zu machen, Bilder und die Navigation zu checken, so entscheidet er gleichzeitig: Hot or Not.

Deswegen ist eine direkte Ansage an den Besucher auch nie zu unterschätzen. Nichtsdestotrotz gibt es so einige Merkmale, welche Alarmglocken sofort in meinem Kopf klingeln lassen. Viele Rechtschreibfehler, keine Persönlichkeit oder das Fehlen der klassischen "Über uns"-Seite sind nur ein kleiner Auszug aus dem "Wie gestalte ich eine nicht-vertrauenswürdige Internetseite"-Ratgeber.

Du möchtest es besser machen? Finde ich toll! Dann versetze dich stets in deine Zielgruppe und frage dich selbst: Wirkt meine eigene Website vertrauensvoll? Verzichte auf unnötige Stockfotos, zeige dich und deine Geschichte, teile deine Vision mit deinen Lesern.

Weitere Merkmaler einer verdächtigen Website und Tipps, um genau diesen Eindruck zu vermeiden, findest du in meinem Artikel "11 Tipps, um das Vertrauen in deine Website zu erhöhen" →

Hier macht der Webmaster kein Geheimnis daraus, dass es sich bei den Produkten um gefälschte Ware handelt. Die Bilder sehen unprofessionell aus, zudem gibt es Rechtschreibfehler. Oder kennt jemand dieses "Juwentus"?

05 Content-Overload

Gibt es eigentlich zu viel Content auf einer Website? Die Antwort wird dich vielleicht überraschen: Nein, gibt es nicht. Es kommt aber immer auf die Darstellung deiner Daten an. Niemand hat Zeit und Lust, sich endlose unstrukturierte Beiträge oder Videos anzuschauen. Eine Überfrachtung führt schnell zu Überforderung und somit zu einem direkten Exit deines Besuchers, der vielleicht nach einer schnelleren Lösung sucht.

Mache es deinen Nutzern so einfach wie möglich deine Inhalte zu konsumieren. Du investierst mit Sicherheit einige Zeit darin, also sollte sich dieser Aufwand auch für dich lohnen. Manche Menschen überfliegen deine Inhalte nur, untermauer deine Aussagen entsprechend mit Bildern, Screenshots, Videos oder Infografiken.

Auf diese Weise interagieren Nutzer länger mit deinem Content und treiben die Verweildauer nach oben - ein positives Signal für Suchmaschinen wie Google. Bei umfangreichen Blogartikeln solltest du ein Inhaltsverzeichnis mit Sprungmarken bereitstellen.

Bereite deinen Leser zudem mit einer Einleitung auf deinen Text vor, mache ihm das Lesen schmackhaft, indem du ihm sofort erklärst, was er auf dieser Seite lernen wird.

06 Das “Guessing-Game”: Höre deiner Zielgruppe zu

Nicht selten werden wir mit Internetseiten und Content ohne wirklichen Handlungsaufruf konfrontiert. Besonders auf der Startseite bzw. im ersten sichtbaren Bereich der Landingpage muss sofort klar ersichtlich sein, was hier vom Nutzer erwartet wird. Dafür kannst du sogenannte Call to Actions (CtA) zurückgreifen.

Die meisten Webdesigner verwenden sie, um so eine optische Trennung vom umliegenden Content zu erzeugen und somit die Aufmerksamkeit zu erhöhen.

Eine der wichtigsten Regeln im User Experience Design: Vertraue niemals darauf, dass der Nutzer auf deiner Website das macht, was du von ihm erwartest. Mit grafischen Elementen wie Buttons kannst du ihn aber leicht an das von dir gewünschte Ziel bringen. Ein weiterer Todesstoß kann eine zu komplexe Struktur deiner Website sein.

Mache es deinen Besuchern so einfach wie möglich, sich mit Content und deren Zielen auseinanderzusetzen. Beispiel: Eine günstige Airline aus Irland war für ihre Umwege bei den Buchungen berühmt-berüchtigt. Schnell wurden aus den niedrigen Flugpreisen hohe Summen, denn es wurden einige Stolpersteine in den Weg gelegt.

Der Kunde musste keine Service-Dienstleistungen hinzufügen, sondern diese aktiv ablehnen. Diese waren teilweise so stark versteckt, dass die Nutzer die Buchungen abbrachen.

Um dies zu verhindern, kannst du Zeit und Geld in einen guten UX-Designer investieren, welcher dich bei deinen Zielen unterstützt. Er analysiert deine bestehende Website oder App, führt Interviews mit deinen Kunden bzw. deiner Zielgruppe durch, um das Angebot zu optimieren. Das kannst du natürlich zum großen Teil auch in die eigenen Hände nehmen, ein externer Dienstleister dient als kompetente Abkürzung.

07 Fazit

Die oben genannten "Fehler" (ich finde das Wort einfach blöd, denn besonders Design sollte immer einen ausreichend großen Spielraum an Kreativität haben und wird allgemein immer individuell betrachtet) wirst du mit großer Wahrscheinlichkeit schon einmal gesehen haben.

Das ist erst einmal nichts Schlimmes und die allermeisten lassen sich mit wenigen Klicks beheben oder im Vorfeld verhindern. Die Masse machts dann aber leider nicht besser. Sorge also dafür, dass der Nutzer die allerbeste Erfahrung mit deiner Website oder App erlebt und dich uneingeschränkt weiterempfehlen würde.

Steve von wyreframe
Webdesigner
* Um den Lesefluss nicht zu beeinträchtigen wird zwar nur die männliche Form genannt, stets aber die weibliche Form gleichermaßen mitgemeint. Menschen jeglichen Geschlechts sind mir als Leser*innen herzlich willkommen 🌈❤️

Ähnliche Artikel

Dir gefällt was du siehst?

Du möchtest in eine neue Website investieren und bist auf der Suche nach einem professionellen Webdesigner? Lass uns unverbindlich über deine Probleme, Wünsche und Projektziele reden. Sende mir einfach eine Projektanfrage und wir gehen es an!