Šest tipů, jak udělat webové prostředí v tabletovém verzi přátelštější

V roce 2013 používalo tablet ve Spojených státech téměř 70 miliónů lidí (dvojnásobek oproti předchozímu roku), což odpovídalo 30 % z celkového počtu uživatelů internetu v zemi.

Mezi lety 2011 a 2012 vzrostl poměr používání tabletu na stránkách s e-shopy o 348 %.

Tento trend nestále roste, takže pokud ještě nemáte váš web optimalizovaný pro tento typ zařízení, měli byste si pospíšit. Ignorace vzrůstajícího trendu totiž může mít negativní vliv nejen na celkovou míru konverze, ale i na opakovanou návštěvnost, prodeje a spoustu dalších věcí.

Co to znamená, když jsou weby „Tappiness“?

Chytré využití prostoru, snadná čitelnost textu, logická cesta k interakci a široká tlačítka pro snadnou ovladatelnost – to vše můžeme zahrnout pod označení „Tappiness“. Jinými slovy, web je tedy uživatelsky přívětivý jak pro návštěvníky z tabletů, tak i z mobilních zařízení.

Pokud je naopak text špatně čitelný a navigační tlačítka příliš u sebe, může to na uživatele přicházející z těchto typů zařízení působit negativně, mnohdy až frustračně.

Kompletní redesign webu, spočívající v jeho responzivitě, by byl zajisté tím nejlepším možným řešením. Tento přístup však znamená i spoustu času a utracených peněz. Existují ale i jiné možnosti, jak zlepšit UX a vyhnout se tomuto radikálnímu řešení.

Ke zlepšení „Tappiness“ vašich stránek nebudeme využívat žádné čáry, ale snadné zásahy do CSS.

1. Zvětšení velikosti tlačítek (a to jak v menu, tak u call-to-action prvků) – Věděli jste, že průměrná šířka ukazováčku u dospělého člověka odpovídá cca 45-57 pixelům? Neznesnadňujte tedy svým zákazníkům koupi příliš úzkými tlačítky.
   
   
   
   
2. Zvýraznění odkazujících textů - u tabletu nepracujeme s myší, a proto nemůžeme odhalit odkazující text pouhým „najetím“ na něj.  Proto je nesmírně důležité odkazy vizuálně odlišit. Můžeme použít například výrazné zbarvení spolu s podtržením – tak, aby uživatel věděl na první pohled, že se jedná o klikatelný odkaz.
   
   
   
   
3. Zvětšení velikosti písma – zkontrolujte, jestli je váš text na tabletu čitelný, aniž byste na něj museli mžourat nebo si plochu přibližovat.
   
   
   
   
4. Zvětšení odsazení položek v navigačním menu – pro začátek zkuste navýšit odsazení o 5-10 pixelů, pokud vám to design dovolí, nebojte se ještě „přitvrdit“.
   
   
   
   
5. Zvětšení odsazení textu od okrajů a mezi jednotlivými odstavci – touto jednoduchou úpravou podpoříte celkovou čitelnost textu a snížíte jeho „vizuální složitost“. Díky většímu podílu „volného místa“ navodíte dojem, že je obsah „stravitelnější“ (nepřehlcujete čtenáře zbytečným kvantem textu).
   
   
   
   
6. Nebojte se zvětšit velikost formulářů a mezer mezi jednotlivými poli - zaměřte se na to, aby bylo pro uživatele co nejsnadnější formulář vyplnit. Díky tomuto zásahu pravděpodobně zvýšíte konverzní poměr o podstatnou část.
   
   

Tyto drobné změny nejspíše potěší i vaše návštěvníky z desktopu. Je však důležité, aby se jakékoli změny neprojevily nekorektním zobrazením na jiných platformách – vždy si proto každou změnu nejprve prověřte na všech typech zařízeních, než ji pustíte do ostrého provozu.

Podívejte se na některé zářné příklady správného Tappiness

Zkuste si následující weby prohlédnout jak na tabletu, tak na PC. Zjistíte, že i když web nedisponuje samostatným řešením pro tablety, zobrazuje se vše korektně na obou platformách.

FITBIT
Fitbit využívá správného poměru volné plochy společně s dostatečnou velikostí textu a dotykových bodů.

COMCAST
Comcast web používá velké písmo i mezery, má dobře rozdělenou navigaci a submenu.

SKILLSHARE
Skillshare má velikosti textu a tlačítek už na pomezí, kdy by si dané objekty zasloužily trochu zvětšit. Příjemný je dostatečně volný prostor kolem textu.

APPLE
Není se čemu divit, že webové stránky Applu jsou 100% Tappiness (vždyť Apple přece designoval dotykové obrazovky).

Jsou i vaše stránky „Tappiness“? Podívejte se na svůj web přes tablet a přesvědčte se sami. Díky nepřívětivému rozhraní můžete zbytečně přicházet o návštěvníky, a tedy i konverze, ale především o peníze. Vytvořte tedy z vašich stránek prostředí, kde se budou skvěle cítit uživatelé ze všech typů zařízení.

Mashable: 6 Easy Ways to Make Your Website Tablet-Friendly. Mashable [online]. 3.1.2013 [cit. 2015-04-28]. Dostupné z: http://mashable.com/2013/01/03/tablet-friendly-website/