HappyCog uudistaa VisitPhilly.Com:
Esimerkillinen moderni verkkosivusto
Tammikuussa Jason Santa Maria lähetti a piipittää ilmoittaen siitä visitphilly.com oli suunnitellut maailmankuulu muotoilutalo Happy Cog . Kiinnostukseni oli kiusattu, enkä voinut vain katsoa.
Voin rehellisesti sanoa, että minulla ei ole koskaan ollut enempää vaikutusta verkkosivuston uudelleensuunnitteluun kuin olin tämän kanssa.
Se Happy Cog pystyi kääntämään tällaisen suuren verkkosivuston kauniiksi, helppokäyttöiseksi, toimivaksi ja kutsuva käyttäjäkokemus todistaa joukkueen kykyä Happy Cog.
En voi missään tapauksessa tarjota kritiikkiä, joka oikeuttaa suunnittelun, suunnittelun ja kehityksen, joka on pitänyt mennä tähän hankkeeseen.
Mutta ajattelin, että olisi hyvä huomauttaa, miksi tämä uudelleensuunnittelu merkitsee kaunista ja tehokasta verkkosivujen suunnittelua nykyisille markkinoille.
Selkeä tarkoitus
Verkkotunnus, silmiinpistävä logo, selkeät pudotusvalikot ja kaunis valokuvaus: kaikki tämä ja enemmän avainrooleja verkkosivuston selkeän tarkoituksen ilmoittamisessa (käyttäjien kannustaminen vierailemaan Philadelphian kaupunkiin) ja kutsumalla käyttäjiä tutustumaan sivusto, mikä on (melko yllättävän) kaunis amerikkalainen kaupunki.
Ensimmäiset navigointikohdat, joita käyttäjä huomaa mega-pudotusvalikon linkkejä ja suuret tekstilinkit, jotka peittävät tärkeimmän pyörivän kuvan.
Alla oleva kuvakaappaus korostaa nämä linkit, nimittäin "Things to Do" (joka näkyy aktiivisena), "Suunnittele matkanne", "Philly Now" ja kuvien päällekkäisyys "Power Lunch".
Nämä kohteet oli ilmeisesti tarkoitus havaita välittömästi. Alla olevassa kuvassa olen kartoittanut kotisivun skannaavan käyttäjän todennäköisimmän silmän polun.
Kun huomaat (ja mahdollisesti tutkitaan) yhtä tai useampaa pudotusvalikosta, käyttäjä skannaa aktiiviseen kuvaan liittyvän tekstin ja siirtyy sitten luonnollisesti alas kohtaan "Mikä on uusi" ja lopulta palaa lähes koko ympyrä otsikko lähellä hakukenttää.
Sisältö on järjestetty siten, että käyttäjä voi ottaa informatiivisen ja visuaalisesti mieleenpainuvan vaelluksen sivun tärkeimmissä osissa muutamassa sekunnissa.
Käyttäjä ei todennäköisesti olisi viivästynyt, hämmentynyt tai hukkua, vaikka niin paljon sisältöä on saatavilla tutkimaan.
Ensisijaiset linkit
Kuten mainittiin, yksi tärkeimmistä alueista on pudotusvalikko. Päätös pysyä vähimmäismäärä ensisijaisia linkkejä täällä on oikea.
Kolmen linkin ansiosta kohteet näytetään suuremmalla kirjasimella pitämällä käyttäjän huomion ja osoittamalla verkkosivuston keskittynyt rakenne.
Pieni navigointipalkki on yksi suurimmista muutoksista uudelleensuunnittelussa ja tuo suuria etuja. Vertaa sitä vanhan mallin otsikkokohtaan, joka ei ole yhtä tarkka:
Vaikka vanha otsikko ei ole huonosti suunniteltu tai käyttökelvoton, se ei ole niin keskittynyt eikä läheskään yhtä kaunis kuin uusi. Toinen heikkous on pudotusvalikon indikaattoreiden puuttuminen, jotka uuteen verkkosivustoon ovat selkeitä ja houkuttelevia.
Kun käyttäjä saapuu tällaiseen verkkosivustoon (usein Google-haun kautta), useimmiten he eivät halua tehdä kahta asiaa: katso, mitä Philadelphian kaupunki on tarjonnut tai suunnittelemaan matkansa.
Ylätunnistetulla navigoinnin avulla käyttäjä voi saavuttaa nämä tavoitteet nopeasti ja tehokkaasti.
Kaunis typografia
Odotteko mitään vähemmän Happy Cogista? Olen ehdottomasti rakastunut fontti "Philadelphia ja maaseutu" logo.
Se on hienovaraisesti länsimaisen tunnelman, mutta on edelleen moderni ja arvokas. Jotta brändäys pysyisi yhdenmukaisena, kirjasinta käytetään monissa otsikoissa koko verkkosivustossa, joista osa on korostettu alla olevassa kuvakaappauksessa.
Suurin osa tekstistä muilla sivuilla on Georgiassa, jossa Arial on satunnaisesti käytetty, mutta tehty melko tyylikkäästi. Sivuston eri otsikoiden, runko-kopioiden, tekstitysten ja muiden kuvailevien elementtien yhdistelmä on erittäin luettavissa ja tyylikkäästi esitelty.
Sisällön määrästä huolimatta, jopa sisäisillä sivuilla, käyttäjä harvoin jos koskaan tuntuu ylivoimaiseksi, toisin kuin vanha verkkosivusto .
Parempi suorituskyky ja havaitut nopeudet
Sivusto, jolla on niin paljon sisältöä ja niin monta kuvaa, tekee väistämättä suorituskyvyn. Kehittäjät olivat tietoisia tästä ja kiinnittivät suurta huomiota varmistaakseen, että viivästyneen latauksen sisältö ei häiritse tai aiheuta kävijöitä luopumaan ja katsomaan toinen Pennsylvanian kaupunki .
Kuten alla näytetään, kun käyttäjä vierailee kotisivulla, viimeinen ladattava kohde on yksi uuden asettelun tärkeimmistä elementeistä: tärkein pyörivä kuva. Mutta varsinainen hitaus lieventää sisällön latausindikaattoria (spinning animoitu grafiikka):
Tämä käytettävyysparannus ei ole rajoitettu vain suurikokoisiin kuviin. Pudotusvalikkojen sisällön monimuotoisuuden vuoksi samanlainen sisällön latausgrafiikka näkyy valikkosisällön lataamisena Ajaxin kautta:
Tässä valikossa lisälaite on välttämätön, koska pudotusvalikoita ei normaalisti viivästy laukaisulla.
Kuormitusindikaattori ei olisi aiheuttanut sekaannusta, mikä tekee käyttäjän hiirestä poispäin ja sitten hiiren takaisin miettien, miksi toiminto on juuttunut.
Joten vaikka sivu ei todellisuudessa lataudu nopeammin, havaittu nopeus kasvaa. Tämä on kaikkien suunnittelijoiden ja kehittäjien oppitunti ajattelemaan paitsi todellista nopeutta myös havaitusta nopeudesta.
Käyttäjäkohtaiset ominaisuudet
Yksi uuden verkkosivuston tärkeimmistä ominaisuuksista on tapa, jolla siirtyminen uuteen muotoiluun on tehty, mikä takaa, etteivät paluumatkailijat ole järkyttäneet dramaattiset muutokset.
Kun vierailet ensin verkkosivustolla, huomaat suuren punaisen banneri sivun yläreunassa ilmoittaen, että verkkosivusto on uudistettu ja on edelleen beta-versiossa. Sinulla on mahdollisuus selata verkkosivustoa käyttämällä vanhaa käyttöliittymää.
Antaa vierailijoille, jotka ovat tottuneet vanhaan ulkoasuun ja rakentavat mahdollisuuden palata siihen, on kriittinen, koska se varmistaa, ettei heitä turhaudu etsimään tuttua sisältöä.
Tällaisella suurella verkkosivustolla, etenkin sellaisella, joka on suunniteltu käyttäjälähtöisiksi suunnitelluiksi yrityksiksi, tällaiset suuret arkkitehtoniset muutokset ja parannukset houkuttelevat vieraita, jotka olivat tottuneet vanhaan tyyliin.
Punainen bannerissa oleva viesti estää näin ollen kävijöiden sekaannuksen tai turhautumisen.
En ole käyttänyt paljon aikaa vertaamalla vanhaa verkkosivustoa uuteen, joten en voi vahvistaa, miten sisältö ja arkkitehtuuri ovat samankaltaisia, mutta koska meillä on mahdollisuus vierailla vanhalla verkkosivustolla, sisällön on oltava samanlainen riittää, jos voimme käyttää nykyisiä tapahtumia ja muita säännöllisesti päivitettäviä kohteita molemmissa versioissa.
Yksi yhteinen elementti on linkki, joka näkyy hakukentän yläpuolella ja pyytää palautetta uudesta mallista kutsumalla käyttäjät täyttämään "beta-kyselyn". Tämä ominaisuus osoittaa, että omistajat ovat huolissaan siitä, miten käyttäjät kokevat ja näkevät verkkosivuston.
Täysin helppokäyttöinen sisältö
Monet Happy Cog -joukkueen jäsenet ovat hyvin tunnettuja verkossa, koska he ovat kiinnostuneita webstandardeista ja saatavilla olevasta sisällöstä, joten ei ole mikään yllätys, että tämä sivusto on täysin käyttökelpoinen lähes kaikille käyttäjille millekään alustalle.
Jos JavaScript on poistettu käytöstä, käyttäjän sivustokokemus on hyvin samankaltainen, vaikka monet lisälaitteet eivät enää ole käytettävissä.
CSS text-indent ominaisuus korvataan otsikoiden teksti kuvien avulla, jotka näyttävät mukautetun fontin. Tämä varmistaa, että sivut pysyvät semanttisina, SEO-ystävällisiltä ja näkyviltä kaikille käyttäjille.
Alla olevassa kuvassa näkyy otsikko sisäisellä sivulla, vasemmalla tyylillä ei käytössä, oikealla sen ollessa käytössä.
Voimme nähdä, miten otsikoita parannetaan kuvilla menettämättä semanttista arvoaan ja ilman suunnittelijoita turvautumaan tarpeettoman monimutkaisiin fonttien korvaamiseen.
Toinen keskeinen esteettömyys ominaisuus on, miten JavaScript-parannukset toteutetaan. Kotisivulla on kaksi välilehdettyä sisältökytkintä, joista toinen on nimeltään "Book Online" ja toinen, joka liittyy osoitteeseen visitphilly.com: n sosiaaliset verkostot:
Kun JavaScript on poistettu käytöstä, molempien välilehtien sisältö näkyy näytöllä. Useilla verkkosivuilla, joissa on välilehden widgetejä, on vain yksi laatikoista, kun JavaScript on poistettu käytöstä, mutta se ei yleensä ole paras käytäntö.
Tätä tekniikkaa käytetään koko sivuston johdonmukaisesti useille ominaisuuksille ja varmistaa, että käyttäytymistekijä (eli Ajax ja JavaScript) on lisälaite, ei välttämättömyys.
Tämä tekee sisällöstä pääsyn paitsi käyttäjille, jotka selailevat ilman JavaScriptia, mutta hakukoneiden hämähäkit, kuten Googlebot.
Mitkä tahansa heikkoudet suunnittelussa?
Minulla ei ole vieläkään mitään mahdollisuutta arvostella melkoisesti sellaisen yrityksen tekemää muotoilua kuin Happy Cog. Mutta huomautan (varovaisesti) kaksi vähäistä heikkoutta uudessa rakenteessa ja rakenteessa.
Ensinnäkin löydän kolmannen linkin sanamuodon ensisijaisessa navigointivalikossa hieman epämääräisenä ("Philly Now").
En tiennyt heti, mikä tämä tarkoitti. Olin sitä mieltä, että se merkitsi ajankohtaisia tapahtumia, mutta se on ilmeisesti yhdistelmä tapahtumista, säästä ja nykyisistä valokuvista. Olen edelleen epävarma siitä, miten kuvata sitä, ja minusta tuntuu siltä, että linkkiä harvoin napsautetaan.
Toinen heikkous on sisäisen sivun toissijaisen navigointivalikon oikealla puolella näkyvät kolmiot:
Oletin, että nämä kolmiot ilmaisivat fly-out-valikoita, mutta ei ole fly-outs. Kolmiot ovat vain vihjeitä vetämään käyttäjän huomio sisältöalueelle. Oikeanpuoleiset kolmiot ovat parhaiten varattuja itsenäisille yhteyksille ja fly-out-valikoille, ei tällaiseen vertikaaliseen navigointiin.
Meillä on sama asia kotisivulla, mutta se ei ole niin huono, koska nuolet ovat osa JavaScript-pohjaista sisältökytkintä.
Kummallakaan näistä "heikkouksista" ei haittaa paljon käyttäjää. Ja se, että löydän vain kaksi heikkoutta, osoittaa kuinka suuri uudelleensuunnittelu tosiasiassa on.
Kohtuullinen tentti ja jäljitelmä
Paljon enemmän voitiin sanoa, kuinka tehokasta on design ja code of visitphilly.com, tämän artikkelin ulkopuolelle.
Sen lisäksi, mitä olemme keskustelleet tästä, voisin huomauttaa pätevän ja hyvin kommentoidun koodin, valkoisen tilan tehokkaan käytön, visuaalisen hierarkian, erinomaisten värien valinnasta, käytännöllisesti samanlaisesta kokemuksesta IE6: ssä ja muissa.
Toivon, että tämä analyysi antaa kunnollisen yleiskuvan eräistä tämän uuden suunnittelun keskeisistä piirteistä ja siitä, miten se kuvastaa modernia web-suunnittelua teollisuudessa.
Lue lisää
- Greater Philadelphia Tourism Marketing Corp. lanseeraa upouusi visitphilly.com
- Happy Cog Studios -sisältö
- Happy Cog's Review of VisitPhilly
Tämä viesti kirjoitettiin yksinomaan Webdesigner Depotille, freelance-kirjailija ja web-kehittäjä Louis Lazaris. Louis juoksee Vaikuttavat webs jossa hän lähettää artikkeleita ja tutoriaaleja web-suunnittelussa. Voit seurata Louisia Twitterissä tai ota yhteyttä häneen hänen verkkosivuillaan .
Pidätkö uudesta visitphilly.com-sivustosta? Suoristako jokin muu suunnittelu-, ulkoasu- tai arkkitehtuurin ominaisuuksista? Ole hyvä ja anna kommenttisi alla.