Happy Cog's Redesign af VisitPhilly.Com:
Et eksempel på moderne hjemmeside
I januar sendte Jason Santa Maria ud a tweet annoncerer det visitphilly.com var blevet omdesignet af verdensberømte designstudio Happy Cog . Min interesse blev pikeret, og jeg kunne ikke lade være med at tage et kig.
Jeg kan ærligt sige, at jeg aldrig har været mere imponeret over en hjemmeside redesign, end jeg var med denne ene.
That Happy Cog var i stand til at slå sådan et stort websted til en smuk, tilgængelig, funktionel og indbydende brugeroplevelse vidner om talentet hos holdet hos Happy Cog.
Jeg er på ingen måde i stand til at tilbyde en kritik, der gør ret til den planlægning, design og udvikling, der skal gået ind i dette projekt.
Men jeg troede, det ville være nyttigt at påpege, hvorfor dette redesign udpeger et smukt og effektivt website design til dagens marked.
Et klart formål
Domænenavnet, det iøjnefaldende logo, klare rullemenuer, smuk fotografering: Alt dette og flere legende roller i at kommunikere hjemmesidens særskilte formål (for at opmuntre brugere til at besøge byen Philadelphia) og opfordre brugere til at udforske via hjemmesiden hvad er (temmelig overraskende) en smuk amerikansk by.
De første navigationsartikler, som brugeren bemærker, er mega drop-down menu links og de store tekstforbindelser, der overlejrer det primære roterende billede.
Skærmbilledet nedenfor fremhæver disse links, nemlig "Ting at gøre" (som vises aktivt), "Planlæg din tur", "Philly nu" og billedoverlejningen "Power Lunch".
Disse ting var selvfølgelig ment at blive bemærket straks. I skottet nedenfor har jeg kortlagt den mest sandsynlige øjensti for en bruger, der scanner hjemmesiden.
Efter at have noteret (og muligvis udforsker) en eller flere af rullemenuerne, vil brugeren scanne teksten, der er relateret til det aktive billede, og derefter naturligvis flytte ned til afsnittet "What's New", endelig komme tilbage næsten fuld cirkel til overskriften nær søgefeltet.
Indholdet er organiseret, så brugeren kan tage en informativ og visuelt mindeværdig trek på tværs af de vigtigste sider på siden om få sekunder.
Brugeren vil ikke sandsynligvis blive forsinket, forvirret eller overvældet, på trods af at så meget indhold er tilgængeligt for at undersøge.
Et minimum af primære links
Som nævnt er et af de mest fremtrædende områder drop-down menuen. Beslutningen om at holde sig til et minimum af primære links her er den rigtige.
At have kun tre links gør det muligt at vise varerne i en større skrifttype og dermed holde brugerens opmærksomhed og demonstrere hjemmesidens fokuserede struktur.
Den minimale navigationslinje er en af de store ændringer i redesignet og giver gode fordele. Sammenlign det med overskriften i det gamle design, som ikke er så fokuseret:
Selvom den gamle overskrift ikke er dårligt designet eller ubrugelig, er den ikke så fokuseret og ikke så smuk som den nye. En anden svaghed er manglen på drop-down-indikatorer, som på den nye hjemmeside er klare og attraktive.
Når en bruger ankommer til en hjemmeside som denne (ofte gennem en Google-søgning), vil de oftere end ikke gøre en af to ting: se, hvad Philadelphia har at byde på eller planlægge deres tur.
Den fjernede navigation i overskriften hjælper brugeren med at nå disse mål hurtigt og effektivt.
Smuk Typografi
Ville vi forvente noget mindre fra Happy Cog? Jeg elsker absolut den skrifttype, der bruges til "Philadelphia og Countryside" -logoet.
Den har en subtilt vestlig stemning, men er stadig moderne og værdig. For at holde branding konsistent, genbruges skrifttypen til mange overskrifter på hele hjemmesiden, hvoraf nogle er fremhævet i skærmbilledet nedenfor.
Det meste af teksten på resten af hjemmesiden er i Georgias skrifttype, med lejlighedsvis brug af Arial, men gjort ganske elegant. Webstedets mangfoldige blanding af overskrifter, body copy, billedtekster og andre beskrivende elementer er ekstremt læselig og smagfuldt præsenteret.
På trods af mængden af indhold, selv på interne sider, føler brugeren sjældent, hvis han nogensinde overvældet sig, i modsætning til oplevelsen på gamle hjemmeside .
Øget præstation og opfattet hastighed
Et websted med så meget indhold og så mange billeder har uundgåeligt et resultat i præstationen. Udviklerne var bevidste om dette og tog stor omhu for at sikre, at indhold med forsinket indlæsning ikke ville distrahere eller få besøgende til at opgive og se til en anden Pennsylvanian by .
Som vist nedenfor, når brugeren besøger hjemmesiden, er det sidste element, der skal læses, et af de vigtigste elementer i det nye layout: det vigtigste roterende billede. Men den faktiske langsommelighed mindskes af indholdsindlæsningsindikatoren (den spinende animerede grafik):
Denne brugervenlighed forbedring er heller ikke begrænset til store billeder. På grund af mangfoldigheden af indhold i rullemenuerne vises en lignende indholdsbelastnings grafik, som menuindholdet laster via Ajax:
For denne menu er forbedringen af afgørende betydning, fordi rullemenuer normalt ikke forsinkes, når de udløses.
Ingen indlæsningsindikator ville have forårsaget forvirring, muligvis at gøre brugeren musen væk og derefter musen tilbage og undre sig over, hvorfor funktionaliteten sidder fast.
Så selv om siden ikke rent faktisk indlæses hurtigere, øges den opfattede hastighed. Dette er en lektion for alle designere og udviklere at tænke ikke kun på den faktiske hastighed men af den opfattede hastighed.
Brugerorienterede funktioner
Et af de vigtigste egenskaber ved den nye hjemmeside er den måde, som overgangen til det nye design er gjort, hvilket sikrer, at tilbagevendende besøgende ikke chokeres af de drastiske ændringer.
Når du først besøger hjemmesiden, bemærker du et stort rødt banner øverst på siden og informerer dig om, at hjemmesiden er blevet omdesignet og stadig er i beta. Du får mulighed for at gennemse hjemmesiden ved hjælp af den gamle grænseflade.
At give besøgende, der er vant til det gamle layout og struktur, muligheden for at gå tilbage til det, er kritisk, fordi det sikrer, at de ikke bliver frustreret og forsøger at finde kendt indhold.
På en sådan stor hjemmeside, især en redesignet af et firma kendt for sine brugerfokuserede designs, er sådanne store arkitektoniske ændringer og forbedringer forpligtet til at smide besøgende, der var vant til den gamle stil.
Meddelelsen i det røde banner forhindrer så enhver forvirring eller frustration hos de besøgende.
Jeg brugte ikke meget tid på at sammenligne den gamle hjemmeside med den nye, så jeg kan ikke bekræfte, hvordan lignende indhold og arkitekturer er, men fordi vi får mulighed for at besøge den gamle hjemmeside, skal indholdet være ens nok hvis vi har adgang til aktuelle begivenheder og andre jævnligt opdaterede emner i begge versioner.
Et fælles element er det link, der vises over søgefeltet, og kræver feedback på det nye design ved at invitere brugerne til at udfylde en "beta-undersøgelse". Denne funktion viser, at ejerne er bekymrede over, hvordan brugere oplever og opfatter webstedet.
Fuldt tilgængelig indhold
Mange af medlemmerne af Happy Cog-teamet er velkendte online for deres advokation af webstandarder og tilgængeligt indhold, så det er ikke overraskende, at denne hjemmeside er fuldt tilgængelig for næsten enhver bruger på enhver platform.
Med JavaScript deaktiveret er brugerens oplevelse af hjemmesiden meget ens, selv om mange forbedringer ikke længere er tilgængelige.
CSS text-indent Egenskaben bruges til at erstatte teksten i overskrifterne med billeder, der viser den brugerdefinerede skrifttype. Dette sikrer, at siderne bliver semantiske, SEO-venlige og synlige for alle brugere.
Billedet nedenfor viser en overskrift på en intern side, til venstre med stilen deaktiveret, til højre med den aktiveret.
Vi kan se, hvordan overskrifterne forstærkes af billeder uden at miste deres semantiske værdi, og uden at designerne anvender unødigt komplekse skrifttypeudskiftningsmetoder.
En anden vigtig tilgængelighed er, hvordan JavaScript-forbedringer implementeres. Hjemmesiden har to tabbed content switchers, den ene hedder "Book Online" og den anden forbindelse til visitphilly.com's sociale netværk:
Når JavaScript er deaktiveret, vises alt indhold i begge faneblade. Mange websites med faner med faneblade viser kun en af felterne, når JavaScript er deaktiveret, men det er generelt ikke den bedste praksis.
Denne teknik anvendes konsekvent på hele hjemmesiden for en række funktioner, hvilket sikrer, at adfærdsmæssigt lag (dvs. Ajax og JavaScript) er en forbedring, ikke en nødvendighed.
Dette gør indholdet tilgængeligt ikke kun for brugere, der browser uden JavaScript, men til søgemaskiner som Googlebot.
Eventuelle svagheder i designet?
Igen er jeg ikke i stand til at ret kritisk et design udført af et firma som Happy Cog. Men jeg vil påpege (forsigtigt) to mindre svagheder i det nye design og struktur.
For det første finder jeg ordlyden af det tredje link i den primære navigationsmenu lidt vag ("Philly Now").
Jeg vidste ikke straks, hvad det betød. Jeg havde antaget, at det betød nuværende begivenheder, men det er tilsyneladende en kombination af begivenheder, vejr og aktuelle fotos. Jeg er stadig usikker på, hvordan man beskriver det, og jeg får følelsen af, at linket sjældent bliver klikket.
Den anden svaghed er de højre pegende trekanter i den sekundære navigationsmenu på interne sider:
Jeg antog, at disse trekanter angav fly-out menuer, men der er ingen fly-outs. Trianglerne er blot peger for at trække brugerens opmærksomhed på indholdsområdet. Højre pegende trekanter er bedst forbeholdt selvstændige links og fly-out menuer, ikke lodret navigation som dette.
Vi finder det samme på hjemmesiden, men det er ikke så dårligt der, fordi pilene er en del af en JavaScript-driven content switcher.
Ingen af disse "svagheder" skader brugeroplevelsen meget. Og det faktum, at jeg kun kan finde to svagheder, viser, hvor stor en redesign dette virkelig er.
Værdigt at undersøge og imitere
Meget mere kunne siges om effektiviteten af designet og koden for visitphilly.com, ud over anvendelsesområdet for denne artikel.
Ud over det, vi har diskuteret her, kunne jeg påpege den gyldige og godt kommenterede kode, effektiv anvendelse af hvidt rum, det visuelle hierarki, de fremragende farvevalg, den næsten identiske oplevelse i IE6 og meget mere.
Jeg håber, at denne analyse giver et anstændigt overblik over nogle af nøglefunktionerne i dette nye design, og hvordan det indgår det moderne webdesign i branchen.
Yderligere læsning
- Greater Philadelphia Tourism Marketing Corp lancerer helt nye visitphilly.com
- Happy Cog Studios Portfolio
- Happy Cog's Review of VisitPhilly
Dette indlæg blev udelukkende skrevet til Webdesigner Depot af Louis Lazaris, freelance skribent og webudvikler. Louis løber Imponerende Webs hvor han stiller artikler og vejledninger om webdesign. Du kan følge Louis på Twitter eller komme i kontakt med ham gennem hans hjemmeside .
Kan du lide den nye visitphilly.com? Gør andre funktioner i designet, layoutet eller arkitekturen brugeroplevelsen bedre? Giv venligst dine kommentarer nedenfor.