Daily UI – detail produktu na e-shopu

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ě.
Různé nápady na řešení stránky detailu produktu na e-shopu.
Různé nápady na řešení stránky detailu produktu na e-shopu.

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í?
Možné varianty přepínače barevných variant produktu.
Možné varianty přepínače barevných variant produktu.

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?
Jak zobrazit a pozicovat akci pro vložení do košíku.
Jak zobrazit a pozicovat akci pro vložení do košíku.

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í?

Různá rozložení obsahu na stránce detailu produktu.
Různá rozložení obsahu na stránce detailu produktu.

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í.

Nápady pro zvýraznění a vyniknutí daného produktu.
Nápady pro zvýraznění a vyniknutí daného produktu.

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?

Jak by mohl vypadat detail produktu pro nakupování na mobilu.
Jak by mohl vypadat detail produktu pro nakupování 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 👍.

Komentáře

  1. 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ář.

      • To by mohlo jít. V současné verzi by to řeklo, že sis nevybral velikost. Abych nematl schovávaným disablovaným tlačítkem.
      • Cena je vždy stejná bez ohledu na velikost/barvu. Obecně jsou pro obuv ceny stejné, ať už máš jakoukoliv velikost (vycházel jsem například z nabídky Under Armor). Jinak bych určitě pracoval s cenou jinak (třeba mě napadlo Add to basket for $XXX nebo něco takového). Je ale pravda, že by mohla být trochu výraznější, trochu nešťastně jsem jí upozadil.
      • Jo, taky to tak mám. Chtěl jsem zkusit něco jiného a proto jsem tam přidal „navigační“ animace.

Napsat komentář