Čo nás e-shopy Alza, Mall či Hej (ne)naučili o dizajne mobilných webov?

Introduction
Čo nás e-shopy Alza, Mall či Hej (ne)naučili o dizajne mobilných webov?

Počet používateľov smartfónov a tabletov stále rastie a mobilné nakupovanie sa preto stáva stále významnejším predajným kanálom. Vo svete e-commerce sa však ešte občas pozerá na mobilných návštevníkov tak trochu pomedzi prsty, a mnohé e-shopy berú responzívny web skôr ako nutné zlo, než potenciálnu príležitosť. Ako sú však na mobilné nakupovanie pripravení najväčší hráči na slovenskom e-commerce poli? Rozhodli sme sa to zistiť.

Na rozdiel od našej poslednej štúdie, pri ktorej sme porovnávali firemné newslettre pomocou eye-trackeru, sme sa v tomto teste rozhodli využiť klasické testovanie použiteľnosti v UX labe. Vybrali sme 5 respondentov s rôznou úrovňou skúseností vo veku 23 - 32 rokov. Tí mali za úlohu prejsť si kompletne celým nákupným procesom od výberu produktu v katalógu až po jeho samotnú kúpu, a to pri všetkých testovaných e-shopoch.

Testované e-shopy:

  • Alza.sk
  • Andreashop.sk
  • Hej.sk
  • Mall.sk
  • Shoppie.sk

Ktorý z nich skončil najlepšie a ktorý nejhoršie? To nebolo predmetom tohto testovania. Nie je to o porovnávaní, je to o tom, čo si z neho vieme odniesť. Ak vás to však veľmi zaujíma, výsledné hodnotenie nájdete v samostatnom článku januárových Stratégií :) No najprv sa snami pozrite na 6 kľúčových insightov z tohto testovania:

1. Input dát je komplikovaný

Funkcia filtrovania produktového katalógu podľa parametrov bola jedna z najproblémovejších. Napríklad v prípade e-shopu Hej.sk sa pri akejkoľvek interakcii uzavrelo okno s filtrovanými parametrami, stránka sa refreshla a používateľa presunula na jej vrch. To spôsobovalo veľké zmätenie, a zadať takýmto spôsobom len 4 jednoduché parametre bol pre používateľov tak zdĺhavý a frustrujúci zážitok, že to 4 z 5 vzdali. Traja respondenti sa dokonca zdôverili, že ak by nešlo o moderované testovanie, tak by e-shop opustili a hľadali inde.

Zmätočné filtrovanie produktov (Hej.sk)

Naše testovanie taktiež ukázalo, že neexistuje preferovaný spôsob inputu dát, a niektorí respondenti radšej využívali checkboxy, iní zase slidre a neraz preferovali aj manuálny číselný input. E-shop Mall.sk toto filtrovanie vyriešil skvelo, keďže ponúka v mnohých filtroch viacero foriem inputu. Napr. v prípade ceny sa dá filtrovať pomocou checkboxov, slideru a dokonca aj číselného inputu. Okrem toho sa stránka refreshne a vyfiltruje výsledky až po vyklikaní všetkých parametrov a potvrdení tlačidlom “Potvrdiť”, ktoré bolo po celý čas zadávania hodnôt prilepené na spodu obrazovky. Respondenti vyfiltrovali všetky požadované parametre veľmi rýchlo a intuitívne.


Dobre spracované filtrovanie produktov pomocou viacerých foriem inputu (Mall.sk)

2. Obsah na stránke dajte do správneho poradia

Keďže kvôli úzkej obrazovke prebieha na mobiloch prezentácia obsahu výhradne zhora-nadol, je tu veľmi dôležitá prioritizácia obsahu. Používatelia by mali dostať obsah v takom poradí, v akom ich zaujíma, nikto totiž nemá rád príliš dlhé scrollovanie. Problém to bol najmä pri veľmi dlhých produktových stránkach s množstvom rôzneho contentu. Nie všetko však bolo pre respondentov rovnako užitočné.

Výborne mala produktovú stránku zvládnutá napríklad Alza, ktorá roztriedila content do kategórií zbalených v tzv. “accordions”, ktoré môže používateľ rozkliknúť a dozvedieť sa viac. Produktová stránka je teda pomerne krátka a netrvá dlho ju celú prescrolovať a vybrať si typ obsahu, ktorý používateľ chce skúmať bližšie.

Najčastejšie respondentov zaujímali používateľské recenzie, tabuľkové parametre a obrázky. Najmenej ich zaujímal predajný text v paragrafoch či návrhy pre doplnkový a alternatívny tovar.


Prehľadne navrhnutá stránka produktu (Alza.sk)

3. Dbajte na prehľadnú navigáciu

V prípade e-shopov je navigácia alfou a omegou, keďže je to často prvá vec, s ktorou prídu zákazníci do kontaktu. S navigáciou mali respondenti veľký problém napríklad na webe Andreashop, kde nevedeli nájsť kategóriu mobilných telefónov. Smartfóny boli totižto umiestnené v sekcii „Počítačová technika“, no žiadneho z respondentov nenapadlo ich tam hľadať. Zmätenou metódou pokus-omyl sa im napokon na 3 či 4 krát podarilo smartfóny nájsť, no ich prvotný dojem nebol zrovna pozitívny.

Na mobilných zariadeniach je totižto navigácia cez katalóg komplikovanejšia a pomalšia ako na desktope. Na vytvorenie prehľadnej navigácie však neexistuje žiaden best practice, a navigáciu je preto nutné vytvoriť pre každý web inak. Skúsený UX dizajnér dokáže pomocou metódy card-sorting či testovaním cez službu treejack vytvoriť prehľadnú a intuitívnu informačnú architektúru, v ktorej sa zákazník nestratí. Pre viac info o týchto metodikách si prejdite náš UX Box.

4. Píšte čisté a zrozumiteľné texty

Na mobilných zariadeniach funguje interakcia omnoho dynamickejšie a rýchlejšie ako na desktope, a tomu musí byť prispôsobený dizajn aj content. Shoppie.sk je výborným príkladom čistého a prehľadného dizajnu a textov. Respondenti dostali presne to, čo potrebovali vedieť pre postup ďalej, a ani o trochu viac. Táto jednoduchosť v nich zanechala veľmi pozitívne pocity ktoré sa odzrkadlili aj na rýchlosti, s akou urobili nákupné rozhodnutie a dokončili objednávku.


Čistý a prehľadný dizajn i text (Shoppie.sk)

Naopak na mobilnej verzii e-shopu Andreashop zaútočilo na respondentov pri procese objednávky obrovské množstvo ťažko pochopiteľných informácií o spôsobe dopravy, cenových podmienkach a ďalších detailoch. Respondenti toto info označili za nepotrebné a zle zrozumiteľné, a celú stránku za veľmi neprehľadnú a chaotickú.

Chaos - respondenti len na tejto jedinej stránke strávili študovaním informácií 3 až 6 minút (Andreashop.sk)
Celkovo respondenti strávili na stránke pre výber spôsobu dopravy a platby v e-shope Andreashop od 3 až do 6 minút. A v prípade Shoppie.sk? Menej než 1 minúta. Čo myslíte, ktorý e-shop má vyššiu mieru konverzií?

5. Buďte transparentný

Máločo je v nákupnom procese dôležitejší faktor, ako dôvera zákazníka. Jednoduchý dizajn a zrozumiteľné texty vytvárajú v zákazníkovi pocit známosti a dôvery. Naopak slabá informovanosť a netransparentnosť pocit dôvery znižuje.

Mnoho marketérov si napríklad myslí, že zvýši mieru dokončených objednávok, ak zákazníkovi zdelí cenu za dopravu až v poslednom kroku nákupného košíka. Z nášho porovnania to takto robil len Mall.sk, ktorý neumožnil zákazníkom jednoducho zistiť cenu dopravy bez toho, aby najprv vyplnili všetky svoje osobné údaje a adresu doručenia. Zvyšuje tento spôsob konverzie? To nevieme, no našich respondentov pekne štval a vyvolával pocit nedôvery. Vyťukať svoje osobné údaje na mobilnej klávesnici je totižto omnoho náročnejšie ako tak urobiť na desktope.

6. Buďte stručný, no nevynechávajte dôležité informácie

Problém v prípade Mall.sk bol taktiež nedostatok informácií o doplnkovom poistení, ktoré bolo charakterozivané len stručnou vetou „Poistenie na 2 roky“ bez možnosti zistiť viac. Respondenti nerozumeli, aké benefity toto pripoistenie za desiatky či stovky eur ponúka oproti zákonnej záruke zadarmo. Niet preto divu, že žiaden z nich pripoistenie ani nezvažoval. Tento problém by sa pritom dal vyriešiť úplne jednoducho - pridaním odkazu na podmienky a informácie o poistení priamo na miesto, kde sa poistenie kupuje (v tomto prípade v košíku). Veľmi dobre mala pripoistenie spracované Alza. Už základný text dal používateľom hrubú informáciu o benefitoch poistenia, a pomocou informačnej ikonky napravo si vedeli zistiť ešte viac.


Naľavo: nedostatočné informácie o poistení bez možnosti zistiť viac (Mall.sk), Napravo: stručné a výstižne popísané možnosti doplnkového poistenia s nápovedou pre viac informácií (Alza.sk)

Záver

Testovanie nám opäť raz potvrdilo, že mobily sa ovládajú sofistikovanejšie a interakcie sú na nich dynamickejšie ako na desktopoch. Z toho vyplýva, že každý nedostatok je na mobilných zariadeniach posudzovaný používateľmi omnoho prísnejšie ako na desktope. Aj na oko malá chyba môže spôsobiť silné zmätenie či dokonca stratu zákazníka.

Kvalitný multi-kanálový používateľský zážitok naopak nielen zvyšuje konverzie, ale aj buduje so zákazníkom dlhodobý a dôverný vzťah. Mobilné verzie stránok by sa preto mali dizajnovať a testovať samostatne a s veľkou precíznosťou. Jeden z najefektívnejších spôsobov, ako to docieliť, je testovanie použiteľnosti. To dokáže odhaliť až 80% kľúčových nedostatkov už pri vzorke 5 respondentov.

Testovanie prebehlo v novembri minulého roku, niektoré detaily sa preto mohli už v e-shopoch zmeniť.

Author

Milan Tibenský

Marketingový špecialista s obľubou v testovaní nových prístupov. Často a s úspechom prenáša do marketingu metodiky známe z UX. Vo voľnom čase cestuje, fotí, športuje a ochutnáva zahraničnú kuchyňu.

View Comments
Next Post

UX na Slovensku sa vyvíja – firmy budujú vlastné tímy a menia štruktúry

Previous Post

Pohľad do budúcnosti: Digitálne banky, konverzačný e-commerce a eHealth