29 Webdesign Tipps für 2021

Webdesign Tipps und Tricks auf wissenschaftlicher Basis. Aufbereitet als Infografik.

In diesem Beitrag zeigen wir dir 29 Webdesign Tipps, die auf wissenschaftlichen Erkenntnissen beruhen.

1. Gestalte den ersten Eindruck deiner User positiv

Zunächst wollen wir über den oberen Bereich einer Website sprechen. Hier befinden sich klassischerweise das Menü und das Logo. Gleichzeitig ist dieser Teil deiner Webseite besonders wichtig, da 99% der Besucher diesen als erstes sehen. Trifft der User schon am Anfang auf eine unübersichtliche Navigation und ein minderwertiges Logo, wird er deine Seite sofort wieder verlassen. Deswegen muss dieser Bereich besonders intuitiv und klar gestaltet sein.

Die Faustregel lautet hier: Verwende maximal 5 Menüpunkte. Denn die Hicksche Regel besagt, dass bei einer geringeren Anzahl an Auswahlmöglichkeiten eher eine Entscheidung getroffen wird. Mehr Menüpunkte führen eben nicht zu mehr Klicks.

Den ersten Eindruck prägt aber vor allem auch das Logo. Dieses befindet sich klassischerweise oben links und damit genau da, wo der erste Blick der Besucher hinfällt. Allerdings ist die Änderung des Logos oftmals nicht möglich, da dieses bereits als Bildmarke eingetragen ist oder aus anderen Gründen nicht verändert werden kann oder soll. Wer jedoch auf der Suche nach einem neuen Logo ist, der sollte sich auf zwei Farben fokussieren. Denn in einer Untersuchung der Top-Marken kam heraus, dass 95% dieser erfolgreichen Designs aus maximal zwei Farben bestehen.

2. Platziere wichtige Inhalte „Above the Fold“

Jeder von uns weiß, dass die wichtigsten Schlagzeilen auf der Titelseite jeder Zeitung stehen. Aber nicht auf der gesamten Seite, sondern in der oberen Hälfte der ersten Seite. Das ist genau der Bereich, den man auf den ersten Blick sieht, auch wenn die Zeitung noch gefaltet ist. Auch im heutigen Zeitalter hat diese Regel noch ihre Gültigkeit, denn der Benutzer verbringt circa 80% seiner Zeit in genau diesem Bereich deiner Webseite.

Basierend auf dieser Information könntest du jetzt auf die Idee kommen, dass du durch ein Slider-Element besonders viel Content prominent platzierst. Das ist eine ganz schlechte Idee. Denn zahlreiche Eye-Tracking-Studien beweisen, dass diese Slider-Inhalte fast gänzlich vom Nutzer ignoriert werden. Damit erreichst du also das ganze Gegenteil von dem, was du eigentlich wolltest.

3. Konzentriere dich auf die linke Seite

Wir Deutschen lesen wie die meisten Menschen von links nach rechts. Jetzt stellt sich die Frage, ob Elemente auf der linken Seite stärker beachtet werden als auf der rechten Seite. Und genau dies wurde in einer Studie bewiesen. Circa 80% Ihrer Aufmerksamkeit widmen Seitenbesucher der linken Hälfte, während die andere Seite nur 20% erhält.

Nutze diese Erkenntnis und optimiere deine Inhalte so, dass die Wichtigkeit von links nach rechts abnimmt.

4. Text ist nicht gleich Text

Viele denken, dass man in Sachen textueller Content wenig falsch machen kann. Das stimmt nicht ganz. Denn immer wieder stoßen wir auf Websites, deren Inhalte durch die Wahl einer schlechten Schriftart kaum lesbar sind. Auch wenn es jedem klar sein sollte: Verwende für deinen Inhaltstext eine Schrift ohne Serifen. (z.B. Roboto)

Wer das alles zu langweilig findet, der kann für die Überschriften eine Schriftart mit Serifen wählen. Denn wenn sich Überschriften signifikant vom Text unterscheiden, dann finden deine Besucher schneller, was sie suchen. Dies wird durch eine Eye-Tracking-Studie der Norman-Nielsen-Group belegt.

Ein weiteres wissenschaftliches Phänomen ist der Primacy-Recency-Effect. Dieser besagt, dass sich die Menschen besonders gut an frühe und spät eingehende Informationen erinnern. Beachte dies bei der Erstellung von Texten und packe die wichtigen Infos nicht nur in den ersten Teil deines Contents, sondern auch in den Schlussteil.

5. Beschrifte deine Icons

Icons sind eine hervorragende Möglichkeit, um deine angebotenen Dienste und Produkte visuell zu untermalen. Da bildliche Inhalte von unserem Gehirn viel schneller bearbeitet werden, erhöht sich in der Regel die Usability deiner Seite.

Nichtsdestotrotz reicht es nicht aus, nur Icons zu verwenden. Du brauchst auch eine Beschriftung für diese, um die Bedeutung klar zu machen. Gerade wenn du Custom Icons verwendest, ist die Icon Usability wichtig, um Mehrdeutigkeiten zu vermeiden.

Natürlich benötigst du für ein E-Mail Icon oder für ein Hamburger Symbol keine Beschriftung!

6. Vergesst dekorative Bilder!

Fotos und Bilder, die auf deiner Webseite nur zu dekorativen Zwecken vorhanden sind und keinen Grund haben, sind sinnlos. Diese werden von Usern gänzlich ignoriert, wie die Norman Nielsen Group mit einer Eye-Tracking Untersuchung herausgefunden hat.

Deshalb lasse unnötige Fotos einfach weg, das fördert auch deinen Page-Speed.

Wer sich jetzt fragt, welche Bilder stattdessen verwendet werden sollen, für den haben wir auch eine Antwort:

Bilder von echten Menschen. Von deinem Team und von dir. Zeige deinem User auf wessen Internetseite er unterwegs ist. Das erhöht die Aufmerksamkeit und die Conversion.

7. Testimonials sind Trumpf

Wenn du es geschafft hast, Besucher auf deine Seite zu leiten und Traffic zu generieren, musst du diese auch von dir und deinen Produkten überzeugen. Gute Produkte reichen alleine oft nicht aus. Viel wichtiger ist, dass der Kunde dir vertraut.

Doch was schafft Vertrauen? Das höchste Vertrauen schafft sicherlich die Empfehlung von jemanden, den wir persönlich kennen und schätzen. Allerdings hat eine Befragung ergeben, das 70% der Teilnehmer auch auf Empfehlungen von fremden Personen vertrauen.

Natürlich ist der Aufbau von Empfehlungen mühsam und oft denken deine zufriedenen Kunden einfach nicht daran, dir ein Testimonial abzugeben. Deshalb musst du diese direkt darauf hinweisen. Das macht sich dann in einer Umsatzsteigerung von 62% bemerkbar, wie eine Studie herausgefunden hat.

Du könntest jetzt natürlich denken, dass du hunderte Empfehlungen einholen musst. Das stimmt allerdings nicht. Denn 73% der Teilnehmer dieser Studie schauten sich maximal 6 Testimonials an, bevor sie eine Kaufentscheidung trafen.

8. So lenkst du die Aufmerksamkeit auf deine CTA-Buttons

Die meisten von uns betreiben ihre Website nicht zum Spaß sondern mit dem Ziel, eine spezielle Handlung beim Besucher zu bewirken. Viele von euch und auch wir möchten mit unserer Seite Leads generieren. Im Idealfall klickt der User auf einen CTA-Button und landet direkt in unserem Formular und schickt eine Anfrage. Soweit die Theorie.

Viele Studien haben sich damit beschäftigt, wann ein User eher auf einen Call to Action klickt und wann dies nicht der Fall ist:

Besonders die Farbe rot hat in einer Untersuchung zu einer um 24% erhöhten Click-Through-Rate geführt.

Ganz wichtig ist auch, dass deine CTA das gleiche Aussehen haben wie Buttons. Denn wir Nutzer haben uns über Jahre daran gewöhnt, auf diese Felder zu klicken. Dies zeigt auch eine Case-Study, bei der eine 45% höhere Klickrate erzielt wurde.

Wer CTA in seine Blogbeiträge einbauen möchte, sollte dies nicht Above-The-Fold tun. Dies hat Neil Patel herausgefunden, denn auf seiner Seite verringerten sich dadurch die Klicks.

Zusätzlich sind die Erkenntnisse von ContentVerve wichtig für dich. Das Unternehmen konnte seine Klickrate um 90% steigern, indem sie die „erste Person“ als Ansprache wählten. Aus „Jetzt deine Website optimieren“ sollte idealerweise „Jetzt meine Website optimieren“ werden.

9. Darum solltest du nicht zu viele Formularfelder haben

Umso mehr Informationen wir von unseren potenziellen Kunden haben, desto besser. Soweit so klar. Jedes Unternehmen muss seine Kunden gut kennen. Wer jetzt auf die Idee kommt, diese Informationen bereits ganz am Anfang beim Ausfüllen des Formulars einzuholen, macht einen elementaren Fehler.

Denn die Anzahl der Formularfelder hängt direkt mit der Conversion-Rate zusammen. Je mehr Felder ein interessierter User ausfüllen muss, desto geringer ist dessen Bereitschaft, genau dies zu tun.

Durch die Verringerung der Formularfelder von 11 auf 4 erzielte Imagescape in einer Fallstudie eine Steigerung der Conversion-Rate um 120% auf seiner Webseite.

Konzentriere dich deshalb nur auf die wichtigsten Informationen. Generell reicht den meisten Unternehmen bereits eine E-Mail-Adresse aus, um nach der Lead-Generierung mit dem Interessenten in Kontakt zu treten.

Die wichtigsten Webdesign Tipps kurz zusammengefasst

  1. Verwende maximal 5 Menüpunkte
  2. Platziere wichtige Inhalte „Above-the-Fold“
  3. Verzichte auf Slider Elemente
  4. Konzentriere dich auf die linke Seite
  5. Vermeide Schriftarten mit Serifen
  6. Weniger Formularfelder erhöhen deine Conversion-Rate

Alle weiteren Tipps findest du in unserer Infografik.

Infografik mit allen Webdesign Tipps & Tricks

Webdesign Tipps Infografik

Wir freuen uns auf Sie!

© Grafikingenieur 2021 | Made in Würzburg | Impressum & Datenschutz