Ergonomie im Web: Nicht nur schön, sondern praktisch

Ergonomie im Web wird von Nutzerinnen und Nutzern positiv bewertet – ebenso wie von Suchmaschinen. Foto: Drobot Dean/AdobeStock

Der erste Eindruck zählt. Das gilt auch für Ihre Website. Neben der Optik spielt dabei die einfache Benutzbarkeit und Orientierung eine wichtige Rolle. Finden sich Ihre potenziellen Kunden und Kundinnen nicht sofort zurecht, sind sie schneller weg, als Ihnen lieb ist. Eine zweite Chance gibt es in den meisten Fällen nicht. Wie die Gestaltung Ihrer Website nicht zum Fallstrick wird, erfahren Sie hier.

Ergonomie spielt nicht nur bei der Gestaltung Ihres Arbeitsplatzes eine wichtige Rolle. Genauso zentral ist sie für Ihren Webauftritt. Spricht man über Ergonomie im Web, geht es dabei vor allem um eins: die Benutzbarkeit. Das heißt, jede Website sollte stets unter Berücksichtigung ihrer Bedienerfreundlichkeit beziehungsweise ihrer Gebrauchstauglichkeit (Usability) entwickelt werden. Im Fokus steht dabei der Besucher oder die Besucherin der Website, mit den jeweils eigenen Bedürfnissen und Anforderungen. Es geht also um die Frage: Wie finden sich meine Kunden und Kundinnen auf meiner Website am besten zurecht?

Davon ausgehend ist eine „optimale Web-Ergonomie“ dann erreicht, wenn eine jede Webseite des Webauftritts vollständig auf die Bedürfnisse, Fertigkeiten, Kenntnisse und Möglichkeiten der Benutzer und Benutzerinnen zugeschnitten ist. So lautet zumindest die Theorie. Doch was bedeutet das für Ihre Website?

Einmal ist keinmal

Eines vorweg: Ergonomisches Website-Design ist ein Prozess. Kein Projekt, das Sie einmal umsetzen und dann vergessen können. Zwar gibt es grundlegende Struktur- und Gestaltungsanforderungen, die erfüllt werden müssen, damit Besucher und Besucherinnen sich auf Ihrer Website orientieren können. Anpassungen und Optimierungen müssen Sie aber immer wieder vornehmen. Vielleicht verändert sich mit einem neuen Behandlungsangebot oder einer Zusatzqualifikation Ihre Zielgruppe und damit auch die Anforderungen an die Website. Oder die Art und Weise, wie Kunden und Kundinnen kommunizieren, verändert sich. Vor allem jüngere Menschen ziehen bereits heute eine Online-Terminvergabe einer telefonischen Vereinbarung vor. Hier heißt es: neugierig und aufmerksam bleiben. Beobachten Sie auch Ihr eigenes Verhalten. Wann spricht Sie eine Website an? Und was veranlasst Sie dazu, sie umgehend zu verlassen?

Zur Betriebsblindheit kommt es auch, wenn es um die Webpräsenz geht. Sie kennen Ihr Angebot schließlich aus dem Effeff. Nehmen Sie von Zeit zu Zeit auch einmal die Perspektive Ihrer Patientinnen und Patienten ein. Würde Frau Huber die Beschreibungen der Behandlungen verstehen? Und was ist mit Herrn Meisner? Oft hilft es auch, einen Außenstehenden mit einzubeziehen, der Ihre Website unvoreingenommen „testet“. Vielleicht sind die Menüpunkte doch nicht so eindeutig wie gedacht und der Weg zum Kontaktformular für etwaige E-Mail-Anfragen nicht von allen Webseiten schnell erreichbar. Am besten eignen sich hier Personen, die einen anderen beruflichen Hintergrund haben. Freunde und Bekannte helfen Ihnen sicher gerne.

Should I Stay or Should I Go?

Gerade bei Personen, die Ihre Website das erste Mal besuchen, spielt der erste Eindruck eine besondere Rolle. Schon in den ersten Sekunden entscheidet sich für den Besucher oder die Besucherin: bleiben oder gehen. Entscheidend ist dabei die Ladezeit. Länger als zwei bis drei Sekunden sollte es nicht dauern, bis die Website aufgebaut ist. Auf Geduld können Sie nicht hoffen. Die nächste Website ist schließlich immer nur ein paar wenige Klicks entfernt.

Wichtiges Entscheidungskriterium ist in diesen ersten Sekunden auch die generelle Struktur. Ist die Seite überladen und konfus statt aufgeräumt und übersichtlich, sind Ihre potenziellen Kunden und Kundinnen schneller weg, als Sie es sich vorstellen können. Schon auf den ersten Blick muss erkennbar sein, worum es bei Ihnen geht. Wichtig ist es hier auch, auf der Homepage – der Startseite Ihres Webauftritts – eindeutige Navigationselemente wie Buttons oder die Menüleiste zu integrieren.

Die Form folgt der Funktion

„Form follows function“ – der bekannte Designleitsatz aus Architektur und Produktdesign sollte auch bei der Gestaltung einer Website beachtet werden. Natürlich sollte Ihr Webauftritt ästhetisch ansprechend sein. Um Benutzbarkeit zu gewährleisten, spielen aber zunächst die Form, die Struktur der Website und ihre Gestaltung eine essenzielle Bedeutung. Sie sollten Ihren Website-Besuchern und -Besucherinnen dabei helfen, die dargebotenen Informationen wahrzunehmen, einzuordnen, zu verstehen und anschließend aktiv zu werden.

Wichtig ist hierbei, dass sich zentrale Elemente wie Kopfbereich, Logo, Fußbereich oder das Menü beziehungsweise die Navigation immer an der gleichen Position befinden – unabhängig davon, welche Seite Ihres Webauftritts besucht wird. Sie rahmen den Webauftritt ein und fungieren dabei als Orientierungselemente. Eine logische, intuitive Bedienbarkeit sollte hier im Vordergrund stehen. Orientieren Sie sich dabei an gelernten Mustern. So erwarten Besucherinnen und Besucher etwa, dass sie Ihr Logo links oben auf der Seite finden. Auch bei der Positionierung der Website-Navigation sollten Sie keine Experimente machen. Sie befindet sich entweder vertikal im linken Bereich (vertikale Navigation) oder horizontal im oberen Bereich der Website (horizontale Navigation). Ihre Kreativität heben Sie sich lieber für einen anderen Bereich auf. 

Struktur muss sein

Sicher wollen Sie auf Ihrer Website eine Vielzahl von Informationen präsentieren. Achten Sie aber dennoch darauf, dass die Struktur nicht zu komplex wird. Es sollte nicht mehr als drei Klicks benötigen, um zu jedem beliebigen Punkt der Website zu kommen. Bei umfangreichen Seiten kann auch eine Sitemap – eine Art Inhaltsverzeichnis des gesamten Webauftritts – oder eine Suchfunktion bei der Orientierung helfen.

Die Benutzbarkeit verbessern Sie auch durch die konsequente Einhaltung eines einheitlichen Stils über Ihr gesamtes Webangebot hinweg. Dies betrifft besonders die Farbwahl und die Typografie. Achten sollten Sie darüber hinaus darauf, dass die Navigationselemente auf allen Seiten gleich aussehen und sich an derselben Stelle auf der Seite befinden. Gleiches gilt für Buttons, die auf mehreren Seiten integriert sind.

In der Ruhe liegt die Kraft

Erinnern Sie sich noch an die ersten Websites? Mit wilden Schriften, kreischenden Farben und animierten Bildern? So sollte Ihre Site auf keinen Fall aussehen. Gefragt ist ein ruhiges, klares Layout ohne blinkende GIFs, auffällige Hintergrundbilder oder typografische Experimente. Die können getrost da bleiben, wo sie hergekommen sind: in den 90ern. So lenkt nichts vom eigentlichen Inhalt Ihrer Site ab.

Lost in Hyperspace – ohne Navigation geht es nicht

Die Navigation ist eines der zentralen Elemente Ihrer Webpräsenz. Sie führt die Nutzer und Nutzerinnen Punkt für Punkt durch die Website und gibt ihnen dabei stets Orientierung. Selbst wenn Ihre Website nur über einige Unterseiten verfügt, sollten Sie daher nicht auf eine ­Navigation verzichten.

Auch bei der Gestaltung der Navigation gibt es Einiges zu beachten: Überlegen Sie sich kurze, aber aussagekräftige Bezeichnungen für die einzelnen Menüpunkte. Halten Sie die Navigationsleiste außerdem schlank – zwischen fünf bis sieben Punkt sind ideal.

Jetzt wird es (ein bisschen) bunt

Damit man sich auf Ihrer Site gut zurechtfindet, sollten Sie sich nicht nur für eine ruhige, aufgeräumte Struktur und Seitengestaltung entscheiden, sondern deren Effekt auch mit der richtigen Farbwahl unterstützen. Orientieren Sie sich für einen besseren Wiedererkennungswert bei der Farbwahl Ihres Webauftritts an den Farben Ihres Logos. Doch auch hier wird Zurückhaltung großgeschrieben.

Mehr als fünf verschiedene Farben sollen es nicht sein, besser weniger. Generell gilt außerdem: je größer die Fläche, desto heller die Hintergrundfarbe.

Im Namen der Lesbarkeit

Beachten Sie bei der Farbwahl auch die Farbe, die Sie für Ihre Schrift wählen. Wichtig für die Lesbarkeit ist ein ausreichender Kontrast zwischen Vorder- und Hintergrundfarbe. Auf sehr dunkle Hintergrundfarben sollten Sie verzichten. Damit machen Sie Ihren Besucherinnen und Besuchern nur das Leben schwer.

Möchten Sie in den Hintergrund eine Grafik setzen, sollten Sie auch hier die Lesbarkeit im Hinterkopf behalten. Am besten eignen sich Bilder mit sehr dezenten und kontrastarme Muster. Wählen Sie außerdem eine geeignete Schriftfarbe und -größe. Verschnörkelte Schreibschriften oder originelle Handschriften sind zwar schön anzusehen, für die meisten aber ein Graus, wenn längere Abschnitte gelesen werden sollen. Nutzen Sie am besten eine der gängigen serifenlosen Schriften wie Arial.

Bilder sagen mehr

Bilder transportieren Emotionen und komplexe Zusammenhänge weitaus besser als reiner Text. Und sie wecken Interesse. Deshalb sollten auch sie ein fester Bestandteil Ihrer Webpräsenz sein. Auswählen sollten Sie aber nur Bilder, die auch zum Charakter und „Feeling“ Ihrer Website passen. Dabei gilt: Qualität statt Quantität. Ein hochwertiges Profi-Foto wirkt viel mehr als ein paar verwackelte Schnappschüsse. Gleichzeitig sollten Sie Bilder nicht um der Bilder willen nutzen, sondern sie geschickt platzieren, um den Inhalt Ihrer Site besser zu transportieren. Zu viele Bilder wirken sich darüber hinaus negativ auf die Ladezeit Ihrer Website aus.

Scannen ist das neue Lesen

Menschen lesen Texte im Internet völlig anders als zum Beispiel ein Buch oder eine Zeitschrift. Sie „scannen“ Texte. Das heißt, Texte werden im Web anhand von optischen Haltepunkten wie Zwischenüberschriften oder Aufzählungszeichen überflogen statt Zeile für Zeile gelesen. Das führt dazu, dass oft nur etwa die Hälfte eines Textes wahrgenommen wird. Der Grund: Als eigenständige Lichtquelle strengen Bildschirme von Computern, Tablets oder Smartphones das Auge besonders an. Machen Sie sich dieses Wissen zunutze und gestalten Sie die Texte auf Ihrer Website entsprechend.

Schreiben Sie kurze, modulare Texte mit eigenständigen Absätzen. Als Faustformel gilt hier: ein Gedanke pro Absatz; das Wichtigste steht am Anfang. Verzichten Sie darüber hinaus auf komplizierte Bandwurm- und Schachtelsätze. Schreiben Sie stattdessen einfach und direkt. Schaffen Sie für die Augen zusätzliche optische Haltepunkte wie

  • Zwischenüberschriften,
  • Listen,
  • Zitate,
  • Trennlinien und
  • gefettete oder kursive Textstellen/Wörter.

Die Nutzer und Nutzerinnen werden es Ihnen danken. Alles in Maßen natürlich. Übertreibung ist auch hier kontraproduktiv.

Schrift ist nicht gleich Schrift

Beachten Sie: Die Schriftgröße (mindestens 14 Pixel bei absoluten Einheiten), der richtige Schrifttyp und der Zeilenabstand verbessern die Lesbarkeit eines Onlinetextes ebenfalls deutlich. Auch die Zeilenlänge sollte begrenzt sein. Eine Länge von 60 bis 80 Zeichen reicht aus.

Achten Sie bei all Ihren Texten auf der Website zudem auf eine einheitliche Formatierung. Das dient der Orientierung und hilft Ihren Nutzerinnen und Nutzern, sich zurechtzufinden. Vergessen Sie auch nicht, auf eine angemessene Tonalität zu achten. Sie wissen am besten, wie Ihre Kunden und Kundinnen angesprochen werden möchten. Verzichten Sie auf komplizierte Fachbegriffe und Abkürzungen oder erklären Sie sie zumindest in einfachen Worten. 

Hallo, ich bin ein Hyperlink!

Kommen wir zum unscheinbaren Hauptdarsteller des Internets: dem Hyperlink oder Link. Er fungiert als Querverweis. Per Klick leitet er Nutzerinnen und Nutzer an zuvor festgelegte Webseiten, Dateien oder bestimmte Stellen auf einer Website weiter. Nutzen Sie sie geschickt als Sprungmarken, um die Websitebesucher und -besucherinnen zu den relevanten Informationen zu führen.

Klingt gut, oder? Auch hier gibt es allerdings wieder Einiges zu beachten. Kennzeichnen Sie die Links klar und eindeutig. Denn was bringt Ihnen die schönste Linkstruktur, wenn keiner erkennt, dass es sich um Links handelt. Am bekanntesten und von den meisten Nutzern und Nutzerinnen verinnerlicht ist dabei die Kennzeichnung mittels Unterstreichung und farblicher Hervorhebung. Entscheiden Sie sich für eine Unterstreichung für Ihre Links, sollten Sie darauf verzichten, andere Textstellen im Text zu unterstreichen. Sonst kommt es zu Verwechslungen – und Frust. Nutzen Sie die Formatierung der Links konsequent auf all Ihren Seiten.

Damit der Text nach Links überflogen werden kann, sollten Sie außerdem einen inhaltlich relevanten Teil des Textes verlinken. Auf generische Bezeichnungen wie „Hier klicken ...“ sollten Sie verzichten. Besser sind Formulierungen wie „Zur Vertiefung zum Thema XYZ“. So gewährleisten Sie, dass die Nutzerin oder der Nutzer schon vorab weiß, was nach dem Klick auf sie oder ihn zukommt. Verweist der Link auf ein Dokument in einer ungewohnten Form (anderes Format, extreme Dateilänge, andere Sprache etc.), ist es hilfreich, dies hinter dem Link in Klammern anzumerken.

Benutzerfreundlichkeit – nicht nur für Menschen wichtig

Ergonomische Websites setzen auf schnelle Ladezeiten, Struktur, nutzeroptimierte Texte und Konsistenz. Dabei stehen immer Ihre Zielgruppe sowie deren Bedürfnisse und Anforderungen im Fokus. Die Ergebnisse dieser Bemühungen sind aber keinesfalls einseitig.

Ein ergonomisches und am Nutzer orientiertes Webdesign hilft nicht nur den Nutzerinnen und Nutzern bei der Orientierung und Bedienung Ihrer Site. Mit einer guten Bedienbarkeit geht auch eine höhe re Verweildauer einher. Gleichzeitig steigt die Chance, dass Ihre Website wiederholt besucht wird. Und das ist nicht alles. Genauso wie Menschen schätzen auch Suchmaschinen durchdachte Webauftritte mit einer benutzerfreundlichen Oberfläche. Ergonomie im Web lohnt sich also für alle.

 

 
Autor: Cornelia Meier
Nach einem Abstecher in die Öffentlichkeitsarbeit leitet die gebürtige Augsburgerin seit Juli 2021 die Redaktion des Fachmagazins DER FUSS.
Cornelia Meier
Redakteurin
DER FUSS