Web Usability Guide – everything flows 4. Darstellung von Website-Inhalten

> Optimale Darstellung von Website-Inhalten

“ Optimale Darstellung von Website-Inhalten „ ist der vierte Artikel meiner fünf-teiligen Blogartikelserie über die Besucherfreundlichkeit von Websites.
Die Fragen, was ist Web Usability und wozu braucht man sie, wurden bereits im ersten Artikel erläutert. In den Folgeartikeln gehe ich genauer auf verschiedene wichtige Web Usability-Faktoren ein.
In diesem Teil geht es um die optimale Gestaltung der Informationsinhalte vom allgemeinen Seitenaufbau über die Bildauswahl bis zur Textgestaltung. Der Inhalt ist schließlich das A und O Ihres Internetauftritts, für den man den gesamten Aufwand erst treibt. Er macht den inhaltlichen Anteil an einer positiven Besuchererfahrung aus.
Deswegen sollte der Inhalt für Ihre Zielgruppe interessant und leicht aufnehmbar gestaltet werden.

Doch wie genau bereiten Sie gute Inhalte interessant und optimal für die Veröffentlichung im Internet auf?

Optimale Darstellung von Website-Inhalten
> Design für Autobahnschilder

Vor dem Hintergrund, dass die Web User förmlich an den Seiteninhalten vorbeirasen, ist es angebracht, die Inhalte so zu gestalten, dass sie sich schnell erfassen lassen und ins Auge fallen. Wie schon erwähnt: Wenn Ihr Publikum sich so verhält als ob es an einem Autobahnschild vorbeirast, geben Sie ihm einfach fantastische Autobahnschilder, damit es so viel wie möglich von Ihrer Website sieht und begreift.
Der Schlüssel für eine optimale Darstellung von Website-Inhalten liegt also im Formatieren für schnelles Überfliegen.

Allgemeiner Seitenaufbau

Für das Erzielen einer positiven Besuchererfahrung gilt: Der Umgang mit einer Website muss beim ersten Besuch durch einen Internetnutzer immer erst erlernt werden. Aus diesem Grund sollte die Orientierung prinzipiell immer leicht fallen und die Bedienung möglichst intuitiv sein. Dieses Grundprinzip sollte sich genauso im allgemeinen Seitenaufbau widerspiegeln.

Funktionale Gesichtspunkte

Zunächst sind da funktionale Gesichtspunkte des allgemeinen Seitenaufbaus, die einen Teil des Rahmens für die optimale Darstellung von Website-Inhalten abstecken:

• Nutzen Sie positive Effekte von Konventionen. Greifen Sie auf bereits von Usern erlernte Verhaltensmuster zurück.
  >> an den Großen orientieren und sehen, was sich durchgesetzt hat
  • Setzen Sie bekannte Navigationskonzepte ein.Verwenden Sie bewährte Elemente:
    nicht um jeden Preis unbedingt etwas Neues erfinden!
    >> Irritation und langes Nachdenken der Nutzer vermeiden
  • Grundlegende Funktionen sollten leicht zu erlernen sein
• Geben Sie “Anklickbarem” und “Ausfüllbarem” einen klaren Aufforderungscharakter
  • Buttons klar hervorheben und eindeutig bezeichnen, um zu wissen was passiert, wenn man darauf klick
    Beachten:Auf Touchscreens gibt es keine Cursor-Funktion und folglich auch keine Möglichkeiten für Mouse-Hover-Effekte. Neue Smartphones können mittlerweile allerdings zwischen verschieden Druckstärken unterscheiden.
    

    Besuchererfahrung Infografik: Aufforderungscharakter

• Konsistenz: Für alle Unterseiten und Produkte Navigations-, Such- und Abschlussfunktionen vereinheitlichen.
  >> Grundlegende Funktionen sind so leichter zu merken
  Aber:  KLARHEIT VOR KONSISTENZ.
• Eine verständliche Beschriftung, besonders bei der Navigation
  • Fragen Sie sich was der Internetseiten-Besucher hinter einem Begriff von einem erwartet, anstatt zu überlegen, wie man selbst einen Punkt benennen würde.
    >> Unterscheidung: Unternehmenssicht < > Website-Besucher
  • Vor diesem Hintergrund bieten Keyword-Recherchen hier eine Möglichkeit, die Benennung der einzelnem Seitenhierarchie- und Bedienungselemente mit den Erwartungen der Nutzer abzustimmen.

Strukturelle Gesichtspunkte

Danach gilt es, die strukturellen Gesichtspunkte für eine optimale Darstellung von Website-Inhalten zu beachten. Gemäß den Erwartungen der Besucher oder Kunden an eine positive Besuchererfahrung sollten Sie folgende Punkte berücksichtigen:

• Schaffen Sie klare visuelle Hierarchien.
  >> Die gesamte Struktur soll leicht erkennbar sein!
  • Gliedern Sie den Inhalt für einfaches, schnelles Überfliegen.
    Welche Sachen gehören zusammen? Welche Sachen sind anderen untergeordnet?
    • je wichtiger desto auffälliger
      >> Fetter gedruckt, mehr Weißraum, näher am oberen Rand
    • logisch miteinander verbundene Sachen auch visuell verbinden
      >> unter einer Überschrift positionieren, in einem gemeinsamen klar definierten Bereich zusammenfassen, Objekte visuell ineinander verschachteln, um zu zeigen was Teil wovon ist.
    • Aufteilung der Seiten in klar definierte inhaltliche Bereiche
      >> erlaubt schnelle Auswahl hilfreicher Bereiche
    • Datenstruktur von Texten und Bildern auch für Suchmaschinen
      optimiert aufbereiten und formatieren.
      >> Als Formatierungsstandard für “Strukturierte Daten” wird bei den meisten Suchmaschinen “Microdata” in Verbindung mit Schema.org als Standardvokabular verwendet.
• Minimieren Sie ablenkende Störfaktoren (visuelles Rauschen)
  • Lärm: Alles ist gleich wichtig und kann nach Aufmerksamkeit schreienhttps://dirkrehse.de/wordpress-marketing/schema-org-und-strukturierte-daten-mit-wordpress-plugins-einfach-umsetzen/
  • Unordnung: Auf der Seite liegt alles verstreut herum.
  • Hintergrundrauschen: Die Seite ist mit Inhalten überfrachtet
• Denken Sie daran, die wichtigsten Inhalte und Teaser in den Bereich oberhalb des Seitenumbruchs [above the fold] zu positionieren.

Informative Gesichtspunkte

Schließlich bleiben noch informative Gesichtspunkte für eine optimale Darstellung von Website-Inhalten. Sie leisten ebenfalls ihren Beitrag zu einer interessanten, positiven Besuchererfahrung.

• Attraktive Gestaltung im Sinne eines stimmigen schönen Gesamteindrucks
• Stil und Farbgebung passend zu Angebot oder Produkten der Internetseite Beispielsweise:
  • sehr klarer Stil mit kühler Farbgebung oder
  • sehr verspielt mit kräftiger, bunter Farbgebung
• Multi-Media-Inhalte einbinden
  >> platziert man Bilder oder kleine Videos gekonnt, lockert es den gesamten Inhalt auf. Er liest sich dann weitaus angenehmer und leichter.
• klare Gliederung der Information
  Da man im Internet meistens schneller Informationen selektiert, ist es für das Auge etwas leichter, Inhalte aufzunehmen und sich zurecht zu finden wenn:
  > etwas sofort ansprechend ist
  > klar strukturiert und unterteilt ist
• Formulare und Eingabefelder sparsam gestalten
  so sparsam wie möglich, leicht verständlich und nicht zu viele Pflichtfelder
  Bsp.: Account-Anmeldung, Kontakt oder Newsletter-Formular
• gute Führung und Ausfüllhilfen bei Formularen und Eingabefeldern
  • wenn möglich gegebenenfalls Auto-Suggest und Autovervollständigung für allgemeine Angaben
  • offizielle Kürzel und Langschreibweisen parallel anzeigen und zulassen
  • Ausfüllhilfen in Form von Mouse-Hover-Effekten für die einzelnen Felder
  • Aufteilung in verschiedene gut geführte Schritte und Abschnitte
  • wenn möglich direkte Markierung und unmittelbare Fehlermeldung bei falsch ausgefüllten Feldern

Bilder, Graphiken und Multimedia-Elemente

Ein Bild sagt mehr als 1000 Worte. Dieses Sprichwort hat auch im Internet seine Gültigkeit. Bilder, Graphiken und Multimedia-Elemente lockern einerseits den Inhalt auf, andererseits erzielen sie mehr Aufmerksamkeit und hinterlassen einen bleibenderen Eindruck als reine Textformate. Daher sind gute Bilder und Graphiken sehr wichtig für das Erlangen einer positiven Besuchererfahrung und eines ansprechenden ersten Eindrucks.

• Startseite und Landingpages müssen auf Anhieb interessant erscheinen
  Graphiken und Bilder können besonders schnell und deutlich sichtbar machen worum es geht.

Kriterien für geeignete Bilder und graphische Elemente

Bilder und Videos sind gewöhnlich direkter und weniger abstrakt als Texte. Menschen können sich deshalb mit bildlichen Motiven besser identifizieren. Folglich sind Menschen darüber auch besser zu emotionalisieren. Gestaltungs-, Bild- und Farbkomposition ist ein weites Feld und reicht von einfachen Gestaltungsgrundprinzipien der Gestaltungslehre, über Gestaltpsychologie bis zur Wahrnehmungspsychologie. Es reicht für eine optimale Gestaltung von Website-Inhalten, einige grundlegende Kriterien für geeignete Bilder und graphische Elemente zu beherzigen.

• Verwenden Sie kontrastreiche Bilder & Grafiken.
• Wählen Sie ruhige oder einfarbige Hintergründe.
  >> Einfarbige Hintergründe können allerdings auch durch leichte Farbverläufe oder ganz schwach sichtbare Hintergrundbilder lebendiger gestaltet werden.
• Warme Hintergrundfarbtöne werden vom Auge angenehmer empfunden und deshalb besser aufgenommen als kalte.
  Trotzdem kann gezielt mit dem Mischen wärmerer und kälterer Farbtöne gespielt werden, um das Gesamtbild aufzulockern ohne die Ausgewogenheit oder Harmonie zu zerstören.
  >>> Beachten: Primäre “Call-To-Action”-Buttons werden meist mit kräftigen, knalligeren (warmen) Farben versehen.
• Klare Formen sind im Regelfall eindeutiger zu erfassen.
  >Im Umkehrschluss: je komplexer die abgebildete Form, desto besser muss sie bildgestalterisch gegliedert werden.
• Wenn möglich Menschen im Motiv mit in den Vordergrund stellen.
  >> Insbesondere gut sichtbare Gesichter wirken interessant und lebendig
  >>> Nah-Dransein-Erzählmethodik
• nach Möglichkeit emotionale, spannende Bilder zum Einstreuen wählen
  >> rufen Emotionen hervor und lockern auf
  >> weitere Chancen für Suchmaschinen, eine Website durch Bildersuche besser zu finden
• Infographiken zur Veranschaulichung und Erläuterung
• Videoclips für Erläuterungen und Anregungen einfügen
  >> plastisches und schnelles Medium
  >> weitere Chancen für Suchmaschinen, eine Website durch Videoclips besser zu
  finden

Webtexte

Auch gut strukturierte Texte steuern zu einer positiven Besuchererfahrung bei. Es ist eine vielfach belegte Tatsache, dass Internetnutzer dazu neigen, Websites im Schnelldurchgang nach interessanten Schlagwörtern und Redewendungen zu überfliegen anstatt zu lesen. Daher gibt es beim Schreiben von Texten fürs Internet eigene spezifische gestalterische und inhaltliche Besonderheiten für eine optimale Darstellung von Website-Inhalten zu beachten. Um die Texte gut lesbar zu gestalten, ist es ratsam, den Bildschirm-Seh-Gewohnheiten sowie den Internet-Lesegewohnheiten und -Nutzungsgewohnheiten entgegenzukommen.

• Das Internet dient häufig als schnelles Such- und Recherchemedium für einen schnellen Informationsüberblick.
• Internetnutzer sind eher lese-faul und überfliegen die Texte größtenteils nur.
  >> meistens wenden Leser für die Betrachtung einer Seite nur 10 Sekunden auf
• Am Bildschirm beträgt die Lesegeschwindigkeit nur ¼ der bei Printmedien üblichen Durchschnittsgeschwindigkeit.
  >> lange Texte werden deswegen zum Lesen oft ausgedruckt, da das Lesen am Bildschirm  für die Augen anstrengender ist.
  >>> kostet aber erstmal mehr Zeit

Struktur der Webtexte zum schnellen Überfliegen optimieren

Die Textstruktur ist einer der wesentlichsten Faktoren, wenn es um die generelle Lesbarkeit von Texten von Print- oder Online-Medien geht. Die Textstruktur umfasst sowohl die bloße Textformatierung als auch die Formulierungsweise. Kein Wunder, das auch die Webtext-Struktur eine wichtige Rolle für das Gewinnen einer positiven Besuchererfahrung spielt.

• Verwenden Sie viele, aussagekräftige Überschriften. Gut formuliert und verteilt dienen sie beim Überfliegen als Textzusammenfassung und machen neugierig.
  • Heben Sie die unterschiedlichen Unterschriftenebenen systematisch durch offensichtliche Größenunterschiede deutlich voneinander ab.
  • Rücken Sie die Überschriften näher an den dazugehörigen Textabschnitt heran. Lassen Sie sie also nicht schweben.
• Formulieren Sie kurze Sätze mit aktiven Verben.
  >> Sind besser zu erfassen und wirken lebendiger
• Inhalt klar verständlich formulieren
  >> Verzichten Sie auf lange Phrasen und fachspezifisches Geplänkel
• Schreiben Sie speziell auf die Funktion des Webangebots zugeschnittene Texte.
  > Auch unter Zeitdruck keine Texte verwenden, die man noch rumliegen hat und
  schon passen werden.
• Gliedern Sie Texte in kurze, leicht lesbare Absätze und Textblöcke.
  >> So können Texte gut für Leser mit unterschiedlichen Interessensschwerpunkten
  aufbereitet werden.
• Setzen Sie Listen mit Bullet Points und Tabellen ein, um Dinge besser zu veranschaulichen.
  >> Das erleichtert schnelles Auffinden und Erfassen. Wird der Leser fündig, steigt ertiefer in den Text ein.
• Heben Sie wichtige Schlüsselbegriffe mit Fettdruck hervor.
  • Wenn sie zum ersten Mal im Fließtext auftauchen oder Hauptschlagwörter (am Anfang) eines Bullet Point-Absatzes sind.
• Gestalten Sie Einleitungen oder den Anfangssatz eines neuen Unterabschnittes mit Fettdruck.
• Verwenden Sie keine Flash-Elemente. Hinterlegen Sie die gesamte Seite, Navigation und Texte als Html-Code.
  • Bei Geräten für Blindenschrift funktioniert Flash nicht, da Braillezeilen damit nicht arbeiten können.
  • Flash läuft auf vielen mobilen Geräten nicht mehr und wird von einigen Nutzern aus Sicherheitsgründen deaktiviert
• Schreiben Sie ein gutes Fazit am Schluss.
  >> meistens scrollen die Leser nach unten und lesen zunächst das Fazit. Erst wenn dort etwas unverstanden bleibt, werden die anderen Punkte gelesen.

Webtext-Gestaltung

Textstruktur und Textgestaltung gehen naturgemäß fließend ineinander über. Da Texte der Hauptbestandteil von Nachrichtenmagazinen sind, haben sich die Macher von Online-Nachrichtenmagazinen wie Beispielsweise Spiegel Online viel mit Textgestaltung auseinandergesetzt. Ihre Konzepte sind daher im Punkto Textgestaltung in vieler Hinsicht absolut vorbildlich. Es kann also nicht schaden, sich hier im Sinne einer positiven Besuchererfahrung das eine oder andere abzuschauen.

• Setzen Sie den Text vom Hintergrund kontrastreich ab.
  >> insbesondere bei mobiler Nutzung unter starker Sonneneinstrahlung muss der
  • Kontrast zwischen Text und Hintergrund groß sein
• Verwenden Sie klare und gut lesbare bildschirmoptimierte Schrifttypen.
  >> keine schwer lesbaren Schriften wie Serifen-Schriften
• Benutzen Sie gut erkennbare Schriftgrößen:
  mindestens Schriftgröße 11 für einen Standard-Fließtext
• Machen Sie ausreichend große Zeilenabstände.
  >> Textzeilen mit passendem, deutlichem Abstand voneinander trennen, so dass der
  Text weder gequetscht erschient noch zu zerfallen droht
  • ca. 1 bis 1,5-facher Zeilenabstand bei normalem Fließtext ist für das Auge besser zu trennen.
• Wählen Sie eine gute Zeilenlänge:
  Eine Hauptspaltenbreite beträgt ca. 35-40 Zeichen in Standard-Fließtextgröße pro Zeile. Das sind ca. 3/6 bis 4/6 des Viewports oder Anzeigebereich eines Desktop-Endgeräteformats, was in etwa Buchseitenformat entspricht.
  >> besonders gut lesbar. Ansonsten werden die Wege fürs Auge zu lang.
• Restbreite für Unterkategorie-Navigationsspalte und Marginalspalte sowie in Abhängigkeit vom Bildschirmformat, gegebenenfalls seitlich flankierende “Weißraum-Ränder”

Linktexte

Ein letzter wichtiger Bereich für die optimale Darstellung von Website-Inhalten ist die Gestaltung der Linktexte. Auch hier können Sie mit relativ wenig Aufwand Pluspunkte für das Gestalten einer positiven Besuchererfahrung sammeln.

• Heben Sie Linktexte farblich deutlich vom übrigen Text ab. Es muss nicht immer blau sein, aber eine einheitliche, sich stark abhebende einheitliche Farbe sollte sein. Allerdings wissen Web User aus Erfahrung, dass Links meistens blau sind.
• Arbeiten Sie mit verständlichen Linktexten, wenn Sie intern auf Unterseiten oder auf externe Seiten verlinken.
  • Links direkt mit passenden Wörtern im Fließtext verknüpfen, anstelle von generischen Linktexten wie: für XYZ klicken Sie „hier“.
    
    

    Besuchererfahrung Beispiel: Linktext kurz Spiegel-Online [Bild: spiegel.de]

  • Wenn es Sinn macht, können auch mehrere Wörter oder eine Textphrase als Linktext dienen.
    
    

    Besuchererfahrung Beispiel: Linktext Textphrase Spiegel-Online [Bild: spiegel.de]

• Verlinken Sie den Artikelnamen falls Sie mit Anreißertexten arbeiteten.
  Bsp.: Hier gibt es mehr zu Kaffee aus Guatemala; wählen Sie “Kaffee aus Guatemala” anstatt “hier” oder einfach nur “weiterlesen” als Linktext.
  
  

  Besuchererfahrung Beispiel: Linktext Anreißertext Spiegel-Online [Bild: spiegel.de]

Fazit

Der vierte Artikel meiner fünf-teiligen Blogartikelserie über „Web Usability“ beschreibt die wichtigsten Grundlagen für eine optimale Darstellung von Website-Inhalten zum Erzielen einer positiven Besuchererfahrung. Im Wesentlichen liegt der Schlüssel in der Gestaltung der Inhalte von Webangeboten für schnelles Überfliegen. Denken Sie an Design für Autobahnschilder. Unterschiedliche Beispiele zum allgemeinen Seitenaufbau, zu informativen Gesichtspunkten sowie geeigneten Graphik- und Bildelementen veranschaulichen worauf man achten sollte.

Eine optimale Darstellung von Website-Inhalten ist nicht nur aus gestalterischen Gesichtspunkten wichtig für die Besucherfreundlichkeit, sondernd auch aus funktionalen. Mit anderen Worten eine klare Benennung und Hervorhebung der Funktionselemente sowie eine für den Besucher sinnvolle Anordnung erleichtern den Umgang enorm.

Ein weiterer entscheidender Aspekt der eine gute User Experience ausmacht, ist die Optimierung der Struktur der Webtexte, der Webtext-Gestaltung sowie der Linktexte. Sofern Ihr Webangebot nicht ausschließlich auf Bild- oder Videomaterial beruht ist der Text noch immer die Basis für guten Content. Berücksichtigen Sie die Bildschirm-Seh-Gewohnheiten und passen Sie sich den Internet-Lesegewohnheiten sowie -Nutzungsgewohnheiten an. Geben Sie sich also mühe Ihren Internetauftritt inhaltlich interessant und gut lesbar zu gestalten.

In den vorherigen drei Artikeln dieser Artikelserie wurden bereits die Punkte was ist Usability, gute Erreichbarkeit & klare Website-Identität, einfache Navigation, Orientierung & Interaktion abgehandelt.
In dem fünften Blogartikel werde ich mich eingehender mit dem bereits im ersten Artikel genannten Web Usability-Faktor Responsive Design vertiefen.

1. Warum Web Usability?   2. Einstieg & Identität   3. Navigation & Orientierung   4. Darstellung von Website-Inhalten  5. Responsive Design

Quellen:
Don’t make me think_Steve Krug
Online-Marketing Crashkurs_Video2brain
Erfolgreiche Websites_Gallileo Computing