Jak jsem vytvářel mobilní footbar

Jelikož se vývoji webů již věnuji nějaký ten pátek, stále často musím při navrhování responzivního rozhraní řešit stále ty samé problémy, týkající se hlavičky webu, která zejména v případě internetových obchodů obsahuje celou řadu důležitých prvků, jako je logo, menu, odkaz na kontakt, vyhledávání a samozřejmě také košík.

Máte-li k dispozici návrh pouze na desktopovou verzi webu, nezbývá vám nic jiného, než takto navržený desktopový design ohýbat tak, aby se vám dobře vykresloval také na noteboocích, tabletech a samozřejmě také na mobilních telefonech. V takových chvílích vždy musí front-end vývojář řešit největší dilema, protože prvky v hlavičce bývají poměrně důležité a je proto nutné je zachovat viditelné. Pokud bychom se však snažili všechny prvky „nějak“ vměstnat do samotné hlavičky, může se také bez problémů stát, že nám hlavička bude zabírat minimálně třetinu výšky displeje mobilního telefonu, což jistě není situace, kterou bychom mohli z hlediska UX považovat za přijatelnou.

Responzivní schizofrenie

Málo místa v hlavičce webu však není tím jediným problémem, který mne již delší dobu tížil. Podíváme-li se na různé známé internetové obchody, jako je Alza, Mall, CZC apod, můžeme si zde povšimnout jisté responzivní schizofrenie, která v případě responzivity velkých internetových obchodů panuje. Je zcela zřejmé, že každý chce svým zákazníkům nabídnou co nejlepší orientaci na webu tak, aby zákazníka jednoduše a intuitivně provedl svým internetovým obchodem až ke zdárnému konci – zakoupení minimálně jednoho dostatečně drahého produktu.

Smutným faktem však zůstává, že velká část internetových obchodů, ať již velkých nebo i těch menších, se snaží držet pevné šablony, kdy do hlavičky umístíme nějaké logo, vyhledávač, košík, menu… jednoduše ohneme všechno, co se ohýbat nějak dá, a budeme doufat, že když to tak používá dalších 50 e-shopů, zákazník se bude cítit skoro jako doma.

Tato jednostrannost a responzivní schizofrenie mne dovedla až k myšlence, nabídnout návštěvníkům něco nového, lepšího. Něco, co by nám ušetřilo značnou práci při vytváření kvalitního a jednoduchého responzivního designu, který by byl dostatečně uživatelsky přívětivý, ale zároveň neubíral nic na efektivnosti a funkcionalitách webu.

 

Ve spolupráci s digitální agenturou Foreveryone, zabývající se tvorbou profesionálních online řešení pro všechny internetové obchody a firmy, jsem se rozhodl zaměřit na vyřešení tohoto dlouhodobého problému, který již mnoho let trápí nejednoho webového designera a UX specialistu.

Zrození mobilního footbaru

Pokud jednoduše nemůžeme všechny prvky umístit v horní části webu, kde bychom chtěli umístit co nejvíce důležitých informací a konverzních prvků, nezbývá nám nic jiného, než tyto prvky umístit na opačnou stranu displeje. Zde se u mne zrodila myšlenka, že bychom mohli efektivně využít spodní strany webu a umístit zde fixní lištu, která by návštěvníkům nabízela všechny důležité prvky, jako je menu, vyhledávání, kontakt a samozřejmě také košík.

Ve světě můžeme narazit na několik podobných myšlenek, které již dříve některé internetové obchody začaly používat. Většinou se zde snaží tyto společnosti umístit prvky, jako je menu nebo košík. Jedná se samozřejmě o prvky velmi důležité, které chceme mít stále po ruce, abychom se mohli snadněji orientovat na webu. Z vlastní zkušenosti však dobře vím, jaké to je, když procházím seznam výrobků nějakého e-shopu, jsem v polovině stránky u 20. produktu a najednou si uvědomím, že zde asi nenajdu to, po čem zrovna prahnu.

 

 

Co v takovou chvíli můžu udělat? Jedinou možností je začít horlivě scrolovat až k samotné hlavičce webu, kde většinou najdu různé filtry, vyhledávání nebo třeba menu. V tu chvíli jsem si jasně uvědomil, že opravdu důležitým prvkem pro takovou mobilní lištu není ani tak košík nebo kontakt, ale možnost, jak se dostat jednoduše a rychle až k hlavičce webu. Z tohoto důvodu bylo do výsostně prostředního místa umístěno také tlačítko, s pomocí kterého se může zákazník velmi snadno a rychle dostat až na začátek stránky.

Nasazení mobilního footbaru

Jelikož se myšlenka samotného mobilního footbaru velmi líbila a zaujala jak samotný vývojářský tým Foreveryone, tak i klienty, neváhali jsem a rozhodli jsme se nasadit tento mobilní footbar na nově vznikající internetové obchody Trekobchod.cz a Stil.cz.

Velkou výhodou samotného footbaru je také fakt, že je postaven plně modulárně, tak že jej není problém individuálně dále upravovat podle potřeb daného webového řešení, ať již půjde o jednoduchou mobilní aplikaci nebo velký internetový obchod.

Napsat komentář

Vaše emailová adresa nebude zveřejněna. Vyžadované informace jsou označeny *