Happy Cog's Redesign of VisitPhilly.Com:
Een voorbeeldige moderne website
In januari zond Jason Santa Maria een gekwetter dat aankondigen visitphilly.com was opnieuw ontworpen door de wereldberoemde ontwerpstudio Happy Cog . Mijn interesse was gewekt en ik kon het niet laten om een kijkje te nemen.
Ik kan eerlijk zeggen dat ik nog nooit zo onder de indruk ben geweest van een herontwerp van de website als met deze.
Dat Happy Cog in staat was om zo'n grote website om te zetten in een mooie, toegankelijke, functionele en uitnodigende gebruikerservaring getuigt van het talent van het team van Happy Cog.
In geen geval ben ik in een positie om een kritiek aan te bieden die recht doet aan de planning, het ontwerp en de ontwikkeling die in dit project moet zijn gegaan.
Maar ik dacht dat het nuttig zou zijn om erop te wijzen waarom dit herontwerp een mooi en effectief website-ontwerp belichaamt voor de hedendaagse markt.
Een duidelijk doel
De domeinnaam, opvallend logo, duidelijke vervolgkeuzemenu's, prachtige fotografie: dit alles en meer spelen een sleutelrol bij het communiceren van het specifieke doel van de website (om gebruikers aan te moedigen de stad Philadelphia te bezoeken) en om gebruikers uit te nodigen om te verkennen via de website wat (nogal verrassend) een prachtige Amerikaanse stad is.
De eerste navigatie-items die de gebruiker opmerkt zijn de mega vervolgkeuzemenu links en de grote tekstkoppelingen die de hoofdroterende afbeelding overlappen.
In de onderstaande schermafbeelding worden deze links gemarkeerd, namelijk 'Things to Do' (die actief wordt weergegeven), 'Plan je reis', 'Philly Now' en de afbeelding over 'Power Lunch'.
Deze artikelen waren duidelijk bedoeld om onmiddellijk opgemerkt te worden. In de onderstaande opname heb ik het meest waarschijnlijke oogpad in kaart gebracht van een gebruiker die de startpagina scant.
Nadat een gebruiker een of meer van de vervolgkeuzemenu's heeft opgemerkt (en mogelijk onderzocht), scant de gebruiker de tekst met betrekking tot de actieve afbeelding en gaat hij vervolgens naar de sectie met de titel 'Wat is er nieuw?' de koptekst in de buurt van het zoekvak.
De inhoud is zo georganiseerd dat de gebruiker binnen een paar seconden een informatieve en visueel memorabele tocht kan maken over de belangrijkste delen van de pagina.
De gebruiker zal waarschijnlijk niet worden uitgesteld, verward of overweldigd, ondanks dat er zoveel inhoud beschikbaar is om te verkennen.
Een minimum aan primaire links
Zoals vermeld, is een van de meest prominente gebieden het vervolgkeuzemenu. De beslissing om een minimumaantal primaire links hier te houden, is de juiste keuze.
Met slechts drie koppelingen kunnen de items in een groter lettertype worden weergegeven, waardoor de aandacht van de gebruiker wordt gehouden en de gerichte structuur van de website wordt getoond.
De minimale navigatiebalk is een van de belangrijkste veranderingen in het herontwerp en biedt grote voordelen. Vergelijk het met het kopgedeelte in het oude ontwerp, dat niet zo gefocust is:
Hoewel de oude header niet slecht is ontworpen of onbruikbaar is, is hij niet zo gefocust en lang niet zo mooi als de nieuwe. Een ander zwak punt is het gebrek aan drop-down menu-indicatoren, die op de nieuwe website duidelijk en aantrekkelijk zijn.
Wanneer een gebruiker aankomt op een website zoals deze (vaak via een Google-zoekopdracht), willen ze vaker wel dan niet twee dingen doen: zien wat de stad Philadelphia te bieden heeft of hun reis plannen.
De uitgeklede navigatie in de kop helpt de gebruiker om deze doelen snel en efficiënt te bereiken.
Mooie typografie
Zouden we iets minder verwachten van Happy Cog? Ik ben helemaal weg van het lettertype dat wordt gebruikt voor het logo "Philadelphia and the Countryside".
Het heeft een subtiel westers gevoel, maar is nog steeds modern en waardig. Om de branding consistent te houden, wordt het lettertype voor vele rubrieken op de website hergebruikt, waarvan sommige in de onderstaande schermafbeelding worden gemarkeerd.
Het merendeel van de tekst op de rest van de website is in het lettertype Georgia, met af en toe Arial, maar heel elegant. De gevarieerde mix van rubrieken, body-copy, bijschriften en andere beschrijvende elementen van de website is uiterst leesbaar en smaakvol gepresenteerd.
Ondanks de hoeveelheid inhoud, zelfs op interne pagina's, voelt de gebruiker zich zelden of nooit overweldigd, in tegenstelling tot de ervaring op de oude website .
Verhoogde prestaties en waargenomen snelheid
Een website met zoveel inhoud en zoveel afbeeldingen heeft onvermijdelijk een impact op de prestaties. De ontwikkelaars waren zich hiervan bewust en zorgden ervoor dat vertraagde inhoud niet zou afleiden of ervoor zou zorgen dat bezoekers zouden opgeven en kijken naar een andere stad in Pennsylvanië .
Zoals hieronder wordt weergegeven, is het laatste item dat wordt geladen een van de belangrijkste elementen in de nieuwe lay-out wanneer de gebruiker de startpagina bezoekt: de belangrijkste roterende afbeelding. Maar de werkelijke traagheid wordt beperkt door de indicator voor het laden van inhoud (de draaiende geanimeerde afbeelding):
Deze gebruiksvriendelijkheid is niet beperkt tot grote afbeeldingen. Vanwege de diversiteit aan inhoud in de vervolgkeuzemenu's, wordt een vergelijkbare afbeelding voor het laden van inhoud weergegeven wanneer de menu-inhoud wordt geladen via Ajax:
Voor dit menu is de verbetering absoluut noodzakelijk, omdat vervolgkeuzemenu's normaal gesproken niet worden vertraagd als ze worden geactiveerd.
Geen enkele laadindicator zou tot verwarring hebben geleid, waardoor de muis van de gebruiker mogelijk weg zou zijn en vervolgens de muis terug, zich afvragend waarom de functionaliteit vastzit.
Dus hoewel de pagina niet echt sneller laadt, wordt de waargenomen snelheid verhoogd. Dit is een les voor alle ontwerpers en ontwikkelaars om niet alleen te denken aan de werkelijke snelheid, maar ook aan de waargenomen snelheid.
Gebruikersgerichte functies
Een van de belangrijkste kenmerken van de nieuwe website is de manier waarop de overgang naar het nieuwe ontwerp is voltooid, waardoor terugkerende bezoekers niet worden geschrokken van de drastische wijzigingen.
Wanneer u de website voor het eerst bezoekt, ziet u bovenaan de pagina een grote rode banner met de mededeling dat de website opnieuw is ontworpen en nog steeds in bèta is. U krijgt de mogelijkheid om op de website te surfen met behulp van de oude interface.
Het is van cruciaal belang bezoekers te geven die gewend zijn aan de oude lay-out en de mogelijkheid om ernaar terug te gaan structureren, omdat ze ervoor zorgen dat ze niet gefrustreerd raken om vertrouwde inhoud te vinden.
Op zo'n grote website, vooral een website die is herontworpen door een bedrijf dat bekendstaat om zijn gebruikersgerichte ontwerpen, zullen dergelijke belangrijke architectonische veranderingen en verbeteringen bezoekers afwerpen die gewend waren aan de oude stijl.
Het bericht in de rode balk voorkomt dan verwarring of frustratie bij bezoekers.
Ik heb niet veel tijd besteed aan het vergelijken van de oude website met de nieuwe, dus ik kan niet bevestigen hoe vergelijkbaar de inhoud en architecturen zijn, maar omdat we de mogelijkheid krijgen om de oude website te bezoeken, moet de inhoud vergelijkbaar zijn genoeg als we in beide versies toegang hebben tot actuele evenementen en andere regelmatig bijgewerkte items.
Een veelvoorkomend element is de koppeling die boven het zoekvak wordt weergegeven, waarbij feedback op het nieuwe ontwerp wordt gevraagd door gebruikers uit te nodigen een 'bètatest' in te vullen. Deze functie laat zien dat de eigenaren zich zorgen maken over hoe gebruikers de website ervaren en waarnemen.
Volledig toegankelijke inhoud
Veel leden van het Happy Cog-team staan online bekend om hun pleidooi voor webstandaarden en toegankelijke inhoud, dus het is geen verrassing dat deze website volledig toegankelijk is voor vrijwel elke gebruiker op elk platform.
Als JavaScript is uitgeschakeld, is de gebruikerservaring van de website vergelijkbaar, ook al zijn veel verbeteringen niet meer beschikbaar.
De CSS text-indent eigenschap wordt gebruikt om de tekst in de koppen te vervangen door afbeeldingen die het aangepaste lettertype tonen. Dit zorgt ervoor dat de pagina's semantisch blijven, SEO-vriendelijk en zichtbaar voor alle gebruikers.
De afbeelding hieronder toont een kop op een interne pagina, aan de linkerkant met de stijl uitgeschakeld, aan de rechterkant met ingeschakeld.
We kunnen zien hoe de koppen worden verbeterd door afbeeldingen zonder hun semantische waarde te verliezen en zonder dat de ontwerpers hun toevlucht nemen tot onnodig complexe methoden voor het vervangen van lettertypen.
Een andere belangrijke toegankelijkheidsfunctie is hoe de JavaScript-verbeteringen worden geïmplementeerd. De startpagina heeft twee inhoudswisselaars met tabbladen, de ene met de naam "Online boeken" en de andere met sociale netwerken van visitphilly.com:
Wanneer JavaScript is uitgeschakeld, wordt alle inhoud in beide vakken met tabbladen weergegeven. Veel websites met widgets met tabbladen geven slechts één van de vakjes weer als JavaScript is uitgeschakeld, maar dat is meestal geen goede praktijk.
Deze techniek wordt consequent overal op de website gebruikt voor een aantal functies, zodat de gedragslaag (dwz de Ajax en JavaScript) een verbetering is, en geen noodzaak.
Hierdoor is de inhoud niet alleen toegankelijk voor gebruikers die zonder JavaScript browsen, maar ook voor spiders van zoekmachines zoals Googlebot.
Zwakke punten in het ontwerp?
Nogmaals, ik ben niet in de positie om een ontwerp van een bedrijf als Happy Cog redelijk te beoordelen. Maar ik zal (voorzichtig) wijzen op twee kleine tekortkomingen in het nieuwe ontwerp en de nieuwe structuur.
Ten eerste vind ik de tekst van de derde link in het hoofdmenu een beetje vaag ("Philly Now").
Ik wist niet meteen wat dat betekende. Ik dacht dat het actuele gebeurtenissen betekende, maar het is blijkbaar een combinatie van gebeurtenissen, het weer en de huidige foto's. Ik ben nog steeds niet zeker hoe ik het moet beschrijven en ik heb het gevoel dat er maar zelden op de link wordt geklikt.
De andere zwakte zijn de naar rechts wijzende driehoeken in het secundaire navigatiemenu op interne pagina's:
Ik ging ervan uit dat die driehoeken fly-out menu's aangaven, maar er zijn geen fly-outs. De driehoeken zijn slechts aanwijzingen om de aandacht van de gebruiker te vestigen op het inhoudsgebied. Naar rechts wijzende driehoeken kunnen het best worden gereserveerd voor zelfstandige links en fly-out-menu's, niet voor verticale navigatie zoals deze.
We vinden hetzelfde op de startpagina, maar daar is het niet zo slecht omdat de pijlen deel uitmaken van een JavaScript-gestuurde inhoudswitcher.
Geen van deze 'zwakke punten' schaadt de gebruikerservaring veel. En het feit dat ik slechts twee zwakke punten kan vinden, toont aan hoe geweldig een herontwerp dit eigenlijk is.
Waardigheid van onderzoek en imitatie
Er kan veel meer worden gezegd over de effectiviteit van het ontwerp en de code van visitphilly.com, buiten het bestek van dit artikel.
Naast wat we hier hebben besproken, zou ik kunnen wijzen op de geldige en goed-gereageerde code, het effectieve gebruik van witte ruimte, de visuele hiërarchie, de uitstekende kleurkeuzes, de vrijwel identieke ervaring in IE6 en meer.
Ik hoop dat deze analyse een goed overzicht geeft van enkele van de belangrijkste kenmerken van dit nieuwe ontwerp en hoe het moderne webdesign in de industrie belichaamt.
Verder lezen
- Greater Philadelphia Tourism Marketing Corp. lanceert gloednieuwe visitphilly.com
- Happy Cog Studios Portfolio
- Happy Cog's Review van VisitPhilly
Dit bericht is exclusief geschreven voor Webdesigner Depot door Louis Lazaris, een freelance schrijver en webontwikkelaar. Louis rent Indrukwekkende webs waar hij artikelen en tutorials over webdesign plaatst. Je kunt Louis volgen op Twitter of neem contact op met hem via zijn website .
Vind je het nieuwe visitphilly.com leuk? Maken andere kenmerken van het ontwerp, de lay-out of de architectuur de gebruikerservaring beter? Geef hieronder uw commentaar.