13 Webdesign Hacks für ein optimales Benutzererlebnis

Wenn Sie eine Webseite zum Leben bringen wollen, ist das richtige Webdesign ein ausschlaggebender Faktor und sollte vorher gut geplant werden. Richtige Struktur, Navigation und visuelle Klarheit der angezeigten Informationen tragen unter anderem zu einem optimalen Benutzererlebnis bei. Im Folgenden werden wir Ihnen 13 Webdesign Hacks zeigen und wie Sie eine erfolgreiche und beliebte Website starten können.

Überblick

So einfach, wie möglich gestalten!

Wie oft passiert es Ihnen, dass Sie eine Webseite frustriert verlassen, weil Sie nicht das gefunden haben, wonach Sie eigentlich suchen. Das Webdesign hat zwar gut ausgesehen, aber die Funktionalität lässt zu wünschen übrig. Uns passiert das im Jahr 2021 nach wie vor tagtäglich. Wir wollen uns auf einer Seite regestrieren, aber müssen 10 min nach dem Button suchen, weil eine schöne Grafik diese bedeckt. 

Wir wollen etwas lesen, aber die ganze Zeit macht uns die Pop-up Werbung einen Strich durch die Rechnung. Das geht uns allen auf unsere Nerven, denn verschwendete Zeit ist Lebenszeit. Eines der wichtigsten Aspekte im Webdesign, welche zu Beginn des Entwurfs einer neuen Webseite in Betracht gezogen und konkretisiert werden sollte, ist das Ziel Ihrer Website.

Geht es darum Leads zu generieren, Produkte zu verkaufen, Anmeldezahlen zu erhöhen etc..
Wenn das Ziel Ihrer Website definiert ist, optimieren Sie die Seite genau mit Ihrem Ziel im Hintergedanken. Jede Seite auf Ihrer Website soll einen Beitrag zur Erfüllung dieses Zieles leisten.

Grafiken, Videos und Effekte, die nicht dazu beitragen, lenken vom Ziel ab und mindern somit die Benutzerfreundlichkeit Ihrer Seite.Halten Sie also die visuelle Komplexität möglichst gering, und präsentieren Sie nur die allernötigsten Informationen und jene die zum Erreichen des Zieles führen.

Beachte Sie hier das umso einfacher Ihre Seite gestaltet ist umso besser, denn sehr ausgeklügelte Designs können für Benutzer oft etwas überwältigend wirken. Das kann dazu führen, dass sie sich nicht auf Ihrer Homepage zurechtfinden. 

Wählen Sie also keine unübersichtlichen Strukturen, um Ihre Navigation möglichst einfach zu gestalten.

Verwenden Sie maximal 5 Farben auf Ihrer Website

Verzichten Sie auf zu viele Farben in Ihrem Design. Fragen Siesich hierbei, welche Emotionen Sie bei Besucher*innen hervorrufen sollen.Seien Sie sich bewusst, dass zu viele Farben zu viele Emotionen auslösen und damit mehr Verwirrung als Klarheit erzeugen, was vermutlich nicht Ihr Ziel ist.

Optimal sind laut das Handbook of Computer-Human Interaction  nicht mehr als 5 verschiedene Farben auf Ihrer Seite zu verwenden.Wenn Sie zum Beispiel Ruhe vermitteln wollen, weil Sie Yoga Kurse anbieten, macht es vermutlich keinen Sinn für Sie, ein schrilles und buntes Farbschema auszuwählen.

Verwenden Sie maximal drei Schriftarten und Größen!

Sowie mit Farben ist die Versuchung auch hier groß viele verschiedene Schriftarten und Schriftgrößen zu nutzen. Aber auch hier muss erwähnt werden, dass dies mehr zur Verwirrung und Ablenkung beiträgt und alles andere als Benutzerfreundlich ist.

Halten Sie es einfach und verwenden Sie maximal drei verschieden Schriftarten und Schriftgrößen.
Auch hier gilt die einfache Regel: “Less is more”.

Achten Sie auf die visuelle Hierarchie!

Im fiktiven Beispiel erkennt man durch die visuelle Hierarchie sofort um was es handelt.
Die Überschrift: “Musik for your ears” ist größer als alles Andere geschrieben und vermittelt den Besucher*innen  sofort um was es sich hier handelt. 

Die CTA (Call to Action)- Schaltfläche “Try it for free” ist links positioniert, weil die meisten Besucher*innen sich die Seite von links nach rechts anschauen (Gilt für Desktop). Wichtige Information soll daher eher links angeordnet werden. 

Simple Navigation.

Nicht nur Bilder tragen zu einer visuellen Klarheit der Seite bei, sondern auch die Navigationsoptionen, welche Sie dem Benutzer präsentieren. Auch hier sollte die Anzahl notwendiger Klicks möglichst gering gehalten werden. Ein paar der wichtigsten Tipps zur Navigation sind:

●  Das Hauptmenü einer Webseite sollte simpel sein. Die wichtigsten Optionen sollten einem direkt ins Auge stechen und sich am besten am oberen Rand der Seite befinden. Achten Sie hier, nicht zu viele Navigationsoptionen anzugeben. 

●  Zeigen Sie dem Benutzer stets, wo auf Ihrer Seite er sich gerade befindet. Dadurch wird jegliche Verwirrung bei der Navigation beseitigt.

●  Die Fußzeile Ihrer Website sollte auch eine eigene Navigation enthalten, damit der Benutzer nicht mühsam wieder nach oben scrollen muss. 

●   Fügen Sie eine Suchfunktion hinzu, damit Besucher*innen schnell und einfach nach dem Suchen können, wonach sie wollen. Beachten Sie hier, dass dies nicht für jede Seite wichtig ist. Vor allem für E-commerce ist das aber sehr hilfreich.

●  Die Navigation soll auf jeder Seite Ihrer Webseite gleich bleiben.

Die CTA- Schaltfläche ist auch die einzige Komponente, was im dunklen rot gehalten ist, mit dem Ziel die Aufmerksamkeit der Besucher*innen zu lenken.Alles in allem wird das wichtigste hier ganz deutlich hervorgehoben. In diesem Beispiel durch die Schriftgröße, die Position und Farbe des Textes. Auch hier verbessert die visuelle Hierarchie die Benutzerfreundlichkeit der Website

Bewahren Sie die Einheitlichkeit Ihrer Website.

Die ganze Website soll als einheitliches Produkt in Erscheinung  treten. Um auch hier Verwirrung zu vermeiden, achten Sie auf eine einheitliche Gestaltung. Das heißt, versuchen Sie so gut wie möglich Hintergründe, Layout, Schriftarten, Stil Ihrer Texte und Farbschemata zu vereinheitlichen.

Alternativ können Sie auch verschiedene Teilbereiche Ihrer Website vereinheitlichen und z.B. ein einheitliches Layout für Hilfsseiten erstellen und dafür ein anderes aber einheitliches Layout  für Informationsseiten erstellen. Damit wird den  Besucher*innen immer vermittelt, wo sie sich gerade auf der Seite befinden.

Responsive Website

Um die Benutzerfreundlichkeit auf allen Geräten und Browsern zu gewährleisten, brauchen Sie eine responsive Webdesign. Wie im vorangehenden Bild werden die Inhalte automatisch an die Größe desjenigen Gerätes angepasst. 

Noch nie war es wichtiger ein Responsive Webdesign umzusetzen, denn in den letzten 10 Jahren hat sich das User Verhalten stark verändert. Kamen im Jahr 2007 noch ganz klar die Besucher*innen von einem Desktop, surfen seit 2015 die meisten User mit ihrem Smartphone das World Wide Web.

Webdesign Agentur aus Wien | Level102

Bauen Sie Bilder mit Menschen ein.

Nicht nur in ihrem persönlichen Umfeld wollen sich Menschen mit anderen verbunden fühlen, sondern auch im Internet. Deshalb ist das Zeigen von Personen in Bildern ein unglaublich wichtiges Element beim Entwurf einer Homepage. 

Wenn man einen fröhlichen Menschen auf seinem Bildschirm sieht, fühlt man sich geborgener. Dadurch verbringt man mehr Zeit auf der Seite. Am besten ist es wenn Sie  Bilder verwenden, die Sie selbst gemacht hast. Das kommt authentischer rüber und wirkt besser.

Es reichen aber auch Stockfotos aus, die Sie auf Seiten, wie Pixabay  oder Pexel großteils gratis runterladen können. Beachten Sie jedoch, dass die Bilder, die Sie verwenden einen Zusammenhang haben sollten mit dem Thema, den Sie behandeln.

 

Lenken Sie die Aufmerksamkeit der Besucher*innen.

Bilder mit Menschen zu zeigen, kann auch einen anderen Vorteil haben, den wir in diesem Punkt ansprechen. Ein freundliches Gesicht bringt Besucher dazu, dieses anzusehen und unterbewusst zu analysieren. 

Mit der Blickrichtung eines Menschen in den Bildern kann aber auch der Blick Ihrer Besucher gesteuert werden. Menschen neigen nämlich dazu, in die gleiche Richtung zu schauen wie Leute, die sie in Bildern oder Werbungen sehen. Dadurch kann ihre Aufmerksamkeit auf ein gewisses Element in Ihrer Webseite gelenkt werden.

Vermeiden Sie Slider

Slider sehen nach einer guten Möglichkeit aus, Ihre Website einfach und unkompliziert zu gestalten und so ein möglichst kompaktes Design zu erhalten. Nun fragen Sie sich vermutlich was ein Slider ist. Slider: Ein großes Element, das zum Beispiel Bilder enthält, welche von links nach rechts in einem gewissen Zeitabstand nach der Reihe angezeigt werden.

Slider werden zwar gerne genutzt, verschlechtert aber oft signifikant die Userexperience. Warum z.B. Slider nicht besonders Userfreundlich sind, illustriert Jared W Smith perfekt auf seiner Seite: Should I Use a Carousel. Wenn Sie auf Slider trotzdem nicht verzichten wollen, dann stellen Sie sicher, das sie nicht automatisch von links nach recht s angezeigt werden, sondern manuell vom User bedient werden muss.

Halten Sie an Bewährtem fest.

Ich weiß Ihre Website soll speziell und anders aussehen. Sie soll hervorstechen und alles andere in den Schatten stellen. Ich stimme Ihnen zu, aber Sie sollten hier nicht über die Stränge schlagen. Wie bereits erwähnt, geht es letztlich darum Ihren Besuchern so einfach, wie möglich zu machen. Wenn alles anders ist, können Siedies nicht gewährleisten und das führt dazu die Benutzer nur verwirrt sind.

Stellen Sie sich vor Sie stehst vor der Ampel und die Farbe grün stünde für Halt. Sie wären verwirrt oder nicht? Und genau das wollen wir verhindern. Halten Sie sich daher zumindestens an folgenden etablierten Konventionen:

  • Ihr Logo soll anklickbar sein und den Benutzer zurück zur Startseite bringen.
  • Ihr Logo soll links oder in der Mitte der Seite befinden.
  • Die Hauptnavigation Ihrer Seite sollte sich oben oder links befinden.
  • Links auf Ihrer Seite sollten die Farbe ändern, wenn Sie sich mit Ihrem Mauszeiger darüber bewegen.

Social Proof ist wichtig!

Menschen sind von Grund auf soziale Wesen. Wie bereits oben angesprochen, wollen wir gerne andere Menschen sehen, um uns geborgener zu fühlen. Wir möchten uns auch sicher sein können, dass eine Webseite von guter Qualität ist. Aber nicht nur Bilder sprechen Benutzer an, sondern auch von anderen Besuchern geschriebene Texte, wie zum Beispiel Rezensionen oder Kommentare. 

Wenn ein Gast sieht, dass andere Leute bereits auf Ihrer Seite war und ihnen diese sehr gefallen hat, werden auch diese mehr Zeit auf Ihrer Seite verbringen. Also verwenden Sie Rezensionen und Testimonials zu Ihrem Vorteil. Diese sollen aber immer der Wahrheit entsprechen.

Stellen Sie Ihre Zielgruppe in den Mittelpunkt.

Die Tipps bringen sich alle nichts, solange Sie Ihre Zielgruppe nicht in und auswendig kennst.

  • Welche Begriffe verwendet Ihre Zielgruppe?
  • Was ist für Ihre Zielgruppe wichtig?
  • Mit welchen Problemen sind sie konfrontiert?
  • Wie lösen Sie ihre Probleme? 

Um eine benutzerfreundliche Seite sicherzustellen zu können, müssen Sie Ihre Zielgruppe kennen. Für wen gestalten Sie Ihre Website ist die erste Frage mit der Sie konfrontiert sind. Dann geht es nur mehr darum diese mit Ihrer Seite zufriedenzustellen und Nutzer in den Mittelpunkt zu bringen. 

Fazit

Wie Sie sehen, gibt es doch einige wichtige Punkte, welche Sie beim Erstellen und Entwerfen Ihrer eigenen Netzpräsenz beachten sollten. Von der allgemeinen Struktur der Webseite mit Navigation und Hierarchie bis hin zur richtigen Sortierung von Listen. Auch die Auswahl der richtigen Bilder sowie weitere Details können dazu beitragen, Ihren Benutzern das bestmögliche Erlebnis zu bieten. Behalten Sie hier immer in den Blickpunkt, wer Ihre Zielgruppe ist und fragen Sie sich wie Sie das Nutzererlebnis derer verbessern können.

Gefällt ihnen dieser blog?

Teilen Sie den Beitrag auf social media!

Danke

Abonnieren Sie unseren Newsletter und bleiben Sie am neuesten Stand!