Webstandard & Webdesign - CSS, HTML

 

Hyperlinks und deren Usability

Die Optimierung seiner Webseite dürfte jedem Betreiber am Herzen liegen. Wird das neue Design gut angenommen? Ist die Navigation oder bestimmte Teaser-Elemente gut positioniert und werden sie auch als solche wahrgenommen? Ist die Navigation für jedermann nutzbar? Fragen die sich oft gestellt. Vor dem Entwurf eines Designs, während der Umsetzung und natürlich insbesondere direkt vor dem Livegang. Vor ein paar Monaten hatte ich in einem Beitrag auf das Websitetrackingtool Crazy Egg hingewiesen, da diese Anwendung durchaus interessante Einblicke in das Klickverhalten der Webseitenbesucher gewährt. Dieses ermöglicht dann mittels einer Art Visualizer, eine farbliche Visualisierung der Kennwerte aller angeklickter Links auf der Seite. Die Navigation und Links meines Weblog habe ich mittels des Skriptes, einem etwas ausführlicherem Test unterzogen. In meinem damaligen Artikel hatte ich ein paar Fragen gestellt, die nach dem Einsatz von Crazy-Egg, besser beantwortet werden können.

Welche definierten Elemente werden als Link wahrgenommen und welche am häufigsten angeklickt?

Offensichtlich als Linkzone wahrgenommen, wird vor allem die Navigation im rechten Bereich. Ein wenig überraschend für mich war, dass das Interesse der Links um sie weiter unten sie platziert sind, nicht weniger interessant sind bzw. waren. Am wenigsten Interesse scheint hier der internationale Blogroll zu haben. Das Hauptinteresse hingegen, liegt bei den Links zu den aktuellen Beiträgen ( obwohl exakt diese alle im Contentbereich bereits zur Verfügung stehen und man mit ein wenig scrollen direkt im Beitrag landen würde ) und dem Navigationsbereich der Kategorien. Die Artikelüberschriften, der Link zu den Kommentaren und der Link "weiter" zu den einzelnen Beiträgen werden auf Grund der Ergebnissübersicht der Heatmap am häufigsten auf meinem Weblog benutzt. Nur zwei Elemente scheinen die User noch mehr zu interessieren. Das ist einmal der Link zur "Site of the week" und die Suche, was mich persönlich auch ein wenig überrascht hat, das diese ( roter Prozentbalken siehe Overlaygrafik ) so häufig genutzt wird.

Welche Bereiche sind für die User am interessantesten ( Klickhäufigkeit )?

Da ich die einzelnen Tests über Wochen hinweg verteilt habe, um bei den unterschiedlichsten Beiträgen das Interesse ein wenig zu testen, kann man alles in allem kurz und knapp gesagt sagen, dass das Monatsarchiv sehr selten genutzt wird. Das Grafiklinks wesentlich häufiger als Textlinks benutzt werden. Das dürfte bei meinem doch recht textlastigem Weblog allerdings kein Wunder sein, denn da würde selbst ich auf die wenigen verlinkten Bilder klicken die sich mir anbieten würden ;o) Allerdings werden auch Beiträge zu bestimmten Themen eher weniger angeklickt ( sei es mittels dem Überschriftlink oder die Navigation ). Bspw. Beiträge zu Veranstaltung, Buchempfehlungen oder W3C Informationen. Das könnte auf der einen Seite beispielsweise damit zu tun haben, dass es die Leser nicht interessiert oder sie darüber bereits informiert sind. Vielleicht sind die Beiträge aber auch einfach nur zu schlecht? Wer Feedback dahingehend abgeben möchte, hilft mir und letztendlich natürlich den Lesern des Blogs natürlich auch weiter.

Werden auch weiter unten gelegenen Artikeln vom User wahrgenommen?

Diese Frage ist auf Grund der Klicks in diesem Bereich deutlich und ohne Einschränkung bejahen. Obwohl natürlich schwer zu sagen ist, ob nach unten gescrollt wird oder oben rechts einfach "nur" der Link im Bereich "aktuelle Artikel" angeklickt wird. Die Heatmap zeigt deutlich, dass die Leser die Links in diesem Bereich zwar weniger als im oberen Bereich wahrgenommen haben, diese bei interessanten Beiträgen aber trotzdem angeklickt wurden. Bei Links wie dem zum Impressum, sind allerdings trotz der Position ganz unten im Layout, zahlreiche Klicks erreicht wurden. Die obige Frage kann also eindeutig bejaht werden.

Was kann man nun daraus für die eigene Webseite schliessen?

Links müssen in Ihrer Beschreibung eindeutig sein, damit der User sich vorstellen kann, in welchem Bereich einer Webanwendung er sich nach dem Link wieder findet und welche Informationen ihn erwarten. Um einen Leser sicher und gezielt durch eine Webseite zu geleiten, sollte man ihm, in Bezug auf Links, die Sicherheit geben, die er benötigt. Denn wenn er überlegt, ob genau dieser Link ihn an das Ziel seiner Suche bringt, ist die Beschreibung des Links nicht optimal. In Online-Shops oder anderen verkaufsorientierten Webanwendungen, kann diese Entscheidung grossen Einfluss nehmen in Bezug auf die Verluste oder Gewinne des gesamten Projektes. Des weiteren, sind Linkelemente im unteren Bereich nicht unbedingt fehl am Platze, aber für die Navigation innerhalb einer Webanwendung wichtige Links sollten immer im oberen Bereich aufzufinden sein, da sie eher im "Aktionsradius" des Users liegen.

Positionen der Links

Linklisten wie in meinem Blog könne ohne entsprechende Rubrikbeschreibung ( bspw. Archiv, Blogroll ) schnell zu einer unübersichtlichen Linksammlung verkommen. Da wie bei mir die Links im Bereich der Navigation von der Schriftart, -grösse und -farbe identisch sind, sollten sie erst Recht eine entsprechende verständliche Kategoriebeschreibung erhalten. Durch die geringen Abstände der Links innerhalb der Kategorien, wird es dem Leser ermöglicht, nicht nur inhaltlich sondern auch optisch eine Art Gruppierung zu festzulegen, was durch die Heatmap oder die Overlaygrafik deutlich aufgezeigt wird.

Wer seine Inhalte für jedermann erreichbar anbieten möchte, sollte Sinn und Zweck des Links entsprechend eindeutig kommunizieren. Dies kann auch wie bei meiner Rubrik "Site of the week" mit einem Thumbnail oder einem Logo geschehen, um dass Interesse noch ein wenig mehr dahingehend zu inspirieren den Link zu "nutzen" ( beigefarbener Prozentbalken siehe Overlaygrafik ). Das meiner Meinung wichtigste am Navigationslayout, ist die Konsistenz der Navigationsstruktur. Sie sollte in allen Bereichen der Webanwendung gleich aussehen und natürlich auch funktionieren, damit muss sich der Nutzer sich nicht jedes Mal neu orientieren muss ( wichtig vor allem für User die die Seite zum ersten mal besuchen ).

Mögliche Untersuchungsmerkmale im Sinne einer besseren Usability eines Links oder Linkbereiches:

• Kontrast: Ist der Kontrast zwischen dem Navigationsbereich und seinen Linkelementen und dem Contentbereich eindeutig?
• Verfügbarkeit: Bleibt der Navigationsbereich immer verfügbar und an der selben Position sichtbar?
• Nutzen: Sind das Navigationselement Startseite und eventuelle Skiplinks vorhanden und werden sie als solche erkannt und genutzt?
• Zeilenabstand: Ist der Zeilenabstand gross genug, so das verschiedene Links auch als solche wahrgenommen werden ( wichtig bei mehrzeiligen Links, wie hier im Navigationsbereich )?
• Schriftgrösse: Ist die Schriftgrösse skalierbar?
• browserübergreifende Darstellung: Sind die Linkbereiche in allen Browsern und Plattformen nahezu identisch dargestellt?
• Zeilenlänge: Ist die Zeilenlänge der Links optimal ( wichtig bei Seiten mit kleiner Auflösung und damit oft geringer Breite für die Navigation )?
• Textgrössenverhältnis: Wie ist das Verhältnis der Grösse des Textkörpers im Vergleich zum restlichen Content ( Eine andere Grösse und deren daraus resultierende Grössendifferenz, könnte einen Link schneller als solchen identifizieren können )?

Fazit: Wie bereits im ersten Beitrag zu CrazyEgg erwähnt, ist dieses Tool kein Allheilmittel. Aber es kann dabei helfen die optimale Position eines Links oder Linkbereiches herausgefunden werden, um so mit dessen Effektivität zu steigern. Gerade in Weblogs, in denen Links in oft grosser Zahl in jeder mögliche Art anbieten ( Textlinks ( mit & ohne Icon ), Grafiken als Links bzw. Button oder Imagemaps etc. ), können so effektivere Linkbereiche identifiziert werden. All diese Optimierungsmöglichkeiten können dazu beitragen eine Webanwendung bzw. deren Linkelemente effektivier und effizienter zugestalten. Dies wiederum kann für zufriedene Leser oder Kunden sorgen.

Zum Abschluss des Artikel würde mich noch dafür interessieren, welche "Hilfsmittel" ( Software etc. ) ihr nutzt oder welchen "Richtlinien" ihr folgt, um eben eine bestmögliche Effektivität für die einzelnen Bereich des Layouts zu erzielen.