Ako preniesť web WooCommerce do mobilu

Aj keď by som rád predpokladal, že všetky stránky elektronického obchodu uvažujú o svojich skúsenostiach s nakupovaním cez mobil, moje nakupovanie dokazuje opak. Ako spotrebiteľa ma pravidelne vítajú zlé skúsenosti s nákupom cez mobil, ktoré ma frustrujú. Od stránok, ktoré sa načítavajú večnosť, až po stránky, kde mám pocit, že nemôžem nájsť produkty, ktoré hľadám. Mobilný elektronický obchod (tiež nazývaný mCommerce alebo M-Commerce) siaha od vynikajúceho až po tak frustrujúce hádzanie vášho zariadenia ako najlepšia možnosť na ukončenie vášho nakupovania.

Dnes sa pozrieme na to, prečo musíte brať svoj mobilný proces elektronického obchodu vážne. Potom sa pozrieme na osvedčené postupy na vytváranie dobrého mobilného prostredia.

Prečo je mobilný elektronický obchod dôležitý?

Nie je to tak dávno, čo bolo pekné mať mobilné weby, no nevyžadovalo sa to ako súčasť webovej prezentácie. V súčasnosti používanie mobilných zariadení zatemňuje používanie webu na počítači.

Zdroj

Pridajte k tomu obrovský nárast mCommerce zo strany používateľov. V roku 2018 sa približne 40 % nákupov uskutočnilo prostredníctvom mobilných zariadení[^1]. Kybernetický pondelok zaznamenal nárast návštevnosti na 54 %. Napriek tomuto nárastu konverzie pre mobilné zariadenia často výrazne zaostávajú za konverziami pri nákupe v počítači. Často je to preto, že vlastníci stránok neberú do úvahy potreby mobilných používateľov.

Pokiaľ ide o prehliadanie vašich stránok, mobilný používateľ môže stráviť prehliadaním 4 minúty, zatiaľ čo používateľ počítača je ochotný venovať nám 5 minút.[^2]. 40 % používateľov mobilných zariadení tvrdí, že opustia stránku, ak nie je vhodná pre mobilné zariadenia[^3] a to prevyšuje lojalitu k vášmu obchodu. 14 % nakupujúcich tvrdí, že je im jedno, či uprednostňujú vašu značku, zlý dojem z mobilných zariadení ich prinúti pozerať sa na vašu konkurenciu[^4].

Stále ma mätie, prečo majitelia obchodov vynakladajú tak málo úsilia na to, aby poskytli dobrý zážitok z nakupovania 40 % svojich používateľov. Nikdy by sa im ani nesnívalo o tom, že 40 % ľudí, ktorí vstúpia do ich obchodu, bude mať zaviazané oči, vďaka čomu bude všetko ťažšie nájsť, no míňať peniaze na optimalizáciu pre svojich mobilných zákazníkov je pre nich príliš veľa.

Keď nie ste ochotní tráviť čas optimalizáciou svojho mobilného nakupovania, hovoríte 40 % svojich online zákazníkov, že nestoja za vašu námahu. Na oplátku budú nakupovať u vašich konkurentov.

mCommerce osvedčené postupy

Teraz, keď by sme sa mali všetci zhodnúť na tom, že poskytovanie služieb mobilným zákazníkom je kľúčom k skvelému zážitku s elektronickým obchodom, pozrime sa na niektoré z osvedčených postupov, na ktoré sa musíte zamerať pri vytváraní tohto ideálneho zážitku.

Ak máte existujúcu stránku, jedným z najlepších spôsobov, ako nájsť nízko visiace ovocie, je použiť online testovacie nástroje, ako napr Testovacia súprava pre mobilné zariadenia od spoločnosti Google. Spustite tieto testy na svojom webe a potom použite výsledky na identifikáciu najväčších problémov. Pravidelne rozpočítajte, aby ste tieto problémy vyriešili, aby ste svojim používateľom poskytli lepší dojem.

Čítať:  Ako vypnúť zvuk fotoaparátu v aplikácii Snapchat

Mobilný prvý dizajn

Jedným z najväčších trendov, ktoré sa objavili za posledné roky vo vývoji webových aplikácií, je dizajn zameraný na mobilné zariadenia. Toto je miesto, kde začnete s odrezanou mobilnou verziou svojho webu a potom pridáte verzie pre tablety a počítače. Aj keď to robíte, stojí za to spýtať sa, či vaša mobilná stránka nepotrebovala veľké vyskakovacie okno pre váš zoznam e-mailov, prečo vaša stránka pre počítače. Z dokumentácie spoločnosti Google vieme, že pridanie kontextového okna pokrývajúceho mobilný obsah považuje za a znamenie, že by nemali hodnotiť vašu stránku tak vysoko. Tým, že ste ho nezahrnuli na svoj mobilný web, ste povedali, že to nie je také dôležité ako iné akcie, ktoré môžu používatelia vykonávať. Prečo nadobudol význam pre používateľov stolných počítačov alebo tabletov? Je pravdepodobné, že tento obsah je rovnaký ako na pracovnej ploche a mal by zostať odrezaný od týchto skúseností.

Dobre vykonaný príklad žiadosti o zoznam e-mailov si môžete pozrieť nižšie na adrese Stránka Twin Six. Všimnite si malý zelený pruh v spodnej časti, ktorý vám pri nakupovaní neprekáža, ale očividne posúva zoznam ich e-mailov.

Ďalším kľúčom k dizajnu mCommerce je objasniť vaše cesty k nákupu. To znamená, že cieľom je dostať používateľa k produktu, ktorý hľadá, v 3 akciách. Potom od nájdenia ich produktu vytvorte jasnú cestu k nákupu produktu bez toho, aby ste sa museli pohybovať po položkách alebo iných veciach, ktoré bránia nákupu.

Pri každej výzve na akciu na vašom webe musíte vziať do úvahy váš trh a ktoré zariadenia používajú a kam sa na vašom webe môžu dostať. Ak viete, že mobilné zariadenia sú na vašom webe veľké a že predávate predovšetkým ženám, ktoré majú často menšie ruky, potom je dôležité, aby sa všetky tlačidlá nachádzali v ich dosahu, aby sa vaše stránky ľahko používali.

Ktorý spôsob je pre používateľov najjednoduchší pri interakcii s obrázkami vašich produktov potiahnutím prstom? Koľko obsahu sa zobrazuje na obrazovke niekoľkých vašich najlepších mobilných zariadení? Všetky tieto veci by ste mali vziať do úvahy pri vytváraní svojej stránky mCommerce.

Stránky produktov

Pokiaľ ide o produktové stránky, musíte sa zamyslieť nad tým, aký typ informácií budú používatelia hľadať. Jedna tretina nákupných rozhodnutí zahŕňa informácie z mnohých stránok, ktoré už boli zhromaždené prostredníctvom mobilného zariadenia[^5]. Zdôrazňuje vaša produktová stránka tie isté informácie, ktoré zhromaždili používatelia?

S malou obrazovkou môže byť pre používateľa ťažké vidieť presne to, na čo sa pozerá. Vysokokvalitné obrázky zo všetkých uhlov môžu používateľom pomôcť pozrieť sa na každý aspekt produktu, ktorý ich zaujíma. Vysokokvalitné obrázky sa dnes dajú ľahko získať. S trochou premýšľania o osvetlení telefónu, ktorý máte vo vrecku, ľahko vytvára vynikajúce obrázky. Ak je to mimo dosahu, najmite si miestneho fotografa alebo si s ním dohodnite obchod. Moja kamarátka fotí menu pre niekoľko miestnych reštaurácií a keď je tam, dostane jedlo zadarmo pre ňu a jej párty. Vďaka jej obchodu s fotografiou som si užil niekoľko úžasných jedál.

Čítať:  Šesť vecí, ktoré musíte urobiť, aby ste optimalizovali WordPress pre Rich Media

Zatiaľ čo niektoré stránky môžu vytvárať slušné obrázky svojich produktov, potom spadnú na mobilnú navigáciu týchto obrázkov. Uistite sa, že používatelia môžu priblížiť obrázky stiahnutím prstov alebo dvojitým klepnutím. Uistite sa, že gestá potiahnutia fungujú podľa očakávania. Frustrovaní používatelia zamieria k vášmu konkurentovi.

Tiež sa oplatí pozrieť si video ukážky produktu. Môže používateľ vidieť veľkosť produktu v rukách niekoho? Vidia, koľko portov je na počítači, ktorý si chcú kúpiť, alebo koľko miesta je vo vnútri skrinky? Tento typ obsahu môžete použiť na zatraktívnenie svojej stránky pre používateľov a dokonca ju môžete umiestniť na YouTube, aby ste zvýšili predaj.

Nakoniec, keď príde na tlačidlo nákupu, dajte to najavo. Malo by sa dať ľahko nájsť a malo by mať farbu, ktorá ho odlišuje od zvyšku dizajnu vašej lokality. Mal by byť v dosahu vašich používateľov na ich zariadeniach bez toho, aby si museli upravovať úchop, ktorý majú na svojich mobilných telefónoch.

Košík

Keď máte v košíku používateľa s produktmi, ste bližšie k nákupu, ale to neznamená, že predaj je zaručený. Jedna vec, ktorú mnohé stránky robia zle, je, že je ťažké upraviť ich košík. Mnoho používateľov pridá do košíka množstvo produktov a potom sa pri pokladni rozhodne, ktoré z nich si kúpia. Pre používateľov by malo byť jednoduché odstrániť položky z košíka a získate bonusové body za to, že používateľom uľahčíte pridávanie produktov do zoznamu želaní.

Keď navštívim Cotton Bureau Prezerám si a pridávam do košíka všetky tričká, ktoré ma zaujímajú. Potom sa pozriem na stovky dolárov, ktoré bude nákup stáť, a znížim to, čo kupujem, aby som splnil rozpočet, ktorý mám. Jediné miesto, ktoré vyčítam Cotton Bureau, je to, že mi nedovolia prejsť košele, ktoré som sa rozhodol nekúpiť, do zoznamu želaní, aby som si ich mohol pozrieť a kúpiť si ich neskôr.

Jednej veci sa treba podľa Nielson Group, je obávané tlačidlo „Aktualizovať“. Nenúťte svojich používateľov aktualizovať košík, aby sa zmeny prejavili v súčtoch. Bohužiaľ, predvolený košík WooCommerce obsahuje toto tlačidlo aktualizácie, ale môžete ho použiť Automatická aktualizácia košíka pre WooCommerce na jeho odstránenie a zlepšenie skúseností vašich používateľov.

Mali by ste tiež využiť funkcie špecifické pre zariadenie, ako napr Ruky preč čo umožňuje používateľom iOS, iPadOS a macOS pokračovať tam, kde v reláciách prehliadača skončili. Ak sú zakódované správne, môžete to využiť a odoslať produkty v košíku používateľa do jeho iných zariadení.

Odhlásiť sa

Pokiaľ ide o platbu, jednou z prvých vecí, ktoré musíte urobiť, je uistiť sa, že používateľ je nie potrebné na vytvorenie účtu pri pokladni. Aj keď máte členskú stránku, ktorá vyžaduje účet, najskôr si zabezpečte nákup. Keď používateľ zakúpi, môžete mu poskytnúť pokyny na nastavenie jeho účtu. S WooCommerce, pokiaľ používajú rovnaký e-mail, všetky nákupy, ktoré používateľ uskutočnil, sa zobrazia v jeho účte, keď si ho vytvorí.

Čítať:  Čo je chyba 502 Bad Gateway a ako ju opraviť

Pri pokladni je vždy potrebné vyplniť množstvo informácií, tak si to čo najviac zjednodušte. To znamená, že musíte správne označiť svoje pokladničné polia, aby sa používateľom poskytla správna klávesnica. Ak požadujete telefónne číslo, mali by na svojich zariadeniach vidieť numerickú klávesnicu.

Tiež stojí za to využiť všetky možnosti, ktoré môžete používateľom pomôcť vyplnením informácií. Nepýtajte sa na krajinu, v ktorej sa nachádzajú, môžete to zistiť pomocou svojej stránky a vyplniť ju za nich. Ak pred informáciami o meste a štáte požiadate o PSČ alebo PSČ, môžete vyplniť mesto a štát bez toho, aby nad nimi váš používateľ trávil čas.

Ak nemôžete automaticky vyplniť informácie o ich stave, uistite sa, že ich neuvádzate v rozbaľovacej ponuke bez akéhokoľvek vyhľadávania. Obrovské rozbaľovacie zoznamy sú hrozné na prezeranie na mobilných zariadeniach. Prinajmenšom nechajte používateľa vyhľadať svoj štát/provinciu/krajinu v rozbaľovacej ponuke, aby ste mu ušetrili čas a frustráciu.

Väčšina mobilných zariadení má nejaké zariadenie na automatické vypĺňanie polí formulára, uistite sa, že váš proces platby funguje s týmito systémami. Mali by ste si tiež nájsť čas na to, aby ste sa uistili, že všetky polia pre heslo alebo používateľské meno na vašej lokalite budú fungovať so systémami správy hesiel zabudovanými do zariadení.

Pokiaľ ide o súhrny objednávok na stránke pokladne, uistite sa, že ste svojim používateľom predložili všetky poplatky. Ak ste získali PSČ, použite ho na odhadnutie dopravy a daní namiesto toho, aby ste ním v neskoršom kroku prekvapovali používateľov. Ak je to možné, zobrazte používateľom celkovú objednávku a výzvu na akciu, ktorá dokončí nákup, na jednej obrazovke ich zariadenia.

Pri možnostiach platby sa uistite, že viete, v ktorých regiónoch predávate a aké sú preferované spôsoby platby. Aj keď by ste mali ponúkať možnosti platby, ktoré vaši používatelia požadujú, nezahlcujte ich všetkými možnosťami platby, ktoré by ste mohli pridať na svoje stránky. Pozrite sa na pridanie Apple Pay, Google Pay a potom možno spracovanie vašej kreditnej karty. Neváhajte a vyskúšajte, či pridanie PayPal One-Touch alebo iných platobných brán zvýši alebo zníži váš predaj, ale neponúkajte im množstvo možností.

Ak ponúkate svoje spracovanie, uistite sa, že váš web funguje so vstavanými systémami na plnenie kariet. Na zariadeniach so systémom iOS môžete otvoriť fotoaparát a ukázať kreditnú kartu, aby ste vyplnili platobné polia. To môže viesť k tomu, že používateľ nebude frustrovaný vypĺňaním množstva ďalších informácií.

Teraz, keď sme sa pozreli na celý proces nákupu, poďme sa pozrieť na niekoľko ďalších oblastí, ktoré musíte optimalizovať, aby ste dosiahli ideálny zážitok z mCommerce.

Stavať pre rýchlosť

Mnoho krajín nemá rýchlu mobilnú šírku pásma, takže sa musíte uistiť, že máte obmedzenú šírku pásma a zobrazujete len obsah, ktorý MUSÍTE zobraziť, aby ste získali predaj. Čakanie prevyšuje lojalitu webu, pretože 14 % nakupujúcich tvrdí, že ak budú musieť čakať príliš dlho, prejdú na inú stránku. To znamená, že musíte na svojom webe spustiť testy rýchlosti a odstrániť všetky interakcie alebo kód, ktorý používateľovi bráni pri nákupe.

Čítať:  Výhody používania siete na doručovanie obsahu s WordPress a Magento

Optimalizovať obrázky

Aj keď som povedal vyššie, že by ste mali mať obrázky vysokej kvality, je tu bod, kedy sú vaše obrázky príliš veľké pre web. Dobrým pravidlom je, že obrázky by mali byť menšie ako 1 MB, teda oveľa menej. Dá sa to dosiahnuť optimalizáciou obrázkov a zmenšením ich celkových rozmerov.

Nástroje ako Kraken mať pluginy pre WordPress, ktoré sa o to postarajú za vás pri nahrávaní obrázkov. Pre veľké stránky, ktoré majú nedostatočne optimalizované obrázky, môžete použiť nástroje príkazového riadku, ako napr jpegoptim alebo pngcrush optimalizovať priečinky obrázkov rekurzívne. Začiatkom roka 2020 som použil jpegoptim a pngcrush, aby som sa s mojimi klientmi zaoberal viac ako 50 000 obrázkami vytvorenými za viac ako 10 rokov. Mesačne sme ušetrili 20 GB miesta na disku a obrovské množstvo šírky pásma.

Minifikujte CSS, JS, HTML a vyrovnávaciu pamäť

Okrem kompresie obrázkov by ste sa mali pozrieť aj na minimalizáciu CSS JavaScript a HTML. Jedným z mojich obľúbených nástrojov na to je WP raketa. Zistil som, že to neustále poskytuje obrovské vylepšenia rýchlosti na klientskych stránkach bez veľkého množstva času stráveného konfiguráciou doplnku.

Ak chcete použiť WP Rocket s naším Hostinger CDN, máme pokyny v našej dokumentácii.

Sledovanie a zdieľanie strihov

Ďalším miestom na jednoduchú optimalizáciu vašich stránok sú skripty sledovania a zdieľania, ktoré používate. Áno, potrebujete nejakú analýzu, aby ste videli, čo vaši používatelia robia, a aby ste uprednostnili, ktoré zariadenia potrebujú optimalizáciu, ale nepotrebujete 5 sledovacích skriptov a 3 skripty zdieľania na sociálnych sieťach načítaných na každej stránke.

Pre väčšinu stránok sú tlačidlá zdieľania na sociálnych sieťach obrovskou pustinou, ktorá ukazuje, že nikto nezdieľa váš obsah. Čo je však horšie, pre používateľov mobilných zariadení často zakrývajú časti obsahu, čo spôsobuje, že mobilný zážitok je hrozný. Opustil som veľa stránok, pretože ich sociálne tlačidlá spôsobujú, že obsah, ktorý som chcel konzumovať, je nečitateľný.

Zredukujte všetko, čo nepotrebujete, aby stránka fungovala a poskytovala používateľom lepší zážitok.

Pokračujte v rafinácii

Aj keď si prejdete všetky vyššie uvedené návrhy a vylepšíte svoju stránku, budete musieť neustále zlepšovať svoje skúsenosti s mCommerce. V októbri 2020 spoločnosť Apple vydala iPadOS 14, ktorý pridal Podpora čmáraníc pre Apple Pencil. Áno, väčšina stránok by s tým mala fungovať bez akýchkoľvek zmien, ale otestovali ste to, aby ste sa uistili?

Uistenie sa, že váš web je optimalizovaný pre mobilných používateľov, je neustála úloha, rovnako ako optimalizácia vášho webu pre používateľov počítačov. Pri každej zmene, ktorú vykonáte, sa pokúste vykonať A/B testovanie, aby ste robili rozhodnutia, ktoré zlepšujú používateľskú skúsenosť a konverzie stránok. Zároveň dbajte na to, aby ste neoptimalizovali len pre mobily a nepriniesli tak používateľom s inými zariadeniami horší zážitok.

V konečnom dôsledku nie je používanie mobilných zariadení módnou záležitosťou. Je tu, aby zostal a niečo, čo budete potrebovať, aby ste si boli istí, že s tým budete počítať, ak chcete pokračovať v predaji svojim zákazníkom.

Nové Publikácie:

ODPORÚČANIE