Endurhönnun hamingjusamur Cog's VisitPhilly.com: dæmi um nútíma vefsvæði

Í janúar sendi Jason Santa Maria út kvak tilkynna það visitphilly.com hafði verið endurhannað af heimsþekktum hönnun stúdíó Til hamingju með Cog . Áhugi mín var piqued, og ég gat ekki annað en að horfa á.

Ég get heiðarlega sagt að ég hef aldrei verið meira hrifinn af vefsíðu endurhönnun en ég var með þessari.

That Happy Cog var fær um að snúa svo stórri vefsíðu inn í fallegan, aðgengileg, hagnýtur og innblástur notandi reynsla vitnar um hæfileika liðsins á Happy Cog.

Á engan hátt er ég í aðstöðu til að bjóða upp á gagnrýni sem gerir rétt til áætlanagerðar, hönnunar og þróunar sem hlýtur að hafa farið inn í þetta verkefni.

En ég hélt að það væri gagnlegt að benda á hvers vegna þetta endurhönnun epitomizes fallega og árangursríka vefsíðuhönnun fyrir markaðinn í dag.

A skýr tilgangur

Lénið, augljóst merki, skýrar fellilistar, falleg ljósmyndun: allt þetta og fleiri spilunarhlutverk í samskiptum á sérstökum tilgangi vefsvæðisins (til að hvetja notendur til að heimsækja borgina í Fíladelfíu) og að bjóða notendum að kanna um Vefsíðan hvað er (frekar furðu) falleg amerísk borg.

Fyrstu flakk atriði sem notandinn tekur eftir eru mega fellilistanum og stóra textatengla sem leggja yfir helstu snúnings myndina.

Skjámyndin hér að neðan lýsir þessum tenglum, þ.e. "Things to Do" (sem er sýnt virkur), "Plan Your Trip," "Philly Now" og myndin yfirborð "Power Lunch."

Þessir hlutir voru augljóslega ætluð til að taka strax eftir. Í myndinni hér að neðan hefur ég kortlagt líklega augnlok notenda sem skanna heimasíða.

Eftir að hafa tekið eftir (og hugsanlega kanna) eina eða fleiri dropatakkana mun notandinn skanna textann sem tengist virka myndinni, og þá fara náttúrulega niður í kaflann sem merkt er "Hvað er nýtt" og kemur loksins næstum næstum hring til hausinn nálægt leitarreitnum.

Innihaldið er skipulagt þannig að notandinn geti tekið upplýsandi og sjónrænt eftirminnilegt tug yfir mikilvægustu hluta síðunnar á nokkrum sekúndum.

Notandinn myndi ekki líklega vera seinkaður, ruglaður eða óvart, þrátt fyrir að mikið efni sé tiltækt til að kanna.

Lágmark grunnskóla

Eins og minnst er á einn af mest áberandi sviðum fellilistanum. Ákvörðunin um að halda fast við lágmarksfjölda aðal tengla hér er rétturinn.

Aðeins þrír tenglar leyfa hlutunum að birtast í stærri letri, þannig að notandinn haldi athygli sinni og sýni fram á uppbyggingu vefsvæðisins.

Lágmarksleiðsögnin er ein af helstu breytingum í endurhönnuninni og færir mikla ávinning. Bera saman það við hausinn í gamla hönnuninni, sem er ekki eins einbeitt:

Þó að gamla hausinn sé ekki lélega hönnuð eða ónothæfur, þá er það ekki eins einbeitt og ekki næstum eins fallegt og nýtt. Annar veikleiki er skortur á fellilistanum, sem á nýju vefsíðu er skýr og aðlaðandi.

Þegar notandi kemur á vefsíðu eins og þetta (oft í gegnum leit Google), mun oftar en ekki vilja gera eitt af tveimur hlutum: sjáðu hvað Philadelphia borgin hefur að bjóða eða skipuleggja ferð sína.

Fjarlægja siglingar í hausnum hjálpar notandanum að ná þessum markmiðum á fljótlegan og skilvirkan hátt.

Fallegt leturfræði

Viltu búast við neitt minna frá Happy Cog? Ég elska algerlega letrið sem notað er við "Philadelphia og sveitina" merkið.

Það hefur lúmskur vestræna tilfinningu en er samt nútíma og dignified. Til að halda vörumerkinu stöðugt er letrið endurnotað fyrir margar fyrirsagnir á vefsíðunni, en sum þeirra eru auðkennd í skjámyndinni hér fyrir neðan.

Flest textinn á restinni af vefsíðunni er í Georgíu leturgerð, með einstaka notkun Arial, en gert alveg glæsilega. Mismunandi blanda vefsíðunnar af fyrirsögnum, líkamsafritum, myndritum og öðrum lýsandi þáttum er afar læsileg og smekklega kynnt.

Þrátt fyrir magn af efni, jafnvel á innri síðum, finnst notandinn sjaldan ef til vill óvart, ólíkt reynslu sinni á gömul vefsíða .

Aukin árangur og skynjaður hraði

Vefsíðan með svo mikið efni og svo margar myndir taka óhjákvæmilega árangur. Hönnuðirnir voru meðvitaðir um þetta og tóku mikla áherslu á að tryggja að einhverjar seinkaðar hleðslureiningar myndu ekki vera truflandi eða valda því að gestir gefi upp og líta til annar Pennsylvanian borg .

Eins og sýnt er hér að neðan, þegar notandinn heimsækir heimasíðuna, er síðasti hlutinn sem á að hlaða einn mikilvægasti þætturinn í nýju skipulaginu: Helstu snúningur myndarinnar. En raunverulegan hægð er milduð af innihaldi hleðslu vísirinn (spuna líflegur grafískur):

Þessi nothæfi aukahlutur er ekki takmarkaður við stórar myndir heldur. Vegna fjölbreytileika efnis í fellilistanum birtist svipuð innihaldsheldarmynd þegar matseðill innihald er hlaðið í gegnum Ajax:

Fyrir þennan valmynd er aukahluturinn nauðsynlegur vegna þess að fellilistar eru venjulega ekki seinkaðar þegar kveikt er á henni.

Engin hleðsla vísir hefði valdið ruglingi, hugsanlega að gera notandann músina í burtu og síðan músina til baka og furða hvers vegna virkni er fastur.

Svo, þrátt fyrir að blaðsíðan sé ekki í raun að hlaða hraðar, er skynja hraða aukin. Þetta er lexía fyrir alla hönnuði og forritara að hugsa ekki aðeins um raunverulegan hraða en skynja hraða.

Notandi-oriented Features

Eitt af mikilvægustu eiginleikum nýju vefsíðunnar er hvernig umbreytingin í nýju hönnunina hefur verið gerð, sem tryggir að gestir sem koma aftur séu ekki hneykslaðir af miklum breytingum.

Þegar þú heimsækir fyrst vefsíðuna birtir þú stóran rauða borði efst á síðunni og segir þér að vefsvæðið hafi verið endurhannað og er enn í beta. Þú hefur valið að skoða vefsíðuna með því að nota gamla tengið.

Að gefa gestum sem eru vanir við gamla skipulagið og byggja upp kost á að fara aftur í það er mikilvægt, vegna þess að það tryggir að þeir verða ekki svekktur og að reyna að finna kunnuglegt efni.

Á svona stórum vef, einkum einn endurhannað af fyrirtæki sem er þekktur fyrir notendaviðmiðaðan hönnun, eru slíkar helstu byggingarbreytingar og aukahlutir skylt að henda gestum sem voru notaðir við gamla stílinn.

Skilaboðin í rauða borðið koma því í veg fyrir rugling eða gremju af hálfu gesta.

Ég var ekki að eyða miklum tíma í að bera saman gamla heimasíðu við nýjan, svo ég get ekki staðfest hvernig svipuð innihald og arkitektúr eru, en vegna þess að við fáum kost á að heimsækja gamla vefsíðu verður innihaldið að vera svipað nóg ef við getum nálgast núverandi viðburði og önnur reglulega uppfærð atriði í báðum útgáfum.

Ein algeng þáttur er tengillinn sem birtist fyrir ofan leitarreitinn, þar sem leitað er til athugasemda um nýjan hönnun með því að bjóða notendum að fylla út "beta könnun". Þessi eiginleiki sýnir að eigendur hafa áhyggjur af því hvernig notendur upplifa og skynja vefsíðuna.

Fullkomið efni

Margir af meðlimum Happy Cog liðsins eru vel þekktir á netinu fyrir talsmenn þeirra á vefnum staðla og aðgengileg efni, svo það er ekki á óvart að þessi vefsíða sé að fullu aðgengileg fyrir nánast hvaða notanda sem er á hvaða vettvangi sem er.

Með JavaScript óvirkt er reynsla notandans á vefsíðunni mjög svipuð, þótt margar aukahlutir séu ekki lengur tiltækir.

The CSS text-indent eign er notuð til að skipta um texta í fyrirsögnum með myndum sem sýna sérsniðna leturgerðina. Þetta tryggir að síðurnar séu semantic, SEO-vingjarnlegur og sýnilegur fyrir alla notendur.

Myndin hér að neðan sýnir fyrirsögn á innri síðu, vinstra megin við slökkt á stíl, til hægri með því að gera það virkt.

Við getum séð hvernig fyrirsagnirnar eru bættar með myndum án þess að tapa sæðisgildi þeirra og án þess að hönnuðir grípa til óþarfa flókinna leturgreindaraðferða.

Annar lykilatriði er hvernig JavaScript uppfærslur eru framkvæmdar. Á heimasíðunni eru tveir flipahópar, einn sem heitir "Book Online" og hin tenging við félagsleg netkerfi visitphilly.com:

Þegar JavaScript er óvirkt birtist allt innihaldið í báðum flipanum. Margir vefsíður með flipa búnaður sýna aðeins einn af reitunum þegar JavaScript er óvirkt, en það er yfirleitt ekki besta æfingin.

Þessi tækni er notuð stöðugt í gegnum vefinn fyrir fjölda eiginleika og tryggir að hegðunarlagið (þ.e. Ajax og JavaScript) sé aukning, ekki nauðsynleg.

Þetta gerir innihaldið aðgengilegt, ekki aðeins fyrir notendur sem eru að vafra án JavaScript en leitarvélar eins og Googlebot.

Einhver veikleiki í hönnuninni?

Aftur, ég er ekki í neinum tilgangi að nokkuð gagnrýna hönnun sem gerð er af fyrirtæki eins og Happy Cog. En ég mun benda (varlega) á tveimur minniháttar veikleika í nýjum hönnun og uppbyggingu.

Í fyrsta lagi finn ég orðalag þriðja tengilins í aðalleiðsagnarvalmyndinni svolítið óljós ("Philly Now").

Ég vissi ekki strax hvað það þýddi. Ég hafði gert ráð fyrir að það þýddi núverandi atburði, en það er greinilega sambland af atburðum, veðri og núverandi myndum. Ég er ennþá óviss um hvernig á að lýsa því, og ég fæ tilfinninguna að tengilinn sé sjaldan smelltur.

Hin veikleiki er rétthyrnd þríhyrningur í efri leiðsagnarvalmyndinni á innri síðum:

Ég gerði ráð fyrir að þessir þríhyrningar hafi gefið til kynna fljúga út valmyndir, en það eru engar flugsendingar. Þríhyrningar eru bara ábendingar til að vekja athygli notandans á innihaldssvæðið. Hægripunktar þríhyrningar eru bestir áskilinn fyrir sjálfstæða tengla og fljúga út valmyndir, ekki lóðrétt flakk eins og þetta.

Við finnum það sama á heimasíðunni, en það er ekki eins slæmt þar vegna þess að örvarnar eru hluti af JavaScript-ekið efnisrofa.

Hvorki þessara "veikleika" skaðar notandinn reynslu mikið. Og sú staðreynd að ég get fundið aðeins tvær veikleika sýnir hversu mikil endurhönnun þetta er í raun.

Verðugt próf og eftirlíkingu

Mjög meira gæti verið sagt um árangur hönnunarinnar og kóðann á visitphilly.com, utan gildissviðs þessarar greinar.

Til viðbótar við það sem við höfum fjallað hér, gæti ég bent á gilt og vel athugað kóða, skilvirka notkun hvítra rýmisins, sjónræna stigveldisins, frábæra litaval, næstum sömu reynslu í IE6 og fleira.

Ég vona að þessi greining muni gefa ágætis yfirlit yfir nokkrar lykilþættir þessa nýju hönnunar og hvernig hún lýsir nútíma vefhönnun í greininni.

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 .

Ert þú eins og nýja visitphilly.com? Gera aðrar aðgerðir í hönnun, skipulagi eða arkitektúr betri reynslu notenda? Vinsamlegast gefðu athugasemdum þínum fyrir neðan.

vefhönnun hamingjusamur kjafti Jason Santa Maria endurgera visitphilly

Endurhönnun hamingjusamur Cog er á VisitPhilly.Com: Dæmi um nútíma vefsvæði