Projekt nowej strony internetowej CNN został zdekonstruowany
W poniedziałek, 26 października, CNN.com wprowadzono nowy projekt strony internetowej , wprowadzając szereg poważnych zmian w ich ciężkim układzie informacji.
Nowy projekt jest piękny, czysty, zorganizowany i dobrze zorganizowany. Zachęca oko do zeskanowania i znalezienia czegoś interesującego w celu przejścia do następnej strony.
Poprzedni projekt był nieco zagracony i niezbyt zachęcający; zawartość wyglądała tak, jakby była zmuszana do wejścia w nieuporządkowaną przestrzeń. Nowy układ jest bardzo różny i obejmuje wiele nowoczesnych praktyk i trendów w zakresie projektowania i użyteczności stron internetowych .
Przyjrzyjmy się zatem bardziej szczegółowo nie tylko znaczącym usprawnieniom, ale niektórym z wątpliwych decyzji dotyczących projektu i użyteczności.
Układ zainspirowany siecią
Używam wyrażenia "inspirowane siatką", ponieważ nowy projekt wydaje się oparty na siatce, ale precyzyjne wyrównanie elementów nie jest dokładnie takie.
Przyjrzenie się ich pobieżnym spojrzeniom główny arkusz stylów , wydają się luźno oprzeć swój styl i siatkę na Blueprint CSS struktura.
Reset ich CSS ma wiele podobieństw do schematu Blueprint, a słowo "blueprint" znajduje się na górze, więc byłaby to logiczna ocena oparta na mojej ograniczonej wiedzy na temat Blueprint.
Po przeanalizowaniu przechwytywania ekranu na ich stronie głównej doszedłem do wniosku, że jeśli oprzeć nowy układ na siatce, specyfikacja tej siatki będzie wynosić: 16 kolumn, 50 pikseli na kolumnę, z rynnami 12px (przestrzeń między kolumnami), o łącznej szerokości 980 pikseli.
Poniżej znajduje się wizualna reprezentacja mojej prognozy siatki, jako makieta programu Photoshop:
Mimo że elementy na stronie nie są zgodne z typem wyrównania i równowagą, której zwykle oczekuje się od układu siatki, zauważalna poprawa tego układu nad poprzednim projektem, pokazanym poniżej:
Nowy układ zachowuje wszystkie elementy strony w pojemniku o szerokości 980 pikseli - w odróżnieniu od wyglądającego jak poprzednik projektu, który miał nagłówek o szerokości płynu, który obejmował całą stronę powyżej sekcji o stałej szerokości.
Ponadto, mimo że stary projekt nie mógł decydować pomiędzy zaokrąglonymi narożnikami a kwadratem, nowa konstrukcja konsekwentnie ma kwadratowe rogi z subtelnymi efektami fazowania, oddzielającymi odpowiednie elementy, jak pokazano na poniższym obrazku.
Chociaż format jest podobny do siatki, to, jak wspomniano, nie jest ścisłym formatem siatki, a sekcje poniżej krotnie spłaszczają się nieco w strukturze od powyższych.
Drastycznie poprawiona sekcja nagłówka
Jedną z najbardziej widocznych poprawek w nowym projekcie jest sekcja nagłówka.
Poziomy pasek nawigacji jest nowoczesny, czysty i wyraźny . Pole wyszukiwania, opcja rejestracji i link logowania znajdują się w prawym górnym rogu, gdzie powinny być.
I choć nie jest zwyczajowe w nowoczesnym designie centrowanie logo witryny, w tym przypadku działa. Tworzy bardzo dominujące, żywe, wrażliwe na markę doświadczenie, które nie jest łatwo zapomniane .
Kolejną ciekawą cechą paska nawigacyjnego jest to, że wskazuje on za pomocą koloru i grafiki, które łącza są pierwotne, które są drugorzędne, i które będą otwierane w mikro-witrynach lub witrynach siostrzanych. Te ostatnie są wskazywane trójkątami skierowanymi w prawo ("Pieniądze" i "Sporty" - więcej na ten temat poniżej).
Efektywne wykorzystanie przestrzeni
Po prawej stronie, pod podstawową jednostką reklamową, umieszczono przełącznik treści w stylu akordeonu, umożliwiający przeglądanie na stosunkowo niewielkim obszarze podglądu treści związanych z wieloma różnymi tematami.
Nacisk na popularność wideo i historii
W poprzednim projekcie wideo miało dość duży nacisk, umieszczony w pudełku po prawej stronie. W nowym projekcie wideo jest główną kategorią na głównym pasku nawigacji, mającym praktycznie takie samo znaczenie wizualne jak link "Strona główna".
Historie filmów są wyświetlane w całej witrynie i są wyraźnie wskazane przez zwyczajowy link "play button" na zdjęciach prowadzących do treści wideo, jak pokazano poniżej:
Kolejną kategorią, która ma takie samo znaczenie jak "Dom" i "Film", jak pokazano na powyższym obrazku, jest sekcja "NewsPulse", która jest nowa i wciąż znajduje się w wersji beta.
Ta sekcja wyświetla wiadomości według popularności (które wydają się być obliczane na podstawie łącznej liczby odsłon stron, nie komentarzy) i pozwala czytnikowi filtrować wyniki według kategorii lub typu wątku.
Silne strony kategorii
Główne strony kategorii ("USA", "Świat", "Polityka" itd.), Dostępne na głównym pasku nawigacyjnym, działają podobnie do strony głównej .
W rzeczywistości, jeśli nie wiesz, na której stronie byłeś, możesz pomyśleć, że jesteś na stronie głównej. Kategoria "USA" jest pokazana poniżej:
Każda z tych sekcji wygodnie wyświetla najważniejsze artykuły, najnowsze wiadomości i inne artykuły związane z tą kategorią.
Czarne i białe podpisy pod zdjęciami, które można znaleźć na stronie głównej i na stronach z artykułami, są przyciągające wzrok i łatwe do odczytania, bez użycia nadmiernie fantazyjnych grafik i stylów czcionek.
Silne strony artykułów
Strony artykułów w większości zachowują żywe logo strony głównej. Treść ciała jest ładnie wyświetlana w 14-bitowym Arial z bardzo czytelną linią wysokości.
Chociaż niektóre elementy na stronach wydają się nieco małe, osobiście podoba mi się sposób, w jaki rozmiar czcionki treści artykułu wyróżnia się na stronie, dzięki czemu czytelnik może na nim skupić uwagę.
Po lewej stronie każdej opowieści znajduje się sekcja "Najważniejsze wydarzenia", która podsumowuje bieżącą historię w kilku punktach listy punktowanej. To pokazuje, że projektanci CNN zdają sobie sprawę z internetowej tendencji użytkowników do "skanowania" długich materiałów.
Przeciążenie informacyjne
Ze wszystkich negatywnych aspektów nowego projektu, prawdopodobnie pierwszym problemem, który jest od razu widoczny, jest przeciążenie łączy i informacji na stronie głównej - choć jest bardziej uporządkowany i uporządkowany, jak to omówiono wcześniej.
Strona główna ma około dwóch i pół ekranów i zawiera sekcje, które powielają elementy na głównym pasku nawigacyjnym, z około pół tuzinem podlink w każdej kategorii. Te sekcje pojawiają się pod spodem i są pokazane na tym obrazku:
Ponieważ CNN jest jedną z najpopularniejszych witryn na świecie (38 milionów unikalnych odwiedzających każdego miesiąca), sekcje te będą generować znaczny ruch w porównaniu do innych witryn, ponieważ pojawiają się one na razie poniżej zakładki, a ponieważ jest ich tak wiele linki, względna ilość ruchu odwiedzającego te linki na stronie głównej byłaby prawdopodobnie niska.
Ważne sekcje pochowane?
Jak wskazano powyżej, wiele informacji na stronie głównej pojawia się znacznie poniżej zjazdu. Wydaje się też, że niektóre ważne treści są całkowicie pochowane na dole strony głównej, ponad dwa pełne ekrany poniżej nagłówka .
Na przykład sekcja "Popularne tematy" pojawia się u dołu, po prawej stronie, tuż nad niektórymi promocjami i reklamami.
Wydaje się, że bardziej sensowne jest to, że ta sekcja zastąpi przełącznik zawartości akordeonu, lub zostanie włączona do akordeonu.
Reklamy i promo, które pojawiają się poniżej "Hot Topics", wydają się również ważniejsze niż ujawnia się ich lokalizacja. Ponownie, chociaż taka strona o dużym natężeniu ruchu uzyskałaby wiele kliknięć w tych obszarach, współczynnik klikalności w porównaniu do sekcji i reklam w części strony widocznej na ekranie byłby drastycznie inny.
Oczywiście producenci CNN wiedzą, jakie treści są najważniejsze, i rozumieją nawyki ich użytkowników lepiej niż ktokolwiek inny - ale te wyzwania dotyczące wyglądu i użyteczności są pomocne w analizie, gdyby inni deweloperzy musieli podjąć podobne decyzje.
Tajemnice użyteczności
Na nowej stronie znajduje się kilka elementów, które mogą nie być zaprojektowane pod kątem optymalnej użyteczności.
Jednym z przykładów jest trójkąt skierowany w prawo, który pojawia się na każdym z łączy mikro-strony. Na pierwszy rzut oka nie byłem pewien, do czego służą te trójkąty. Wydają się wskazywać na pewien rodzaj sekcji suwaka JavaScript, która wyświetli się.
Niektórzy użytkownicy, którzy nie zwracają pełnej uwagi, mogą nawet pomylić je ze strzałkami skierowanymi w dół, które tworzą rozwijane menu.
wystarczyłoby, ale wtedy pojawiłby się problem użytkowników zakładających, że linki otworzyły się w nowym oknie, co w tym przypadku nie jest prawdą. Przełącznik zawartości akordeonu, omówiony wcześniej, ma również kilka problemów z użytecznością. Po pierwsze, gdy JavaScript jest wyłączony, akordeon staje się bezużyteczny i nie wyświetla żadnych treści.
Powinno to być domyślnie rozwinięte, aby wyświetlić całą zawartość lub wyświetlić jeden z elementów. Ponadto, hiperłącza nagłówków sekcji akordeonowych powinny nadal być połączone z ich odpowiednimi sekcjami, ale tak nie jest.
Innym problemem związanym z treścią akordeonu jest to, że skoro tekst, który zawiera jest tak mały, nie zawsze jest jasne, co można klikać wewnątrz akordeonu. Dzięki temu połączenia są mniej wyraźne niż reszta zawartości akordeonu.
Na poniższej ilustracji czerwona strzałka, którą narysowałem, wskazuje na dwie wypunktowane elementy listy. Tekst w tych elementach listy jest połączony hiperlinkiem, ale na pierwszy rzut oka nie jest to oczywiste.
Niektóre sekcje wciąż odzwierciedlają stary projekt
Tak jak w przypadku przeprojektowania witryny o rozmiarach CNN, niektóre sekcje nadal będą odzwierciedlać stary projekt, dopóki wszystkie strony nie zostaną w pełni zintegrowane.
Zwykle dotyczy to starszych treści, które nie będą odwiedzane tak często, ale w przypadku CNN niektóre ważne sekcje nadal mają starą skórę.
Dwa przykłady to o i kontakt strony.
Mała typografia
Jednym z problemów projektowych, który nie jest zgodny z nowoczesnymi trendami w projektowaniu stron internetowych, jest stosowanie małych elementów tekstowych i małych elementów typograficznych.
Niewielki rozmiar czcionki zawartej w akordeonie został omówiony wcześniej. Jest też pasek narzędzi "udostępnij", który pojawia się na stronach artykułów i wideo, sekcja "Najnowsze wiadomości" na stronie głównej, linki "Zarejestruj się" i "Zaloguj się" w nagłówku, a linki tekstowe poniżej ekranu strona główna, żeby wymienić tylko kilka.
Czy pokazany powyżej pasek narzędziowy "udostępnij" byłby skuteczniejszy przy większej typografii? Co z sekcją "zalecaną", pokazaną poniżej lub innymi sekcjami o mniejszym typie?
Wniosek
Nowa witryna CNN.com dodała szereg nie omówionych tutaj funkcji, które bardziej dotyczą ich serwisów informacyjnych i dostosowanych treści. Pierwszy link poniżej zawiera wideo prezentowane przez CNN omawiające niektóre z nowych funkcji.
Zdecydowanie uważam, że nowa strona prezentuje znacznie piękniejsze i ciekawsze wrażenia użytkownika niż stare, a poza słabościami w przełączniku treści akordeonu, wady nowego projektu nie są tak znaczące.
Wygląda na to, że dużo czasu i planowania zajęło zaprojektowanie nowej witryny CNN.com i myślę, że projektanci stron internetowych i osoby zainteresowane poprawą użyteczności w swoich witrynach dobrze by rozważyły i spróbowały wyciągnąć wnioski z niektórych przedstawionych zmian. na nowej stronie CNN.
Dalsze czytanie
- Witamy na nowej stronie CNN.com (wideo na stronie CNN.com)
- Nowa strona CNN.com (pierwsze zdjęcia w TechCrunchu)
- Nowy serwis CNN.com Goes Live: co myślisz?
Ten post został napisany wyłącznie dla Webdesigner Depot przez Louisa Lazarisa, niezależnego pisarza i programistę. Louis ucieka Imponujące sieci gdzie publikuje artykuły i samouczki dotyczące projektowania stron internetowych. Możesz śledzić Louisa na Twitterze lub skontaktuj się z nim poprzez jego stronę internetową .
Co lubisz lub nie lubisz w nowym projekcie strony CNN? Podziel się swoimi komentarzami poniżej.