CNN je nový design webových stránek deconstructed
V pondělí 26. října, CNN.com představil nový návrh webových stránek , čímž došlo k řadě zásadních změn v jejich uspořádání.
Nový design je krásný, čistý, organizovaný a dobře strukturovaný. Vyzývá oko, aby naskenovalo a objevilo něco zajímavého s cílem kliknout na jinou stránku.
Předchozí návrh byl poněkud přeplněný a nebyl příliš pozvaný; obsah vypadal, že je přitahován do nestrukturovaného prostoru. Nové uspořádání je velmi odlišné a zahrnuje řadu moderních postupů a trendů v oblasti moderního webového designu a použitelnosti .
Takže se podívejme podrobněji nejen na pozoruhodné zlepšení, ale i na některé pochybné rozhodnutí o návrhu a použitelnosti.
Grid-Inspired layout
Používám výraz "inspirovaný mřížkou", protože nový návrh vypadá, že je založen na mřížce, ale přesné zarovnání prvků není přesně tam.
Zběžně se podíváme na jejich primární stylový list , zdá se, že mají volně založený styl a mřížku na Blueprint CSS rámec.
Jejich reset CSS nese mnoho podobností s rámcem Blueprint a slovo "modrotříček" je zahrnuto na vrcholu, takže by to bylo logické hodnocení založené na mé vlastní omezené znalosti Blueprint.
Po analýze zachycení obrazovky na domovské stránce jsem dospěl k závěru, že pokud založí nové rozvržení na mřížce, specifikace této mřížky budou: 16 sloupců, 50 pixelů na sloupec, 12x žlabů (mezeru mezi sloupci), šířka 980 pixelů.
Níže je vizuální zobrazení mého odhadu sítě, jak Photoshop vyskočil:
Přestože prvky na stránce nesledují druh zarovnání a rovnováhy, které by se obvykle očekávalo od rozvržení mřížky, je toto uspořádání znatelné zlepšení oproti předchozímu návrhu, které je uvedeno níže:
Nové uspořádání uchovává všechny prvky stránky uvnitř kontejneru o šířce 980 pixelů - na rozdíl od nevyzářeného předchozího návrhu, který měl hlavičku s šířkou tekutiny, která překlenula celou stránku nad část obsahu s pevnou šířkou.
Také, zatímco starý design nemohl vypadat, že rozhoduje mezi zaoblenými rohy a čtvercem, nový design trvale vykazuje čtvercové rohy s jemnými úkosovými efekty oddělujícími příslušné prvky, jak je znázorněno na obrázku níže.
Přestože formát je podobný mřížce, je, jak již bylo zmíněno, není přísný formát mřížky a oddíly pod záhybem se trochu rozpadají ve struktuře než ty, které jsou uvedeny výše.
Dramaticky vylepšená sekce záhlaví
Jedním z nejvýraznějších vylepšení v novém designu je sekce záhlaví.
Vodorovná navigační lišta je moderní, čistá a čistá . Vyhledávací pole, možnost registrace a přihlašovací odkaz jsou v pravém horním rohu, kde by měly být.
A ačkoli v moderním designu není zvykem centralizovat logo místa, v takovém případě to funguje. Vytváří velmi dominantní, živý, značkový zážitek, který není snadno zapomenut .
Dalším příznivým rysem navigačního panelu je, že prostřednictvím barev a grafiky označuje, které vazby jsou primární, které jsou druhotné a které se otevírají na mikrosítcích nebo sesterských místech. Ty jsou označeny pravoúhlými trojúhelníky ("Peníze" a "Sporty" - podrobněji níže).
Efektivní využití prostoru
Na pravé straně stránky pod primární reklamní jednotkou obsahují přepínač obsahu ve stylu akordeonů, který umožňuje uživateli zobrazit v poměrně malé oblasti náhledy obsahu souvisejícího s řadou různých témat.
Důraz na popularitu videa a příběhu
V předchozím designu mělo video poměrně silný důraz, vyznačený v krabici na pravé straně. V novém designu je video hlavní kategorie v primárním navigačním panelu, která má prakticky stejný vizuální význam jako odkaz "Domů".
Příběhy videí jsou zobrazeny na celém webu a jsou jasně označeny odkazem na odkaz "přehrávání" na fotografiích, které odkazují na videoobsah, jak je uvedeno níže:
Další kategorie, která má stejný význam jako "Home" a "Video", jak je uvedeno na obrázku, je "NewsPulse", která je nová a stále v beta verzi.
Tato sekce zobrazuje zprávy o popularitě (které se podle všeho počítají podle celkového počtu zobrazení stránek, nikoliv komentářů) a umožňuje čtenáři filtrovat výsledky podle kategorie nebo typu příběhu.
Strong Pages Pages
Stránky hlavní kategorie ("US", "Svět", "Politika" atd.), Přístupné z primárního navigačního panelu, pracují obdobně jako na domovské stránce .
Ve skutečnosti, pokud jste nevěděli, na které stránce jste, můžete si myslet, že jste na domovské stránce. Kategorie "USA" je zobrazena níže:
Každá z těchto sekcí pohodlně zobrazuje nejlepší příběhy, nejnovější zprávy a další položky související s touto kategorií.
Černobílé nadpisy pod obrázky, které jsou také zobrazeny na domovské stránce a na stránkách článků, jsou okouzlující a snadno čitelné, aniž by byly používány příliš elegantní grafiky nebo styly písma.
Strong Stránky článku
Stránky článků z větší části zachovávají živý branding domovské stránky. Textový text je pěkně zobrazen ve formátu 14px Arial s velmi čitelnou čárou.
Přestože se některé prvky na stránkách zdají být poněkud malé, osobně se mi líbí způsob, jakým na stránce vyčnívá velikost písma článku, takže čtenář může zůstat na něm zaměřen.
Také, na levé straně každého příběhu, je část nazvaná "Story Highlights", která shrnuje aktuální příběh v několika bodech s odrážkami. To ukazuje, že návrháři CNN si uvědomují online tendenci uživatelů "skenovat" zdlouhavý materiál.
Informační přetížení
Ze všech negativních aspektů nového návrhu pravděpodobně první problém, který je okamžitě zřejmý, je přetížení odkazů a informací na domovské stránce - i když je strukturovanější a organizovanější, jak bylo popsáno dříve.
Domovská stránka je dlouhá asi dvě a půl obrazovky a zahrnuje sekce, které duplikují položky v hlavním navigačním panelu, s asi půl tucty dílčích odkazů v každé kategorii. Tyto sekce se zobrazují pod záhybem a jsou zobrazeny v tomto obrázku:
Vzhledem k tomu, že CNN je jedním z nejoblíbenějších míst na světě (38 milionů unikátních návštěvníků každý měsíc), tyto sekce budou mít značný provoz ve srovnání s jinými místy, protože se zdají být tak daleko pod záhybem a protože je tolik odkazy, relativní návštěvnost těchto odkazů přes domovskou stránku by byla pravděpodobně poměrně nízká.
Důležité sekce Buried?
Jak bylo uvedeno výše, hodně informací na domovské stránce se objeví pod záhybem. A významně se zdá, že nějaký důležitý obsah je zcela zakrytý v dolní části domovské stránky, více než dvě plné obrazovky pod hlavičkou .
Například část s názvem "Hot Topics" se objeví v dolní části, na pravé straně, těsně nad některými propagačními materiály a reklamami.
Zdá se, že dává větší smysl, že tato část nahradí přepínač obsahu akordeonů, jinak by měla být začleněna do harmoniky.
Reklamy a propagace, které se zobrazují pod "Hot Topics", se také zdají být důležitější než jejich umístění. Opět, ačkoli takové webové stránky s vysokou návštěvností by získaly mnoho kliknutí na tyto oblasti, míra prokliku v porovnání s částmi a reklamami nad záhyby by se pravděpodobně drasticky lišila.
Producenti CNN pochopitelně vědí, jaký obsah je nejdůležitější a chápou jejich zvyky lépe než kdokoliv jiný - ale tyto problémy s rozložením a použitelností jsou užitečné při analýze, pokud by ostatní vývojáři čelili podobným rozhodnutím.
Tajemství použitelnosti
Na novém webu je několik elementů, které nemusí být navrženy pro optimální použitelnost.
Jedním příkladem je pravoúhlý trojúhelník, který se objevuje na každém z odkazů na mikropodniku. Na první pohled jsem si nebyl jistý, proč byly tyto trojúhelníky. Zdá se, že naznačují nějakou posuvnou část jazyka JavaScript, která by se objevila.
Někteří uživatelé, kteří nevěnují plnou pozornost, mohou dokonce zaměnit za šipky směřující dolů, které vytvářejí drop-down menu.
by stačilo - ale pak by to představovalo problém uživatelů předpokládat, že odkazy se otevřely v novém okně, což v tomto případě není pravda. Přepínač obsahu akordeonu, diskutovaný dříve, má také několik problémů s použitelností. Za prvé, když je JavaScript zakázán, akordeon je zbytečný a nezobrazuje žádný obsah.
Mělo by se standardně rozbalit, aby se zobrazil veškerý obsah, jinak se zobrazí jedna z položek. Záhlaví hypertextových odkazů pro úseky akordeonu by však měly stále odkazovat na příslušné sekce, ale nemají.
Dalším problémem s obsahem akordeonů je to, že jelikož text, který obsahuje, je tak malý, není vždy jasné, co je v akordeonu možné kliknout. To činí odkazy méně odlišné od zbytku obsahu harmoniky.
Na následujícím obrázku ukazuje červená šipka, kterou jsem nakreslil, dva položky s odrážkami. Text v těchto položkách seznamu je hypertextový, ale na první pohled to není zřejmé.
Některé sekce stále odrážejí starý design
Stejně jako v případě jakéhokoli redesignu stránky velikosti CNN, některé části budou stále odrážet starý design, dokud nebudou všechny stránky plně integrovány.
Obvykle se jedná o starší obsah, který nebude navštěvován tak často, ale v případě CNN některé důležité oddíly stále mají starou kůži.
Dva příklady jsou o a Kontakt stránek.
Malá typografie
Jeden konkrétní problém, který neodpovídá moderním trendům webového designu, je použití malého textu a malých typografických prvků.
Malá velikost písma v obsahu harmoniky byla diskutována dříve. K dispozici je také panel nástrojů "sdílení", který se zobrazuje na článcích a stránkách s videem, v části "Poslední zprávy" na domovské stránce, odkazy "Zaregistrovat" a "Přihlásit" v záhlaví a textové odkazy pod záhybem domovská stránka, abychom zmínili pár.
Byl by nástroj "sdílení" zobrazený výše zvýšit účinnost s větší typografií? Co je o "doporučeném" oddílu uvedeném níže nebo o jiných částech s menším typem?
Závěr
Nový web CNN.com přidal řadu funkcí, které zde nejsou diskutovány, které se více týkají jejich zpravodajských služeb a přizpůsobeného obsahu. První odkaz níže obsahuje video představené společností CNN, které se zabývá některými novými funkcemi.
Určitě si myslím, že nová stránka představuje mnohem překrásnější a zajímavější uživatelský zážitek než starý, a kromě slabých stránek v přepínači obsahu harmoniky, nevýhody nového designu nejsou opravdu tak významné.
Vypadá to, že hodně času a plánování se dostalo do návrhu nového CNN.com a myslím, že weboví designéři a zájemci o zlepšení použitelnosti na svých vlastních stránkách by udělali dobře, aby zvážili a pokusili se poučit se z některých změn na nové webové stránce CNN.
Další čtení
- Vítejte na nové CNN.com (Video na CNN.com)
- Nová CNN.com (první screenshoty na TechCrunch)
- Nové CNN.com jde živě: Co si myslíte?
Tento příspěvek byl napsán výhradně pro Webdesigner Depot Louis Lazaris, nezávislý spisovatel a webový vývojář. Louis běží Působivé weby kde on posílá články a cvičení na web designu. Můžete sledovat Louis na Twitteru nebo se s ním spojte přes jeho webové stránky .
Co se vám líbí nebo nelíbí o novém designu webových stránek společnosti CNN? Sdílejte níže uvedené komentáře.