Happy Cogs redesign av VisitPhilly.com: Et eksemplarisk moderne nettsted

I januar sendte Jason Santa Maria ut en kvitring kunngjøre det visitphilly.com hadde blitt omdesignet av verdensberømte designstudio Happy Cog . Min interesse var piqued, og jeg kunne ikke hjelpe, men ta en titt.

Jeg kan ærlig si at jeg aldri har vært mer imponert over et nettsted redesign enn jeg var med denne.

That Happy Cog var i stand til å slå et så stort nettsted til en vakker, tilgjengelig, funksjonell og innbydende brukeropplevelse, vitner om talentet til teamet hos Happy Cog.

På ingen måte er jeg i stand til å tilby en kritikk som gjør rettferdighet til planlegging, design og utvikling som må ha gått inn i dette prosjektet.

Men jeg trodde det ville være nyttig å påpeke hvorfor dette redesignet utgjør en vakker og effektiv nettside design for dagens marked.

Et klart formål

Domenenavn, iøynefallende logo, klare rullegardinmenyer, vakker fotografering: alt dette og flere spillrollroller i å kommunisere nettstedets distinkte formål (for å oppmuntre brukere til å besøke byen Philadelphia) og i å invitere brukere til å utforske via nettsiden hva er (ganske overraskende) en vakker amerikansk by.

De første navigasjonselementene som brukeren merker er mega drop-down meny linker og de store tekstlinkene som legger over hovedrotasjonsbildet.

Skjermbildet nedenfor understreker disse linkene, nemlig "Ting å gjøre" (som vises aktivt), Planlegg reisen, "Philly Now" og bildeoverlegget "Power Lunch".

Disse elementene var åpenbart ment å bli lagt merke til umiddelbart. I bildet nedenfor har jeg kartlagt den mest sannsynlige øyeveien til en bruker som skanner hjemmesiden.

Etter å ha merket (og muligens utforsket) en eller flere av rullegardinmenyene, vil brukeren skanne teksten som er relatert til det aktive bildet, og deretter bevege seg naturlig ned til seksjonen som er merket "Hva er nytt", og kommer endelig tilbake nesten full sirkel til overskriften i nærheten av søkeboksen.

Innholdet er organisert slik at brukeren kan ta en informativ og visuelt minneverdig trek over de viktigste delene av siden om noen sekunder.

Brukeren vil ikke sannsynligvis bli forsinket, forvirret eller overveldet, til tross for at så mye innhold er tilgjengelig for å utforske.

Et minimum av primære linker

Som nevnt er en av de mest fremtredende områdene rullegardinmenyen. Beslutningen om å holde seg til et minimum antall primære lenker her er den rette.

Å ha bare tre koblinger gjør at elementene kan vises i en større skrift, og dermed holde brukerens oppmerksomhet og demonstrere nettstedets fokuserte struktur.

Den minimale navigeringslinjen er en av de store endringene i redesignet og gir gode fordeler. Sammenlign det med header-delen i det gamle designet, som ikke er så fokusert:

Selv om den gamle overskriften ikke er dårlig utformet eller ubrukelig, er den ikke så fokusert og ikke så vakker som den nye. En annen svakhet er mangelen på rullegardinmenyindikatorer, som på den nye nettsiden er klare og attraktive.

Når en bruker kommer til en nettside som denne (ofte gjennom et Google-søk), vil de ofte vil gjøre en av to ting: se hva Philadelphia-byen har å tilby, eller planlegg reisen.

Den fjernede navigasjonen i header hjelper brukeren å oppnå disse målene raskt og effektivt.

Vakker typografi

Ville vi forvente noe mindre fra Happy Cog? Jeg elsker absolutt skrifttypen som brukes til "Philadelphia and the Countryside" -logoen.

Den har en subtilt vestlig følelse, men er fortsatt moderne og verdig. For å holde merkevaren konsekvent, blir fonten gjenbrukt for mange overskrifter i hele nettstedet, hvorav noen er fremhevet i skjermbildet nedenfor.

Det meste av teksten på resten av nettstedet er i Georgia-skrifttype, med en og annen bruk av Arial, men gjort ganske elegant. Nettstedets mangfoldige blanding av overskrifter, kroppseksempler, tekster og andre beskrivende elementer er ekstremt lesbar og smakfullt presentert.

Til tross for innholdet, selv på interne sider, føler brukeren sjelden om noensinne overveldet, i motsetning til opplevelsen på gammel nettside .

Økt ytelse og oppfattet fart

Et nettsted med så mye innhold og så mange bilder har uunngåelig en suksess. Utviklerne var bevisst på dette og tok stor forsiktighet for å sikre at noe forsinket lasting innhold ikke ville være distraherende eller forårsake besøkende å gi opp og se til en annen Pennsylvanian by .

Som vist nedenfor, når brukeren besøker hjemmesiden, er det siste elementet som skal lastes, et av de viktigste elementene i det nye layoutet: hovedrotasjonsbildet. Men den faktiske treghet er redusert av innholdsbelastningsindikatoren (den spinnende animerte grafikken):

Denne bruken av brukervennlighet er heller ikke begrenset til store bilder. På grunn av mangfoldet av innhold i rullegardinmenyene, vises en lignende innholdsbelastende grafikk som menyinnholdet laster via Ajax:

For denne menyen er forbedringen avgjørende, fordi rullegardinmenyene normalt ikke forsinkes når de utløses.

Ingen lastindikator ville ha forårsaket forvirring, muligens å gjøre brukeren musen unna og deretter musen tilbake, lurer på hvorfor funksjonaliteten er fast.

Så, selv om siden ikke lastes faktisk raskere, øker den oppfattede hastigheten. Dette er en leksjon for alle designere og utviklere å tenke ikke bare på faktisk fart, men av oppfattet fart.

Brukerorienterte funksjoner

En av de viktigste funksjonene i den nye nettsiden er måten overgangen til det nye designet har blitt gjort, noe som sikrer at tilbake besøkende ikke blir sjokkert av de drastiske endringene.

Når du først besøker nettstedet, oppdager du et stort rødt banner øverst på siden, og informerer deg om at nettstedet har blitt omformet og fortsatt er i beta. Du får muligheten til å bla gjennom nettstedet ved hjelp av det gamle grensesnittet.

Å gi besøkende som er vant til det gamle oppsettet og strukturere muligheten til å gå tilbake til det, er kritisk, fordi det sikrer at de ikke blir frustrert og prøver å finne kjent innhold.

På et så stort nettsted, spesielt en redesignet av et selskap kjent for sine brukerfokuserte design, er slike store arkitektoniske endringer og forbedringer bundet til å kaste bort besøkende som var vant til den gamle stilen.

Meldingen i det røde banneret forhindrer da forvirring eller frustrasjon hos besøkende.

Jeg brukte ikke mye tid på å sammenligne den gamle nettsiden med den nye, så jeg kan ikke bekrefte hvordan lignende innhold og arkitekturer er, men fordi vi får muligheten til å besøke den gamle nettsiden, må innholdet være likt nok hvis vi får tilgang til nåværende hendelser og andre jevnlig oppdaterte elementer i begge versjoner.

Et vanlig element er lenken som vises over søkefeltet, og søker tilbakemelding på det nye designet ved å invitere brukere til å fylle ut en "beta-undersøkelse." Denne funksjonen viser at eierne er opptatt av hvordan brukerne opplever og oppfatter nettstedet.

Fullt tilgjengelig innhold

Mange av medlemmene i Happy Cog-teamet er godt kjent på nettet for deres fortaler om webstandarder og tilgjengelig innhold, så det er ingen overraskelse at dette nettstedet er fullt tilgjengelig for nesten alle brukere på alle plattformer.

Med JavaScript deaktivert, er brukerens opplevelse av nettstedet svært lik, selv om mange forbedringer ikke lenger er tilgjengelige.

CSS text-indent Egenskapen brukes til å erstatte teksten i overskriftene med bilder som viser den egendefinerte skrifttypen. Dette sikrer at sidene forblir semantiske, SEO-vennlige og synlige for alle brukere.

Bildet under viser en overskrift på en intern side, til venstre med stilen deaktivert, til høyre med den aktivert.

Vi kan se hvordan overskriftene forsterkes av bilder uten å miste sin semantiske verdi, og uten at designerne benytter seg av unødvendig komplekse skriftutskriftsmetoder.

En annen viktig tilgjengelighetsfunksjon er hvordan JavaScript-forbedringene implementeres. Hjemmesiden har to tabbeinnholdsvekslere, en som heter "Book Online", og den andre kobler til visitphilly.com s sosiale nettverk:

Når JavaScript er deaktivert, vises alt innholdet i begge kategoriene. Mange nettsteder med faner med faner viser bare en av boksene når JavaScript er deaktivert, men det er vanligvis ikke best praksis.

Denne teknikken brukes konsekvent gjennom nettstedet for en rekke funksjoner, og sikrer at atferdslaget (dvs. Ajax og JavaScript) er en forbedring, ikke en nødvendighet.

Dette gjør innholdet tilgjengelig ikke bare for brukere som surfer uten JavaScript, men til søkemotorer som Googlebot.

Noen svakheter i designen?

Igjen er jeg ikke i stand til å kritisere et design gjort av et selskap som Happy Cog. Men jeg vil påpeke (forsiktig) to mindre svakheter i den nye utformingen og strukturen.

For det første finner jeg ordlyden til den tredje lenken i den primære navigasjonsmenyen litt vag ("Philly Now").

Jeg visste ikke med det samme hva det betydde. Jeg hadde antatt at det betydde nåværende hendelser, men det er tilsynelatende en kombinasjon av hendelser, vær og nåværende bilder. Jeg er fortsatt usikker på hvordan jeg skal beskrive den, og jeg får følelsen av at lenken sjelden blir klikket.

Den andre svakheten er høyre pekende trekanter i den sekundære navigasjonsmenyen på interne sider:

Jeg antok at disse trianglene angav fly-out menyer, men det er ingen fly-outs. Trianglene er bare pekere for å trekke brukerens oppmerksomhet til innholdsområdet. Høyre pekende trekanter er best reservert for frittstående koblinger og fly-out menyer, ikke vertikal navigasjon som dette.

Vi finner det samme på hjemmesiden, men det er ikke så ille det fordi pilene er en del av en JavaScript-drevet innholdsswitch.

Ingen av disse "svakhetene" skader brukeropplevelsen mye. Og det faktum at jeg bare finner to svakheter, viser hvor flott et redesign dette egentlig er.

Verdig å undersøke og imitere

Mye mer kan sies om effektiviteten av designet og koden til visitphilly.com, utover omfanget av denne artikkelen.

I tillegg til det vi har diskutert her, kan jeg påpeke den gyldige og godt kommenterte koden, effektiv bruk av hvit plass, det visuelle hierarkiet, de utmerkede fargevalgene, den nesten identiske opplevelsen i IE6 og mer.

Jeg håper denne analysen gir en anstendig oversikt over noen av hovedtrekkene i denne nye designen, og hvordan den preger moderne webdesign i bransjen.

Videre lesning

Dette innlegget ble skrevet utelukkende for Webdesigner Depot av Louis Lazaris, frilansskribent og webutvikler. Louis løper Imponerende Webs hvor han legger inn artikler og opplæringsprogrammer på webdesign. Du kan følge Louis på Twitter eller ta kontakt med ham gjennom hans nettside .

Liker du den nye visitphilly.com? Gjøre andre funksjoner i design, layout eller arkitektur forbedre brukeropplevelsen? Vennligst gi kommentarer nedenfor.

webdesign glad cog jason santa maria redeign visitphilly

Happy Cog er Redesign av VisitPhilly.Com: Et eksemplarisk moderne nettsted