Nýr Website CNN's Design Deconstructed

Á mánudaginn 26. október, CNN.com kynnti nýjan vefhönnun , sem gerði fjölmargar breytingar á upplýsingum-þungum skipulagi þeirra.

Hin nýja hönnun er falleg, hreinn, skipulögð og vel skipulögð. Það býður augun á að skanna og finna eitthvað áhugavert með það að markmiði að smella á aðra síðu.

Fyrra hönnunin var nokkuð ringulreið og ekki mjög aðlaðandi; Efnið leit út eins og það var neydd til óbyggðrar rýmis. Hin nýja skipulag er mjög mismunandi og nær til fjölda nútíma vefhönnunar og nothæfi bestu starfsvenjur og þróun .

Svo skulum líta nánar út í ekki aðeins umtalsverðar úrbætur, heldur sumir af vafasömum hönnun og nothæfi ákvarðanir.

Grid-Inspired Layout

Ég nota setninguna "rist innblásin" vegna þess að ný hönnun virðist vera byggð á rist, en nákvæmni leiðréttingar þætti er ekki nákvæmlega þarna.

Taktu bendilinn á þeirra aðalstíllark , þeir virðast hafa losa byggt stíl og rist á Teikning CSS ramma.

CSS endurstilla þeirra ber mörg líkt við Teikning ramma og orðið "Teikning" er innifalinn efst, þannig að þetta væri rökrétt mat byggt á eigin takmörkuðu þekkingu mínu á Teikning.

Eftir að hafa skoðað skjár handtaka heimasíða þeirra, þá hef ég komist að þeirri niðurstöðu að ef þeir byggðu nýja útlitið á rist væri nákvæmni þessarar rats: 16 dálkar, 50 punkta á dálki, 12px rennur (rýmið milli dálka) samtals 980 px í breidd.

Hér að neðan er sýnt fram á sjónarmið á grindakerfi mínu, sem Photoshop mock upp:

Jafnvel þótt þættirnir á síðunni fylgi ekki eins konar röðun og jafnvægi sem venjulega væri búist við með ristútgáfu, þá er merkjanlegur framför í þessari uppsetningu yfir fyrri hönnun, sem sýnd er hér að neðan:

Hin nýja skipulag heldur öllum hliðarþáttum inni í 980px ílátinu - ólíkt clunky-útlit fyrri hönnun sem hafði vökva breidd haus sem spannar alla síðuna fyrir ofan fasta breidd efni kafla.

Þó að gamla hönnunin gæti ekki virst að ákveða á milli rúnna horns og ferninga, þá er ný hönnun með algerlega ferskt horn með fíngerðum beinum áhrifum sem aðskilja viðeigandi þætti eins og sýnt er á myndinni hér að neðan.

Þó að sniðið sé rist-eins og það er eins og nefnt er ekki strangt rist snið, og köflurnar fyrir neðan flipann hverfa nokkuð í uppbyggingu frá þeim að ofan.

Höfuðþáttur

Eitt af augljósustu úrbótunum í nýju hönnuninni er hausinn.

Lárétt flakk bar er nútíma, hreint og skýrt . Leitarreiturinn, innskráningarvalkosturinn og innskráningarlínan eru efst í hægra horninu, þar sem þau eiga að vera.

Og þó að það sé ekki venjulegt í nútíma hönnun að miða á vefsíðuna, þá virkar þetta. Það skapar mjög ríkjandi, skær, vörumerki reynsla sem er ekki auðveldlega gleymt .

Annar góður eiginleiki í siglingastikunni er sú að það gefur til kynna með lit og grafík sem tenglar eru aðal, sem eru efri og sem mun opna á örvum eða síðum. Síðarnefndu eru auðkennd með rétthyrndum þríhyrningum ("Money" og "Sports" - meira hér að neðan).

Skilvirk notkun á plássi

Hægri megin á síðunni, fyrir neðan aðal auglýsingaeininguna, hafa þau innihaldið innihaldsrofa sem samanstendur af harmónikum sem gerir notandanum kleift að skoða forsýningar á tiltölulega lítið svæði með efni sem tengist fjölda mismunandi mála.

Áhersla á Vídeó og Story Vinsældir

Í fyrri hönnuninni hafði myndin nokkuð sterkan áherslu, lögun í kassa á hægri hlið. Í nýju hönnuninni er myndskeið stór hluti í aðalleiðsöguborðinu, gefið næstum sömu sjónrænu mikilvægi og "heima" hlekkurinn.

Vídeó sögur eru á öllum vefsvæðum og eru greinilega auðkenndar með venjulegum "spilunarhnappi" tengilinn á myndum sem tengjast myndskeiðinu eins og sýnt er hér að neðan:

Annar flokkur sem er jafn mikilvæg og "Heim" og "Vídeó", eins og sýnt er á myndinni hér fyrir ofan, er "NewsPulse" hlutinn, sem er ný og er enn í beta.

Þessi hluti sýnir fréttir eftir vinsældum (sem virðist vera reiknað út af heildarfjölda síðuhorna, ekki athugasemdir) og gerir lesandanum kleift að sía niðurstöðuna eftir flokk eða sögutegund.

Strong Flokkur Síður

Helstu flokkasíðurnar ("US", "Heimurinn", "Stjórnmál" osfrv.), Sem eru skoðuð frá aðalstikustikunni, virka á sama hátt og heimasíðan .

Reyndar, ef þú vissir ekki hvaða síðu þú varst á, gætir þú held að þú værir á heimasíðunni. "US" flokkurinn er sýndur hér að neðan:

Hver af þessum köflum sýnir þægilega hæstu sögur, nýjustu fréttir og önnur atriði sem tengjast þeim flokki.

Svarthvítu myndlistin fyrir neðan myndirnar, sem einnig eru á heimasíðunni og á greinasíðum, eru augljós og auðvelt að lesa, án þess að nota of mikið myndir eða leturgerðir.

Strong Greinar Greinar

Greinar síður, að mestu leyti, viðhalda lifandi vörumerki á heimasíðunni. Body texti er fallega sýnt í 14px Arial með mjög læsilegri línuhæð.

Þó að nokkrir þættir á síðum virðast svolítið líta ég persónulega á hvernig leturstærð hlutar líkamans liggur út á síðunni þannig að lesandinn geti lagt áherslu á það.

Á vinstri hlið hvers sögunnar er einnig hluti sem heitir "Story Highlights" sem samanstendur af núverandi sögu í nokkrum punktum á punktum. Þetta sýnir að hönnuðir CNN eru meðvitaðir um netnotkun notenda til að "skanna" langan tíma.

Upplýsingar of mikið af upplýsingum

Af öllum neikvæðum þáttum hins nýja hönnunar er líklega fyrsta vandamálið sem er strax ljóst að of mikið af tenglum og upplýsingum á heimasíðunni - þótt það sé skipulagt og skipulagt, eins og fjallað var um áður.

Heimasíðan er um tvö og hálft skjáir löng og inniheldur köflum sem afrita hluti í aðalstikustikunni, með um hálft tugi undir-tengla undir hverjum flokki. Þessar köflur birtast undir flipanum og eru sýndar á þessari mynd:

Þar sem CNN er einn af vinsælustu stöðum heims (38 milljónir einstakra gesta í hverjum mánuði), munu þessi köflum fá mikla umferð í samanburði við aðrar síður, vegna þess að þeir birtast svo langt fyrir neðan brjóta og vegna þess að það eru svo margir Tenglar, hlutfallslegt magn af umferð að heimsækja þá tengla í gegnum heimasíðuna myndi líklega vera frekar lágt.

Mikilvægar þættir sem eru grafnir?

Eins og bent var á hér að framan birtist mikið af upplýsingum á heimasíðunni vel fyrir neðan brjóta. Og verulega virðist sem eitthvað mikilvægt efni er algjörlega grafið neðst á heimasíðunni, meira en tveir fullir skjár fyrir neðan hausinn .

Til dæmis birtist kafli sem ber yfirskriftina "Hot Topics" neðst, hægra megin, rétt fyrir ofan tilteknar auglýsingar og auglýsingar.

Það virðist vera meira vit í að þessi hluti myndi skipta um harmakveikju efni skiptir, eða annars vera felld inn í harmónikuna.

Auglýsingar og kynningar sem birtast undir "Hot Topics" virðast einnig vera mikilvægari en staðsetning þeirra sýnir. Aftur á móti, þótt svo mikil umferð website myndi fá marga smelli á þessum sviðum, smellihlutfall í samanburði við köflum og auglýsingar fyrir ofan brjóta myndi líklega vera hræðilega mismunandi.

Framleiðendur CNN vita auðvitað hvað efni er mikilvægast og skilja skilning á notendavönnunum sínum betur en einhver annar - en þessar skipulag og nothæfi viðfangsefni eru gagnlegar til að greina ætti aðrir verktaki að takast á við svipaðar ákvarðanir.

Nothæfi dularfulli

Það eru nokkrir þættir á nýju síðunni sem ekki er hægt að hanna fyrir bestu nothæfi.

Eitt dæmi er rétthyrningur þríhyrningur sem birtist á hverja ör-síða tengla. Við fyrstu sýn var ég ekki viss um hvað þessi þríhyrningur var fyrir. Þeir virðast benda til einhvers konar JavaScript renna kafla sem myndi skjóta upp.

Sumir notendur sem ekki borga fulla athygli geta jafnvel misst þau fyrir örvandi örvar sem framleiða fellilistann.

Er betri leið til að gefa til kynna samhliða tengil á öruggan hátt? Ég er í raun ekki viss. Kannski eitthvað svipað þekktu Wikipedia tákni

hefði verið nóg - en þá myndi það koma fram vandamálið af notendum að því gefnu að tenglarnar opnuðu í nýjum glugga, sem í þessu tilfelli er ekki satt.

The accordion efni skiptir, rædd áður, hefur einnig nokkur nothæfi vandamál. Í fyrsta lagi þegar JavaScript er gert óvirkt er harmónikan gagnslaus og birtir ekkert efni.

Það ætti að stækka sjálfgefið að sýna allt efni, eða birta annað eitt af hlutunum. Einnig ætti að tengja fyrirsagnirnar fyrir harmóníusniðin áfram í viðkomandi hlutum, en þeir gera það ekki.

Annað vandamál með harmónikleikinn er að þar sem textinn sem hann inniheldur er svo lítill, þá er það ekki alltaf ljóst hvað er smellt inni í harmónanum. Þetta gerir tenglana minna frábrugðin því sem eftir er af harmóníunni.

Í myndinni hér að neðan, rauða örin sem ég hef dregið er að benda á tvö punktalistaratriði. Textinn í þessum listatölum er tengdur en þetta er ekki augljóst við fyrstu sýn.

Sumir kaflar endurspegla enn gamla hönnun

Eins og raunin er með endurhönnun á vefsvæði stærð CNN, munu sum köflum enn endurspegla gamla hönnun þar til allar síður eru að fullu samþættar.

Þetta er venjulega raunin með eldri efni sem ekki verður heimsótt eins oft, en í tilviki CNN hafa sumir mikilvægir hlutar enn gamla húðina.

Tvær dæmi eru um og hafðu samband síður.

Lítil leturfræði

Eitt sérstakt hönnunarvandamál sem ekki er í samræmi við nútíma hönnun vefhönnunar er notkun lítilla texta og litla leturgreiningu.

Smá stærð letursins í harmóníusinnihaldinu var rætt fyrr. Það er líka hlutastikan "hlut" sem birtist á greinar og myndasíðum, hlutanum "Nýjustu fréttir" á heimasíðunni, "Skráðu þig" og "Skráðu þig inn" tengla í hausnum og textinn tengist fyrir neðan brjóta á heimasíða, til að nefna nokkrar.

Vildi hlutastikan "deila", sýnd hér að ofan, vera skilvirkari með stærri letri? Hvað um "mælt" hlutann, sýnd hér að neðan, eða öðrum hlutum með minni gerð?

Niðurstaða

Hin nýja CNN.com síða hefur bætt við nokkrum eiginleikum sem ekki eru ræddar hér sem tengjast meira að fréttastarfi sínu og sérsniðnu efni. Fyrsti hlekkurin hér að neðan inniheldur myndband sem er kynnt af CNN sem fjallar um nýjar aðgerðir.

Ég held örugglega að nýja síða kynnir miklu fallegri og áhugaverðari notendavara en gamla, og til viðbótar við veikleika í harmóníusinnihaldi, eru gallarnir á nýju hönnunin ekki svo mikilvæg.

Það lítur út fyrir mikla tíma og áætlanagerð fór inn í hönnun nýrra CNN.com og ég held að vefhönnuðir og þeir sem hafa áhuga á að bæta nothæfi á síðum sínum myndi gera það vel að íhuga og reyna að læra af sumum breytingum sem kynntar eru á nýju vefsvæði CNN.

Frekari lestur

Þessi færsla var skrifuð eingöngu fyrir Webdesigner Depot eftir Louis Lazaris, sjálfstætt rithöfundur og vefur verktaki. Louis keyrir Áhrifamikill vefur þar sem hann sendir greinar og námskeið um vefhönnun. Þú getur fylgst með Louis á Twitter eða hafðu samband við hann í gegnum heimasíðu hans .

Hvað finnst þér eða líkar við nýjan vefhönnun CNN? Deila athugasemdum þínum hér að neðan.

vefhönnun website endurhönnun cnn cnn nýr heimasíða