Happy Cog přepracování VisitPhilly.Com:
Příkladná moderní webová stránka
V lednu vyslal Jason Santa Maria a tweet oznamuje to visitphilly.com byl přepracován světově proslulým designovým studiem Happy Cog . Můj zájem byl piktovaný a nemohl jsem se jen podívat.
Mohu upřímně říci, že jsem nikdy nebyl více ohromen redesignem webových stránek než já s tímhle.
Že Happy Cog dokázal přeměnit tak velké webové stránky na krásné, přístupné, funkční a příjemné uživatelské zkušenosti svědčí o talentu týmu v týmu Happy Cog.
V žádném případě nemohu nabídnout kritiku, která by odpovídala plánování, vývoji a vývoji, které musely do tohoto projektu vstoupit.
Ale myslela jsem si, že by bylo užitečné poukázat na to, proč tento redesign ztělesňuje krásný a efektivní webový design pro dnešní trh.
Jasný účel
Doménové jméno, oko-lov logo, jasné rozbalovací nabídky, krásné fotografie: to vše a více hrají klíčovou roli při komunikaci různých webových stránek účel (povzbudit uživatele, aby navštívili město Philadelphia) a v pozvat uživatele, aby prozkoumali prostřednictvím co je (překvapivě) krásné americké město.
První navigační položky, které uživatel upozorní mega rozbalovací nabídky a velké textové odkazy, které překrývají hlavní rotující obraz.
Níže uvedený snímek podtrhuje tyto odkazy, a to: "Co dělat" (které je zobrazeno jako aktivní), "Plan your Trip", "Philly Now" a překryvný obraz "Power Lunch".
Tyto předměty měly být zřejmě okamžitě zaznamenány. Ve snímku níže jsem mapoval nejpravděpodobnější oční cestu uživatele, který skenuje domovskou stránku.
Po zaznamenání (a případné zkoumání) jedné nebo více rozbalovacích nabídek by uživatel skenoval text vztahující se k aktivnímu obrazu a pak se přirozeně přesunul dolů do sekce s názvem "Co je nového", nakonec se vrátil téměř do plného kruhu záhlaví v blízkosti vyhledávacího pole.
Obsah je uspořádán tak, aby uživatel mohl za několik vteřin vzít informativní a vizuálně nezapomenutelný trek po nejdůležitějších částech stránky.
Uživatel by pravděpodobně nebyl zpožděn, zmaten nebo přemožen, přestože je k dispozici prozkoumání takového množství obsahu.
Minimální počet primárních odkazů
Jak bylo zmíněno, jednou z nejvýznamnějších oblastí je rozbalovací nabídka. Rozhodnutí dodržet minimální počet primárních odkazů je správné.
Pouze tři odkazy umožňují, aby položky byly zobrazeny ve větším písmu, a tak drželi pozornost uživatele a demonstrovali strukturu zaměřenou na webové stránky.
Minimální navigační lišta je jednou z hlavních změn v redesignu a přináší velké výhody. Porovnejte ho se sekcí záhlaví ve starém návrhu, který není tak zaměřen:
I když stará záhlaví není špatně navržena nebo nepoužitelná, není tak zaměřená a není tak krásná jako nová. Další slabostí je nedostatek ukazatelů rozbalovací nabídky, které jsou na nové webové stránce jasné a atraktivní.
Když uživatel přijde na webovou stránku, jako je tato (často prostřednictvím vyhledávání Google), častěji než budou chtít udělat jednu ze dvou věcí: podívejte se, co má město Philadelphia nabídnout nebo plánovat svou cestu.
Odstraňovaná navigace v hlavičce pomáhá uživateli rychle a efektivně dosahovat těchto cílů.
Krásná typografie
Čekali bychom od Happy Cogu něco méně? Absolutně miluji písmo použité pro logo "Philadelphia a Countryside".
Má jemný západní pocit, ale je stále moderní a důstojný. Chcete-li, aby značka byla konzistentní, použije se písmo na mnoha stránkách celé stránky, z nichž některé jsou zvýrazněny na následujícím obrázku.
Většina textu na zbytku webových stránek je v gruzínském písmu, s občasným používáním Arial, ale dělá se docela elegantně. Rozmanitý mix titulků, kopie těla, titulků a dalších popisných prvků je extrémně čitelný a vkusně prezentován.
Přes množství obsahu, dokonce i na interních stránkách, se uživatel zřídka, kdyby se někdy cítil ohromen, na rozdíl od zkušeností staré webové stránky .
Zvýšený výkon a rychlost vnímání
Webová stránka s tak velkým obsahem a tolika obrázky nevyhnutelně hraje úspěch. Vývojáři si to uvědomili a dbali na to, aby zajistili, že jakýkoli obsah zpožděného načítání by neměl rušivý účinek, ani by přiměl návštěvníky, aby se vzdali a hledali další město Pennsylvánie .
Jak je uvedeno níže, když uživatel navštíví domovskou stránku, poslední položka, která se má načíst, je jedním z nejdůležitějších prvků nového rozvržení: hlavní rotující obrázek. Skutečná pomalost však zmírňuje indikátor načítání obsahu (animovaná grafika):
Toto vylepšení použitelnosti není omezeno na velké obrazy. Vzhledem k různorodosti obsahu v rozbalovacích nabídkách se podobná grafika načítání obsahu zobrazí jako obsah nabídek přes Ajax:
Pro toto menu je nutnost vylepšení, protože rozbalovací nabídky se při spuštění obvykle nezapomínají.
Žádný indikátor načítání by nezpůsobil zmatek, což by znamenalo, že by uživatelská myš prošla a pak se vrátila zpět, a přemýšlela, proč je tato funkce zaseknutá.
Takže i když se stránka skutečně nenačítá rychleji, zvyšuje se vnímaná rychlost. To je lekce všem návrhářům a vývojářům, kteří si myslí nejen o skutečné rychlosti, ale o vnímané rychlosti.
Uživatelsky orientované funkce
Jednou z nejdůležitějších vlastností nové webové stránky je způsob, jakým byl proveden přechod na nový design, což zaručuje, že vracející se návštěvníci nebudou šokováni drastickými změnami.
Když poprvé navštívíte web, zjistíte v horní části stránky velký červený banner a informuje vás, že web byl přepracován a je stále v beta verzi. Dostanete možnost procházet web pomocí starého rozhraní.
Poskytování návštěvníkům, kteří jsou zvyklí na staré rozložení a strukturování možnosti vrátit se k nim, je rozhodující, protože zajišťuje, že se nestanou frustrovaní při hledání známého obsahu.
Na tak rozsáhlých webových stránkách, zejména v redesignovaných firmách, které jsou známé svým uživatelsky zaměřeným designem, jsou takové zásadní architektonické změny a vylepšení povinny vyhazovat návštěvníky, kteří byli zvyklí na starý styl.
Zpráva v červeném banneru pak zabraňuje jakémukoli zmatku nebo frustraci ze strany návštěvníků.
Neztrácel jsem spoustu času srovnáním starých webových stránek s novým, takže nemohu potvrdit, jak jsou podobné obsahy a architektury, ale protože máme možnost navštívit staré webové stránky, obsah musí být podobný dostatečně, pokud budeme mít přístup k aktuálním událostem a dalším pravidelně aktualizovaným položkám v obou verzích.
Jedním z běžných prvků je odkaz, který se objevuje nad vyhledávacím polem a vyžádá si zpětnou vazbu k novému návrhu tím, že vyzve uživatele, aby vyplnili "průzkum beta". Tato funkce ukazuje, že majitelé se obávají, jak uživatelé zažívají a vnímají web.
Plně přístupný obsah
Mnozí členové týmu Happy Cog jsou na internetu dobře známí pro své obhajobu webových standardů a dostupného obsahu, takže není překvapením, že tato webová stránka je plně dostupná prakticky všem uživatelům na jakékoli platformě.
Při zakázání jazyka JavaScript je uživatelská zkušenost na webu velmi podobná, i když mnoho vylepšení již není k dispozici.
CSS text-indent vlastnost slouží k nahrazení textu v záhlavích pomocí obrázků, které zobrazují vlastní písmo. To zajišťuje, že stránky zůstanou sémantické, SEO-přátelské a viditelné pro všechny uživatele.
Níže uvedený obrázek zobrazuje nadpis na vnitřní stránce, na levé straně s vypnutým stylem, vpravo s tím zapnutým.
Můžeme vidět, jak se nadpisy vylepšují obrázky bez ztráty sémantické hodnoty a bez toho, aby se návrháři uchýlili ke zbytečně složitým metodám nahrazování písma.
Dalším klíčovým funkcím usnadnění je implementace vylepšení JavaScript. Na domovské stránce se nacházejí dva přepínače obsahu s kartami, jeden s názvem "Book Online" a druhý připojený k sociálním sítím na adrese visitphilly.com:
Pokud je jazyk JavaScript zakázán, zobrazí se veškerý obsah v obou polích s kartami. Mnoho webových stránek s widgety s kartami zobrazuje pouze jednu z polí, když je jazyk JavaScript zakázán, ale obecně to není nejlepší postup.
Tato technika je důsledně používána na celém webu pro řadu funkcí, které zajišťují, že vrstvy chování (tj. Ajax a JavaScript) jsou vylepšení, nikoliv nutnost.
Díky tomu je obsah přístupný nejen uživatelům, kteří procházejí bez JavaScriptu, ale vyhledávají pavouky vyhledávačů, jako je Googlebot.
Jakékoliv slabosti v návrhu?
Opět jsem neměl v úmyslu spravedlivě kritizovat návrh firmy, jako je Happy Cog. Ale upozorním (obezřetně) dvě drobné slabiny v novém designu a struktuře.
Nejprve se mi zdá, že znění třetího odkazu v primárním navigačním menu je trochu vágní ("Philly Now").
Nevěděl jsem, co to znamená. Předpokládal jsem, že to znamenalo aktuální události, ale je to zřejmě kombinace událostí, počasí a současných fotek. Jsem stále nejistý, jak to popsat, a mám pocit, že na odkaz se zřídka klikne.
Druhou slabostí jsou pravotočivé trojúhelníky v sekundárním navigačním menu na interních stránkách:
Předpokládal jsem, že tyto trojúhelníky ukazují rozjíždějící menu, ale neexistují žádné letáky. Trojúhelníky jsou pouhými ukazateli, které upoutávají pozornost uživatele na oblast obsahu. Pravouhlé trojúhelníky jsou nejlépe vyhrazeny pro samostatné odkazy a výsuvné nabídky, nikoliv pro vertikální navigaci.
Na domovské stránce najdeme stejnou věc, ale není to tak špatné, protože šipky jsou součástí přepínače obsahu založeného na jazyce JavaScript.
Žádná z těchto "slabých stránek" nepoškodí uživatelské zkušenosti. A skutečnost, že mohu najít jen dvě slabosti, ukazuje, jak skvělý přepracování je skutečně.
Hodný zkoušky a imitace
Mnohem více by se mohlo říci o účinnosti návrhu a kódu stránky visitphilly.com, mimo rozsah tohoto článku.
Kromě toho, co jsme zde diskutovali, mohu poukázat na platný a dobře komentovaný kód, efektivní využití bílého prostoru, vizuální hierarchii, vynikající volby barev, prakticky totožný zážitek z IE6 a další.
Doufám, že tato analýza poskytne slušný přehled o některých klíčových rysech tohoto nového designu a jak se to vyznačuje moderním designem webu v tomto odvětví.
Další čtení
- Větší Philadelphia Tourism Marketing Corp. uvádí na trh zcela novou stránku visitphilly.com
- Portfolio Happy Cog Studios
- Happy Cog Review of VisitPhilly
Tento příspěvek byl napsán výhradně pro Webdesigner Depot Louis Lazaris, nezávislý spisovatel a webový vývojář. Louis běží Působivé weby kde on posílá články a cvičení na web designu. Můžete sledovat Louis na Twitteru nebo se s ním spojte přes jeho webové stránky .
Líbí se vám nová stránka visitphilly.com? Jaké další funkce návrhu, uspořádání nebo architektury vylepšují uživatelskou zkušenost? Prosím, poskytněte své připomínky níže.