Happy Cogs Redesign av VisitPhilly.Com:
En exemplarisk modern webbplats
I januari skickade Jason Santa Maria ut en tweet meddela det visitphilly.com hade blivit omdesignad av världsberömd designstudio Glad Cog . Mitt intresse var piqued, och jag kunde inte låta bli att ta en titt.
Jag kan ärligt säga att jag aldrig har varit mer imponerad av en webbdesign, än jag var med den här.
Den Happy Cog kunde göra en sådan stor webbplats till en vacker, tillgänglig, funktionell och inbjudande användarupplevelse som vittnar om talangen hos laget på Happy Cog.
Jag är inte i stånd att erbjuda en kritik som gör rättvisa till planering, design och utveckling som måste ha gått in på detta projekt.
Men jag trodde det skulle vara bra att påpeka varför denna omkonstruktion visar en vacker och effektiv webbdesign för dagens marknad.
Ett klart syfte
Domännamnet, den iögonfallande logotypen, tydliga rullgardinsmenyer, vacker fotografering: allt detta och flera spelnyckelroller för att kommunicera webbplatsens distinkta syfte (för att uppmuntra användare att besöka staden Philadelphia) och att bjuda in användare att utforska via webbplatsen vad är (ganska överraskande) en vacker amerikansk stad.
De första navigeringsobjekten som användaren märker är mega rullgardinsmeny länkar och de stora textlänkarna som lägger över huvudrotationsbilden.
Skärmbilden nedan belyser dessa länkar, nämligen "Saker att göra" (som visas aktivt), "Planera din resa", "Philly Now" och bildöverlägget "Power Lunch".
Dessa saker var uppenbarligen menade att märka genast. I nedanstående skott har jag kartlagt den mest sannolika ögonbanan för en användare som skannar hemsidan.
Efter att ha noterat (och eventuellt undersöker) en eller flera av rullgardinsmenyerna, skulle användaren skanna texten som är relaterad till den aktiva bilden och sedan naturligt gå ner till avsnittet "What's New", äntligen kommer tillbaka nästan hela cirkeln till rubriken nära sökrutan.
Innehållet är organiserat så att användaren kan ta en informativ och visuellt minnesvärd trek över de viktigaste delarna av sidan på några sekunder.
Användaren skulle inte troligen vara försenad, förvirrad eller överväldigad, trots att så mycket innehåll var tillgängligt att utforska.
En Minsta Primär Länkar
Som nämnts är en av de mest framträdande områdena rullgardinsmenyn. Beslutet att hålla sig till ett minimum av primära länkar här är den rätta.
Med bara tre länkar kan objekten visas i ett större teckensnitt, vilket håller användarens uppmärksamhet och visar webbplatsens fokuserade struktur.
Den minsta navigeringsfältet är en av de stora förändringarna i redesignen och ger stora fördelar. Jämför det med rubrikavsnittet i den gamla designen, som inte är så fokuserad:
Även om den gamla rubriken inte är dåligt utformad eller oanvändbar, är den inte så fokuserad och inte så vacker som den nya. En annan svaghet är bristen på rullgardinsmenyindikatorer, som på den nya hemsidan är tydliga och attraktiva.
När en användare kommer till en webbplats som den här (ofta via en Google-sökning), vill de oftare göra något av två saker: se vad Philadelphia har att erbjuda eller planera sin resa.
Den avskalade navigationen i huvudet hjälper användaren att uppnå dessa mål snabbt och effektivt.
Vacker typografi
Skulle vi förvänta oss något mindre från Happy Cog? Jag älskar absolut typsnittet som används för logotypen "Philadelphia and the Countryside".
Den har en subtilt västerländsk känsla men är fortfarande modern och värdig. För att hålla varumärket konsekvent återfinns teckensnittet för många rubriker över hela webbplatsen, av vilka några är markerade på skärmdumpen nedan.
Merparten av texten på resten av webbplatsen är i Georgias typsnitt, med enstaka användningar av Arial, men gjort ganska elegant. Webbplatsens mångsidiga mix av rubriker, kroppskopior, bildtexter och andra beskrivande element är extremt läsliga och smakfullt presenterade.
Trots innehållsinnehållet, även på interna sidor, känner användaren sällan om någonsin överväldigad, till skillnad från erfarenheten på gammal hemsida .
Ökad prestanda och uppskattad hastighet
En webbplats med så mycket innehåll och så många bilder blir oundvikligen ett resultat. Utvecklarna var medvetna om detta och var mycket omhändertagna för att säkerställa att innehåll med försenad laddning inte skulle distrahera eller få besökare att ge upp och titta på en annan Pennsylvanian stad .
Som visas nedan, när användaren besöker hemsidan är det sista objektet som ska laddas ett av de viktigaste elementen i den nya layouten: huvudrotationsbilden. Men den faktiska långsamheten mildras av innehållsindikatorn (den spinnande animerade grafiken):
Denna användbarhetsförbättring är inte heller begränsad till stora bilder. På grund av mångfalden av innehåll i rullgardinsmenyerna visas en liknande innehållsbelastnings grafik som menyinnehållet laddas via Ajax:
För den här menyn är förstärkningen avgörande, eftersom rullgardinsmenyerna normalt inte försenas när de utlöses.
Ingen laddningsindikator skulle ha orsakat förvirring, möjligen göra användaren musen bort och sedan musen tillbaka, undrar varför funktionaliteten är fast.
Så, även om sidan faktiskt inte laddas snabbare, ökar den uppfattade hastigheten. Det här är en lektion för alla designers och utvecklare att tänka inte bara på faktisk hastighet utan av uppfattad hastighet.
Användarorienterade funktioner
En av de viktigaste funktionerna på den nya hemsidan är hur övergången till den nya designen har gjorts, vilket säkerställer att återvändande besökare inte chockas av de drastiska förändringarna.
När du först besöker webbplatsen märker du en stor röd banner högst upp på sidan, där du informerar om att webbplatsen har blivit omdesignad och fortfarande är i beta. Du får möjlighet att bläddra på webbplatsen med det gamla gränssnittet.
Att ge besökare som är vana vid den gamla layouten och strukturera möjligheten att gå tillbaka till det är avgörande, för att det säkerställs att de inte blir frustrerade och försöker hitta bekant innehåll.
På en sådan stor hemsida, speciellt en redesignad av ett företag som är känt för sina användarorienterade mönster, är sådana stora arkitektoniska förändringar och förbättringar avstängda för besökare som var vana vid den gamla stilen.
Meddelandet i den röda bannern förhindrar då förvirring eller frustration hos besökarna.
Jag spenderade inte mycket tid på att jämföra den gamla hemsidan med den nya, så jag kan inte bekräfta hur liknande innehåll och arkitekturer är, men eftersom vi får möjlighet att besöka den gamla hemsidan måste innehållet vara likartat tillräckligt om vi har tillgång till aktuella händelser och andra regelbundna uppdaterade objekt i båda versionerna.
Ett gemensamt element är länken som visas ovanför sökrutan, och kräver synpunkter på den nya designen genom att bjuda in användarna att fylla i en "beta-undersökning". Den här funktionen visar att ägarna är oroade över hur användarna upplever och uppfattar webbplatsen.
Fullt tillgängligt innehåll
Många av medlemmarna i Happy Cog-teamet är välkända online för deras förespråkande av webbstandarder och tillgängligt innehåll, så det är ingen överraskning att denna webbplats är fullt tillgänglig för praktiskt taget alla användare på vilken plattform som helst.
Med JavaScript inaktiverat är användarens erfarenhet av webbplatsen mycket lik, trots att många förbättringar inte längre är tillgängliga.
CSS text-indent egendom används för att ersätta texten i rubrikerna med bilder som visar den anpassade teckensnittet. Detta säkerställer att sidorna är semantiska, SEO-vänliga och synliga för alla användare.
Bilden nedan visar en rubrik på en intern sida, till vänster med stilen inaktiverad, till höger med den aktiverad.
Vi kan se hur rubrikerna förstärks av bilder utan att förlora sitt semantiska värde och utan att designarna använder sig av onödigt komplexa typsnittsmetoden.
En annan viktig tillgänglighetsfunktion är hur JavaScript-förbättringar implementeras. Hemsidan har två flikhanteringsinnehållare, en som heter "Book Online" och den andra som ansluter till visitphilly.coms sociala nätverk:
När JavaScript är avaktiverat visas allt innehåll i båda flikarna. Många webbplatser med flikar med flikar visar bara en av rutorna när JavaScript är inaktiverat, men det är i allmänhet inte bästa praxis.
Denna teknik används konsekvent över hela webbplatsen för ett antal funktioner, vilket säkerställer att beteendesskiktet (dvs. Ajax och JavaScript) är en förbättring, inte en nödvändighet.
Detta gör innehållet tillgängligt inte bara för användare som surfar utan JavaScript, men till sökrobotar som Googlebot.
Några svagheter i designen?
Återigen kan jag inte kritisera en design gjord av ett företag som Happy Cog. Men jag kommer att påpeka (försiktigt) två mindre svagheter i den nya designen och strukturen.
Först finner jag ordalydelsen för den tredje länken i den primära navigationsmenyn lite vag ("Philly Now").
Jag visste inte genast vad det betydde. Jag hade antagit att det innebar aktuella händelser, men det är tydligen en kombination av händelser, väder och aktuella foton. Jag är fortfarande osäker på hur man beskriver det, och jag får en känsla av att länken sällan kommer att klickas.
Den andra svagheten är de högra pekande trianglarna i den sekundära navigationsmenyn på interna sidor:
Jag antog att de här trianglarna angav fly-out menyer, men det finns inga fly-outs. Trianglarna är bara pekare för att dra användarens uppmärksamhet på innehållsområdet. Högerpeglande trianglar är bäst reserverade för fristående länkar och fly-out menyer, inte vertikal navigering som denna.
Vi hittar samma sak på hemsidan, men det är inte så dåligt där eftersom pilarna är en del av en JavaScript-driven content switcher.
Ingen av dessa "svagheter" skadar användarupplevelsen mycket. Och det faktum att jag bara kan hitta två svagheter visar hur stor en redesign detta verkligen är.
Värt att undersöka och imitera
Mycket mer kan sägas om effektiviteten av designen och koden för visitphilly.com, utöver omfattningen av denna artikel.
Förutom vad vi har diskuterat här kan jag påpeka den giltiga och väl kommenterade koden, effektiv användning av vitt utrymme, den visuella hierarkin, de utmärkta färgvalen, den nästan identiska upplevelsen i IE6 och mer.
Jag hoppas att den här analysen ger en anständig översikt över några av nyckelfunktionerna i den här nya designen och hur den präglar modern webbdesign i branschen.
Vidare läsning
- Greater Philadelphia Tourism Marketing Corp lanserar helt ny visitphilly.com
- Happy Cog Studios Portfolio
- Happy Cogs recension av VisitPhilly
Detta inlägg skrevs uteslutande för Webdesigner Depot av Louis Lazaris, en frilansskribent och webbutvecklare. Louis körs Imponerande Webs där han postar artiklar och handledning om webbdesign. Du kan följa Louis på Twitter eller ta kontakt med honom genom sin hemsida .
Gillar du den nya visitphilly.com? Gör några andra funktioner i designen, layouten eller arkitekturen bättre användarupplevelse? Vänligen ge dina kommentarer nedan.