Online Business starten mit WordPress Teil 7 – Website Usability optimieren in 10 Schritten

Willkommen zurück zu unserer Artikelserie „Online Business starten mit WordPress“, in der wir das Eltern-Kind-Netzwerk Knirpsy Schritt-für-Schritt erstellen.

Inhaltsverzeichnis unserer Artikelreihe:

• Teil 1: Vorstellung der Idee: Eltern-Kind-Netzwerk
• Teil 2: Vorgehensweise bei der Umsetzung
• Teil 3: Idee Entwicklung: Geschäftsmodell mit Business Model Canvas visualisieren
• Teil 4: Wettbewerbsanalyse
• Teil 5: Umsetzung einer Online Community
• Teil 6: Demo Website erstellen mit One Click Demo Import
• Teil 7: Website Usability optimieren
• Teil 8: Die Idee vermarkten
• Teil 9: Website Analyse mit Google Analytics (Teil 1)
• Teil 10: Website Analyse mit Google Analytics (Teil 2, nur mit kostenlosen E-Book)
• Teil 11: Details zur Monetarisierung (nur mit kostenlosen E-Book)
• Teil 12: Rechtssicherheit & Datenschutz inklusive Kosten und Vorgehensweise (nur mit kostenlosen E-Book)
• Teil 13: Lessons Learned: Wichtige Erkenntnisse & Optimierungstipps (nur mit kostenlosen E-Book)

In diesem Artikel geht es darum, die Usability einer Website im Allgemeinen zu optimieren und aufzuzeigen, wie wir diese Möglichkeiten nutzen können, um unsere Knirpsy Community benutzerfreundlicher zu gestalten.

Was versteht man unter Usability?

Dem weitverbreiteten Anglizismus in der Webwelt sei Dank, sollten wir, bevor wir uns mit der Optimierung der Usability beschäftigen, erst einmal der Begriffserklärung widmen. Hier ist wie die internationale Norm DIN ISO 9241-11 die Usability definiert:

Usability ist das Ausmaß, in dem ein System durch bestimmte Benutzer in einem bestimmten Nutzungskontext genutzt werden kann, um bestimmte Ziele effektiv, effizient und zufriedenstellend zu erreichen.

Am Einfachsten lässt sich Usability mit „Benutzerfreundlichkeit“ oder „Bedienbarkeit“ übersetzen. Teilweise wird sie jedoch auch mit dem Begriff „Benutzerführung“ gleichgesetzt.

Website Usability Optimierung in 10 Schritten

1. Verständliche Ausdrucksweise

„Den Content meiner Website promote ich viral, mit Podcasts und Screencasts sowie durch speziell designte Landing Pages, um mittels Call-to-Action Buttons Conversions zu generieren. Als linkbait benutze ich Infografiken, die ich mit Hilfe von Mockups erstellt habe, um mit Backlinks das Ranking meiner Site in den SERPs zu optimieren. Selbstverständlich habe ich den GATC implementiert, um meine User im  Conversion-Funnel zu tracken.“

Auch wenn das Beispiel im oberen Absatz ein wenig überspitzt ist, so lässt sich nicht leugnen, dass die Sprache der Webdesigner für den Otto-Normal-Internetnutzer oft nicht einfach zu verstehen ist. Bei der Erstellung der Texte für eine Website sollte deshalb immer die entsprechende Zielgruppe und ihre Art zu kommunizieren berücksichtigt werden.

Bedeutung für Knirpsy

Mit Knirpsy wird eine Zielgruppe angesprochen, die kein bzw. wenig Hintergrundwissen zur Erstellung und Betreiben von Webseiten inklusive Blogs hat. Deshalb ist es sehr wichtig, in jeder Art von Kommunikation mit den zukünftigen Usern darauf zu achten, eine Wortwahl zu verwenden, die einfach und verständlich ist.

2. Responsive Webdesign

Man kann das Wort Usability nicht verwenden, ohne über Responsive Webdesign zu sprechen. Die Grundvoraussetzung für benutzerfreundliche Websites ist es, dass sich ihr Inhalt und das Layout den unterschiedlichen Geräten der Nutzer und nach Möglichkeit auch den verschiedenen Browsern anpassen.

Für WordPress Websites ist daher die Verwendung eines Themes, welches für mobile Geräte optimiert ist, besonders hilfreich. Aus Erfahrung kann ich jedoch sagen, dass auch bei solchen Themes ein wenig Nachbesserung notwendig ist, damit die User auch auf Tablets und Smartphones die angepeilten Ziele wirklich erreichen.

Bedeutung für Knirpsy

Sowohl das WordPress Theme KLEO für die Hauptseite von Knirpsy als auch das Layers Theme (Affiliate Link) für die Baby Blogs sind für Mobilgeräte optimiert. Damit haben wir schon den Grundstein für ein responsive Design und damit für eine gute Usability gelegt.

3. Schneller Seitenaufbau

Beinahe schon überflüssig zu erwähnen, aber dennoch sollte es in dieser Auflistung nicht fehlen: Einer der wichtigsten Faktoren in der Usability Optimierung ist die kurze Ladezeit der Website. Die Performance deiner Seite kannst du z. B. mit den kostenlosen Tools Pagespeed Insights von Google oder GTmetrix testen und erhältst auch gleichzeitig Verbesserungsvorschläge, wie du deine Website schneller machen kannst.

Bedeutung für Knirpsy

Eine der größten Herausforderungen wird es sein, eine optimale Performance der Knirpsy Plattform zu gewährleisten. Mit dem KLEO Theme und Plugins wie WooCommerce und BuddyPress haben wir ein paar richtige „Schwergewichte“ in unsere Online Plattform integriert. Des Weiteren kann, wie bei jeder Online Community, eine steigende Nutzerzahl und hohe Seitenaktivität schnell zu Performance-Engpässen führen. Die gute Ausgangsbasis, was die Geschwindigkeit der Seite angeht, haben wir bereits mit unserem Hosting gelegt. Weiterhin wollen wir mit bekannten Techniken wie Caching, Komprimierung von Javascript und CSS-Dateien, Optimierung der Bilder etc. den Leistungsengpässen unserer Website entgegenwirken.

4. Eindeutige Interaktionselemente

Die meisten Webseitenbetreiber wollen eine oder mehrere der drei Kennzahlen erhöhen: Bestellungen, Engagement oder Leads (und siehe da, schon verwende ich wieder den Webdesigner-Slang). Mit „Engagement“ ist die Interaktion des Users mit der Website gemeint, beispielsweise durch das Kommentieren der Blog-Beiträge. Unter „Lead-Generierung“ versteht man z. B. die erfolgreiche Abonnierung eines Newsletters.

Um diese Kennzahlen zu erhöhen, ist es wichtig, bei der Gestaltung der Interaktionselemente wie Buttons oder Menüpunkte Folgendes zu beachten:

1. Eindeutige und aussagekräftige Beschriftung (Labels) – lieber eine Beschriftung wie „kostenloser Download“ anstatt „mehr Informationen“
2. Die Elemente zur Handlungsaufforderung (Call to Action oder CTA) sollen nach Möglichkeit beim Laden der Seite „above the fold“ (ich kanns einfach nicht lassen :-), d. h. im sichtbaren Bereich platziert werden, ohne nach unten scrollen zu müssen.
3. Die CTA-Buttons sollten sich von den übrigen Seitenelementen klar abheben.
4. Mikro-Interaktionen (microinteractions) sind derzeitig ein Trend im Webdesign und signalisieren beispielsweise dem User während des Downloadvorgangs durch kleine Animationen, dass der Prozess begonnen hat und noch andauert. Ohne diese Animation könnte der Nutzer den Eindruck bekommen, dass das Anklicken des Download-Buttons nicht funktioniert hat.

Bedeutung für Knirpsy

Mit dem KLEO Theme sind Animationen und Mikro-Interaktionen nur einen Klick entfernt. Beinahe jedes Element kann mit einer Animation hinterlegt werden. Hier muss man eher darauf achten, es nicht zu übertreiben – weniger ist manchmal mehr!

5. Intuitive Navigation

Die Navigation einer Website ist ein Thema, welches viele Webdesigner in die Zwickmühle treibt. Auf der einen Seite möchte man als Webworker neue Techniken ausprobieren und sich von anderen Kollegen durch einzigartiges Design absetzen. Auf der anderen Seite gibt es da das berühmte Sprichwort:

„Groß ist die Macht der Gewohnheit.“

Genau wie das Sprichwort zeigen auch viele Studien, dass Navigationsmenüs öfters angeklickt werden, wenn sie wie gewohnt oben angebracht sind im Gegensatz zu den Menüs, die sich am unteren Bildschirmrand befinden. Ebenfalls werden Aufklapp-Menüs, die erst nach dem Anklicken sichtbar werden, oft übersehen.

Eine logische Schlussfolgerung wäre also für die Navigation eher ein konservatives Design zu wählen und seine Experimentierfreude bei anderen Elementen der Website auszuleben.

Weiterhin sollten bei der Umsetzung der Seitennavigation die folgenden Punkte beachtet werden:

• Maximal 7 Menüpunkte
• Aussagekräftige Beschriftung der Menüpunkte
• Verlinkung zur Startseite sollte auf jeder Unterseite angebracht werden
• Ein Klick auf das Logo sollte die Startseite öffnen

Brotkrümmel-Navigation

Der Einsatz von „breadcrumbs“ oder zu Deutsch der Brotkrümmel-Navigation ist nicht nur aus SEO Gesichtspunkten sinnvoll. Der Besucher weiß damit sofort auf welcher Ebene der Website er sich befindet, wie die einzelnen Webseiten miteinander verknüpft sind und kann schnell wieder zum Ausgangspunkt zurückkehren.

Bedeutung für Knirpsy

Wir haben für unsere Community eine klassische Haupt-Navigation gewählt – links das Logo, rechts die wichtigsten Menüpunkte wie Registrieren und Anmelden. Die Links zu den relevanten Rechtstexten und „Über uns“-Seite befinden sich im Footer und sind damit ebenfalls auf jeder Unterseite vorhanden. Die Brotkrümmel-Navigation ist selbstverständlich auch mit an Board.

6. Effektive Suchfunktion

Gerade für Websites mit viel Inhalt ist eine Suchfunktion ein wichtiges Mittel, um den Besucher möglichst schnell an sein Ziel zu führen. Nun kann man aber die interne Standard-Suche bei WordPress bestenfalls als suboptimal bezeichnen.

Mit den kostenlosen WordPress Plugins Relevanssi oder Dave’s WordPress Live Search kann die Default-Suche veredelt und somit auch deine WordPress Seite ein wenig benutzerfreundlicher gestaltet werden.

Im Falle von Relevanssi werden die Suchanfragen sogar gespeichert. Diese sollten regelmäßig auf eventuelle  Optimierungspotentiale hinsichtilich SEO und Usability überprüft werden.

Die Betreiber von Content intensiven Websites mit vielen verschiedenen Kategorien wie News- oder Magazine-Sites sollten auch einen Blick auf das WordPress Premium Plugin FacetWP oder auf die kostenlose Alternative WP Advanced Search werfen. Mit diesen Plugins lässt sich eine Amazon-ähnlichen Suchfunktion auf einer WordPress Website nachbauen.

Bedeutung für Knirpsy

Das KLEO Theme, das bei uns zum Einsatz kommt, bietet eine verbesserte Suchfunktion, ohne zusätzliche Plugins verwenden zu müssen. Sie durchsucht schnell nicht nur die Standard WordPress-Beiträge sondern auch BuddyPress- und Forum-Einträge sowie alle Custom Post Types.

7. Optimierte Fehlerseite 404

Zu einer guten Usability gehört es auch, die User zu führen, wenn sie sich mal verlaufen haben. Eine Fehlerseite, die nichts als die Fehlermeldung ausgibt, ist nicht wirklich benutzerfreundlich.

Deine Fehlerseite sollte die folgenden Merkmale aufweisen, um möglichst wenige Besucher zu verlieren:

• Ein Link zur Startseite
• Eine Suchfunktion
• Angepasst an das Design
• Eigenes Logo (verlinkt zur Startseite)
• Eine Auflistung von Kategorien oder meist gelesene Beiträge (für Blogs)

Bedeutung für Knirpsy

Die meisten Premium WordPress Themes wie auch unser Knirpsy Theme haben bereits eine optimierte 404-Seite, die an das Design der Website angepasst ist. Wie bereits oben beschrieben, hat unser Theme eine verbesserte Suche, die auch auf der Fehlerseite prominent platziert ist und hoffentlich unseren Usern helfen kann, ihr Ziel doch noch zu erreichen.

8. Einfache Benutzeranleitung

Wenn ein Besucher auf eine Website gelangt, hat er keine Lust, viel Zeit damit zu verbringen, sich erst einmal zurecht zu finden. Er möchte in der Regel so schnell wie möglich eine Lösung für sein Problem finden oder sich über etwas informieren. Deshalb sollte man den Usern einen Startpunkt anbieten. In den meisten Fällen ist es die Startseite, muss es jedoch nicht unbedingt sein. Gerade Anbieter von erklärungsbedürftigen Produkten und Dienstleistungen sollten auf der Startseite oder auf einer „Starte hier“-Seite eine Benutzeranleitung in Form von kurzen Erklär-Videos oder auf den Punkt gebrachten „How-To“-Artikeln integrieren.

Bedeutung für Knirpsy

Wie bereits erwähnt gehören zu unserer Zielgruppe junge Eltern, die mit hoher Wahrscheinlichkeit noch nie mit WordPress gearbeitet haben. Für alle WordPress Neulinge kann der erste Anblick vom Dashboard durchaus einen verwirrenden Eindruck hinterlassen. Wir haben deshalb für unsere Blog Autoren auf der Dashboard Startseite die Standard Widgets entfernt und diese durch eine Schritt für Schritt Anleitung erstetzt, die unseren Usern zeigt, wie sie am schnellsten mit ihrem eigenen Blog durchstarten.

9. Ergänzender Support

Wenn sowohl die Benutzerführung durch die intuitive Navigation als auch die Benutzeranleitung bei den Usern immer noch Fragen hinterlassen, sollte eine benutzerfreundliche Website einfache Kontaktmöglichkeiten anbieten. Optimalerweise kann der Besucher von jeder Unterseite aus mit nur ein paar Klicks den Websitebetreiber kontaktieren.

Um den First-Level-Support weitestgehend zu minimieren, bieten sich FAQ-Bereiche für häufig gestellte Fragen und Foren für Userfragen an. In den FAQs sollten jedoch nicht, wie leider oft üblich, noch die letzten Verkaufsargumente hineingepackt werden, sondern echte Nutzerfragen.

Bedeutung für Knirpsy

Wir haben bereits seit einiger Zeit damit begonnen, die Knirpsy Website mit den ersten Usern zu testen. Schon wenige Testnutzer sind ausreichend, um die Usability einer Website enorm zu verbessern. Ein paar Rückmeldungen unserer „Early Adopters“ haben wir sofort umgesetzt, während wir die wichtigsten Fragen und Unklarheiten in einer FAQ-Sektion zusammengefasst haben, um anderen Blog Autoren und Community Usern zu helfen, die ähnliche Fragen haben möchten.

Darüber hinaus haben wir auf jeder Seite einen kleinen Briefumschlag unten rechts fest integriert. Der User kann somit mit nur einem Klick, ohne die Seite verlassen zu müssen, ein kleines Formular aufrufen und uns einfach und schnell eine Nachricht schicken.

10. Ablenkungen minimieren

Zum Glück hat uns Flash verlassen! Doch immer noch ist die Anzahl derer Websites groß, die durch nervige Popups und störende Bewegtbild-Werbung den User von seinem eigentlichen Ziel ablenken.

Mir ist durchaus bewusst, dass mit bewegter bzw. prominent platzierter Werbung ein höherer Erlös erzielt werden kann als mit einem dezenten, statischen Banner. Doch bin ich mir nicht sicher, ob das Mehr an Werbeeinnahmen den Umsatzrückgang rechtfertigt, der durch den Abbruch der Seitenbesucher aufgrund der penetranten Werbung entsteht.

Seit einigen Monaten gibt es immer mehr Webseitenbetreiber, die durch sogenannte Exit Popups (durch Einsatz der Exit Intent Technology) den Besucher dazu überreden wollen, bevor er die Seite verlässt, doch noch ein Newsletter Abo abzuschließen. Sie wollen den User nicht während seines Besuchs stören und glauben, wenn sie das Popup an das Ende seiner Reise platzieren, ist es weniger störend.

Bedeutung für Knirpsy

Um die Ablenkungen zu reduzieren, haben wir für Knirpsy einen klaren Seitenaufbau gewählt mit Fokus auf nur zwei Themen: Community und Baby Blogs. Wie schon geschrieben werden wir uns außerdem mit den Animationen zurückhalten, auch wenn es schwer fällt :-).

Extra-Tipp: Messen und Optimieren

Mittlerweile der Klassiker in vielen WPC-Beiträgen: Ohne Messen und Optimieren geht nichts! Auch nicht bei der Usability. Dieser Absatz ist auch gleichzeitig der Ausblick auf einen der kommenden Beiträge dieser Artikelreihe, in dem es um die Website Analyse mit Google Analytics geht. Das kostenlose Google Tool liefert wichtige Erkenntnisse wie z. B. welche Elemente auf einer Website wie oft angeklickt wurden oder auf welcher Seite der Besucher eingestiegen ist und wo er sie wieder verlassen hat. Das sind alles Daten, die bei richtiger Auswertung dabei helfen können, die Benutzerfreundlichkeit einer Website zu verbessern.

Wer etwas freies Budget zur Verfügung hat, der kann auch auf Heatmap- und/oder Maus-Tracking Tools ausweichen, um noch ein besseres Gefühl zu bekommen, wie die Besucher die eigene Website benutzen.

Jetzt für den WPC Newsletter anmelden und...

...wertvolle Tipps zu WordPress, Elementor, SEO und DSGVO direkt in die Inbox erhalten

​Als kleines Dankeschön bekommst du das E-Book „Online Business starten mit WordPress“ und die „SEO Checkliste von WPC“ kostenlos dazu.

(*) = Pflichtfeld

Your Name

E-mail

Anmelden

Der Newsletter enthält Informationen über neue Beiträge, Tipps, Angebote und Aktionen. Hinweise zum Anmeldeverfahren, Versanddienstleister, statistischer Auswertung und Widerruf in unserer Datenschutzerklärung.

Ausblick auf Teil 8 der Artikelserie:

Im nächsten Teil unserer Artikelreihe geht es um die Vermarktung. Welche Marketingstrategien werden wir anwenden, um unsere Eltern-Kind-Community zu vermarkten? Ich hoffe du bist dann wieder dabei.

Hast du noch Fragen?

Hast du noch Fragen zur Usability? Oder fallen dir noch weitere Punkte ein, wie die Benutzerfreundlichkeit einer Website optimiert werden kann? Was hältst du eigentlich von Exit Popups?

Save

Save