Entwerfen von Nachrichten: Wie Top-Nachrichtenseiten mit Tonnen von Inhalten umgehen

Wenn es nach mir ginge, würden Webseiten zusammen mit fast jedem anderen Webdesigner immer eine relativ begrenzte Menge an Inhalten enthalten, um den Fokus klar zu halten und die Kommunikationslinie leicht zu verfolgen.

Leider erfordern reale Situationen Webseiten mit immensen Mengen an Inhalten. Um zu lernen, wie man die Probleme in diesem Bereich angeht, schauen wir uns einen bestimmten Abschnitt von Websites an, die möglicherweise überfüllt sind als alle anderen: Nachrichten-Websites. Wie gehen die Designer von CNN, MSNBC, Fox und anderen mit dem Layout so vieler Informationen um? Finde es nach dem Sprung heraus.

Header und Navigation

Der Header ist ein absolut entscheidender Aspekt einer Nachrichtenseite. Jeder Benutzer weiß beim Besuch einer Nachrichtenseite, dass es Unmengen von Inhalten zu durchsuchen gibt. Wenn er etwas Bestimmtes möchte, geht er direkt zum Header, um es zu finden.

Hier bekommen wir unseren ersten Einblick in das Problem, das uns für den Rest des Artikels plagen wird: zu viel Zeug! Wie ich im Intro erwähnt habe, müssen Nachrichtenseiten unbedingt viele Informationen vermitteln, deshalb gibt es sie. Das Organisieren all dieser Informationen ist keine Kleinigkeit und fast jede Entscheidung, die Sie treffen, kann die Benutzerfreundlichkeit der Website drastisch beeinträchtigen.

Schauen wir uns unser erstes Beispiel an. Das Bild unten zeigt den Header und die Navigation für MSNBC.com.

Wie Sie sehen können, ist in den ersten Zentimetern dieser Website viel los. Ganz oben auf der Seite befinden sich ungefähr fünfzehn Links. Diese sind nur für andere Websites bestimmt. Die interne Navigation befindet sich darunter und enthält weitere zwölf.

MSNBC verwendet für jeden Abschnitt der in der Navigation angezeigten Site einen eigenen interessanten Dreh in einem Dropdown-Menü. Hier sehen Sie fünf bis sechs Textüberschriften, einige Bilder und noch mehr Inhalte, die zu einer anderen Site führen. Nach mehreren Navigationsebenen schaffen wir es schließlich neben Wetter- und Such-Widgets zum Logo der Site am unteren Rand der Kopfzeile.

Ich denke, der MSNBC-Header ist ein bisschen chaotisch, das Branding geht verloren und die Last an sekundären Inhalten lenkt ab. Vergleichen Sie dies mit dem Header für eine der am besten aussehenden Nachrichtenseiten, die ich gefunden habe, CNN.

Hier haben wir ein starkes, klares Branding, eine Suchleiste genau dort, wo Sie danach suchen würden, und ein einfaches Navigationsmenü ohne ein einziges Dropdown. Dieses Menü bietet ein ausgewogenes Verhältnis zwischen minimalem Design und ausreichender Funktionalität, damit Sie problemlos dorthin gelangen, wo Sie möchten.

Fox nimmt einen ähnlichen Weg wie CNN. Es ist etwas unübersichtlicher und erstreckt sich über mehrere Websites wie MSNBCs, aber die Registerkarten helfen dabei, die Metapher verständlich zu machen.

Die Washington Post begann mit einer ähnlichen Idee wie MSNBC, setzte sie jedoch viel besser um. Wie Sie sehen können, ist der Name der Site schön groß und wird von einem Wetter-Widget gefolgt.

Wenn Sie den Mauszeiger über die Navigation bewegen, erhalten Sie ein großes Dropdown-Menü. Anstatt den Inhalt wie bei MSNBC umständlich nach unten zu verschieben, wurde er so strukturiert, dass er den großen Bereich „Washington Post“ abdeckt.

Der Unterricht

"Seien Sie vorsichtig bei Mega-Dropdowns, die ihr Versprechen, die Navigation auf Ihrer Website zu vereinfachen, nicht wirklich erfüllen."

Ich denke, die Lektion hier ist, Ihre Benutzer nicht sofort mit einem überfüllten Header zu überfordern. Dies bedeutet nicht, dass Sie nicht viel Inhalt haben können. Seien Sie nur vorsichtig bei Mega-Dropdowns, die ihr Versprechen, die Navigation auf Ihrer Website zu vereinfachen, nicht wirklich erfüllen. CNN beweist, dass manchmal eine einfache alte horizontale Liste von Links und einige gut strukturierte Leerzeichen auch in einer Umgebung mit Masseninhalten hervorragend funktionieren können.

Ausgewählte Geschichten

Das nächste, was ich diskutieren möchte, ist, wie diese Websites Ihre Aufmerksamkeit erregen und sie auf das lenken, was wichtig ist. Jede Nachrichtenseite enthält ein oder zwei Top-Storys, von denen sie wissen, dass sie aktuell sind, und muss die Seite strukturieren, um diese Storys angemessen hervorzuheben.

Mein Lieblingsbeispiel dafür ist The Huffington Post, bei der eine einzelne Nachricht mit einem riesigen Bild und einer fetten Überschrift hervorgehoben wird, die sich beide über die gesamte Breite des Seitencontainers erstrecken.

Schauen Sie sich einfach an, wie sauber und schön das im Vergleich zu anderen Nachrichtenseiten ist, die Sie gesehen haben. Es ist alles andere als beliebt für Nachrichtenseiten, dieses Format zu verwenden, aber Sie müssen zugeben, dass es hier recht gut zu funktionieren scheint.

MSNBC geht einen ähnlichen Weg, ist aber nicht so drastisch, dass nur eine einzige Story oben auf der Seite angezeigt wird. Sie haben ein großes Bild links flankiert mit verschiedenen Überschriften. Ich mag das Grundlayout sehr, obwohl ich denke, dass die zufälligen winzigen Überschriften, die zwischen den großen Geschichten geworfen werden, es erheblich durcheinander bringen.

CNN und Fox wählen einen etwas übersichtlicheren Ansatz, vor allem, weil sie nicht bereit waren, wertvollen Werbeflächen für wichtige Nachrichten zu geben. CNN hat ein dreispaltiges Layout, wobei die Mitte am breitesten ist und die letzte die Werbefläche ist, gefolgt von einer Anmeldeseitenleiste.

Fox verfügt über ein großes Bild mit drei Spalten darunter, alle neben einer breiten Spalte ganz rechts für Werbeflächen, Börsenticker und soziale Informationen.

Der Unterricht

Mit Fox 'Seite bekomme ich viele Informationen, was großartig ist, aber meine Augen wissen nicht genau, wo sie landen sollen, und neigen dazu, viel herumzuspringen, bevor ich jemals etwas gelesen habe. CNN erregt derzeit meine Aufmerksamkeit mit ein paar Gesichtern, die immer gut sind, um Benutzer dahin zu führen, wohin sie gehen sollen.

Ich finde jedoch, dass wirklich große Bilder, wie die auf Huffington und MSNBC, wirklich das Werkzeug sind, um mich dazu zu bringen, etwas Wichtiges zu bemerken. Dies wird in hohem Maße durch Huffingtons riesigen, fetten Überschriftentext verstärkt.

"Manchmal ist es eine großartige Sache, viele Inhalte ordentlich auf kleinem Raum zu organisieren."

Welche Methode für alle Benutzer am besten geeignet ist, ist schwierig. Man muss nur bei der äußerst beliebten Craigslist vorbeischauen, um zu sehen, dass große Bilder nicht immer benötigt werden, um eine Website für Besucher attraktiv zu machen. Manchmal ist es eine großartige Sache, viele Inhalte ordentlich auf kleinem Raum zu organisieren, insbesondere wenn Sie einen schnellen Überblick über alles Wichtige wünschen.

Die Welt ist kein Ort, an dem ein einzelnes Ereignis normalerweise wichtiger ist als jedes andere. Es ist daher verständlich, dass Websites wie Fox das Bedürfnis haben, diesen Abschnitt ziemlich aufzuschlüsseln. Mein bester Rat ist, den wenigen Dingen, die wirklich wichtig sind, so viel Bedeutung wie möglich zu geben. Wenn Sie eine große, vorgestellte Geschichte schwingen können, machen Sie es. Wenn nicht, versuchen Sie, die Anzahl niedrig zu halten, andernfalls handelt es sich nicht wirklich um einen "vorgestellten" Abschnitt, oder?

Das Story Grid

Je weiter wir über den Header und die vorgestellten Inhalte hinausgehen, desto unähnlicher werden die Nachrichtenseiten, was es schwierig macht, sie Punkt für Punkt zu vergleichen. An diesem Punkt beginnt jedoch die eigentliche Herausforderung. Hier erhalten die Designer einen Berg anderer Inhalte und sollen diese organisieren.

Jede Site ist in verschiedene einzigartige Module und Abschnitte unterteilt, die in verschiedenen Rastern angeordnet sind. Sie werden jedoch feststellen, dass es ein sehr beliebter Trend ist, irgendwann auf der Seite in ein dreispaltiges Setup zu unterteilen, um die verschiedenen Artikel abzudecken. Hier sind Beispiele von The Huffington Post, The Washington Post und The Economist, die genau das tun.

Wenn Sie drei Spalten haben, wird Ihr Inhalt gut aufgeteilt, entweder gleichmäßig oder mithilfe eines Ansatzes mit unterschiedlicher Breite wie The Economist, um mehr Kontrolle über die Betonung zu erhalten. Ein Hauptproblem beim dreispaltigen Ansatz ist, dass wir unserem Gehirn beigebracht haben, diese dritte Spalte zu ignorieren! Wir alle wissen, dass hier die Anzeigen zusammen mit all dem anderen Mist stehen, den wir nicht sehen wollen, daher beschränken wir uns beim Surfen weitgehend auf die ersten beiden Spalten.

Dies kann für Websites schlecht sein, die tatsächlich eine wichtige Spalte darüber streuen, da sie wahrscheinlich in der Mischung verloren gehen. Denken Sie nur an diese Tendenz der Nutzer und stellen Sie sicher, dass Ihre dritte Spalte nicht immer noch wie ein Durcheinander von Anzeigen aussieht, wenn Sie sich mit soliden Inhalten befassen.

Eine erfrischende Veränderung

CNN hat einen der besseren Ansätze zur Organisation von Inhalten, die ich auf einer Nachrichtenseite gesehen habe. Sie verwenden ein vierspaltiges Raster aus Karten gleicher Höhe, die mit einer Kategorieüberschrift versehen sind. Das Ergebnis fühlt sich wirklich leer an, wie es für diese Abschnitte typisch ist.

"Wenn wir fast alle Bilder herausziehen und den Inhalt normalisieren, ist das Ergebnis viel nützlicher."

Interessanterweise ist das Ergebnis viel nützlicher, wenn wir fast alle Bilder herausziehen und den Inhalt normalisieren. Auf einer typischen Nachrichtenseite konkurriert einfach zu viel um meine Aufmerksamkeit. Jede Geschichte fühlt sich an, als würde sie versuchen, lauter zu schreien als die daneben, und das Ergebnis ist in der Regel ziemlich überwältigend. Im Gegensatz dazu ist das Story-Raster von CNN einfach und angenehm zu durchsuchen.

MSNBC verfolgt auch einen anderen Ansatz. Sie organisieren ihre Geschichten in Kategorien und platzieren sie in klar definierten horizontalen Feldern. Sie geben Ihnen hier viel Kontrolle, indem Sie auswählen können, wie viele Geschichten angezeigt werden sollen, und Ihnen sogar die Kontrolle über die Neuanordnung der Boxen geben.

Der Unterricht

Was mir hier aufgefallen ist, ist, dass ich es genossen habe, die Websites zu verwenden, die ihren Inhalt in klar differenzierte Abschnitte und Kategorien unterteilt haben. Das dreispaltige Format ist zwar bewährt, ermöglicht jedoch ein arbeitsintensives Surfen, bei dem es eher darum geht, die Unordnung zu durchforsten.

CNN und MSNBC haben Schritte unternommen, um eine klare visuelle Trennung zwischen Geschichten und verschiedenen Arten von Inhalten zu schaffen, und hatten Layouts, die weniger zufällig aussahen. Einer der Gründe, warum das dreispaltige Format unordentlich aussieht, sind die unterschiedlichen Höhen der einzelnen Module, wodurch der Inhalt horizontal abgesetzt wird und viele Augenbewegungen nach oben und unten ausgeführt werden. Das Format mit gleicher Höhe hilft immens.

Warum ist mir das wichtig?

Die meisten Leute, die dies lesen, sind keine Top-Designer für die Washington Post. Warum sind diese Beobachtungen für dieses Publikum wertvoll? Die Antwort ist, dass wir zwar nicht alle an Nachrichtenseiten arbeiten, unseren Kunden jedoch alle die Rede „zu viel Inhalt“ gehalten haben.

Wir hassen es einfach, wenn unsere Kunden uns eine Menge Zeug geben und verlangen, dass wir alles auf eine einzige Seite bringen. Versuchen Sie, wie wir vielleicht dagegen argumentieren, mehrere Situationen erfordern tatsächlich diesen Ansatz. Eine Reihe von Inhalten auf eine einzelne Seite zu packen und gleichzeitig zu versuchen, sie sowohl nutzbar als auch attraktiv zu machen, ist eine der schwierigsten Situationen, mit denen Sie als Designer konfrontiert sind. Wenn Sie sie schlagen können, können Sie sich aus allem herausarbeiten.

"Im Zweifelsfall ist die Antwort normalerweise zu vereinfachen."

Die Lektionen, die wir heute hier gelernt haben, können auf jede von Ihnen erstellte Website angewendet werden, auf der Sie Probleme haben, zu viele Inhalte zu bearbeiten. Im Zweifelsfall ist die Antwort normalerweise zu vereinfachen. Schneiden Sie diesen großen hässlichen Header ab, versuchen Sie, einen oder zwei wirklich wichtige Punkte zu finden und zu maximieren, und teilen Sie dann den Rest des Inhalts in visuell getrennte Abschnitte auf, die einfach zu durchsuchen sind und zum Lesen nicht zu viel Zeit benötigen.

Fazit

Was denkst du, nachdem du meine Analyse gesehen hast? Welche Nachrichtenseiten sind Ihrer Meinung nach am attraktivsten? Welches sind die am besten verwendbaren? Können die beiden Ziele synergetisch sein?

Hinterlassen Sie unten einen Kommentar und teilen Sie uns Ihre Meinung zu den oben genannten Informationen und Beispielen mit.