Mobilní verze online obchodu: jak přivést uživatele ke koupi, část šestá

Toto je poslední článek ze série Mojo mCommerce. Řekneme vám, jak přizpůsobit veškerý obsah na stránce produktu a co dělat, když je produkt na skladě. Bonus pro obchodníky – pokyny pro vyřizování negativních recenzí.

Dříve v seriálu

V první části jsme si řekli, proč lidé nakupují méně často z mobilních telefonů, i když provoz v mCommerce roste. Zjistili jsme, co dělat s obsahem, košíkem a pokladnou.

Ve druhém článku jsme se zaměřili na mobilní navigaci. Řekli jsme vám, jak navrhnout strouhanku a karusel.

Třetí definoval funkce a obsah, který musí mít mobilní zápatí. Také jsme popsali běžné typy vyhledávacích dotazů v online obchodech.

Ve čtvrté části jsme vysvětlili, proč a jak zobrazit použité filtry. Přišli jsme na to, jaké způsoby třídění uživatelé potřebují.

V pátém článku o tom, co napsat na produktovou kartu a jaké funkce dělat v mobilním katalogu, aby bylo nakupování pohodlnější.

V poslední epizodě

1. Jak stylovat obsah na kartě produktu

2. Co dělat, když položka není na skladě

3. Proč a jak uvést náklady na doručení na kartě produktu

4. Proč musíte reagovat na negativní recenze

5. Jak nejlépe implementovat funkci živého chatu v mobilním telefonu

6. Jak podporovat mobilní gesta pro práci s obrázky

7. Závěry

Jak uspořádat obsah na kartě produktu

Potřebujeme s vámi:

1. Poskytněte všechny potřebné informace o produktu, abyste mohli odpovědět na jakékoli dotazy uživatelů. Zobrazit veškerý obsah: obrázky, videa, reference, otázky a odpovědi, průvodce a další;

Baymardovo testování ukázalo, že se lidé před nákupem zaměřují na data, která jsou pro ně důležitá.

Klíčovým faktorem při jejich rozhodování o koupi produktu bylo včasné vyhledání informace. Klient například pochyboval, že se lednička vejde do kuchyně, ale z videa bylo jasné, že se vejde.

2. Obsah uveďte stručně, aby se vše vešlo na mobilní displej a nevyvíjelo na uživatele tlak.

Jak jste pochopili ze série článků, v designu mobilního telefonu jsou vždy dvě židle, a musíte sedět na obou.

26% mobilních online obchodů přesouvá část produktové karty na podstránky.

Proč to nemůžete udělat:

  • obsah je k ničemu, pokud ho nikdo nevidí

Během testování uživatelé přeskočili odkazy na podstránky. Nedostatek informací a lidé od nákupu upustili.

  • Návrat z podstránek ztěžuje navigaci

Uživatelé si nevšimli tlačítka Zpět a strouhanky. Ikony šipek nestačí – v navigaci nešetřete na text.

seznam produktů – 2 kroky zpět.

< h2> Řešení Baymard

Baymard navrhuje použití akordeonů. Podle jejich názoru:

  1. Stránka nevypadá tak zastrašující – většina obsahu je sbalena.
  2. Uživatel se bude řídit nadpisy. „Nadbytečné“ informace budou skryty.
  3. Uživatelé méně často sekce přehlížejí než vodorovné karty.

4. Takto kontrolujeme délku karty. Uživatelé mají snadný přístup k zápatí nebo křížové navigaci.

Jako vždy existují nuance:

  • akordeon by měl být používán pro téměř všechny sekce

Nemíchejte vodorovné karty, podstránky a akordeony. V opačném případě bude uživatel ve struktuře stránky ztracen.

Křížová navigace, reklamy, informace o společnosti, speciální nabídky a propagační akce lze zobrazit samostatně.

  • sekce nadpisy by měly být informativní a srozumitelné

myšlenky od nás

  1. Akordeony skryjí obsah stejným způsobem jako podstránky. Riziko, že uživateli některá data budou chybět, zůstává. Jediný rozdíl je v tom, že akordeony se snáze používají.
  2. Líbí se nám, když se zobrazí některé informace a některé se sbalí do sekce „Více“. Tato mechanika, lepší než nadpisy, utváří očekávání uživatelů od obsahu a zároveň nešokuje objemem. V jistém smyslu jde také o poddruh akordeonu, pouze interaktivní.

3. Existují případy, kdy jsou „klasické“ akordeony bezmocné. Například návštěvník otevře 100 recenzí a myslí si, že je všechny zvládne. Už po 20. únavě to bude unavené. Chcete-li se vrátit a zavřít akordeon, musíte vše otočit zpět.

Takže potřebujeme akordeon, který dokáže opravit jeho název a sbalit se nahoře. Dolní navigace je ještě lepší.

Ano, máme utopické nápady, jak snížit veškerou možnou navigaci. „Zóna palce“ nás straší.

Jacobův zákon je však v pohotovosti – uživatelé očekávají, že web bude mít stejný design a funkčnost, jaké viděl dříve.

Není skladem

Předpokládejme, že návštěvník prozkoumává oblečení stránky. Koupil nový notebook a hledá vhodný batoh.

20 minut hledání a tady to je – model, který vypadá prostě perfektně. Oblíbená barva, oblíbená velikost. Prostorný a s kapsami pro každou maličkost.

Uživatel hledá tlačítko „Koupit“, ale najednou zjistí, že produkt není možné objednat. Ohodnoťte tragédii na desetibodové stupnici.

„Není na skladě“ na stránce produktu je slepá ulička UX. Je to jen horší, když je zákazník bez vysvětlení přesměrován na stránku kategorie produktu nebo se mu zobrazí chyba 404.

Návštěvník nebude přes web postupovat, pokud bude rozhodnut koupit konkrétní položku.

Přijatá zpráva

Tlačítko „Ohlásit“ uživatelům nepomůže. Pokud je produkt v jiných obchodech, daná osoba nečeká na zprávy v e-mailu. Na druhé straně to prodejci umožní zjistit e-mail zákazníka a v určitém okamžiku jej vrátit na web zasláním poštou.

Seznam přání

Ideálním řešením není ani návrh na uložení položky do seznamu přání. 75% webů vyžaduje, abyste si pro použití této funkce vytvořili účet. Registrace ve 30% případů vede k odmítnutí nákupu, a to i na velkých webech Fortune 500.

Dejte uživateli možnost ukládat produkty do oblíbených položek bez povolení. Je škoda, že tyto akce nebudou mít za následek zboží ve skladu. Uživatel znovu přejde na jiné místo.

Sdílejte své případy práce se seznamem přání v komentářích.

Události vývojových scénářů

Pokud produkt není na skladě

Life hack od společnosti Baymard: uživatelé jsou připraveni čekat na objednávku, když nakupují online. Zvyšte dodací lhůtu a neohlašte nedostatek zboží, pokud přesně víte čas doplnění skladu.

Na karty přidáme zprávu, když se zboží objeví v obchodě a po jak dlouhé době bude doručeno. Je lepší to udělat poblíž místa, kde bylo tlačítko Koupit – přitahuje více pozornosti uživatelů.

Není skladem – uživateli neznámé. Neví, kdy zboží dorazí. Pokud napíšete odhadované dodací lhůty, může posoudit, zda jsou pro něj vhodné.

Ano, někdo nechce čekat. Propagujte u tohoto publika alternativní produkty.

Poznámka: Nezaměňujte alternativní a další nabídky. Pokud člověk na webu hledal smartphone, ukažte mu podobné modely, nikoli ochranné fólie a kryty.

Mimochodem, dodací lhůty jsou také důležité pro zboží na skladě, takže je třeba je uvést na všech kartách.

Je-li produkt ukončen

Stavte na konkrétním případě. Pokud značka vyrábí jedinečné produkty, které nelze najít v jiných obchodech, informujte je, že produkt byl ukončen.

Don Nezapomeňte znovu nabídnout alternativní a nové modely produktů.

Je lepší je zobrazit jako náhradu za sekci „Koupit“ nebo mezi hlavní navigací a obsahem produktové karty.

Pokud byl z výroby odstraněn běžný produkt, jako je klobouk nebo oblek – odeberte položku z katalogu.

Přepravní náklady

Dodatečné náklady jsou pro kupující nepříjemným okamžikem. Zvláště když jsou již na šeku hlášeny. Taková hrubost povede návštěvníka k opuštění košíku.

64% uživatelů vyhledá náklady na dopravu na stránce produktu před tím, než jej přidají do košíku. Celková hodnota objednávky, včetně všech nákladů, je pro nákup zásadní.

Existuje několik způsobů, jak vypočítat odhadované náklady na dopravu. Klesající účinnost UX:

  1. Pokud má dodávka pevnou cenu, jednoduše ji označte.
  2. Identifikujte město uživatele pomocí IP. Jeho umístění lze použít k automatickému výpočtu ceny.
  3. Povolit uživatelům ukládat doručovací adresy do jejich osobního účtu. Pokud je přihlášen, použijte předchozí adresu návštěvníka.
  4. Zobrazit rozsah minimálních možných poplatků za dopravu. Například: „Standardní doručení: 300–600 rublů (v závislosti na cíli).“

V části náklady na dopravu vždy zobrazujte město, stát nebo region. Například „Odhadovaná cena dodávky pro Moskevský region: 600 rublů.“

Data jsou důležitá pro uživatele z jiných regionů – pochopí, že je třeba změnit nastavení, a částka bude přepočítána . Nejlepší je kliknout na název položky, aby uživatel neběžel po webu a nezměňoval údaje tam, kde je.

Negativní recenze

Tuto část článku věnujeme čtenářům, kteří v komentářích k našemu Design Fry argumentují tím, že recenze zákazníky nezajímají.

95% uživatelů spoléhá na recenze, aby mohli hodnotit produkty nebo se o nich dozvědět více.

53% konkrétně hledá negativní recenze.

37% pozitivně vnímá reakce jakéhokoli internetového obchodu na negativní recenze.

Proč jsou negativní recenze dobré:

  • urychlí hledání alternativního produktu na webu. Porovnáním všech kladů a záporů bude mít uživatel dostatek sebevědomí při výběru a větší pravděpodobnost dokončení objednávky.

Nasměrujte zákazníky na produkty, které se jim z dlouhodobého hlediska budou líbit než je přesvědčit, aby provedli neúspěšný nákup. Věrný zákazník se vrátí a přinese více peněz.

  • negativní recenze zvyšují důvěryhodnost celkového hodnocení produktu. Uživatelé hledají negativní komentáře, když nevěří jen pozitivním;
  • negativní recenze jsou mechanismus zpětné vazby;
  • u webů s více značkami mohou negativní recenze pomoci identifikovat dodavatele, se kterými přestanou spolupracovat. U obchodů s jednou značkou pomohou negativní recenze vylepšit produkt a upravit produkci.

Reagujte na negativní recenze

Při testování společnosti Baymard 37% uživatelů uvedlo, že si myslí lépe o společnostech, které reagují na negativitu zákazníků. Zpětná vazba z internetového obchodu tlačí lidi, aby přehodnotili svůj přístup k produktu, webu a značce jako celku.

Jak reagovat

Aby byl komentář k online obchodu užitečný, musí být zviditelněny a odděleny od zpětné vazby od zákazníků.

  1. Odsazení použijte k vizuálnímu „vnoření“ odpovědi v recenzi.
  2. Zobrazte odpověď jiným stylem, například pomocí jinou barvu pozadí, jiný styl písma atd.
  3. Přidejte logo společnosti, název a název respondenta – tím se „humanizuje“ značka. Tato mechanika je obzvláště důležitá, pokud je na vašem webu možný dialog, a ne pouze reakce společnosti. Pro lidi je obtížnější vylévat negativitu na konkrétní osobu než na „bezduchý výrobní stroj“. Bohužel to také není všelék.

Živý chat

Při pokusu abychom pomohli zákazníkům online obchodům přidat živý chat na web. Srozumitelné řešení pro stolní počítače, ale v mobilní verzi tato funkce s větší pravděpodobností ruší uživatele.

V mobilním telefonu může tlačítko fab chat blokovat obsah a funkce stránky. Věci se ještě zkomplikují, pokud se chat objeví všude na webu – ve výsledcích vyhledávání, na kartách, v košíku atd.

< p> I když je tlačítko navrženo tak, aby vypadalo malé a nenápadné, stále přetrvávají problémy. Na mobilních zařízeních je omezený prostor.

Nakonec je obtížnější psát na mobilních zařízeních než na počítačích. Uživatelé se proto jen zřídka rozhodnou použít živý chat.

Aby byl chat přínosný, nikoli škodlivý, jeho použití musí iniciovat sám uživatel, nikoli web. Přístup k dialogu se nejlépe provádí v zápatí nebo záhlaví.

Testování Baymard ukázalo, že jde o oblasti, kterým většina uživatelů věnuje pozornost .

Mobilní gesta

Podpora mobilních gest na webu je pro mCommerce hygienickým minimem. Uživatelé jsou již zvyklí používat měřítko obrázků na stránkách produktů dvojitým klepnutím a stažením. Ve studii Baymard z roku 2016 však 40% webů tyto akce nepodporovalo.

Subjekty ponechaly karty, které na dotek nereagovaly. Raději hledali jiné produkty na stejném webu nebo na jiných.

Důvod: kupující měli pocit, že nemohou dostatečně ocenit kvalitu nebo funkci produktu. Nákup produktu jim byl nepříjemný.

< span class = "ui_preloader__dot">

V poslední části série jsme již psali, jak důležité je pro mobilní uživatele interakci s obrázky. Osoba získá z fotografie pouze obecnou představu o vzhledu produktu. Nemůže však zkoumat jeho materiál a strukturu, hodnotit kvalitu sestavení, vidět různé části obalu nebo speciální podrobnosti o produktu bez měřítka. Při nákupu jsou všechny důležité.

Nízké rozlišení se nepočítá

Ačkoli 4% testovaných webů technicky podporovala gesta pro přiblížení, fotografie byly nekvalitní.

Mobilní weby používají optimalizované obrázky v nízkém rozlišení k urychlení načítání stránky. Je důležité zajistit, aby galerie obrázků při změně měřítka přitahovala kvalitní verzi fotografie.

Upozornit, že je měřítko podporováno

Zobrazit popisek „Podpora škálování“ nebo ikonu gesta. Je lepší, když zpráva po několika sekundách zmizí. Pokud zvolíte statické upozornění, je důležité, aby nezakrývalo obraz.

Upozorňujeme, že ne všichni uživatelé rozumí význam pojmu tap … Lepší je napsat „Poklepáním přiblížit“ nebo použít ikonu gesta.

Závěry

Pro ty, kteří švihli dolů:

  • použít “ interaktivní »Akordeony pro strukturování obsahu na stránce produktu;
  • Umožněte zákazníkům objednávat zboží, které je dočasně na skladě, čímž se zvýší dodací lhůta. Nezapomeňte informovat zákazníky, kdy se produkt objeví v obchodě a jak dlouho bude trvat;
  • uveďte náklady na doručení na kartě produktu – uživatelům se nelíbí náhlé zvýšení celkové částky při check-outu a opustit své vozíky;
  • Reagovat na negativní recenze – to zvyšuje loajalitu publika;
  • Před implementací skvělého tlačítka se živými chaty na mobilním webu si to dvakrát rozmyslete. Lepší je umístit chat do záhlaví nebo zápatí.
  • podporuje gesta dvojitým klepnutím a stažením pro změnu velikosti obrázků v mobilu. Informujte uživatele o těchto funkcích.

Děkujeme, že jste si přečetli tuto sérii článků. Doufáme, že to byla užitečná zkušenost. Možná jste v něm dokonce byli uživatelem, ba-dum-ts 🙂

Čekáme na vaše dotazy a gratulujeme v komentářích.

To není konec – zde je stále hodně obsahu o designu a nejen to. Přihlaste se k odběru Mojo, aby vám neunikly nové příspěvky.

Pokud je to užitečné, nezapomeňte na +1.

#shop

Máte zájem o podobný design?

Další práce

Objednávka designu

Naše portfolio obsahuje stovky projektů: interiérový design, webové stránky, reklamní kampaně, loga, corporate identity. Každý úkol řešíme smysluplně, elegantně a krásně.

Abychom mohli začít, musíme si promluvit. Stačí něco říct o vašem projektu, nechat kontakty a my Vás budeme kontaktovat, abychom vše probrali.