Víkend utekl jako voda a v e-mailu na mě čekala další Daily UI výzva – tentokrát s návrhem detailu produktu na e-shopu. Samozřejmě s tím, že si mám rozmyslet, jaký typ obchodu to je a co prodává.
Co tak přemýšlím, nějaký e-shop jsem navrhoval naposledy snad někdy před 5 lety. Trochu jsem zavzpomínal na to, jak se to vlastně dělá a zaexperimentoval jsem si s návrhem stránky pro nakupování na mobilu.
Jak stránku řešit
Nedávno jsem přemýšlel nad nákupem nových bot na běhání. V rámci výzvy mě teda napadlo navrhnout detail produktu právě pro sportovní obuv.
Prvně jsem si potřeboval trochu pomoct s tím, k čemu vlastně taková stránka slouží a co budou lidé pravděpodobně potřebovat. Soustředil jsem se primárně na to, abych:
- Dal co nejvíce prostoru produktové fotografii.
- Usnadnil výběr variant produktu.
- Poskytl dostatek informací (toto jsem v rámci výzvy přeskočil).
- Usnadnil přidávání zboží do košíku a případnou cestu k pokladně.
Bral jsem to opět hodně jako experiment a chtěl jsem vidět, jak by to šlo případně udělat. Proto jsem si s návrhy trochu pohrál.
Hrátky s rozvržením
V rámci výzvy jsem se snažil primárně o to, aby:
- Stránka měla určitý „rytmus“ a jednoduchý layout.
- Lidé mohli snadno nakoupit i přes více dostupných (a zobrazených) možností.
Proto jsem zkoumal různá rozložení a jejich možné fungování.
Říkal jsem si například, jak zobrazit přepínač barev – co by mohlo fungovat. Bude stačit:
- Zobrazit pouze barevné body pro každou barvu?
- Zobrazit obrázky barevných variant přímo?
- Svázat body s fotkou nebo spíš s výběrem dalších možností?
Jak třeba naložit s tlačítkem pro vložení do košíku a košíkem samotným?
- Mít vše takovou tou klasickou formou – tlačítko někde uprostřed, košík vpravo nahoře?
- Mít plovoucí tlačítko pro vkládání?
- Nějak zkombinovat obojí dohromady?
Vedle takové té klasicky jsem si ale hodně pohrával s myšlenkou plovoucího tlačítka.
Během mnoha uživatelských testování mobilních návrhů jsem nezaznamenal nic negativního ohledně plovoucích tlačítek, respektive nic co by třeba negativně ovlivnilo rychlost dokončení úkolu, v mém případě nákupu.
Akce jsou tedy jedna věc (podstatná), ale co třeba rozložení jako takové – jak by mohla stránka vypadat v různém provedení?
Jak jsem již zmínil, fotkám daného produktu jsem chtěl dát dostatek prostoru. Chtěl jsem je nechat vyniknout a stránku trochu zpestřit. S využitím přímo barev produktu jsem zkusil prozkoumat pár možností.
Těžko říct, která varianta by fungovala nejlépe. Mám nějaké kandidáty, které bych ale určitě podrobil ještě dalšímu zkoumání. Nicméně jsem si pro výzvu vybral konkrétní řešení tak, aby byla radost na mobilu nakupovat.
Kupujeme na mobilu
Nakonec jsem si z nápadů něco vybral a zkusil to dotáhnout do interaktivního výsledku. Chtěl jsem si totiž udělal lepší představu o tom, jak by stránka působila a lidé s ní případně interagovali, tedy že by si:
- Prohlédli, jak produkt vypadá.
- Zobrazili jinou barevnou variantu.
- Přidali zboží do košíku.
Jak by třeba takový e-shop mohl vypadat, jak by se mohlo nakupovat na mobilu?
Není to úplně perfektvní návrh. Sám vidím několik možných problémů, například:
- Tlačítko Přidat do košíku je výrazné, ale trochu rušivé nad zobrazeným popiskem zboží.
- Obsazení spodní části obrozvky dvěma akcemi může zbytečně překrývat hodně obsahu.
- Samotná animace vkládání zboží do košíku by mohla být trochu lepší (využít třeba mírný překryv pro zvýraznění, lepší přechod zpět).
Když bych něco takového navrhoval ve skutečnosti, určitě bych se zašel zeptat například lidí na nádraží nebo do obchoďáku, zda by byli schopni něco nakoupit a sledoval bych, jak se s návrhem poperou.
Dokážu si také představit udělat AB test a zjistit, která z variant (či kombinací) může nejlépe fungovat a ve výsledku hezky vyjádřit v řeči konverzních poměrů.
Poznámka: Budu moc rád, pokud mi do komentářů napíšete, co si o mém nápadu myslíte. Moc mi to pomůže v dalších výzvách. Díky moc 👍.
Jen několik mikropoznámek k poslední animované verzi 🙂
– Add to basket bych dal defaultně míň výrazné (transparentní?) a až po zvolení velikosti bych jej zvýraznil
– Cenu bych očekával poblíž Checkoutu, i z důvodu, že pro různé velikosti/barvy může být jiná, tak ať si user změnu všimne (připadnou její změnu lehkým textovým efektem zdůraznit)
– Naopak pocitově očekávám umístění košíku v pravém horním rohu (asi rezidua z desktop webu 🙂 )
Hezká práce! 🙂
Díky moc za komentář.