Website Usability und WordPress

Veröffentlicht von in Webdesign, WordPress

 

Benutzerfreundlichkeit, englisch: Website Usability ist ein entscheidendes Kriterium für den Erfolg Ihrer Website. In diesem Artikel mache ich Sie mit den Grundlagen der UX (User EXperience = Nutzererfahrung) vertraut. Anhand einer Checkliste am Ende dieses Beitrages können Sie die Website Usability Ihres Internetauftrittes überprüfen.

Ohne gute Website Usability ist es schwierig zu entdecken, wie innovativ Ihre Ideen, wie erstklassig Ihre Produkte oder wie ansprechend Ihre Grafiken sind. Ein mangelhaftes Konzept, eine undurchsichtige Navigation oder auch ein schlechtes Layout machen es Ihren Usern schwer, sich auf Ihrer Website zu orientieren.

Website Usability WordPressEigentlich kaum zu glauben: Auch zehn Jahre nach Jakob Nielsens wegweisendem Buch: Designing Website Usability gibt es immer noch viel zu viele Internetseiten, die grundlegende UX-Regeln verletzen. Eine gute Nachricht ist jedoch, dass es zum Beispiel mit Hilfe von WordPress recht einfach ist, eine gut angelegte Benutzerfreundlichkeit zu erreichen. Aber auch wenn Sie WordPress nicht verwenden finden Sie hier viele Hinweise, wie Sie die Benutzerfreundlichkeit Ihrer Website erhöhen.

Regel #1
Nicht dem User die Arbeit überlassen

Dafür gibt es kein Pardon: Besucher Ihrer Website müssen nach Inhalten suchen, die sie interessieren. Die Ausrede – Wer sucht, der findet – gilt nicht. Als Inhaber der Website liegt es in Ihrer Verantwortung sicherzustellen, dass alles leicht zu finden ist. Und zwar genau dort, wo Ihr Website-Besucher erwarten, dass es zu finden ist.

Saubere Navigationsmenüs sind für eine
gute Website Usability ein absolutes Muss

Position
Menüs müssen in der Regel in der Kopfzeile oder an der linken Seite Ihrer Website positioniert werden. In seltenen Ausnahmen können Sie auch am Fusse einer Website platziert werden, aber nur dann, wenn sie am unteren Rand des Browserfensters fixiert sind, also nicht aus dem Blickfeld des Benutzers geraten können.

An der rechten Bildleiste positioniert, kann das Menü bei einer geringeren Bildschirmauflösung schnell aus dem Blickfeld geraten und Ihre User müssen scrollen, um das Menü zu erreichen. Das wollen weder Sie, noch die Besucher Ihrer Website.

Sticky Menues
Bei Menüs in der Kopfzeile setzt sich mehr und mehr durch, sie “sticky” auszulegen. Dass bedeutet: Beim Herunterscrollen der Website bleiben diese Menüs stets im Blickfeld des Betrachters. >> Ein Beispiel für ein Sticky-Menue finden Sie hier.

Go-To-Top-Button
Möchten Sie kein Sticky Menü nutzen, sollten Sie einen so genannten Go-To-Top-Button nutzen. Wenn Sie meinen Artikel bis hier hin gelesen haben, dann sehen Sie rechts unten den Go-To-Top-Button meines Blogs. Er erscheint, sobald Sie diese Beitragsseite soweit herunter gescrollt haben, dass das Menü aus dem Blickfeld gerät. Klicken Sie auf den Button scrollt die Website automatisch zurück nach oben. Ich benütze hierfür das WordPress-Plugin Dynamic to Top.

Es spricht übrigens überhaupt nicht dagegen, Sticky Menues und Go-To-Top-Buttons miteinander zu kombinieren. Befolgen Sie einfach die goldene Usability-Regel: Machen Sie es Ihrem User so einfach wie möglich.

Einfach Klicken
Widerspenstige Dropdown-Menüs und Symbolleisten, die genau so schnell verschwinden, wie Sie unvermutet aufpoppen, sind Mist. Das gleiche gilt für millimetergenau mit der Maus anzusteuernde Menüs. Sie sind nicht nur ärgerlich, sie frustrieren Ihre Besucher. Damit kämpft sich niemand lange ab. Und weg ist Ihr Website-Besucher …

Wenn Sie mit diesem Problem auf Ihrer Website zu tun haben, dann müssen Sie sich mit dem CSS Ihrer Website beschäftigen (oder jemanden finden, der sich damit auskennt). Dort können Sie in der Regel Abstände der einzelnen Menüpunkte, sowie Reaktionszeiten der Pulldowns etc. einstellen. Sollten Sie das Content Management WordPress verwenden und mit dem Menü Ihres Themes nicht einverstanden sein, sollten Sie über einen möglichen Wechsel nachdenken. Gute WordPress Premium-Themes finden Sie hier:

* Dieser Link ist ein "Affiliate-Link". Dies bedeutet, wenn Sie auf diesen Link klicken und ein Theme von Elegant Themes erwerben, erhalte ich eine Affiliate-Provision.

Übervolle oder zu viele Menüs
Sie haben viel zu sagen. Das ist gut. Organisieren Sie Ihre Inhalte. Versetzen Sie sich in die Lage Ihrer Leser. Was wollen Sie lesen? Wie finden Sie die entsprechenden Inhalte? Erstellen Sie ein Navigationskonzept. Reduzieren Sie Ihre Hauptnavigationselemente auf fünf bis sieben Punkte. Benennen Sie so, dass alle Unterpunkte dort sinnvoll und vor allem für Ihre Leser nachvollziehbar einsortiert sind. Ein wichtiger Aspekt der Website Usability ist die Transparenz Ihrer Website für Ihre Nutzer. Sie sollen einfach und bequem finden, was Sie anbieten. 

Verzichten Sie auf zu viele Menüs. Gerne werden zusätzliche Menüs im Footer einer Website, oder auf irgendwelchen Sidebars untergebracht. Das verursacht Unübersichtlichkeit und das erzeugt wiederum Frustration bei Ihren Nutzern.

Footermenüs
Footermenüs sind ein wunderbarer Ort, um Rechtliches, also Impressum, Haftungsausschluss und Datenschutzlinks unterzubringen. Diese Inhalte “verstopfen” das Hauptmenü. Aber dies sind Pflichtangaben und müssen in Deutschland von jeder Seite Ihrer Website auffindbar sowie erreichbar sein. Auch ein weiterer Link zum Kontaktbereich, einem Kontaktformular, oder zur Anfahrt z.B. via Google Maps lassen sich gut im Footermenü unterbringen, ebenso ein Link “Über mich/Uns”. Diese Links sollten aber ebenso über das Hauptmenü erreichbar sein.
Wichtig: Die Nutzer Ihrer Website sollten bequem Kontakt mit Ihnen aufnehmen können, verstecken Sie also Ihren Kontaktbereich nicht!

website usability wordpress footermenuesUnterlassen Sie es aber unter allen Umständen, weitere “wichtige” Rubriken Ihrer Inhalte in ein Footeremenü zu packen. Dort gehen Sie in der Regel unter. Gute Website Usebilty ist, wenn Sie am Ende eines Artikels – also am Fuss der Seite – auf weitere Artikel hinweisen wollen, so wie ich in diesem Blog.

Legen Sie hierfür einen eigenen Bereich an und verweisen Sie – am besten mit Bild und Kurztext – auf diese hin. >> Ich verwende hierfür das WordPress Plugin Related Posts.

Wenn Sie auf ein spezielles Produkt, etc. hinweisen wollen, legen Sie dafür einen auffälligen Bereich an, der Ihre User zum Klicken einlädt. Solche Inhalte können auch sehr gut in einer Sidebar untergebracht werden, denn dort sind sie auf der gesamten Website gut sichtbar 

Zu viele Menü-Optionen
Dropdown-Menüs sind eine wunderbare Sache, sie helfen unsere Inhalte für die User kompakt zu organisieren. Kennen Sie Websites, bei dem ein Untermenü mit zehn oder gar zwanzig Links aufklappt, die praktisch die gesamte Höhe des Browser-Fenster ausfüllen? Oder, noch schlimmer, über den unteren Bildschirmrand hinausragen und somit gar nicht erreichbar sind … Ja, das ist dann nicht so benutzerfreundlich. Solche Website sehen nicht nur unorganisiert und unübersichtlich aus, sie sind es auch. Begrenzen Sie also Ihre Hauptnavigation auf Ihre wichtigsten Seiten oder Rubriken und nutzen die Untermenüs für die Auflistung der dazugehörigen relevanten Inhalte.

Kontextsensitive Menüs in Sidebars
Ich empfehle Sie nicht wirklich, aber ich habe sie auch auf der einen oder anderen meiner Websites im Einsatz. Hat man zu viele Inhalte zu einem Thema kann man manchmal einfach nicht auf Sie verzichten: Untermenüs, die nur auf bestimmten Unterseiten angezeigt werden (=kontextsensitiv). Der große Vorteil: Sie belasten Ihre Hauptnavigation nicht mit zu vielen Navigationspunkten. Und Ihre Nutzer können bequem in einer speziellen Inhaltsrubrik navigieren. Der große Nachteil: Seiten, die sich in diesen Kontext-Menüs befinden, sind nicht von überall aus auf Ihrer Website zu erreichen. Ihre Leser haben unter Umständen Schwierigkeiten, diese Artikel wieder zufinden. Kontextsensitive Menüs sollten wirklich nur bei sehr umfangreichen Themenbereichen zum Einsatz kommen.

Ich verwende für kontextsensitive Menüs in WordPress-basierten Websites >> Dynamic Widgets. Diese dynamischen Widgets ermöglichen es, verschiedenen Unterseiten individuelle Sidebars zu zuordnen. In diesen Sidebars bringe ich dann das entsprechende Menü für diese speziellen Themenbereiche unter. >> Ein Beispiel finden Sie hier. Der dort auf der rechten Seite eingebaute Sidebar bietet ein Untermenü für die Hauptrubrik “Ihre Website”. Die dort enthaltenen Unterseiten sind mit unterschiedlichen Sidebars und unterschiedlichen Menüs ausgestattet.

Sprechende Links
Nutzen Sie sprechende Links, um Ihren Usern die Entscheidung zu erleichtern ihm zu folgen.
Also schreiben Sie: “Hier geht es zum Download unserer neuen Müller-Küchen Einrichtungsapp” – anstatt “Hier” oder: “Download now” … Das ist übrigens auch bei der Indexierung von Suchmaschinen äusserst vorteilhaft.

title-Attribut für Links
Mit Hilfe des title-Attributs können Sie zusätzliche Informationen über das Ziel des damit ausgezeichneten Links anbieten. Auch gut für Suchmaschinen …

Sitemap
Eine ausgezeichnete Möglichkeit Ihrem User einen Überblick über inhaltsreiche Websites zu verschaffen, ist eine Sitemap. Wenn Sie sauber aufgebaut ist, also mit Einrückungen der Unterseiten etc. werden Ihre Nutzer sie sicherlich gerne benutzen.

Breadcrumb Navigation
Hänsel und Gretel lassen grüßen, die “Brotkrümmelnavigation” ist eine tolle Sache: An einer gut sichtbaren Stelle wird eine kleine Leiste angezeigt, die dem User exakt mitteilt, wo er sich gerade befindet. 

Dabei sind die einzelnen Ebenen anklickbar, so das problemlos per Mausklick eine oder mehrere Navigationsebenen hochgesprungen werden kann.
Startseite/Rubrik/Unterrubrik/Die-aktuelle-Unterseite

Lesen Sie weiter auf der nächsten Seite: Website Usability – Layout
Navigation | Klarheit | Weniger ist mehr | Speed is fun | Social Media
Fazit | Checkliste


Bleiben Sie auf dem Laufenden

mail >> Abonnieren Sie den art supplies Newsletter

 

Weitere Artikel

  • SEOSEO Auch Suchmaschinen denken um: Content is King! Selbst die beste SEO bringt nichts, wenn die Inhalte einer Webseite für den User keinen Nutzen bringen.
  • Responsive WebdesignResponsive Webdesign Responsive Webdesign: Anpassungsfähige Website-Layouts, die sich automatisch an das genutzte Ausgabegerät oder an unterschiedlichen Auflösungen anpassen.
  • Metro DesignMetro Design Flaches Design, weg von Glossy, Schattierung, Rundung, Farbverlauf. Metro Design bedeutet: flache Formsprache, Neue Sachlichkeit, schnörkellos & funktional
  • Off Canvas Responsive DesignOff Canvas Responsive Design Mobile First! Off Canvas Responsive Design: Inhalte von der Website bei Anzeige auf einem Device per Knopfdruck ein- und ausblenden.

Pages: 1 2 3 4 5 6 7