Website Superheroes – jede Website braucht ihre Helden (Teil 2)

In unserem Zweiteiler „Website-Superheroes“ beschäftigen wir uns mit den Erfolgsfaktoren galaktisch guter Webseiten. In Teil 1 (Verpasst? Hier gibt es den ersten Teil auf contentmanager.de) haben wir bereits wichtige Themen wie Performance und Qualitätsinhalte beleuchtet. Doch ohne ansprechendes Design und hohe Nutzerfreundlichkeit wird es nichts mit heldenhaften Super-Seiten.

Unverzichtbar: Heldenhaftes Webdesign

Trotzdem präsentieren sich viele Webseiten mittelständischer Unternehmen weiter in veraltetem, alles andere als mobilfähigem Webdesign.

Quelle: Adobe StockSo attraktiv die Ansprache vorgestern auch gewesen sein mag: Wer sich auf seinen Lorbeeren ausruht, wird – Produkte und Dienstleistungen inklusive – zügig abgehängt. Die Zahl der Nutzer von mobilem Internet ist seit 2011 rasant gestiegen! Nur Webdesign, das auch auf kleinem Display groß rauskommt, erreicht breite Zielgruppen. Mobile first! lautet die Marschrichtung. Dabei meint Responsive Design ein Layout, das so flexibel ist, dass eine Website auf jedem Gerät mit gutem Benutzerkomfort und emotionaler Ansprache glänzt.

Und das Ganze idealerweise in ansprechender Optik, denn – spätestens Apple hat es mit seinen Produkten belegt – Design sells!“ Und dieser Satz gilt auch für Websites! Ein gutes Design fällt schon ins Auge, bevor der Besucher überhaupt die ersten Worte gelesen hat. Eine ansprechende Gestaltung überzeugt auf den ersten Blick und spiegelt Ihr Corporate Design wider. Gutes Webdesign kann zudem Emotionen hervorrufen und verstärken, Aufmerksamkeit lenken und wichtige Aussagen und Botschaften hervorheben.

Damit Ihre Website grafisch überzeugt, sollten die Farben aufeinander abgestimmt sein und zum Inhalt passen. Schriftgröße und -art sollten die Lesbarkeit unterstützen. Wiederkehrende Elemente, zum Beispiel gleich gestaltete Call-to-Action-Buttons, unterstützen die Navigation und tragen zu mehr Usability bei. Achten Sie auch darauf, Fotos und Grafiken in punkto Farbe und Symbolkraft ans Designkonzept anzupassen.

Eine Website, die von einem professionellen Designer entworfen wird, unterscheidet sich meist deutlich von anderen Varianten. Gutes Design stimmt den Betrachter positiv und erhöht seine Verweildauer. Nutzen Sie diese Chance!

Lust auf ein paar Anregungen? 10 wichtige Design-Trends für 2017 lesen Sie im Blog von contentXXL!

Der Website-Held, den alle Menschen lieben: gute Usability

Eng mit dem Design verbunden, aber doch ein eigenständiger Punkt, ist die Benutzerfreundlichkeit (Usability). Wie in einem Supermarkt möchten Kunden sich auf einer Website schnell zurechtfinden und auf keinerlei Barrieren stoßen. Ein wesentlicher Punkt ist die Mobile Usability: Ihre Website muss entweder im Responsive Design gestaltet sein, oder in einer zweiten Version als mobile Website vorliegen.
Dabei gibt es zahlreiche Kriterien zu beachten, die eine gute Bedienung auf mobilen Endgeräten ermöglichen:

Zum Beispiel müssen die einzelnen Textabschnitte der Website ohne Zoom lesbar sein. Alle Inhalte der Website sollen an die Displaygrößen der Handys angepasst sein und bei LInks muss der Abstand zueinander so groß sein, dass keine Probleme beim Anklicken entstehen. Hinzu kommen Besonderheiten in der Bedienung und Navigation mit dem kleinen Touchdisplay, wie z.B. das Fehlen von Mouse-over. Dies sind nur einige Beispiele, die die Besonderheiten der „mobile usability“ exemplarisch verdeutlichen.

Darüber hinaus gibt es zahlreiche weitere Kriterien, die beeinflussen, wie benutzerfreundlich die User eine Website erleben. Besonders wichtig ist die Effizienz. Die Benutzer kommen mit einem bestimmten Ziel auf Ihre Website. Sie möchten sich zum Beispiel informieren, ein Produkt kaufen, eine Kontaktanfrage senden, Dateien herunterladen oder ein Problem schildern. Ermöglichen Sie es ihnen, ihr Vorhaben schnell und unkompliziert zu erledigen. Greifen Sie dafür – wann immer es geht – auf bewährte Muster und Prozesse zurück, damit Bedienbarkeit mit Einprägsamkeit einhergeht.

Behalten Sie bei der Aktivierung dieses Helden auch stets Ihre Zielgruppe im Blick. Ein junges Publikum empfindet innovative Funktionen vielleicht als besonders nutzerfreundlich, während ältere Personen die Seite verlassen, weil sie die Bedienung zu kompliziert finden.

Denken Sie auch an Barrierefreiheit. Damit ist vor allem die Zugänglichkeit der Website für Menschen mit Behinderung gemeint, die zum Beispiel Vorleseprogramme nutzen. Für diese Personengruppe sind unter anderem Alt-Titles und korrekte HTML-Kennzeichnungen von Überschriften wichtig. Auch Rot-Grün-Schwächen und Probleme mit geringen Farbkontrasten kommen verhältnismäßig häufig vor. Ein weiterer Aspekt können eingeschränkte kognitive Fähigkeiten sein: Je nach Zielgruppe müssen Sie mit Einschränkungen rechnen und sollten deshalb auf einfache und klare Sprache setzen. Die Schwierigkeit eines Textes kann z.B. mit dem Flesh-Reading-Index oder der Wiener Sachtextformel (nur für deutsche Texte) ermittelt werden.

Übersichtlichkeit

Leider gar nicht so selten: völlig überladene Seiten mit unzähligen Funktionen und Verschachtelungen. Wirklich heldenhaft sind jedoch Webseiten, die mit Übersichtlichkeit begeistern: Folgen Sie daher lieber dem Prinzip der Einfachheit und setzen Sie auf einfache Strukturen.

Menüs sollten nicht mehr als sieben ± zwei Auswahlmöglichkeiten pro Ebene und nicht mehr als zwei Ebenen insgesamt aufweisen. Geben Sie dem User auf jeder Seite die Möglichkeit, durch das Menü zu navigieren und denken Sie daran, dass Nutzer von Smartphones unt Tablets keinen Mauszeiger haben. Greifen Sie auf Kategorien zurück, wenn Sie viele Inhalte sortieren möchten und nutzen Sie Textlinks und Sprungmarken für vereinfachte Navigation innerhalb der Seiten. Lange Texte können Sie durch „Weiterlesen“-Tags auf mehrere Unterseiten verteilen. In diesem Zusammenhang kann ürigens die Nutzung der Link-Attribute „rel-next“ und „rel-prev“ sinnvoll sein.Quelle: Adobe Stock

Absätze, Überschriften, Fett- oder Kursivschreibung sowie Aufzählungen und Listen tragen ebenfalls wesentlich zur Übersichtlichkeit bei. Zur Übersichtlichkeit gehört auch, dass der Leser sich darauf verlassen kann, das Wichtigste am Anfang und eine Zusammenfassung am Ende der Seite zu finden. Weitere Unterstützung bieten Pfadangaben im oberen Bereich der Website, damit der User nachvollziehen kann, auf welcher Seite er sich aktuell befindet.

Keinesfalls sollten Sie das Rad neu erfinden. Platzieren Sie die Hauptnavigation oben oder links und verwenden Sie zu einem Großteil Standards – zum Beispiel Seiten wie „Leistungen“, „Über uns“ und „Start“ oder „Home“. Denn auch wenn „Veränderungen“ als Menüpunkt für die Leistungen spannend klingt, führt das eher zur Verwirrung als zur Zufriedenheit der User.

Mit diesen sechs Website-Superheroes legen Sie wichtige Grundlagen für den Erfolg Ihrer Webseite. Im diesem Sinne: Schon mal viel Spaß und Erfolg beim Optimieren! Doppelt gemobbelt hält allerdings besser: Wenn Sie Lust auf sechs weitere Helden haben und Ihrer Webseite zu noch mehr Durchschlagskraft verhelfen wollen, dann laden Sie sich hier das kostenloses Whitepaper „Website Superheroes – 12 Helden für mega-starke Webseiten“ herunter.