t3n News Design

Die Top 10 der News-Portale im Usability-Test: Wie nutzerfreundlich sind Nachrichtenseiten?

Die Top 10 der News-Portale im Usability-Test: Wie nutzerfreundlich sind Nachrichtenseiten?

Nachrichtenseiten versuchen immer wieder einen Spagat zwischen Layout und . Doch wie nutzerfreundlich sind die Top 10 wirklich? Wir haben sie mit Hilfe einer Eye-Tracking-Simulation unter die Lupe genommen.

Die Top 10 der News-Portale im Usability-Test: Wie nutzerfreundlich sind Nachrichtenseiten?

Die Eye-Tracking-Ergebnisse für t3n.de (Screenshot: t3n)

Die Test-Methode

Die Lesbarkeit beziehungsweise Usability ist neben dem Traffic eines der wichtigsten Ziele für Internetseiten. Doch wie schneiden gerade News-Portale in diesem Bereich ab? Wir haben die zehn meistbesuchten Nachrichtenseiten in Deutschland analysiert und präsentieren hier unsere Ergebnisse.

Das Ziel dieser Analyse war es herauszufinden, worauf neue Leser eines News-Portals achten und wie sie die Website direkt beim ersten Besuch – im Bereich der ersten 1.200 x 800 Pixel – wahrnehmen.

Genutzt haben wir für den Test die künstliche Intelligenz hinter EyeQuant, die auf Daten von tausenden echten Nutzern basiert und in der Lage ist, sekundenschnelle EyeTracking-Simulationen durchzuführen. Für unseren Test haben wir, mithilfe der EyeQuant-KI, jedes News-Portal vier Tests unterzogen, wobei konkret die ersten 1.200 x 800 Pixel getestet wurden – quasi die „Durchschnittsauflösung von Bildschirmen“.

Der erste Test:

Er erfasst, wohin die Besucher innerhalb der ersten drei Sekunden gucken – das Ergebnis dieses Tests ist eine Wahrnehmungskarte.

Der zweite Test:

Als Ergänzung liefert er die wichtigsten Hot-Spots, woran erkannt werden kann, welche Bereiche generell Aufmerksamkeit bekommen. Dabei gilt das Prinzip: Umso größer die Kreise, desto größter die Aufmerksamkeit.

Der dritte Test:

Im dritten Test-Durchlauf werden die Bereiche markiert, die am meisten Aufmerksamkeit erregen. Roten Bereichen wird demnach mehr Aufmerksamkeit geschenkt als blauen.

Der vierte Test:

Das Ergebnis des vierten und letzte Tests ist der „Clarity Index“ – ein Übersichtlichkeits-Score, der die Übersichtlichkeit des Design auf Basis der künstlichen Itelligenz messbar macht.

Dabei bildet ein Score von 0 ein extrem unruhiges Design ab, ein Wert von 100 einen nahezu utopischen Optimalwert. Der „Clarity Index“ ist somit eine messbare Größe, mit der Benchmarks durchgeführt werden können. In unserem Benchmark haben wir die von uns getesteten News-Websites mit den Clarity-Scores der – laut Alexa-Ranking – 10.000 meistbesuchtesten Websites der Welt verglichen, um eine Einschätzung abgeben zu können, wie die deutschen News-Portale im Vergleich zu den Top 10.000 abschneiden.

Bild.de

Bild.de ist laut den aktuellsten IVW-Zahlen die Nummer 1, wenn es um Visits geht. Aber wie schneidet Bild.de in unserem Test ab?

Bild.de erreicht einen bescheidenen Clarity-Index von 22 und befindet sich damit in den unteren 21 Prozent der meistbesuchtesten Websites laut Alexa-Ranking. Der Hauptgrund für diesen niedrigen Score ist das „Take-Over-Banner“, das zu stark vom eigentlichen Design ablenkt und für Unruhe sorgt. Wie auch auf der Wahrnehmungskarte und den Hot-Spots zu sehen ist, liegt das Hauptaugenmerk verstärkt auf dem Logo von Samsung und den abgebildeten Menschen in der oberen linken Ecke, gefolgt vom eigentlichen Logo von Bild.de – für den Leser relevante Inhalte beginnen erst bei „Von Brasilien an den Bosporus?“ – fast schon im Goldenen Schnitt des Viewports. Dementsprechend kommt dieser Sub-Überschrift auch Aufmerksamkeit zu.

Alles in allem verliert Bild.de viel Aufmerksamkeit durch Logos und das „Take-Over“-Banner, anstatt die Aufmerksamkeit auf den Inhalt oder die Navigationsstruktur zu lenken.

Spiegel Online

Laut Visits-Messung von IVW rangiert Spiegel Online auf Platz 2 hinter Bild.de. In unserem Test führt Spiegel.de die Rangliste mit einem Clarity-Score von 73 an. Mit dem erreichten Score befindet sich das News-Portal in den oberen 20 Prozent des Alexa-Rankings.

Nichtsdestotrotz wird vor allem die Werbung und nicht der Inhalt von Lesern wahrgenommen – die Navigation wird kaum beachtet. Vom Text der Werbung abgesehen, kommt dem Logo der Website die meiste Aufmerksamkeit zu, dicht gefolgt von der Überschrift des Artikels, die aber erst im unteren Fünftel der Website auftaucht. Auch die WM-Auflistung im zweiten Werbebanner wird von Lesern besser wahrgenommen als die eigentliche Navigation selbst.

Zusammengefasst kann gesagt werden, dass Spiegel Online enorm viel Aufmerksamkeit an das im Zentrum positionierte Werbebanner verliert.

Focus Online

Die Nummer 3 im IVW-Ranking ist Focus Online. Mit einem Clarity-Index von 36 spielt die Seite aber eher im unteren Mittelfeld. Ein regelrechter Magnet der Aufmerksamkeit sind der Text „WM 2014“ und das rote Logo von Focus selbst. Obwohl der einzige sichtbare Inhalt „nur“ der News-Ticker ist, wird er gar nicht wahrgenommen, viel mehr richtet sich die Aufmerksamkeit auf das Werbebanner von 1und1 und die Gesichter – die Navigationsleiste wird kaum beachtet.

Aufgrund der Tatsache, dass Focus Online selbst kaum Inhalt in den ersten 1.200 Pixeln zeigt, wird fast die gesamte Aufmerksamkeit auf die Werbeschaltung gelenkt. Gut für Anzeigenkunden, schlecht für die Leser.

n-tv.de

Ähnlich verhält es sich auch mit n-tv.de. Es werden kaum Inhalte geboten, allerdings – und das macht n-tv.de besser – richtet sich ein bedeutender Teil der Aufmerksamkeit auf die ersten sechs Navigationspunkte.

Wie auch bei Focus Online ist „Fußball“ ein Aufmerksamkeitsmagnet, allerdings büßt n-tv.de nicht soviel Aufmerksamkeit bei der Navigation ein. Trotzdem erreicht das Nachrichtenportal „nur“ einen Clarity-Score von 40 und befindet sich damit in den unteren 42 Prozent der Top 10.000 des offiziellen Alexa-Rankings.

Ein Grund dafür ist die Werbeschaltung von 1und1.de am rechten Rand – die Drei-Punkte-Liste erzeugt Unruhe, wird von den Lesern aber gar nicht beachtet.

Die Welt

Die letzte Seite unter den Top 5 des IVW-Rankings ist Die Welt. Die Website der Zeitung schafft es, die Aufmerksamkeit sowohl in den ersten drei Sekunden als auch generell auf das Logo, die Navigation und die Headline des Artikels zu lenken. Selbst die folgenden Headlines können die Aufmerksamkeit der Leser gewinnen.

Obwohl keine Werbeschaltungen eingeblendet werden, erreich Die Welt einen eher durschnittlichen Clarity-Index von 42 – und liegt damit in den unteren 45 Prozent der Top 10.000. Ein Grund dafür könnte die Monotonie des Designs sein – beinahe jede Textzeile wird als gleich wichtig erkannt, eine Inhalts-Hierachie kann kaum ausgemacht werden.

Das Website-Design der Zeitung erinnert an ein klassisches Zeitungslayout – und dieses Layout funktioniert auch, vorausgesetzt die Designer wollten, dass die Inhalte wirklich gelesen werden.

Süddeutsche.de

Auf Platz Nummer 6 laut IVW-Ranking, aber das zweitbeste Ergebnis von 70 Punkten beim Clarity-Index präsentiert sich die Website „Süddeutsche.de“. Sowohl das Eye-Tracking als auch die Hot Spots zeigen vor allem eines: Der Leser fokussiert sich geradezu auf die Überschrift des Artikels, die sich nahe dem Goldenen Schnitt befindet und dieses Verhalten noch zusätzlich begünstigt. Einziger Ausreißer ist wieder einmal die „Große WM-Aktion“ auf der rechten unteren Seite.

Selbst die drei großen Gesichter sorgen kaum für Ablenkung. Die ersten vier Punkte der Navigationsleiste, der Artikeltitel – selbst der Teaser-Text – bekommen die volle Aufmerksamkeit.

Zeit Online

Der ähnliche Aufbau der Website von „Zeit Online“ im Vergleich zu „Süddeutsche.de“ sorgt für einen ähnlichen Clarity-Index, nämlich 60. Durch die Werbeeinschaltung, die sich über die gesamte Breite der Website erstreckt, verliert „Zeit Online“ massiv an Aufmerksamkeit. Nicht der Inhalt sondern die Werbeanzeige stehen im Vordergrund. Sowohl Wahrnehmungskarte als auch die Aufmerksamkeitskarte zeichnen ein eindeutiges Bild: Die Leser beschäftigen sich mehr mit der Werbeschaltung als mit dem eigentlichen Inhalt der Website.

Die Aufmerksamkeitskarte lässt zwar darauf schließen, dass die Artikel-Box in der unteren rechten Ecke beachtet wird, aber lange nicht so intensiv wie das Bild in der Werbeeinblendung oder das emotionale Bild des Artikels. Die Navigation bleibt praktisch unbeachtet.

FAZ.net

Ein ähnlich skeuomorphistisches Design wie Die Welt hat auch die Website der Frankfurter Allgemeinen Zeitung. Das noch stärker einer klassischen Zeitung nachempfundene Layout erreicht allerdings den niedrigsten Clarity-Score von allen getesteten Portalen, nämlich 18. Grund hierfür ist – wie auch schon bei der Welt – die monotone und einheitliche Darstellung von Texten ohne leicht und visuell erkennbare Inhaltshierachie.

Die Hauptaufmerksamkeit richtet sich auf die zentrierte und gebrochene Schrift des Logos und auf das Publikum im Teaser-Bild des ersten Artikels. Zusätzlich verliert das sonst aufgeräumte Design einen relative großen Teil der Aufmerksamkeit auf den ebenfalls zentrierten Text der Werbeschaltung am oberen Ende der Website.

Stern.de

Das Design von Stern.de erreicht durch einen Clarity-Index von 66 die oberen 27 Prozent der 10.000 meistbesuchtesten Websites. Wie die Wahrnehmungskarte verrät, schafft es Stern.de, dass innerhalb der ersten drei Sekunden sowohl die Werbung, als auch das Logo und der Inhalt wahrgenommen werden.

Wie ihr auf der Aufmerksamkeitskarte sehen könnt, erhalten alle Artikel-Überschriften fast die gleiche Aufmerksamkeit wie die Werbeschaltungen. Die zehn stärksten Aufmerksamkeitspunkte verteilen sich gleichmäßig auf Logo, Werbeschaltung am oberen Rand und Hauptartikel. Bemerkenswert: Die Navigation wird kaum beachtet, die gesamte Aufmerksamkeit richtet sich auf die „Tabs“ im Teaserbild.

Positive Auswirkung auf Usability: N24

Die Nummer 10 im IVW-Ranking wird von N24 belegt – im Rahmen unseres Tests befindet sich die Website im guten Mittelfeld. N24 landet mit einem Score von 48 in den oberen 48 Prozent und schafft es, die Aufmerksamkeit der Leser vorbildlich zu steuern, beginnend beim Logo über die Videos bis hin zum Aufmacher.

Einziger Ausreißer ist „WM2014“ am unteren Rand der Website. Sowohl die Navigation als auch die Videos werden dagegen gut erkannt und ziehen mit Abstand die meiste Aufmerksamkeit auf sich.

Und was ist mit t3n.de?

Natürlich haben wir uns selbst auch unter die Lupe genommen, schließlich versuchen wir laufend, unser Layout und unsere Usabiliy zu optimieren. Mit einem Score von 45 befinden wir uns in den unteren 50 Prozent, gemessen an der Übersichtlichkeit der Top 10.000 der meistbesuchten Websites.

Das Layout von t3n.de führt den Leser zwar kaum, allerdings wird die Aufmerksamkeit pointiert auf die ersten zwei Artikel und das Logo inklusive Claim, aber auch auf unser Abo-Spezial und somit auf unser Magazin gelenkt, was unserer Wunschvorstellung entspricht. Bemerkenswert ist, dass wir kaum Aufmerksamkeit mit den Teaser-Bildern erwecken, sondern verstärkt über die Überschriften.

Auch wir verlieren Punkte beim Clarity-Index durch eine suboptimal gestaltete Navigations-Hierachie – sowohl Haupt- als auch Sub-Navigationsleisten zeigen kaum eine eindeutige Inhaltshierachie auf – der Besucher muss zuerst lesen und dann für sich selbst entscheiden, ob die Haupt-Navigationsleiste wirklich wichtig ist oder nicht. Genauso verhält es sich auch mit der schwarzen Navigationsleiste am oberen Rand der Website. Hier könnten wir also noch nachbessern.

Fazit: Usability-Testing wird durch Eye-Tracking berreichert

Abgesehen vom Clarity-Index von 48 schafft es N24, die Aufmerksamkeit des Lesers so gekonnt zu steuern und sowohl Inhalt als auch Navigation so gut in den Vordergrund zu rücken wie keine andere Seite. Spiegel Online hat zwar den höchsten Clarity-Score, zeigt aber vergleichsweise wenig Inhalt auf den ersten 1.200 Pixeln. Das Angebot ist somit zwar übersichtlich, es muss aber erst gescrollt werden, um den eigentlichen Inhalt des Nachrichten-Magazins sehen zu können.

Den Spagat zwischen Übersichtlichkeit und Inhaltsmenge schaffen nur die Online-Auftritte Süddeutsche.de und Stern.de. Mit dem zweitbesten Clarity-Index von 70 rangiert Süddeutsche.de vor den 66 Punkten von Stern.de, wobei der Stern mehr Inhalt präsentiert und der auch besser wahrgenommen wird.

Zusammenfassend kann gesagt werden, dass die Usability von fast allen News-Portalen negativ von zu unruhigen Werbebannern beeinflusst wird und nicht nur innerhalb der ersten drei Sekunden Aufmerksamkeit vom Inhalt weg gelenkt wird, sondern auch längerfristig. Wie am Beispiel der Welt und der Frankfurter Allgemeinen zu sehen ist, ziehen auch unruhige Bilder die Aufmerksamkeit auf sich – ob das ein Vor- oder Nachteil ist, muss jeder selbst entscheiden. Ähnlich verhält es sich übrigens mit WM-bezogenen Inhalten. Natürlich kann es durchaus beabsichtigt beziehungsweise gewünscht sein, dass WM-bezogene Inhalte mehr Aufmerksamkeit bekommen – und das ist auch absolut gelungen.

Des weiteren lässt der Test erkennen, dass sich die eher traditionelle Herangehensweise, den Leser nicht durch reißerische Headlines und übergroße Teaser zu „triggern“, sondern Inhalte neutral und gleichwertig darzustellen, als Nachteil erweisen kann.

Wir bedanken uns bei EyeQuant für das Zurverfügungstellen ihres Tools, um die Usability durch Eye-Tracking validieren zu können.

Newsletter

Bleibe immer up-to-date. Sichere dir deinen Wissensvorsprung!

Vorheriger Artikel Zurück zur Startseite Nächster Artikel
14 Antworten
  1. von Philipp Blum am 21.07.2014 (10:49 Uhr)

    Antwort der Umfrage: Keines der genannten

    Antworten Teilen
  2. von fhbfg am 21.07.2014 (10:59 Uhr)

    Aus diesem Grund ist das Web ohne Adblocker nicht mehr ertragbar.

    Antworten Teilen
  3. von silez am 21.07.2014 (13:09 Uhr)

    Richtig @fhbfg, dass sehe ich auch so, habe AdBlock und AdBlock+ sowie einen extra Facebook- und YouTube-Blocker. Leider kann man das Netz so gar nicht mehr ohne AdBlock nutzen. ABER darum geht es hier ja nicht wirklich, am übersichtlichsten finde ich die süddeutsche Seite, man findet sich einfach schnell zurecht. Dennoch könnten dort mehr "EyeCatcher" verbaut werden.

    Antworten Teilen
  4. von Daniel Lo am 21.07.2014 (13:20 Uhr)

    Also die Lesbarkeit einer Website mit usability gleich zu setzen ist schon kühn.
    Ein Blickbauf die Methodik zeigt: usability hier überhaupt zu erwähnen ist schon zu viel gesagt. Wo sind die usecases? Außerdem wird hier ein reiner Vergleich der Anumtung durchgeführt.Für eine usability Studie wäre z.b. die Aufgabe findet Artikel XY und leite ihn an einen Freund weiter wesentlich sinnvoller.
    Den Begriff Eytracking SIMULATION verstehe ich auch nicht.
    Alles in allem hoffe ich ihr holt euch nächstes mal Hilfe und werdet euch erst mal klar was ihr vergleichen wollt.

    Schade. Normalerweise mag ich t3n. Aber hier habt ihr gepfuscht. Sorry.

    Antworten Teilen
  5. von Frauke am 21.07.2014 (14:21 Uhr)

    Einen ernst gemeinten Artikel über Eyetracking zu veröffentlichen bei dem eine Website durch ein Script gejagd wird ist schon tollkühn. Sorry t3n, aber ihr macht euch mit sowas lächerlich.

    Antworten Teilen
    • von Alexander am 21.07.2014 (18:05 Uhr)

      Das ist nicht tollkühn, sondern mit Sicherheit gekaufter Content. Eyequant wollte, dass das Tool besprochen wird, hat was springen lassen. Et voilà, das ist dann der kreative Versuche von t3n das zu realisieren.

      Antworten Teilen
      • von Florian Blaschke am 22.07.2014 (09:21 Uhr)

        Ach, liebe Kollegen. ^^ Da scheint noch nicht überall angekommen zu sein, dass wir bezahlten Content ganz simpel als „Sponsored Post“ kennzeichnen – immer. Und mir würde jetzt ganz ehrlich noch nicht mal ein Grund einfallen, warum wir das in Einzelfällen anders handhaben sollten. Euch?

        Teilen
      • von Alexander am 23.07.2014 (22:41 Uhr)

        @Florian Blaschke: Erst einmal bin ich weder Mehrzahl, noch Dein Kollege, auch wenn Du mir das sogar in einer E-Mail versucht hast weiszumachen. :) Es mag daran liegen, dass du noch nicht so lange für t3n arbeitest, aber ich habe schon sehr lange, immer mal wieder unter demselben Namen bei "Euch" kommentiert.

        Jahrelange Erfahrung im Online-Business und der Umgang mit Online-Marketeern gibt mir genug Gründe an die Hand, warum es Regeln von einer Ausnahme geben "könnte", die es so lange ja noch gar nicht gibt. Nur weil Google angefangen hat Sponsored Content abzuwerten, haben Online-Magazine begonnen, das anders zu handhaben. Grauzonen sind selbst bei etablierten Online-Medien, die nichts mit Technik zu tun haben, tagtäglich anzutreffen, immerhin wird die Monetarisierung von Online-Medien äußerst schwierig. Das war und ist im Print genauso, nur dort gibt es kein wirkliches Korrektiv. Sehr plakatives Beispiel aus anderem Kontext: Würdet ihr die Produkte eines eurer Werbekunden (zu) kritisch betrachten, würde der sicherlich überlegen, ob er sein Budget nicht anderswo ausgibt.

        Ich hab überdies ja nur eine reißerische Vermutung geäußert, Du hast sie dementiert. Alles in Butter. ;) Entsprechend kann man davon ausgehen, dass Eyequant sich über so viel Gratis-Werbung freut und Ihr, falls ihr das Produkt zur Optimierung eurer Webseiten nutzen wolltet, der Loyalität Euren Lesern gegenüber verpflichtet bleibt und keinen Rabatt in Anspruch nehmen werdet. :) "Sowas in der Art" hat man bei der BILD-Zeitung vor ein paar Monaten doch auch gemacht, als man dieses komische Schnelllese-Widget Spritz vorstellte.

        Teilen
  6. von Andreas am 22.07.2014 (09:28 Uhr)

    Wie sieht es eigentlich mit der Gesamtausrichtungt der Seite aus. Was mich beim lesen von t3n seit Langem stört, ist dass die Seite am linken Bildschirmrand meines Monitors klebt.
    Soweit ich das überblicken konnte, sind sämtliche der getesteten Newsportale zentriert platziert.
    Je breiter der Monitor ist, um so ungemütlicher wird es beim Lesen.

    Aus welchen Grund wird die Seite von t3n.de (oder Webseiten allgemein) linksbündig angeordnet?

    Antworten Teilen
  7. von strzlee am 22.07.2014 (11:00 Uhr)

    checkt mal derstandart.at, kurier.at und futurezone.at

    Antworten Teilen
  8. von Rennschote am 23.07.2014 (17:37 Uhr)

    Leider einfach nur peinlich der Artikel. :-( Habe gedacht, ein paar interessante Usability Erkenntnisse mitnehmen zu können, doch mit Usability hat dieser Artikel so gut wie nichts zu tun.

    Allein der letzte Satz bzw Hinweis: Wie wollt ihr denn mit der puren Anwendung von Algorithmen aus der Wahrnehmungspsychologie die Usability "validieren"?!
    Sorry, aber das ist echt ganz großer Käse!

    Antworten Teilen
  9. von Sebastian am 24.07.2014 (20:28 Uhr)

    Ich kann die Ist-doch-blöd-dieser-Test-Haltung nachvollziehen. Aber mit Abstand und fachlichem Verstand betrachtet ist der Test in Ordnung, EyeQuant gut und die Ergebnisse daraus hilfreich. Man kann sich nicht auf die Ergebnisse alleine Verlassen, das macht man aber auch nicht bei Eye Tracking mit Menschen. Die Fehlerquote bei letzterem ist deutlich schneller und einfacher provoziert, wenn der Test nicht lupenrein geplant und durchgeführt ist.

    Was ich reichlich unschön finde, ist das Herumhacken auf den Autoren oder dem Magazin. Mir gefallen auch so einige Artikel nicht, fach- oder inhaltlich. Dennoch kann man Kritik auch sachlicher – vielleicht sogar mal korrekt begründet – darlegen.

    Antworten Teilen
Deine Meinung

Bitte melde dich an!

Du musst angemeldet sein, um einen Kommentar schreiben zu können.

Jetzt anmelden

Mehr zum Thema Usability
„AdWords Uncovered“: Eye-Tracking-Studie zeigt, wie die neuen Google-Ergebnisse wahrgenommen werden
„AdWords Uncovered“: Eye-Tracking-Studie zeigt, wie die neuen Google-Ergebnisse wahrgenommen werden

Im Februar dieses Jahres hat Google die AdWords-Anzeigen aus der Seitenleiste der Desktop-Google-Suche entfernt. Wie sich diese Änderung auf das Nutzerverhalten auswirkt, zeigt eine … » weiterlesen

20 CSS-Cursor-Eigenschaften für bessere Usability
20 CSS-Cursor-Eigenschaften für bessere Usability

Schon mal darüber nachgedacht, den Cursor deinem Design anzupassen? Wir haben einige Beispiele rausgesucht, wie du mit dem Cursor deine Usability noch besser machen kannst. » weiterlesen

Für Touch, Tap und Fernbedienung: So geht Usability-Optimierung für Responsive Webdesign
Für Touch, Tap und Fernbedienung: So geht Usability-Optimierung für Responsive Webdesign

Wenn eine Webseite auf allen Geräten – vom Smartphone über den Desktop bis zum Smart TV – optimal dargestellt werden soll, kommt heute Responsive Webdesign zum Einsatz. Doch auch das beste … » weiterlesen

Alle Hefte Jetzt abonnieren – für nur 35 €

Kennst Du schon unser t3n Magazin?