Wenn ich nach meinem Willen hätte, so wie fast jeder andere Webdesigner, enthalten Webseiten immer eine recht begrenzte Menge an Inhalten, 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, welche Probleme in diesem Bereich auftreten, werden wir uns einen bestimmten Abschnitt von Websites anschauen, der vielleicht überfüllter ist 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.
Kopfzeile und Navigation
Der Header ist für eine News-Site ein absolut wichtiger Aspekt. Jeder Benutzer weiß beim Besuch einer News-Site, dass es Tonnen von Inhalten gibt, die durchgeblättert werden können. Wenn er etwas Bestimmtes wünscht, geht er direkt zum Header, um ihn zu finden.
Hier erhalten wir einen ersten Einblick in das Problem, das uns für den Rest des Artikels plagen wird: zu viel Zeug! Wie ich bereits im Intro erwähnt habe, müssen Nachrichtenseiten unbedingt viele Informationen vermitteln, darum gibt es sie. Das Organisieren all dieser Informationen ist keine Kleinigkeit und fast jede Entscheidung, die Sie treffen, kann die Nutzbarkeit der Website drastisch beeinflussen.
Schauen wir uns unser erstes Beispiel an. Das Bild unten zeigt die Kopfzeile und die Navigation für MSNBC.com.
Wie Sie sehen können, gibt es eine Menge los in den ersten paar Zentimetern dieser Seite. Ganz oben auf der Seite befinden sich rund fünfzehn Links, und diese sind nur für andere Websites, die interne Navigation befindet sich darunter und enthält weitere zwölf.
MSNBC verwendet für jeden Abschnitt der Site, der in der Navigation angezeigt wird, einen eigenen interessanten Spin aus einem Dropdown-Menü. Hier sehen Sie fünf bis sechs Schlagzeilen, einige Bilder und noch mehr Inhalte, die zu einer anderen Website führen. Nach mehreren Navigationsebenen gelangen wir schließlich neben den Wetter- und Such-Widgets zum Logo der Website am unteren Rand der Kopfzeile.
Ich denke, dass der MSNBC-Header etwas chaotisch ist, das Branding verloren geht und die Last sekundärer Inhalte stört. 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-Menü. Dieses Menü bietet eine gute Balance zwischen minimalem Design und ausreichender Funktionalität, um Sie ohne Probleme dorthin zu bringen, wo Sie hin möchten.
Fox geht eine Route ähnlich zu CNN. Es ist etwas unübersichtlich und umfasst mehrere Sites wie MSNBCs, aber die Registerkarten helfen, die Metapher verständlich zu machen.
Die Washington Post begann mit einer ähnlichen Idee wie MSNBC, schaffte es jedoch viel besser. Wie Sie sehen können, ist der Name der Website groß und wird von einem Wetter-Widget gefolgt.
Wenn Sie den Mauszeiger über die Navigation bewegen, erhalten Sie ein großes Dropdown-Menü. Statt Inhalte wie bei MSNBC unangenehm herunterzudrücken, wurde es strukturiert, um die große Washington Post zu vertuschen. Bereich.
Der Unterricht
• Seien Sie vorsichtig bei Mega-Dropdowns, die nicht wirklich das Versprechen erfüllen, dass Ihre Website einfacher zu navigieren ist.Ich denke, die Lektion hier ist, Ihre Benutzer nicht sofort mit einem überladenen Header zu überfordern. Das bedeutet nicht, dass Sie nicht viel Inhalt haben können. Seien Sie vorsichtig bei Megadropdowns, die nicht wirklich ihr Versprechen erfüllen, dass Ihre Website einfacher zu navigieren ist. CNN beweist, dass manchmal eine einfache alte horizontale Linkliste und ein gut strukturierter Whitespace selbst in einer Umgebung mit Masseninhalten gut funktionieren können.
Vorgestellte Geschichten
Als Nächstes möchte ich besprechen, wie diese Websites Ihre Aufmerksamkeit auf sich ziehen und auf das Wesentliche lenken. Jede News-Site hat eine oder zwei Top-Storys, von denen sie wissen, dass sie heiße Elemente des Tages sind und die Seite strukturieren müssen, um diese Storys entsprechend hervorzuheben.
Mein Lieblingsbeispiel dafür ist The Huffington Post, die sich dafür entscheidet, eine einzelne Nachricht mit einem großen Bild und einer mutigen Überschrift hervorzuheben, die beide die gesamte Breite des Seitencontainers umfassen.
Werfen Sie einfach einen Blick darauf, wie sauber und schön das mit anderen Nachrichtenseiten ist, die Sie gesehen haben. Es ist alles andere als beliebt für Nachrichtenseiten, dieses Format zu verwenden, aber Sie können nicht umhin zugeben, dass es hier gut zu funktionieren scheint.
MSNBC geht einen ähnlichen Weg, ist aber nicht so drastisch, dass nur eine einzelne Geschichte oben auf der Seite angezeigt wird. Sie haben ein großes Bild links mit verschiedenen Schlagzeilen. Das Grundlayout gefällt mir sehr gut, obwohl ich denke, dass die zufälligen winzigen Schlagzeilen, die zwischen den Hauptgeschichten eingeworfen werden, das Ganze erheblich stören.
CNN und Fox wählen einen etwas unordentlicheren Ansatz, hauptsächlich weil sie nicht bereit waren, wertvolle Werbeflächen für wichtige Nachrichten aufzugeben. CNN hat ein dreispaltiges Layout, wobei die Mitte am breitesten ist, und die letzte davon ist die Werbefläche, gefolgt von einer Login-Seitenleiste.
Fox bietet ein großes Bild mit drei Spalten darunter, alle neben einer breiten Spalte ganz rechts für Anzeigenfläche, Börsenticker und soziale Informationen.
Der Unterricht
Mit der Seite von Fox bekomme ich viele Informationen, was großartig ist, aber meine Augen wissen nicht recht, wo sie landen sollen, und neigen dazu, viel herumzuspringen, bevor ich überhaupt etwas gelesen habe. CNN erweckt derzeit meine Aufmerksamkeit mit ein paar Gesichtern, die immer gut sind, um Benutzer dahin zu führen, wohin sie wollen.
Ich finde jedoch, dass wirklich große Bilder, wie sie bei Huffington und MSNBC zu finden sind, wirklich das Werkzeug sind, mit dem ich etwas Wichtiges feststellen kann. Dies wird durch den großen, mutigen Überschriftstext von Huffington noch einmal wesentlich verstärkt.
? Manchmal ist eine Menge von Inhalten, die auf kleinstem Raum ordentlich organisiert sind, eine großartige Sache.?Welche Methode für alle Benutzer am besten ist, ist ein schwieriger Aufruf. 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 eine Menge von Inhalten, die übersichtlich in einem kleinen Bereich organisiert sind, eine großartige Sache, insbesondere wenn Sie einen schnellen Überblick über alles Wichtige erhalten möchten.
Die Welt ist kein Ort, an dem eine einzige Veranstaltung stattfindet meistens Wichtiger als jeder andere. Daher ist es verständlich, dass Websites wie Fox die Notwendigkeit haben, diesen Abschnitt ziemlich zu brechen. Mein bester Rat ist, den wenigen Dingen, die wirklich wichtig sind, so viel Wert wie möglich zu geben. Wenn Sie eine große, vorgestellte Geschichte schwingen können, sollten Sie es tun. Wenn nicht, versuchen Sie, die Anzahl niedrig zu halten, andernfalls ist es nicht wirklich ein? Abschnitt ist es?
Das Geschichtengitter
Wenn wir über den Header und die vorgestellten Inhalte voranschreiten, werden die Nachrichtenseiten immer unähnlicher, was einen Vergleich der einzelnen Punkte erschwert. An diesem Punkt beginnt jedoch die eigentliche Herausforderung. Hier erhalten die Designer einen Berg mit anderen Inhalten und müssen sie organisieren.
Jede Site ist in verschiedene, einzigartige Module und Abschnitte unterteilt, die in verschiedenen Rastern angeordnet sind. Sie werden jedoch feststellen, dass es ein beliebter Trend ist, irgendwann auf der Seite in ein dreispaltiges Setup zu wechseln, um die verschiedenen Artikel zu behandeln. Hier sind Beispiele von The Huffington Post, The Washington Post und The Economist, die genau das tun.
Wenn Sie drei Spalten haben, teilen Sie Ihre Inhalte entweder gleichmäßig auf oder verwenden einen variablen Breitenansatz wie The Economist, um mehr Kontrolle über die Betonung zu erhalten. Ein Hauptproblem bei dem 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 möchten, sodass wir unser Surfen weitgehend auf die ersten beiden Spalten beschränken.
Dies kann für Sites, die tatsächlich einige wichtige Kolumnen besprühen, schlecht sein, da sie wahrscheinlich im Mix verloren gehen. Beachten Sie diese Tendenz der Nutzer und stellen Sie sicher, dass Ihre dritte Kolumne nicht mehr wie ein Durcheinander von Anzeigen aussieht, sobald Sie sich mit soliden Inhalten befassen.
Eine erfrischende Veränderung
CNN hat eine der besseren Ansätze zur Organisation von Inhalten, die ich auf einer Nachrichtenseite gesehen habe. Sie verwenden ein vierspaltiges Gitter von Karten gleicher Höhe, die mit einer Kategorieüberschrift überschrieben werden. Das Ergebnis fühlt sich wirklich frei von dem chaotischen Durcheinander, das 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, wenn wir fast alle Bilder herausziehen und den Inhalt normalisieren, viel nützlicher. Auf einer typischen Nachrichtenseite gibt es einfach zu viel Konkurrenz für meine Aufmerksamkeit. Jede Geschichte fühlt sich an, als würde sie versuchen, lauter zu schreien als die nebenstehende, und das Ergebnis ist eher ü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 Boxen. Sie geben Ihnen hier viel Kontrolle, indem Sie wählen lassen, wie viele Storys angezeigt werden sollen, und sogar Steuerelemente für die Neuanordnung der Boxen.
Der Unterricht
Was mir hier aufgefallen ist, ist, dass ich die Websites, die ihre Inhalte in klar differenzierten Abschnitten und Kategorien geordnet haben, sehr gut genutzt hat. Das dreispaltige Format, obwohl es sich bewährt hat, sorgt für arbeitsintensives Browsen, das sich eher wie das Durchsuchen von Unordnung anfühlt.
CNN und MSNBC unternahmen Schritte, 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 Dreispaltenformat unordentlich aussieht, ist die unterschiedliche Höhe der einzelnen Module, wodurch der Inhalt horizontal abgesetzt wird und viele Auf- und Abbewegungen der Augen möglich sind. Das gleiche Höhenformat hilft enorm.
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, obwohl wir nicht alle auf Nachrichtenseiten arbeiten, unseren Kunden zu viele Inhalte gegeben haben. Rede.
Wir hassen es einfach, wenn unsere Kunden uns eine Menge Zeug geben und verlangen, dass wir alles auf eine Seite stellen. Versuchen Sie, so wie wir dagegen vorgehen könnten, mehrere Situationen fordern tatsächlich diesen Ansatz. Eine Gruppe von Inhalten auf einer einzigen Seite zusammenzudrücken und gleichzeitig zu versuchen, sie sowohl nutzbar als auch attraktiv zu machen, ist eine der schwierigsten Situationen, mit denen Sie als Designer konfrontiert werden.
Im Zweifelsfall ist die Antwort in der Regel zu vereinfachen.Die Lektionen, die wir heute hier gelernt haben, können auf jede Website angewendet werden, auf der Sie mit zu viel Inhalt kämpfen. Im Zweifelsfall ist die Antwort normalerweise zu vereinfachen. Schneiden Sie den großen, hässlichen Header herunter, versuchen Sie, ein oder zwei wirklich wichtige Punkte zu finden und zu maximieren, und trennen Sie dann den Rest des Inhalts in visuell getrennte Abschnitte, die leicht zu durchsuchen sind und nicht zu viel Ablenkung erfordern.
Fazit
Nun, da Sie meine Analyse gesehen haben, was denken Sie? Welche Newsseiten sind Ihrer Meinung nach am attraktivsten? Welches sind die brauchbarsten? Können die beiden Ziele synergistisch sein?
Hinterlassen Sie einen Kommentar und teilen Sie uns Ihre Meinung zu den Informationen und Beispielen mit.