CNN: n uusi verkkosivuston muotoilu on purettu
Maanantaina 26. lokakuuta, CNN.com esitteli uuden verkkosivuston suunnittelun ja tekivät useita suuria muutoksia heidän informaatiomme raskaaseen ulkoasuun.
Uusi muotoilu on kaunis, puhdas, organisoitu ja hyvin jäsennelty. Se kehottaa silmää skannaamaan ja löytämään jotain mielenkiintoista tavoitteenaan napsauttaa toiseen sivulle.
Aikaisempi muotoilu oli jonkin verran järkkymätöntä eikä ole kovin kutsuva; sisältö näytti pitävän siitä, että se pakotettiin rakenteettomaan tilaan. Uusi asettelu on hyvin erilainen ja se sisältää useita moderneja web-suunnittelua ja käytettävyyttä parhaita käytäntöjä ja trendejä .
Tarkastelkaamme tarkemmin paitsi merkittäviä parannuksia, myös joitain kyseenalaisia suunnittelu- ja käytettävyyspäätöksiä.
Grid-Inspired Layout
Käytän termiä "grid-inspired", koska uusi muotoilu näyttää perustuvan ruudukkoon, mutta elementtien tarkka kohdistaminen ei ole juuri siellä.
Huolehtiminen selkeästi katsomaan heidän ensisijainen tyylitaulukko , he näyttävät löytäneet löyhästi tyylinsä ja verkonsa Blueprint CSS puitteissa.
Heidän CSS-nollauksensa on monia samankaltaisuuksia Blueprint-kehyksen kanssa, ja sana "suunnitelma" on ylhäällä, joten tämä olisi looginen arviointi, joka perustuu omaan rajoitettuun Blueprint-tietämykseen.
Kun olen analysoinut kotisivun ruudunkaappauksen, olen päätellyt, että jos ne perustuvat uuteen ruutuun, tämän verkon ominaispiirteet olisivat: 16 saraketta, 50 pp-saraketta, 12 pp-katkoviivoja (pylväiden välinen tila), yhteensä 980px leveä.
Alla on visuaalinen esitys ruudukkoestimaatistani, kun Photoshop mallinnetaan:
Vaikka sivulla olevat elementit eivät seuraa sellaista linjausta ja tasapainoa, jota tavanomaisesti voitaisiin odottaa verkkosuunnittelusta, on huomattava parannus tämän mallin edelliseen muotoiluun nähden alla:
Uusi asettelu pitää kaikki sivun elementit 980px-laajuisen kontin sisällä - toisin kuin selkeä, edellinen muotoilu, jossa oli nesteenleveyden otsikko, joka kattoi koko sivun kiinteän leveyden sisältävän osan yläpuolelle.
Vaikka vanha muotoilu ei näyttäisi päätä pyöristettyjen kulmien ja neliön välillä, uudessa mallissa on jatkuvasti neliömäisiä kulmia, joilla on hienovaraiset viistovaikutukset, jotka erottavat sopivat elementit, kuten kuvassa näkyy.
Vaikka formaatti on ristikkäinen, se ei mainituista ole tiukkaa verkkoformaattia, ja sen alapuolella olevat osat ovat melko rakenteeltaan edellä mainittuja.
Kehittyneempi otsikkokohta
Yksi ilmeisimmistä parannuksista uudessa mallissa on otsikkokohta.
Vaakatasoinen navigointipalkki on moderni, puhdas ja selkeä . Hakukenttä, kirjautumisvaihtoehto ja kirjautumislinkki ovat oikeassa yläkulmassa, jossa ne pitäisi olla.
Ja vaikka nykyaikaisessa suunnittelussa ei tavanomaista keskittyä sivuston logoa, tässä tapauksessa se toimii. Se luo hyvin hallitsevan, elävän brändin kokemuksen, jota ei ole helppo unohtaa .
Toinen mukava ominaisuus navigointipalkissa on se, että se osoittaa värin ja grafiikan välityksellä, mitkä linkit ovat ensisijaisia, toissijaisia ja jotka avautuvat mikrosivustoilla tai sisarivustoilla. Jälkimmäiset merkitään oikealla olevilla kolmioilla ("Money" ja "Sports" - lisää tästä alla).
Avaruuden tehokas käyttö
Sivun oikealla puolella, ensisijaisen mainosyksikön alapuolella, ne ovat lisänneet harmonisen tyyppisen sisällön vaihtajan, jonka avulla käyttäjä voi tarkastella suhteellisen pienellä alueella olevia esityksiä useista eri aiheista.
Korostus videon ja tarinan suosioon
Edellisessä mallissa video oli varsin voimakas painopiste, joka oli oikealla puolella olevasta laatikosta. Uudessa mallissa video on tärkeä luokka ensisijaisessa navigointipalkissa, koska sillä on lähes sama visuaalinen merkitys kuin Home-linkillä.
Videon tarinoita on esillä koko sivustossa, ja ne näkyvät selvästi tavallisella "toistopainikkeen" linkillä valokuvissa, jotka linkittävät videosisältöön, kuten alla esitetään:
Toinen kategoria, jolla on sama merkitys kuin "Koti" ja "Video", kuten yllä olevassa kuvassa näkyy, on "NewsPulse" -osa, joka on uusi ja silti beta.
Tämä osio näyttää suosittuja uutisartikkeleita (jotka näyttävät laskevan koko sivunäkymillä, ei kommentteja), ja sallii lukijan suodattaa tulokset luokittain tai tarinatyypeittäin.
Vahvat sivut
Päävalintasivut ("Yhdysvallat", "Maailma", "Politiikka" jne.), Jotka pääsevät ensisijaisesta navigointipalkista, toimivat samalla tavalla kuin kotisivulla .
Itse asiassa, jos et tiennyt, millä sivulla olet ollut, saatat ajatella, että olet kotisivulla. Seuraavassa on esitetty "US" -luokka:
Jokainen näistä osioista näyttää parhaiten tarinoita, viimeisimpiä uutisia ja muita tähän luokkaan liittyviä kohteita.
Kuvien alapuolella olevat mustat ja valkoiset kuvatekstit ovat myös kotisivulla ja artikkelisivuilla, ja ne ovat silmiinpistäviä ja helppoja lukea ilman ylisuojattuja grafiikoita tai fonttityylejä.
Vahvat sivut
Artikkelisivut ylläpitävät suurimmaksi osaksi kotisivun vilkasta brändäystä. Runko teksti näkyy hyvin 14px Arial -ohjelmassa, jossa on hyvin luettavissa oleva viivakorkeus.
Vaikka jotkin sivun elementit näyttävät jonkin verran pieniltä, olen henkilökohtaisesti tyytyväinen siihen, miten artikkelirungon fonttikoko erottuu sivulle, joten lukija voi keskittyä siihen.
Jokaisen tarinan vasemmalla puolella on osio nimeltä "Story Highlights", joka tiivistää nykyisen tarinan muutamassa luettelomerkityksessä. Tämä osoittaa, että CNN: n suunnittelijat ovat tietoisia käyttäjien online-taipumuksesta "skannata" pitkä aineisto.
Tiedon ylikuormitus
Uuden mallin kielteisistä näkökohdista luultavasti ensimmäiseksi ilmenevä ongelma on linkkien ylikuormitus ja kotisivun tiedot - vaikka se on jäsennelty ja organisoitu, kuten aiemmin on mainittu.
Kotisivulla on noin kaksi ja puoli näyttöä pitkä ja sisältää osioita, jotka kopioivat kohteita pääavigointipalkissa, jossa on noin puoli kymmentä alaotsikkoa kunkin luokan sisällä. Nämä osat näkyvät taitteen alapuolella ja ne näkyvät tässä kuvassa:
Koska CNN on yksi maailman suosituimmista paikoista (38 miljoonaa yksittäistä kävijää kuukaudessa), nämä osastot saavat huomattavan liikenteen muihin sivustoihin verrattuna, koska ne ovat niin paljon alhaisempia ja koska niillä on niin paljon linkit, suhteellinen määrä liikennettä vierailevat linkit kautta kotisivulla olisi todennäköisesti melko alhainen.
Tärkeät osastot haudattu?
Kuten edellä on huomautettu, paljon tietoa kotisivullesi näyttää selvästi taitteen alapuolelta. Ja huomattavasti näyttää siltä, että jotain tärkeää sisältöä on täysin haudattu kotisivun alaosaan, yli kaksi koko näytöstä otsikon alle .
Esimerkiksi otsikkokohta "Kuumat aiheet" näkyy lähellä alaosaa, oikealla puolella, hieman yli mainosten ja mainosten yläpuolella.
Näyttää siltä, että on järkevämpää, että tämä osa korvaisi harmonisen sisällön vaihtoa tai muuten sisällytettäisiin harmonikkaan.
"Kuumat aiheet" alla näkyvät mainokset ja mainokset näyttävät myös olevan tärkeämpiä kuin niiden sijainti paljastuu. Jälleen, vaikka tällainen suuri liikennesivusto saisi useita napsautuksia näillä alueilla, klikkausprosentti verrattuna osuuksiin ja mainoksiin taitoksen yläpuolella olisivat todennäköisesti huomattavasti erilainen.
Tietenkin CNN: n tuottajat tietävät, mikä sisältö on tärkeintä, ja he ymmärtävät käyttäjien tottumukset paremmin kuin kukaan muu - mutta nämä ulkoasun ja käytettävyyden haasteet ovat hyödyllisiä analysoida, jos muut kehittäjät kohtaavat samankaltaisia päätöksiä.
Usability Mysteries
Uudessa sivustossa on muutamia elementtejä, joita ei välttämättä ole suunniteltu optimaaliseen käytettävyyteen.
Yksi esimerkki on oikeanpuoleinen kolmio, joka näkyy jokaisessa mikrotason linkissä. Ensi silmäyksellä en ollut varma, mitä nämä kolmiot olivat. Ne näyttävät osoittavan jonkin JavaScript-liukusäätimen osuutta, joka avautuu.
Jotkut käyttäjät, jotka eivät ole täysin kiinnittäneet huomiota, saattavat jopa erehtyä niitä alaspäin osoittaviin nuoliin, jotka tuottavat pudotusvalikkoja.
olisi riittänyt - mutta silloin se aiheuttaisi käyttäjien ongelman olettaen, että linkit avataan uudessa ikkunassa, mikä tässä tapauksessa ei ole totta. Aiemmin keskustellussa harmonisen sisällönvaihtimessa on myös muutamia käytettävyysongelmia. Ensinnäkin, kun JavaScript on poistettu käytöstä, harmonikka on hyödytön eikä se näytä mitään sisältöä.
Sen pitäisi laajentaa oletuksena kaikkien sisältöjen näyttämistä tai näyttää jonkin kohteen. Myös harmonisen osien hyperlinkitetyt otsikot tulisi liittää edelleen omiin osiinsa, mutta ne eivät.
Toinen harmonisen sisällön ongelma on se, että koska tekstissä se on niin pieni, ei ole aina selvää, mitä napsautetaan harmoniksen sisällä. Tämä tekee linkistä vähemmän erillään muista harmonisen sisällöstä.
Alla olevassa kuvassa punaisen nuolen, jonka olen piirtänyt, osoittaa kaksi lueteltua luetteloa. Näissä listan kohteissa oleva teksti on hyperlinkki, mutta tämä ei ole ilmeistä ensi silmäyksellä.
Jotkut osat edelleen heijastavat vanhaa muotoilua
Kuten CNN: n kokoonpanossa tahansa sivuston uudelleensuunnittelussa, osa osioista heijastaa edelleen vanhaa mallia, kunnes kaikki sivut ovat täysin integroituneita.
Tämä koskee yleensä vanhempia sisältöjä, joita ei ole vieraillut niin usein, mutta CNN: n tapauksessa joissakin tärkeissä osissa on vielä vanha iho.
Kaksi esimerkkiä ovat noin ja ottaa yhteyttä sivuja.
Pieni typografia
Yksi erityinen muotoilukysymys, joka ei ole nykyaikaisen web-suunnittelutavoitteen mukainen, on pienten tekstien ja pienien typografisten elementtien käyttö.
Keskusteluun liittyvän fontin pienikokoista tilaa tarkasteltiin aiemmin. Mukana on myös "Jaa" -työkalurivi, joka näkyy artikkeli- ja videosivuilla, kotisivun "Viimeisimmät uutiset" -osiossa, otsikossa "Rekisteröidy" ja "Kirjaudu sisään" -linkit sekä teksti-linkit otsikon alle. kotisivu, muutamia mainita.
Olisiko edellä mainittu "share" -työkalupalkki tehokkaampi isompi typografia? Entä "suositeltava" -osio, joka näkyy alla, tai muita pienempiä osia?
johtopäätös
Uusi CNN.com-sivusto on lisännyt useita ominaisuuksia, joita ei ole käsitelty täällä, jotka liittyvät enemmän uutispalveluihinsa ja räätälöityyn sisältöön. Alla oleva ensimmäinen linkki sisältää CNN: n esittävän videon, jossa käsitellään joitain uusia ominaisuuksia.
Olen ehdottomasti sitä mieltä, että uudella sivustolla on paljon kauniimpi ja mielenkiintoisempi käyttökokemus kuin vanha, ja harmonisen sisällön vaihtajan heikkouksien lisäksi uuden suunnittelun haitat eivät ole kovinkaan merkittäviä.
Näyttää siltä, että paljon aikaa ja suunnittelua suunniteltiin uudella CNN.com-sivustolla, ja uskon, että web-suunnittelijat ja ne, jotka ovat kiinnostuneita lisäämään käytettävyyttä omilla sivustoillaan, pitäisivät hyvin harkita ja yrittää oppia joistakin esitetyistä muutoksista CNN: n uudella verkkosivustolla.
Lue lisää
- Tervetuloa New CNN.com (video CNN.com)
- Uusi CNN.com (ensimmäinen kuvakaappaus TechCrunchissa)
- Uusi CNN.com käy elää: Mitä mieltä olet?
Tämä viesti kirjoitettiin yksinomaan Webdesigner Depotille, freelance-kirjailija ja web-kehittäjä Louis Lazaris. Louis juoksee Vaikuttavat webs jossa hän lähettää artikkeleita ja tutoriaaleja web-suunnittelussa. Voit seurata Louisia Twitterissä tai ota yhteyttä häneen hänen verkkosivuillaan .
Mitä pidät tai pidät siitä CNN: n uudesta sivuston suunnittelusta? Jaa kommenttisi alla.