15 tip til mobil design til at øge salget af e-handel

Vidste du, at 55% af al e-handelstrafik er nu på en mobilenhed?


Det er rigtigt, mere end halvdelen af ​​alle mennesker, der kigger på shoppingsteder, er på deres telefon eller tablet.

Alligevel er her problemet: 46% af de 50 mest forhandlere har stadig ikke et responsivt mobilwebsted. Så selvom halvdelen af ​​al shoppingtrafik sker på en mobil, er halvdelen af ​​detailhandlerne ikke klar til det. Det betyder, at halvdelen af ​​kunderne klemmer og zoomer og vrider deres telefon for at se et websted korrekt.

Så vi er enige om, at et responsivt, engagerende mobilwebsted er vigtigt. Men det er bare starten. Som et desktop-site kan du finjustere og optimere dit mobilwebsted, så det øger salget yderligere. Sådan gør du:

1. Enkelhed

At arbejde med en sådan lille skærm vil altid være vanskeligt. Derfor er enkelhed dit nummer et mål. For e-handelswebsteder er det især vanskeligt, fordi der er så meget indhold at presse på. Hvordan promoverer du alle dine produkter uden rod på den lille skærmplads?

”Enkelhed”

Se på, hvordan ETQ viser deres sortiment af sko på deres mobile site. Det er smukt i sin enkelhed. De har overladt størstedelen af ​​skærmrummet helt fri for at give deres produkter centrum. Selv farvepaletten er valgt til at matche dets produktsortiment. Det giver hele websitet en enkel, sammenhængende fornemmelse. Selvom skærmen er lille, føles den rummelig.

2. Tænk over tommelfingeren!

Prøv at holde din smartphone nu. Flyt tommelfingeren rundt på skærmen og føl, hvor den er mest behagelig og naturlig. Alles tommelfingerstørrelse er forskellig, men generelt gælder dette billede nedenfor for de fleste mennesker:

thumb tracking

Med dette i tankerne, ønsker du ikke at placere nogen knapper eller væsentlige komponenter i de øverste sektioner. Lad det kun til overskrifter. Læg alt dit rulbare indhold og knapper i midten, så det er let og behageligt at nå. (Glem ikke at tænke på venstregangere! Vend billederne ovenfor for at se, hvordan ting fungerer til venstrebesiddere).

3.… Især de store tommelfingre

Ud over tommelfingeren ‘rækkevidde’, skal du også overveje den ‘store tommelfinger’. Vi har alle brugt et mobilwebsted, hvor du skal klikke på det mindste link. Det er vanskeligt og frustrerende, ikke? Den generelle regel er at vælge større elementer, end du synes er nødvendigt.

Hobbycraft’s mobile site er et godt eksempel. For det første gør deres store billedlink det super let for store tommelfingre. Men kig på deres ikoner på toppen (‘butikker, konto, kurv’). De er meget større, end du normalt kunne forvente. Hobbycraft tænker på den store tommelfinger, og det skal du også.

4. Hamburger navigationsmenuer

En af de mest populære designtrend i de sidste tolv måneder er menuen ‘hamburger’. Du kan se et eksempel på Hobbycrafts side ovenfor. Det er de tre linjer, der ligner en hamburger – klik på den, og den fulde navigationsmenu udvides.

Der er ikke plads til den traditionelle headernavigation, og det ville simpelthen rodet på skærmen. Vælg i stedet for en ekspanderende nav. Der er en fin balance her. Det skal være ryddig og ude af vejen. Men på samme tid skal det være indlysende og let at trykke på.

Hvis du har mange produkter og kategorier på tilbud, bruger du den udvidede menu for at gøre det lettere. Vær ikke bange for at bruge hele skærmrummet. Se hvordan Argos præsenterer deres udvidede menu nedenfor.

IMG_3663

5. Vælg en stor skrifttype

En lille mobilskærm tvinger os til at tænke længe og hårdt på den skrifttype, vi bruger. Der er ikke plads til små, indviklede skrifttyper. Tænk i stedet simpelt, fedt og stort. Generelt er en sans-serif-skrifttype renere og enklere (dvs. Ariel er bedre end Times New Roman).

71950dee059b803c4a7caa30dce8f5bf

Husk, at denne beslutning også tvinger dig til at vælge din kopi og ordlyd mere omhyggeligt. Brug denne mulighed til at forenkle og optimere din kopi. Prøv at formidle dit budskab så tydeligt og enkelt som muligt. Gør det kort. Gør det snappy. Dette vil ikke bare gøre dit mobildesign bedre, det vil gøre hele din virksomhed bedre.

6. Brug ‘smart search’

Folk hader at bruge små søgeformer på en mobilenhed. Det tvinger os til at zoome ind, klikke på søgefeltet og skrive med det uheldige tastatur. Fejl er let, og det kan føre til frustration.

For at forbedre brugeroplevelsen skal du bruge et ‘smart search’-felt. Når du klikker på boksen, skal designet automatisk fokusere igen, så søgefeltet udfylder skærmen. Kontroller derefter, at den har forudsigelig søgning, så brugeren kun behøver at indtaste de første par bogstaver.

Du kan se dette i handling på Europcars websted. Kunden begynder at skrive ‘Norw’, og webstedet foreslår automatisk sine forskellige Norwich-filialer. Enkel.

IMG_4331

7. Forenkle dine tilmeldings- og købsformularer

Vi snakker meget om at gøre dine tilmeldings- og indkøbsformer så enkle og hurtige som muligt. Det er en vigtig del af din UX-designstrategi. Det er også stedet, hvor e-handelswebsteder mister op til 60% af konverteringer ved at komplicere tingene for meget. Hvis de har startet processen, er kunden allerede overbevist. Den eneste måde, du mister salget eller tilmeldingen på, er ved at gøre tingene for vanskelige.

Igen, prøv at begrænse den nødvendige mængde indtastning. Brug bokse med forudsigelig type og aktiver muligheder for automatisk udfyldning. Brug rulningsværktøjer til at brugere kan vælge f.eks. Fødselsdato. Vi ved, at købsformularer ofte kræver en vis information. Der er dog en måde at gøre denne proces enklere.

Se på, hvordan Firebox bruger et talesystem til at vise brugerne, hvilke stadier der er tilbage i processen. Et vigtigt UX-designtrick er at lade brugerne vide, hvor de er. Som kunder kan vi gerne vide, hvad vi kan forvente, og Firebox gør dette ekspert.

img_1292-blog-halvt

8. Trelags maksimum

Det er meget lettere at ‘gå tabt’ på et mobilwebsted. Ideelt set vil du sikre dig, at dit mobilwebsted kun er tre lag dybt. Et eksempel på, hvordan dette kan fungere på et mode-e-handelswebsted, er som følger:

  1. Startside: Kunden vælger ‘kategori: piger’
  2. Kunden vælger ‘underkategori: sko’
  3. Kundeklik på produktsiden.

Det er tre enkle opdagelseslag. Den eneste yderligere mulighed skal være købssiden eller tilmelding. Prøv at undgå et kaninhul med underkategorier og flere muligheder. Som altid, hold det enkelt, og lad brugerne vide, hvor de er på alle tidspunkter.

9. Gør det nemt at vende tilbage til startsiden

Når din kunde er tre lag dybt, skal du altid give dem en dristig og enkel måde at vende tilbage til hjemmesiden på. Husk, at det er let at føle sig fortabt på et mobilwebsted, så giver brugerne en nem måde at ‘nulstille’ og gå tilbage til starten.

Se på Lushs produktside. Hvis din kunde på en eller anden måde har navigeret hit, kan de muligvis starte forfra. Det store ‘LUSH’-logo øverst er en let og indlysende identifikator til at vende hjem. Uanset hvor du er på webstedet, har du altid det anker, der får dig tilbage til starten.

img_1304-blog-halvt

10. Ingen knivzoom!

I lang tid var mobilwebsteder simpelthen en kopi af deres desktopdesign. Det betød, at du skulle zoome ind ved at klemme på skærmen. Dette er en farligt forældet designtrend og bør undgås. Ideelt set skal alt være proportionalt med skærmen. Alle skrifttyper skal kunne læses uden at zoome ind. Alle links skal være klikbare uden at klemme.

Apple-Pinch-til-zoom

Der er kun en undtagelse, når det er nyttigt at klemme: produktbilleder. Det er stadig meget nyttigt for kunder at klemme og zoome ind på produktbilleder. De vil være i stand til at se enhver lille detalje, før de køber.

11. Adresser bekymringen ‘sikkerhed’

På trods af den enorme mængde trafik til mobile e-handelswebsteder er der stadig en generel bekymring for, at det at købe noget fra et mobilwebsted ikke er så ‘sikkert’ som et skrivebord. Der er naturligvis ingen forskel i sikkerhed fra mobil til tablet til desktop. Men a 2013-undersøgelse viser, at næsten halvdelen af ​​alle online-shoppere føler sig mindre sikre, når de køber noget på en smartphone. Denne frygt dræber sandsynligvis dine konverteringer.

Det er et simpelt spørgsmål om tillid. Det er dit job at få kunderne til at føle sig mere sikre på dit websted. Dit e-handelswebsted skal ideelt set have et SSL-sikkerhedscertifikat allerede. Hvis det ikke gør det, skal du købe en. Det er hvad der giver dig den lille gule hængelås på din værktøjslinje. Sørg for, at du viser SSL-hængelås så tydeligt som muligt på dit mobilwebsted.

image18

En anden mulighed er at sikre, at dine kunder kan gemme et produkt til senere eller e-maile det til sig selv. I nogle tilfælde vil de føle sig sikre på at købe det senere på deres desktop.

12. Stabling af indhold

For mange mennesker betyder at oprette et mobilwebsted simpelthen vælge at vælge et ‘responsivt’ tema på WordPress eller Shopify eller hvilken platform du også bruger. Selvom det er en god start, vil du være opmærksom på, hvordan temaet automatisk blander dit indhold rundt. Ikke sikker på, hvad jeg mener? Se på dette diagram nedenfor:

15_contentStacking

Sådan kan et responsivt tema automatisk stable dit indhold til en tablet (venstre billede) eller en smartphone (højre billede). Overvej nøje, hvad dine vigtigste indholdsstoffer er, og sørg for, at de er stablet korrekt. For eksempel på højre side tvinges produkterne (boks 5 – typer af bade) langt ned på skærmen. De kan endda blive skubbet under ‘fold’.

Eksperimenter med dit layout og indholdstakning for at sikre dig, at dit vigtigste indhold vises på det rigtige sted.

13. Tab ethvert Flash-indhold

Flash er et relativt forældet format på enhver enhed. (Faktisk er designere det kæmper for at dræbe det en gang for alle! Det sluger ressourcer, det er langsomt, og det er en legeplads for hackere). Selvom det er dårlige nyheder på et desktopwebsted, er det endnu værre på en smartphone eller tablet.

De fleste mobile enheder afspiller slet ikke flashmedier. Så hvis du stoler på det til en video- eller produktdemonstration, skal du slippe af med det – dine kunder kan ikke se det på en mobil. Apple blokerede det for år siden, og Android fulgte efter kort efter.

Alternativet er at sikre, at dit websted er HTML5-kompatibelt (Find ud af mere her) og brug YouTube til at være vært for alle videoer.

14. Omfatte begrænsningerne!

Mange mennesker, jeg har talt med, har udtrykt frustration over begrænsningerne på et mobilwebsted. Den enkle kendsgerning er dette: der er intet, du kan gøre ved det! Omfatte i stedet disse begrænsninger.

Det tvinger dig til at tage vigtige beslutninger, der hjælper hele din forretning. Hvordan kan jeg forenkle mit websted? Hvordan kan jeg få min mening på tværs af færre ord? Hvordan kan jeg være mere præcis og overbevisende i et mindre rum? Hvilke af mine produkter skal jeg prioritere?

Jeg er overbevist om, at besvarelsen af ​​disse spørgsmål gør din virksomhed stærkere. Hver gang du kan destillere dit forslag, gør du det mere magtfuldt. Og det er vigtigt for et godt mobilwebsted.

15. Foretag designbeslutninger ved hjælp af Google Analytics

Problemet med at designe til mobil er, at der er så mange enheder at overveje. Optimerer du dit layout og design til iPad- eller Android-tablets? Optimerer du til iPhone 5 eller iPhone 6? Eller Samsung Galaxy?

Et responsivt design betyder, at det vil forme på en anden måde end hver. Her kan Google Analytics hjælpe dig. Den seneste version af Analytics giver dig mulighed for at se, hvilke mobile enheder der ofte får adgang til dit websted:

mobile-enheder-analytics-sporing

I dette tilfælde er iPhones den førende enhed – langtfra. Så det giver mening at udføre al din testning på en iPhone. Prioriter den øverste enhed, når du optimerer dit mobilwebsted.

Selvom mobile enheder nu dominerer markedet for online shopping, er mobile websteder stadig langt bagefter. De bliver behandlet som en eftertanke af halvdelen af ​​de største forhandlere.

Ved at foretage disse justeringer og ændringer, kan du komme et skridt foran konkurrencen ved at udnytte denne enorme strøm af trafik.

Jeg ville meget gerne høre, hvad du har gjort for at optimere dit mobilwebsted. Hvilke finjusteringer har fungeret for dig?

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