CNNs neues Website-Design dekonstruiert
Am Montag, 26. Oktober, CNN.com führte ein neues Website-Design ein , das eine Reihe wichtiger Änderungen an ihrem informationslastigen Layout vorgenommen hat.
Das neue Design ist schön, sauber, organisiert und gut strukturiert. Es lädt das Auge ein, zu scannen und etwas Interessantes mit dem Ziel zu finden, auf eine andere Seite zu klicken.
Das vorherige Design war etwas überladen und nicht sehr einladend; Der Inhalt sah aus, als würde er in einen unstrukturierten Raum gezwungen. Das neue Layout ist sehr unterschiedlich und umfasst eine Reihe von modernen Webdesign- und Usability-Best Practices und -Trends .
Sehen wir uns also nicht nur die bemerkenswerten Verbesserungen an, sondern auch einige der fragwürdigen Design- und Usability-Entscheidungen.
Gitter-inspiriertes Layout
Ich verwende den Ausdruck "Gitter-inspiriert", weil das neue Design auf einem Raster zu basieren scheint, aber die genaue Ausrichtung der Elemente ist nicht genau da.
Einen flüchtigen Blick auf ihre primäres Stylesheet , sie scheinen ihren Stil und ihr Raster auf den Blueprint CSS Rahmen.
Ihr CSS-Reset weist viele Gemeinsamkeiten mit dem Blueprint-Framework auf, und das Wort "Blueprint" ist an der Spitze enthalten, also wäre dies eine logische Bewertung, basierend auf meinen eigenen begrenzten Kenntnissen von Blueprint.
Nach der Analyse einer Bildschirmaufnahme ihrer Homepage, habe ich geschlossen, dass, wenn sie das neue Layout auf einem Gitter basieren, die Spezifika dieses Gitters wären: 16 Spalten, 50px pro Spalte, mit 12px Rinnen (der Abstand zwischen den Spalten), insgesamt 980px Breite.
Unten ist eine visuelle Darstellung meiner Rasterschätzung, als Photoshop Mock-up:
Obwohl die Elemente auf der Seite nicht der Art von Ausrichtung und Balance folgen, die normalerweise von einem Rasterlayout erwartet wird, gibt es eine deutliche Verbesserung dieses Layouts gegenüber dem vorherigen Entwurf, der unten gezeigt wird:
Das neue Layout behält alle Seitenelemente innerhalb des 980 Pixel breiten Containers bei - im Gegensatz zum klobig aussehenden vorherigen Design, das einen Fluid-Width-Header hatte, der die gesamte Seite oberhalb eines Inhaltsbereichs mit fester Breite überspannte.
Auch wenn das alte Design zwischen abgerundeten Ecken und Quadrat nicht zu entscheiden scheint, weist das neue Design durchweg quadratische Ecken mit feinen Abschrägungseffekten auf, die die entsprechenden Elemente trennen, wie in der Abbildung unten gezeigt.
Obwohl das Format gitterförmig ist, ist es, wie erwähnt, kein striktes Rasterformat, und die Abschnitte unterhalb der Falte streuen in ihrer Struktur von den obigen ziemlich ab.
Drastisch verbesserter Header-Bereich
Eine der offensichtlichsten Verbesserungen im neuen Design ist der Header-Bereich.
Die horizontale Navigationsleiste ist modern, sauber und klar . Das Suchfeld, die Anmeldeoption und der Login-Link befinden sich in der oberen rechten Ecke, wo sie sein sollten.
Und obwohl es im modernen Design nicht üblich ist, das Site-Logo zu zentrieren, funktioniert es in diesem Fall. Es erzeugt ein sehr dominantes, lebendiges Markenerlebnis, das nicht leicht vergessen werden kann .
Eine weitere nette Eigenschaft der Navigationsleiste ist, dass sie anhand von Farben und Grafiken anzeigt, welche Links primär sind, welche sekundär sind und welche auf Mikroseiten oder Schwesterseiten geöffnet werden. Letztere sind durch rechts zeigende Dreiecke ("Money" und "Sports" - mehr dazu unten) gekennzeichnet.
Effektive Raumnutzung
Auf der rechten Seite der Seite, unterhalb des primären Anzeigenblocks, ist ein Inhaltsumschalter im Akkordeon-Stil enthalten, mit dem der Benutzer Vorschaubilder in einem relativ kleinen Bereich mit Inhalten zu verschiedenen Themen anzeigen kann.
Schwerpunkt auf Video & Story Popularität
Im vorherigen Design hatte das Video eine ziemlich starke Betonung, in einer Box auf der rechten Seite. In dem neuen Design ist Video eine Hauptkategorie in der primären Navigationsleiste, da es praktisch die gleiche visuelle Bedeutung wie der Link "Home" hat.
Auf der gesamten Website werden Video-Storys angezeigt, die auf den üblichen "Play-Button" -Links auf Fotos, die mit Video-Content verlinkt sind, deutlich angezeigt werden (siehe unten):
Eine andere Kategorie, die genauso wichtig ist wie "Home" und "Video", wie im Bild oben gezeigt, ist der Abschnitt "NewsPulse", der neu und noch in der Beta-Version ist.
In diesem Abschnitt werden Nachrichten nach Beliebtheit angezeigt (die scheinbar durch die Gesamtzahl der Seitenaufrufe und nicht durch Kommentare berechnet werden) und ermöglicht dem Leser, die Ergebnisse nach Kategorie oder Storytyp zu filtern.
Starke Kategorieseiten
Die Hauptkategorieseiten ("USA", "Welt", "Politik" usw.), auf die über die primäre Navigationsleiste zugegriffen wird, funktionieren ähnlich wie die Startseite .
In der Tat, wenn Sie nicht wissen, auf welcher Seite Sie waren, könnten Sie denken, dass Sie auf der Startseite waren. Die Kategorie "USA" ist nachfolgend aufgeführt:
In jedem dieser Abschnitte werden die Top-Storys, die neuesten Nachrichten und andere Elemente angezeigt, die sich auf diese Kategorie beziehen.
Die schwarzen und weißen Beschriftungen unter den Bildern, die auch auf der Startseite und auf den Artikelseiten zu finden sind, sind auffällig und leicht zu lesen, ohne übertriebene Grafiken oder Schriftstile zu verwenden.
Starke Artikelseiten
Die Artikelseiten bewahren größtenteils das lebendige Branding der Homepage. Body Text wird in 14px Arial mit einer sehr lesbaren Zeilenhöhe angezeigt.
Obwohl einige Elemente auf den Seiten etwas klein erscheinen, gefällt mir persönlich die Art und Weise, wie sich die Schriftgröße des Artikelkörpers auf der Seite abhebt, damit der Leser sich darauf konzentrieren kann.
Außerdem befindet sich auf der linken Seite jeder Geschichte ein Abschnitt mit dem Titel "Story Highlights", der die aktuelle Geschichte in einigen Aufzählungspunkten zusammenfasst. Dies zeigt, dass CNNs Designer sich der Online-Tendenz von Benutzern bewusst sind, lange Material zu "scannen".
Informationsüberlastung
Von all den negativen Aspekten des neuen Designs ist wahrscheinlich das erste Problem, das sofort offensichtlich ist, die Überlastung von Links und Informationen auf der Homepage - obwohl es strukturierter und organisierter ist, wie zuvor diskutiert.
Die Homepage ist ungefähr zweieinhalb Bildschirme lang und enthält Abschnitte, die Elemente in der Hauptnavigationsleiste duplizieren, mit etwa einem halben Dutzend Unterlinks unter jeder Kategorie. Diese Abschnitte erscheinen unterhalb der Falte und werden in diesem Bild gezeigt:
Da CNN eine der beliebtesten Websites der Welt ist (38 Millionen Unique Visitors pro Monat), werden diese Abschnitte im Vergleich zu anderen Sites sehr viel Verkehr erhalten, weil sie so weit unter der Falte erscheinen und weil es so viele gibt Links, die relative Menge von Verkehr, der diese Links durch die Homepage besucht, würde wahrscheinlich ziemlich niedrig sein.
Wichtige Abschnitte begraben?
Wie oben ausgeführt, erscheinen viele Informationen auf der Homepage deutlich unterhalb der Falte. Und es scheint, dass einige wichtige Inhalte am unteren Rand der Homepage vollständig verborgen sind , mehr als zwei vollständige Bildschirme unterhalb der Kopfzeile .
Zum Beispiel erscheint ein Abschnitt mit dem Titel "Hot Topics" am unteren Rand auf der rechten Seite, direkt über einigen Promos und Anzeigen.
Es scheint sinnvoller zu sein, dass dieser Abschnitt den Akkordeon-Inhaltsumschalter ersetzt oder in das Akkordeon integriert wird.
Die Anzeigen und Promos, die unterhalb der "Hot Topics" erscheinen, scheinen ebenfalls wichtiger zu sein als ihr Standort. Auch wenn eine solche Website mit hohem Traffic viele Klicks auf diese Bereiche erhalten würde, wäre die Klickrate im Vergleich zu den Abschnitten und Anzeigen, die über dem Falte liegen, wahrscheinlich drastisch unterschiedlich.
Natürlich wissen die Produzenten von CNN, welche Inhalte am wichtigsten sind und sie verstehen die Gewohnheiten ihrer Nutzer besser als alle anderen - aber diese Layout- und Usability-Herausforderungen sind hilfreich, wenn andere Entwickler ähnliche Entscheidungen treffen müssen.
Usability Mysteries
Es gibt einige Elemente auf der neuen Website, die möglicherweise nicht für optimale Benutzerfreundlichkeit entwickelt wurden.
Ein Beispiel ist das nach rechts zeigende Dreieck , das auf jeder der Microsite-Links erscheint. Auf den ersten Blick war ich nicht sicher, wofür diese Dreiecke gedacht waren. Sie scheinen auf eine Art JavaScript-Slider-Abschnitt hinzuweisen, der auftauchen würde.
Einige Benutzer, die nicht die volle Aufmerksamkeit schenken, können sie sogar fälschlicherweise für nach unten zeigende Pfeile halten, die Dropdown-Menüs erzeugen.
hätte ausgereicht - aber das würde dann das Problem der Benutzer darstellen, dass die Links in einem neuen Fenster geöffnet werden, was in diesem Fall nicht zutrifft. Der zuvor besprochene Akkordeon-Inhaltsumschalter weist ebenfalls einige Usability-Probleme auf. Erstens, wenn JavaScript deaktiviert ist, wird das Akkordeon nutzlos und zeigt keinen Inhalt an.
Es sollte standardmäßig so erweitert werden, dass der gesamte Inhalt angezeigt wird, oder Sie zeigen eines der Elemente an. Außerdem sollten die hyperlinked Header für die Akkordeonabschnitte immer noch mit ihren jeweiligen Abschnitten verknüpfen, aber sie nicht.
Ein weiteres Problem mit dem Akkordeon-Inhalt ist, dass, da der darin enthaltene Text so klein ist, es nicht immer klar ist, was im Akkordeon klickbar ist. Dies macht die Verbindungen weniger deutlich vom Rest des Akkordeon-Inhalts.
In der Abbildung unten zeigt der rote Pfeil, den ich gezeichnet habe, auf zwei Listenelemente mit Aufzählungszeichen. Der Text in diesen Listenelementen ist mit einem Hyperlink versehen, was jedoch auf den ersten Blick nicht offensichtlich ist.
Einige Abschnitte reflektieren noch altes Design
Wie bei jedem Redesign einer Site von der Größe von CNNs, werden einige Abschnitte immer noch das alte Design widerspiegeln, bis alle Seiten vollständig integriert sind.
Dies ist normalerweise der Fall bei älteren Inhalten, die nicht so oft besucht werden, aber im Fall von CNN haben einige wichtige Abschnitte immer noch die alte Haut.
Zwei Beispiele sind die Über und Kontakt Seiten.
Kleine Typografie
Ein besonderes Designproblem, das nicht mit modernen Webdesign-Trends übereinstimmt, ist die Verwendung von kleinem Text und kleinen typografischen Elementen.
Die geringe Größe der Schrift im Akkordeon-Inhalt wurde bereits besprochen. Es gibt auch die "Teilen" -Symbolleiste, die auf Artikel- und Videoseiten erscheint, den Abschnitt "Neueste Nachrichten" auf der Startseite, die Links "Anmelden" und "Anmelden" in der Kopfzeile und die Textlinks unterhalb der Falte auf der Startseite Homepage, um nur einige zu nennen.
Würde die oben gezeigte Werkzeugleiste "Teilen" bei größeren Typografien effektiver sein? Was ist mit dem "empfohlenen" Abschnitt, der unten gezeigt wird, oder anderen Abschnitten mit kleinerem Typ?
Fazit
Die neue Website von CNN.com hat eine Reihe von Funktionen hinzugefügt, die hier nicht behandelt werden und sich mehr auf ihre Nachrichtendienste und angepassten Inhalt beziehen. Der erste Link unten enthält ein Video von CNN, das einige der neuen Funktionen erläutert.
Ich denke definitiv, dass die neue Seite eine viel schönere und interessantere Benutzererfahrung bietet als die alte, und abgesehen von den Schwächen im Akkordeon-Inhaltswechsler sind die Nachteile des neuen Designs nicht wirklich signifikant.
Es sieht so aus, als ob viel Zeit und Planung in das Design des neuen CNN.com investiert wurde. Ich denke, Webdesigner und diejenigen, die daran interessiert sind, die Usability auf ihren eigenen Websites zu verbessern , sollten gut daran denken und versuchen, von einigen der Änderungen zu lernen auf der neuen Website von CNN.
Weiterführende Literatur
- Willkommen auf der neuen CNN.com (Video auf CNN.com)
- Das neue CNN.com (Erste Screenshots auf TechCrunch)
- Neues CNN.com geht live: Was denkst du?
Dieser Beitrag wurde exklusiv für Webdesigner Depot von Louis Lazaris, einem freiberuflichen Autor und Webentwickler, geschrieben. Louis rennt Beeindruckende Webs wo er Artikel und Tutorials zum Thema Webdesign veröffentlicht. Sie können Louis folgen auf Twitter oder sich mit ihm in Verbindung setzen über seine Website .
Was magst du an CNNs neuem Website-Design? Teile deine Kommentare unten.