Co (ne)chtít od mobilního zobrazení e-shopu

Vidíme to kolem sebe každý den v MHD, u kolegů o polední pauze, v čekárně lékaře, u vlastních dětí. Konec konců, děláme to taky. Jak je chvilka času, přilepíme svoje oči na obrazovky chytrých telefonů. Proto je dobré, zamyslet se nad tím, jak by měl váš web vypadat a fungovat na mobilu.

Mobile first?

Určitě znáte výraz mobile first. Označuje se jím zjednodušeně řečeno návrh webových stránek, kdy se nejprve vytvoří design pro mobilní zobrazení a z něj se poté vychází při návrhu verze pro desktop a případně pro tablet.

Jak to tak bývá, má každý přístup svá pro a proti. Pokud se vydáte cestou mobile first, nestane se vám, že by se vyšperkovaná plná verze na mobilu zobrazovala jako ořezaná chudá příbuzná, případně se nedala vůbec použít. Na druhou stranu zaměřit se pouze na mobilní zařízení a chudou příbuznou udělat z desktopové verze určitě také není dobře.

Rozhodnout se ještě před samotným návrhem, kolik času věnovat zobrazení na jednotlivých zařízeních, vám proto pomůže průzkum chování uživatelů na vaší stávající stránce pomocí Google Analytics, Hotjar a dalších měřicích nástrojů.

Užitečné je sledovat i obecné trendy. Počet uživatelů, kteří přistupují ze smartphonu, neustále roste. Aktuálně se číslo v globálním měřítku pohybuje okolo 62 %. Naproti tomu je ale z mobilu realizováno pouze 42 % celosvětových on-line tržeb opět s rostoucí tendencí.

Pravděpodobné chování uživatele je tedy takové, že žena sedící s dětmi na písku nebo muž jedoucí domů z práce si v klidu prohlédne vaše zboží a večer ze stolního počítače objedná.

Pokud máte na optimalizaci omezené zdroje, je dobré zaměřit se na mobilu především na vyladění nejčastěji zobrazovaných stránek. U e-shopu jsou to detaily a výpisy zboží, adresa nebo telefonní číslo provozovny, otevírací doba atd. Ujistěte se, že telefonní číslo na stránkách jde z mobilu vytočit.

Myslete palcem

Při návrhu je dobré se zamyslet i nad způsobem držení mobilu. Asi polovina uživatelů drží telefon jednou rukou vertikálně. Menší polovina levou rukou podpírá telefon a pravou píše a zbytek píše oběma rukama. Ideální je proto stránku navrhnout tak, aby se na všechny důležité prvky dalo dosáhnout palcem, případně ukazováčkem.

Podstatná je i velikost ikon a jednotlivých prvků. Průměrná velikost ukazováčku dospělého člověka je 15 až 20 mm, což odpovídá 45 až 57 pixelům. Pokud musí uživatelé na vaší stránce příliš zoomovat, je něco špatně.

Obrázek vydá za tisíc slov, ale které z nich to je?

Chceme-li ušetřit místo a podat svůj obsah v atraktivní formě, pomůže nám obrazová ikona zabít dvě mouchy jednou ranou. Pozor ale na přílišnou inovativnost. Nesnažte se měnit notoricky zažité ikony a nenuťte uživatele přemýšlet. Pro menu se prostě používá hamburger a cokoliv jiného vaše uživatele pravděpodobně zmate. Kde je to možné, doplňte obrázek i krátkým popiskem.

Zamyslete se nad barvami. Aktivní tlačítka a ikony by měly mít stejnou barvu. Pozor na šedou, která je sice elegantní, ale může evokovat neaktivní prvek a na tlačítko se proto nehodí.

Dost času na video

Jak jsme si řekli v úvodu, na mobilech si převážně prohlížíme a je prokázáno, že rádi shlédneme i nějaké to video. Je to dokonce nejčastější aktivita, které se na smartphonech věnujeme. Byla by proto škoda toho nevyužít. Klíčové ale je velikost videa co nejvíce zredukovat a pro přehrávání využít HTML5 přehrávač, který podporuje většina zařízení.

Rychleji, ještě rychleji!

Pokud nás pomalé načítání stránek na počítači obtěžuje, na mobilu to platí dvojnásobek. Rychlost rozhoduje o tom, jestli se na vaši stránku někdo vůbec podívá. Snažte se proto zmenšit počet naráz načítaných prvků nebo velikost obrázků a videí. Mějte ale zároveň na mysli, že pokud například prodáváte oblečení, spousta zákazníků si ho chce na mobilu prohlédnout a optimalizace by se neměla negativně projevit na kvalitě fotek. Ujistěte se také, že na mobilu budou odstraněny zbytečné zpomalující scripty a prvky, jako je facebook plugin.

Texty? Přiměřeně

Malé ploše telefonu je třeba přizpůsobit i obsah. Popisky k produktům by neměly být dlouhé, aby uživatel nemusel na mobilu moc rolovat. Scrollování zaprvé unavuje, zadruhé hrozí, že se čtenář textem proroluje aniž by ho přečetl. Zároveň ale často platí, že na mobilu má uživatel víc času a web projíždí, protože má zrovna dlouhou chvíli. Proč mu tedy nenabídnout i podrobný popis, který ještě navíc může pomoci vašemu umístění ve vyhledávačích? Řešením je například rozdělení textu na krátký a dlouhý popis, který se otevře až po rozkliknutí.
 

Testovat, testovat, testovat

Není nic horšího, než když máte přes celou obrazovku cookies lištu, nebo na vás vyskočí okno, co nejde zavřít. Abyste se vyhnuli podobným patáliím, pravidelně svoje stránky testujte. Zapojte známé a rodinu nebo využijte neplacených nástrojů, ve kterých můžete nasimulovat různá zařízení a operační systémy, jako je například Browserstack. Je jasné, že není v lidských silách přizpůsobit stránky všem možným zařízením. Dobré je opět využít například Google Analytics a zjistit si, co používají vaši zákazníci.