Alam mo ba na 55% ng lahat ng trapiko ng e-commerce ay nasa isang mobile device na ngayon?

Tama iyon, higit sa kalahati ng lahat ng mga taong naghahanap sa mga site ng pamimili ay nasa kanilang telepono o tablet.

Gayunpaman, narito ang problema: 46% ng nangungunang 50 mga nagtitingi ay wala pa ring tumutugon na mobile site. Kaya, kahit na ang kalahati ng lahat ng trapiko sa pamimili ay nangyayari sa isang mobile, kalahati ng mga tagatingi ay hindi nakalagay para dito. Nangangahulugan ito ng kalahati ng mga mamimili ay pinching at pag-zoom at pag-twist ng kanilang telepono upang makita nang maayos ang isang website.

Kaya sumang-ayon kami, mahalaga ang isang tumutugon, nakakaengganyo sa mobile site. Ngunit iyon lang ang simula. Tulad ng isang desktop site, maaari kang mag-tweak at i-optimize ang iyong mobile site upang mapalakas nito ang mga benta kahit na higit pa. Narito kung paano:

1. pagiging simple

Ang pagtatrabaho sa tulad ng isang maliit na screen ay palaging magiging nakakalito. Iyon ang dahilan kung bakit ang pagiging simple ay ang iyong numero unong layunin. Para sa mga site ng e commerce ay mahirap lalo na, dahil napakaraming nilalaman na masikip. Paano mo isusulong ang lahat ng iyong mga produkto nang walang pag-tap sa maliit na puwang ng screen?

Tingnan kung paano ipinakita ng ETQ ang kanilang hanay ng mga sapatos sa kanilang mobile site. Maganda ito sa pagiging simple nito. Iniwan nila ang karamihan sa puwang ng screen na ganap na libre upang mabigyan ang kanilang mga center center na produkto. Kahit na ang paleta ng kulay ay pinili upang tumugma sa saklaw ng produkto nito. Binibigyan nito ang buong site ng isang simple, cohesive na pakiramdam. Kahit na maliit ang screen, naramdaman ng maluwag.

2. Pag-isipan ang hinlalaki!

Subukang hawakan ang iyong smartphone ngayon. Ilipat ang iyong hinlalaki sa paligid ng screen at pakiramdam kung saan ito ay pinaka komportable at natural. Ang laki ng hinlalaki ng lahat ay naiiba, ngunit sa pangkalahatan ang imaheng ito sa ibaba ay nalalapat sa karamihan ng mga tao:

thumb tracking

Sa isip nito, ayaw mong maglagay ng anumang mga pindutan o mahahalagang sangkap sa mga nangungunang mga seksyon. Iwanan lamang iyon para sa mga header. Ilagay ang lahat ng iyong mai-scroll na nilalaman at mga pindutan sa gitna upang madali at komportable na maabot. (Huwag kalimutan na mag-isip tungkol sa mga kaliwang hander! I-flip ang mga larawan sa itaas upang makita kung paano gumagana ang mga bagay para sa mga lefties).

3. … Lalo na ang malalaking hinlalaki

Bilang karagdagan sa ‘maabot’ na hinlalaki, dapat mo ring isaalang-alang ang ‘malaking thumb’. Gumagamit na kaming lahat ng isang mobile website kung saan kailangan mong mag-click sa pinakadulo na link. Mahirap at nakakabigo, di ba? Ang pangkalahatang panuntunan ay pumipili para sa mas malaking elemento kaysa sa inaakala mong kinakailangan.

Ang isang mobile site ng Hobbycraft ay isang magandang halimbawa. Una sa lahat, ang kanilang malaking mga link sa larawan ay ginagawang napakadali para sa malalaking mga hinlalaki. Ngunit tingnan ang kanilang mga icon sa buong tuktok (‘mga tindahan, account, basket’). Mas malaki sila kaysa sa karaniwang inaasahan mo. Ang hobbycraft ay iniisip ang malaking hinlalaki, at sa gayon dapat.

4. Mga menu ng pag-navigate sa Hamburger

Ang isa sa mga pinakatanyag na mga uso sa disenyo ng huling labindalawang buwan ay ang menu na ‘hamburger’. Maaari kang makakita ng isang halimbawa sa site ng Hobbycraft sa itaas. Ito ang tatlong linya na mukhang hamburger – mag-click dito, at ang buong menu ng nabigasyon ay lumalawak.

Walang silid para sa tradisyunal na pag-navigate ng header at naisasamutan lamang nito ang screen. Sa halip, pumili para sa isang lumalawak na nav. May isang mahusay na balanse na matatagpuan dito. Dapat itong malinis at wala sa paraan. Ngunit, sa parehong oras, dapat itong maging malinaw at madaling i-tap.

Kung marami kang mga produkto at kategorya na inaalok, gagamitin mo ang pinalawak na menu upang mas mapadali ito. Huwag matakot na gamitin ang buong puwang ng screen. Tingnan kung paano ipinakita ng Argos ang kanilang pinalawak na menu sa ibaba.

IMG_3663

5. Pumili ng isang malaking font

Pinipilit sa amin ng isang maliit na mobile screen na mag-isip ng mahaba at mahirap tungkol sa font na ginagamit namin. Walang silid para sa maliit, masalimuot na mga font. Sa halip, mag-isip ng simple, bold, at malaki. Sa pangkalahatan, ang isang sans-serif font ay mas malinis at mas simple (i.e. Ariel ay mas mahusay kaysa sa Times New Roman).

71950dee059b803c4a7caa30dce8f5bf

Tandaan, ang pagpapasyang ito ay pipilitin ka ring piliin ang iyong kopya at mag-salita nang mas mabuti. Gamitin ang pagkakataong ito upang gawing simple at i-optimize ang iyong kopya. Subukang iparating ang iyong mensahe nang malinaw at simpleng hangga’t maaari. Gawin itong maikli. Gawin itong masaya. Hindi lamang ito gagawing mas mahusay ang iyong disenyo ng mobile, gagawing mabuti ang iyong buong negosyo.

6. Gumamit ng ‘matalinong paghahanap’

Galit ang mga tao gamit ang maliliit na form sa paghahanap sa isang mobile device. Pinipilit itong mag-zoom in, mag-click sa kahon ng paghahanap, at mag-type gamit ang tapat na keyboard. Ang mga pagkakamali ay madali at maaari itong humantong sa pagkabigo.

Upang mapagbuti ang karanasan ng gumagamit, gumamit ng isang kahon ng ‘matalinong paghahanap’. Kapag na-click mo ang kahon, ang disenyo ay dapat awtomatikong mag-focus upang ang kahon ng paghahanap ay pinunan ang screen. Pagkatapos, tiyaking mayroon itong mahuhulaan na paghahanap, kaya ang gumagamit ay kailangan lamang ipasok ang unang ilang mga titik.

Maaari mong makita ito sa pagkilos sa website ng Europcar. Ang customer ay nagsisimula na i-type ang ‘Norw’, at awtomatikong iminumungkahi ng site ang iba’t ibang mga sanga ng Norwich. Simple.

IMG_4331

7. Pasimplehin ang iyong mga form sa pag-signup at pagbili

Marami kaming pinag-uusapan tungkol sa paggawa ng iyong mga form sa pag-signup at pagbili nang simple at mabilis hangga’t maaari. Ito ay isang pangunahing bahagi ng iyong diskarte sa disenyo ng UX. Ito rin ang lugar kung saan nawawala ang mga site ng e commerce hanggang sa 60% ng mga conversion sa pamamagitan ng higit na kumplikadong mga bagay. Kung sinimulan na nila ang proseso, kumbinsido na ang customer. Ang tanging paraan na mawawala ka sa pagbebenta o pag-signup ay sa pamamagitan ng paggawa ng mga bagay na napakahirap.

Muli, subukang limitahan ang halaga ng pag-type na kinakailangan. Gumamit ng mga mahuhulaan na uri ng kahon at paganahin ang mga pagpipilian sa auto-punan. Gumamit ng mga tool sa pag-scroll para sa mga gumagamit upang pumili ng mga pagpipilian sa kapanganakan ng kapanganakan, halimbawa. Alam namin na ang mga form sa pagbili ay madalas na nangangailangan ng isang makatarungang impormasyon. Gayunpaman, mayroong isang paraan upang gawing mas simple ang prosesong ito.

Tingnan kung paano gumagamit ng Firebox ang isang sistema ng numero upang ipakita sa mga gumagamit kung anong mga yugto ang naiwan sa proseso. Ang isang pangunahing trick ng disenyo ng UX ay ipaalam sa mga gumagamit kung nasaan sila. Bilang mga customer, nais naming malaman kung ano ang maaari nating asahan, at ang Firebox ay ginagawa ito nang dalubhasa.

img_1292-blog-kalahati

8. Tatlong maximum na layer

Madali itong ‘mawala’ sa isang mobile website. Sa isip, nais mong tiyakin na ang iyong mobile site ay tatlong malalim lamang na mga layer. Ang isang halimbawa kung paano ito maaaring gumana sa isang site ng e-commerce na fashion ay ang mga sumusunod:

  1. Homepage: Pinili ng customer ang ‘kategorya: batang babae’
  2. Pinili ng customer ang ‘sub-kategorya: sapatos’
  3. Mga pag-click sa customer sa pahina ng produkto.

Iyon ang tatlong simpleng mga layer ng pagtuklas. Ang tanging karagdagang pagpipilian ay ang pahina ng pagbili o pag-sign up. Subukan upang maiwasan ang isang butas ng kuneho ng mga sub-kategorya at karagdagang mga pagpipilian. Tulad ng dati, panatilihin itong simple, at ipaalam sa mga gumagamit kung nasaan sila sa lahat ng oras.

9. Gawing madaling bumalik sa home page

Kapag ang iyong customer ay tatlong malalim na layer, palaging bigyan sila ng isang naka-bold at simpleng paraan upang bumalik sa homepage. Tandaan, madaling pakiramdam na nawala sa isang mobile site, kaya bigyan ang mga gumagamit ng isang madaling paraan upang ‘i-reset’ at bumalik sa simula.

Tingnan ang pahina ng produkto ng Lush. Kung ang iyong customer ay kahit papaano ay naka-navigate dito, maaaring gusto nilang magsimulang muli. Ang malaking ‘LUSH’ logo sa tuktok ay isang madali at halatang identifier para sa pag-uwi sa bahay. Hindi mahalaga kung nasaan ka sa website, palaging mayroon kang angkla na makakabalik ka sa simula.

img_1304-blog-kalahati

10. Walang kurot-zoom!

Sa loob ng mahabang panahon, ang mga mobile site ay simpleng kopya ng kanilang disenyo ng desktop. Nangangahulugan ito na kailangan mong mag-zoom in sa pamamagitan ng pinching ang screen. Ito ay isang mapanganib na napapanahong mga takbo ng disenyo at dapat iwasan. Sa isip, ang lahat ay dapat na proporsyonal sa screen. Ang lahat ng mga font ay dapat mabasa nang walang pag-zoom in. Lahat ng mga link ay dapat na mai-click nang walang pinching.

Apple-Pinch-to-zoom

Mayroon lamang isang pagbubukod kapag ang pag-pin ay kapaki-pakinabang: mga larawan ng produkto. Napaka-kapaki-pakinabang pa rin para sa mga customer na i-kurot at mag-zoom sa mga larawan ng produkto. Nais nilang makita ang bawat maliit na detalye bago sila bumili.

11. Tugunan ang alalahanin ng ‘seguridad’

Sa kabila ng sobrang dami ng trapiko sa mga mobile e-commerce site, mayroon pa ring pangkalahatang pag-aalala na ang pagbili ng isang bagay mula sa isang mobile site ay hindi ‘ligtas’ bilang isang desktop. Siyempre, walang pagkakaiba sa seguridad mula sa mobile hanggang tablet hanggang desktop. Ngunit ang isang pag-aaral sa 2013 ay nagpapakita na halos kalahati ng lahat ng mga online na mamimili ay nakakaramdam ng hindi gaanong ligtas kapag bumili ng isang bagay sa isang smartphone. Ang takot na ito ay malamang na patayin ang iyong mga conversion.

Ito ay isang simpleng katanungan ng pagtitiwala. Tungkulin mo upang maging mas ligtas ang iyong mga customer sa iyong site. Ang iyong e-commerce site ay dapat na, perpektong, mayroon nang isang sertipiko ng seguridad ng SSL. Kung hindi, bumili ng isa. Ito ang nagbibigay sa iyo ng maliit na dilaw na padlock sa iyong toolbar. Sa iyong mobile site, siguraduhing ipinakita mo ang SSL padlock bilang promo na posible.

imahe18

Ang isa pang pagpipilian ay siguraduhin na ang iyong mga customer ay maaaring makatipid ng isang produkto sa ibang pagkakataon o i-email ito sa kanilang sarili. Sa ilang mga kaso, pakiramdam nila ay ligtas na bilhin ito mamaya kapag nasa kanilang desktop.

12. Pag-stack ng nilalaman

Para sa maraming tao, ang paglikha ng isang mobile site ay nangangahulugan lamang na pumili ng isang ‘tumutugon’ na tema sa WordPress o Shopify o alinman sa platform na iyong ginagamit. Habang magandang pagsisimula iyon, nais mong bigyang-pansin kung paano awtomatikong binabalot ng tema ang iyong nilalaman. Hindi sigurado kung ano ang ibig kong sabihin? Tingnan ang diagram na ito sa ibaba:

15_contentStacking

Ito ay kung paano maaaring awtomatikong mai-stack ng isang tumutugon na tema ang iyong nilalaman para sa isang tablet (kaliwang imahe) o isang smartphone (kanang imahe). Isaalang-alang nang mabuti kung ano ang iyong pinakamahalagang mga piraso ng nilalaman, at tiyakin na ang mga ito ay naka-stack nang tama. Halimbawa, sa kanang bahagi, ang mga produkto (kahon 5 – mga uri ng paliguan) ay pinilit na bumababa sa screen. Maaari pa silang itulak sa ibaba ng ‘fold’.

Eksperimento sa iyong layout at pag-stack ng nilalaman upang matiyak na lumilitaw ang iyong pinakamahalagang nilalaman sa tamang lugar.

13. Mawalan ng anumang nilalaman ng Flash

Ang Flash ay isang medyo lipas na format sa anumang aparato. (Sa katunayan, ang mga taga-disenyo ay nakikipaglaban upang patayin ito minsan at lahat! Nilamon nito ang mga mapagkukunan, mabagal ito, at ito ay isang palaruan para sa mga hacker). Habang hindi magandang balita iyon sa isang desktop site, mas masahol pa ito sa isang smartphone o tablet.

Karamihan sa mga mobile device ay hindi maglaro ng flash media. Kaya kung umaasa ka rito para sa isang demonstrasyon ng video o produkto, alisin ito – hindi ito makita ng iyong mga customer sa isang mobile. Hinarang ito ng Apple taon na ang nakalilipas, at ang Android ay sumunod sa suit sa ilang sandali.

Ang kahalili ay tinitiyak na ang iyong website ay katumbas ng HTML5 (malaman ang higit pa dito) at gamitin ang YouTube upang mag-host ng anumang mga video.

14. Yakapin ang mga limitasyon!

Maraming tao ang sinalita kong nagpahayag ng pagkabigo tungkol sa mga limitasyon ng isang mobile site. Ang simpleng katotohanan ay ito: wala kang magagawa tungkol dito! Sa halip, yakapin ang mga limitasyong ito.

Pinipilit ka nitong gumawa ng mga mahahalagang desisyon na makakatulong sa iyong buong negosyo. Paano ko gawing simple ang aking website? Paano ko malalaman ang aking punto sa mas kaunting mga salita? Paano ako magiging mas tumpak at makagambala sa isang mas maliit na puwang? Alin sa aking mga produkto ang dapat kong unahin?

Lubos akong naniniwala na ang pagsagot sa mga katanungang ito ay nagpapalakas sa iyong negosyo. Anumang oras na maaari mong paalisin ang iyong panukala, ginagawa mo itong mas malakas. At mahalaga iyon para sa isang mahusay na mobile site.

15. Gumawa ng mga desisyon sa disenyo gamit ang Google Analytics

Ang problema sa pagdidisenyo para sa mobile ay maraming mga aparato ang dapat isaalang-alang. Ina-optimize mo ba ang iyong layout at disenyo para sa mga iPad o Android tablet? Nag-optimize ka ba para sa iPhone 5 o iPhone 6? O ang Samsung Galaxy?

Ang isang tumutugon na disenyo ay nangangahulugang maghahulma ito sa ibang paraan sa bawat isa. Narito kung saan makakatulong ang Google Analytics sa iyo. Pinapayagan ka ng pinakabagong bersyon ng Analytics na makita kung aling mga mobile device ang madalas na mai-access sa iyong site:

mobile-device-analytics-pagsubaybay

Sa kasong ito, ang mga iPhone ay ang nangungunang aparato – sa pamamagitan ng isang mahabang paraan. Kaya makatuwiran na gawin ang lahat ng iyong pagsubok sa isang iPhone. Unahin ang nangungunang aparato kapag na-optimize mo ang iyong mobile site.

Kahit na ang mga aparatong mobile ay nangibabaw ngayon sa pamilihan sa online na pamilihan, ang mga mobile website ay pa rin sa likod. Sila ay itinuring bilang isang pag-iisip pagkatapos ng kalahati ng mga pinakamalaking tingi.

Sa pamamagitan ng paggawa ng mga pag-aayos at pagbabago, maaari kang makakuha ng isang hakbang nangunguna sa kumpetisyon sa pamamagitan ng pag-capitalize sa malaking daloy ng trapiko.

Gustung-gusto kong marinig ang iyong nagawa upang ma-optimize ang iyong mobile site. Ano ang nagawa para sa iyo?

Kim Martin
Kim Martin Administrator
Sorry! The Author has not filled his profile.
follow me