15 tipů pro mobilní design pro zvýšení prodeje v elektronickém obchodování

Věděli jste, že 55% veškerého provozu elektronického obchodování je nyní na mobilním zařízení?


Správně, více než polovina všech lidí, kteří se dívají na nákupní weby, je na svém telefonu nebo tabletu.

Přesto je zde problém: 46% z 50 nejlepších maloobchodníků stále nemají responzivní mobilní web. Takže i když se polovina veškerého provozu na nákupech odehrává na mobilu, polovina maloobchodníků není na to nastavena. To znamená, že polovina nakupujících svírá a přibližuje a krouží svůj telefon, aby správně viděl web.

Dohodli jsme se, že mobilní web, který je citlivý a poutavý, je nezbytný. Ale to je jen začátek. Stejně jako web pro stolní počítače můžete svůj mobilní web vylepšit a optimalizovat, aby ještě více posílilo prodej. Zde je návod:

1. Jednoduchost

Práce s tak malou obrazovkou bude vždy složitá. Proto je vaším cílem číslo jedna jednoduchost. Pro weby elektronického obchodu je to obzvláště obtížné, protože je zde tolik obsahu, na který se dá tlačit. Jak propagujete všechny své produkty, aniž byste zaplňovali malý prostor na obrazovce?

Podívejte se, jak ETQ zobrazuje na svém mobilním webu řadu svých bot. Ve své jednoduchosti je krásná. Zanechali většinu prostoru obrazovky zcela volnou, aby se jejich produkty dostali do centra pozornosti. Dokonce i barevná paleta byla vybrána tak, aby odpovídala jeho sortimentu. Dává celému webu jednoduchý a soudržný pocit. Přestože je obrazovka malá, je prostorná.

2. Přemýšlejte o palci!

Zkuste smartphone teď držet. Pohybujte palcem po obrazovce a cítte, kde je to nejpohodlnější a nejpřirozenější. Velikost palce každého je jiná, ale obecně se tento obrázek vztahuje na většinu lidí:

palec sledování

S ohledem na to nechcete do horních sekcí vkládat žádná tlačítka ani základní komponenty. Nechte to pouze na záhlaví. Umístěte veškerý svůj posouvatelný obsah a tlačítka doprostřed, aby bylo snadné a pohodlné dosáhnout. (Nezapomeňte myslet na leváky! Překlopte výše uvedené obrázky, abyste zjistili, jak to funguje pro leváky).

3.… Zejména velké palce

Kromě palce „dosah“ byste také měli zvážit „velký palec“. Všichni jsme používali mobilní web, na kterém musíte kliknout na nejmenší odkaz. Je to obtížné a frustrující, že? Obecným pravidlem je zvolit větší prvky, než si myslíte.

Mobilní web společnosti Hobbycraft je dobrým příkladem. Za prvé, jejich velké obrazové odkazy dělají to super snadné pro velké palce. Podívejte se však na jejich ikony v horní části („obchody, účet, košík“). Jsou mnohem větší, než jste obvykle čekali. Hobbycraft přemýšlí o velkém palci, a tak byste měli.

4. Navigační menu Hamburger

Jedním z nejpopulárnějších trendů designu za posledních dvanáct měsíců je nabídka „hamburger“. Příklad můžete vidět na stránkách Hobbycraft výše. Jsou to tři řádky, které vypadají jako hamburger – klikněte na něj a rozbalí se celá nabídka navigace.

Pro tradiční navigaci v záhlaví není místo a jednoduše by to zapříčinilo obrazovku. Místo toho se rozhodněte pro rozšiřující se navigaci. Zde je rovnováha. Mělo by být uklizené a z cesty. Zároveň by však mělo být zřejmé a snadné klepnout.

Pokud máte v nabídce mnoho produktů a kategorií, můžete to usnadnit pomocí rozbalené nabídky. Nebojte se využít celý prostor na obrazovce. Podívejte se, jak Argos představuje jejich rozbalené menu níže.

IMG_3663

5. Vyberte velké písmo

Malá mobilní obrazovka nás nutí myslet dlouho a tvrdě na písmo, které používáme. Není zde prostor pro malá, složitá písma. Místo toho přemýšlejte jednoduše, směle a velkými. Obecně je písmo bezpatkové čistší a jednodušší (tj. Ariel je lepší než Times New Roman).

71950dee059b803c4a7caa30dce8f5bf

Mějte na paměti, že toto rozhodnutí vás také nutí pečlivěji si vybrat kopii a formulaci. Využijte této příležitosti ke zjednodušení a optimalizaci vaší kopie. Pokuste se sdělit svou zprávu co nejjasněji a jednoduše. Zkrátka. Mrsknout sebou. To nejen zlepší váš mobilní design, ale zlepší celý váš podnik.

6. Použijte „inteligentní vyhledávání“

Lidé nenávidí používání malých vyhledávacích formulářů na mobilním zařízení. Nutí nás přiblížit, kliknout na vyhledávací pole a psát pomocí fiddly klávesnice. Chyby jsou snadné a mohou vést ke frustraci.

Chcete-li zlepšit uživatelský dojem, použijte pole „inteligentní vyhledávání“. Když kliknete na pole, měl by se návrh automaticky znovu zaostřit, takže vyhledávací pole vyplní obrazovku. Poté se ujistěte, že má prediktivní vyhledávání, takže uživatel musí zadat pouze několik prvních písmen.

Můžete to vidět v akci na webových stránkách Europcar. Zákazník začne psát „Norw“ a web automaticky navrhne jeho různé pobočky v Norwichi. Jednoduchý.

IMG_4331

7. Zjednodušte své registrační a nákupní formuláře

Hodně mluvíme o tom, aby vaše registrace a nákupní formuláře byly co nejjednodušší a nejrychlejší. Je to klíčová součást vaší designové strategie UX. Je to také místo, kde weby elektronického obchodování ztratí až 60% konverzí díky komplikacím. Pokud proces zahájili, je zákazník již přesvědčen. Jediným způsobem, jak ztratíte prodej nebo registraci, je to, že věci příliš ztížíte.

Znovu se pokuste omezit množství potřebného psaní. Použijte pole prediktivního typu a povolte možnosti automatického vyplňování. Například pomocí posuvných nástrojů si uživatelé mohou vybrat například datum narození. Víme, že nákupní formuláře často vyžadují spravedlivé informace. Existuje však způsob, jak tento proces zjednodušit.

Podívejte se, jak Firebox používá číselný systém, aby ukázal uživatelům, jaké fáze v procesu zbývají. Klíčovým trikem designu UX je informovat uživatele o tom, kde jsou. Jako zákazníci chceme vědět, co můžeme očekávat, a Firebox to dělá odborně.

img_1292-blog-half

8. Maximální tři vrstvy

Je mnohem snazší se „ztratit“ na mobilním webu. V ideálním případě se chcete ujistit, že váš mobilní web je hluboký pouze tři vrstvy. Příklad toho, jak by to mohlo fungovat na módní stránce elektronického obchodu, je následující:

  1. Domovská stránka: Zákazník vybere „kategorii: dívky“
  2. Zákazník vybere „podkategorii: boty“
  3. Kliknutí zákazníků na stránku produktu.

To jsou tři jednoduché vrstvy objevu. Jedinou další možností by měla být nákupní stránka nebo registrace. Pokuste se vyhnout králičí díře podkategorií a dalších možností. Jako vždy, udržujte to jednoduché a dejte uživatelům vědět, kde jsou, za všech okolností.

9. Usnadněte návrat na domovskou stránku

Jakmile je zákazník hluboký ve třech vrstvách, vždy jim dejte odvážný a jednoduchý způsob návratu na domovskou stránku. Pamatujte si, že na mobilním webu se snadno cítíte ztraceni, takže uživatelům poskytněte snadný způsob „resetování“ a návratu na začátek.

Podívejte se na stránku produktu Lush. Pokud zde váš zákazník nějakým způsobem navigoval, možná bude chtít začít znovu. Velké logo „LUSH“ nahoře je snadným a zřejmým identifikátorem pro návrat domů. Bez ohledu na to, kde jste na webu, vždy máte tu kotvu, která vás dostane zpět na začátek.

img_1304-blog-half

10. Bez přiblížení!

Po dlouhou dobu byly mobilní weby jednoduše kopií designu jejich desktopů. Znamenalo to, že jste se museli přiblížit přiblížením obrazovky. Jedná se o nebezpečně zastaralý návrhový trend a je třeba se mu vyhnout. V ideálním případě by všechno mělo být úměrné obrazovce. Všechna písma by měla být čitelná bez přiblížení. Na všechny odkazy by mělo být možné kliknout bez přiskřípnutí.

Apple-Pinch-to-zoom

Je-li sevření užitečné, existuje pouze jedna výjimka: obrázky produktů. Pro zákazníky je stále velmi užitečné sevřít a přiblížit obrázky produktů. Chtějí mít možnost vidět každý malý detail, než si koupí.

11. Řešte problém „bezpečnosti“

Navzdory obrovskému množství provozu na mobilních webech s elektronickým obchodem stále existuje obecný problém, že nákup něčeho z mobilních stránek není tak bezpečný jako počítač. Samozřejmě neexistuje žádný rozdíl v zabezpečení mezi mobilním zařízením, tabletem a stolním počítačem. Ale a Studie 2013 ukazuje, že téměř polovina všech online nakupujících se cítí méně bezpečně, když něco kupují na chytrém telefonu. Tento strach pravděpodobně zabije vaše konverze.

Je to jednoduchá otázka důvěry. Je vaší prací, aby se zákazníci na vašem webu cítili bezpečněji. Vaše stránka elektronického obchodování by měla v ideálním případě již mít bezpečnostní certifikát SSL. Pokud tomu tak není, zakupte si je. To vám dává malý žlutý visací zámek na panelu nástrojů. Ujistěte se, že na svém mobilním webu zobrazujete visací zámek SSL co nejvýrazněji.

image18

Další možností je zajistit, aby si zákazníci mohli produkt uložit později nebo si ho zaslat e-mailem sobě. V některých případech se budou cítit bezpečně, když si ji koupí později na svém počítači.

12. Skládání obsahu

Pro mnoho lidí znamená vytvoření mobilního webu jednoduše vybrat téma „responzivního“ na WordPress nebo Shopify nebo kteroukoli platformu, kterou používáte. I když je to dobrý začátek, budete chtít věnovat zvýšenou pozornost tomu, jak téma automaticky zamíchá váš obsah. Nevíte, co tím myslím? Podívejte se na tento diagram níže:

15_contentStacking

Takto může responzivní motiv automaticky skládat váš obsah pro tablet (obrázek vlevo) nebo smartphone (obrázek vpravo). Pečlivě zvažte, jaké jsou vaše nejdůležitější části obsahu, a ujistěte se, že jsou správně naskládány. Například na pravé straně jsou produkty (box 5 – typy koupelí) vytlačovány dolů po obrazovce. Mohou být dokonce zasunuty pod „záhyb“.

Experimentujte s rozvržením a stohováním obsahu a ujistěte se, že se nejdůležitější obsah zobrazuje na správném místě.

13. Ztratit veškerý obsah Flash

Flash je relativně zastaralý formát na jakémkoli zařízení. (Ve skutečnosti jsou návrháři bojovat, aby to jednou provždy zabilo! Prohltne zdroje, je pomalý a je to hřiště pro hackery). I když je to špatná zpráva na webu pro počítače, je to ještě horší na smartphonu nebo tabletu.

Většina mobilních zařízení nebude flash média vůbec přehrávat. Takže pokud se na video nebo produktovou demonstraci spolehnete, zbavte se ho – vaši zákazníci ho nemohou vidět na mobilu. Apple ho před lety zablokoval a krátce poté ho následoval Android.

Alternativou je zajistit, aby váš web byl kompatibilní s HTML5 (více zde) a používat YouTube k hostování jakýchkoli videí.

14. Přijměte omezení!

Mnoho lidí, se kterými jsem hovořil, vyjádřilo frustrace z omezení mobilního webu. Jednoduchá skutečnost je taková: s tím nemůžete dělat nic! Místo toho přijměte tato omezení.

Nutí vás dělat důležitá rozhodnutí, která pomohou vašemu podnikání. Jak mohu zjednodušit svůj web? Jak mohu svůj názor vyjádřit méně slovy? Jak mohu být přesnější a přesvědčivější v menším prostoru? Na které z mých produktů bych měl upřednostnit?

Pevně ​​věřím, že zodpovězením těchto otázek bude vaše firma silnější. Kdykoli můžete svou nabídku destilovat, učiníte ji silnější. A to je důležité pro dobrý mobilní web.

15. Udělejte návrhová rozhodnutí pomocí Google Analytics

Potíž při navrhování pro mobily spočívá v tom, že existuje tolik zařízení, která je třeba zvážit. Optimalizujete rozvržení a design pro tablety iPad nebo Android? Optimalizujete pro iPhone 5 nebo iPhone 6? Nebo Samsung Galaxy?

Citlivý design znamená, že se bude formovat odlišným způsobem. Zde vám Google Analytics může pomoci. Nejnovější verze Analytics vám umožňuje zjistit, která mobilní zařízení přistupují k vašemu webu nejčastěji:

mobilní zařízení-analytics-tracking

V tomto případě jsou iPhony předním zařízením – na dlouhou cestu. Proto má smysl provádět všechny testy na iPhone. Při optimalizaci svého mobilního webu upřednostňujte nejlepší zařízení.

I když mobilní zařízení nyní dominují na online nákupním trhu, mobilní webové stránky jsou stále pozadu. Polovina největších maloobchodníků je považuje za dodatečnou myšlenku.

Provedením těchto vylepšení a změn můžete získat o krok napřed před konkurencí tím, že využijete tento obrovský tok provozu.

Rád bych slyšel, co jste udělali pro optimalizaci svého mobilního webu. Jaká vylepšení pro vás fungovala?

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map