Mobile e-handel: Webstedsdesign og -planlægning

Siden kontinuerlige forbedringer af mobiltelefon- og tabletteknologier, har udfordringer designeren af ​​et e-handelswebsted ændrer sig konstant. Selvom teknologiske fremskridt inden for dette domæne er populært hos forbrugeren og konstant giver virksomhedsejere nye muligheder for at nå kunder i stadig mere varierede scenarier og placeringer, skaber det helt sikkert nogle besvær for designere og udviklere. Der er flere grundlæggende principper, der skal tages i betragtning, når vi designer til mobil, og i denne artikel vil vi diskutere og gennemgå dem.

Analyse af kundeadfærd

Kundeadfærd på mobiler med hensyn til e-handelswebsteder ligner den almindelige browservirksomhed, men med små særpræg vil vi diskutere nu. Der forventes at være i stand til at få adgang til de samme steder, men på en sådan måde, der er passende forenklet for den mindre skærm.

Forbrugernes købsadfærd på mobile enheder adskiller sig markant fra det, der ses ved større, statiske enheder. Det antages, at tablet-shoppere mere sandsynligt foretager et køb som smartphone-shoppere, hvilket demonstrerer den måde, hvorpå det bestemte brugte værktøj påvirker brugerens aktivitet.

Mobilenheder er små og har ringe ejendom på skærmen, så det er vigtigt at omfatte denne begrænsning i stedet for at bekæmpe dem. Ofte forstyrrer applikationer det lille rum med så mange ting, som de tror, ​​en bruger kan have brug for, men det mener, at det er kontraproduktivt. De bedste shoppingoplevelser kan betragtes som dem, der er lette, hvor fokus er på produktet, og de resterende oplysninger fungerer som understøttende indhold i stedet for at kæmpe for brugerens opmærksomhed.

Brug det rigtige fundament

Det er vigtigt at have det rigtige fundament for dine websteder, især når du analyserer dens mobile opførsel. Der er flere rammer at vælge imellem, og jeg er så positiv til dem, fordi de leveres med HTML, CSS og JS til adskillige anvendelser, hvilket giver forskellige interfaceelementer, herunder knapgrupper, knapdowndowns, miniaturebilleder, alarmer, statuslinjer og meget mere. De tilbyder også nogle gode råd om montering af det hele sammen med nogle foreslåede skabeloner. Dette hjælper dig med at gøre dit websted unikt, men med fordelen af ​​den indledende vejledning og den platform, der leveres af rammen.

Brug af en sådan ramme hjælper med et andet vigtigt aspekt af e-handel til mobil, som er optimering. Værktøjer leveret af Shopify kan hjælpe med at bruge CSS i stedet for billeder, hvor det er muligt, hvilket hjælper med ydeevneoptimering og giver en stabil platform for forekommende og fremtidig salg. Hvis der er behov for en gradient, skal du bruge CSS snarere end en billedskive. Alle billeder kan optimeres ved at sikre, at filstørrelsen er så lille som muligt uden at kompromittere kvalitet unødigt. Javascript- og CSS-filer vil blive minimeret og vigtigst af alt sikre, at uønskede Javascript-filer ikke bliver indkaldt, når de indlæses på en mobilenhed. Alle disse funktioner drager fordel af webstedets ydelse og forbedrer oplevelsen for mobilbrugere.

Prioriter indholdet

Hvis vi taler om et responsivt websted, er det vigtigt at sikre, at de vigtigste funktioner overføres, og indholdet på mobilwebstedet prioriteres for brugervenlighed og forbedret brugervenlighed. Blandt de funktioner, der skal inkluderes i et "prioriteret indhold" mobilmiljø, kunne vi nominere:

  • En søgefelt tilgængelig på hver side
  • Link til kontoindstillinger og kasseside
  • Nem adgang til alle kategorier på stedet
  • Billeder i fuld bredde til indholdscentrisk oplevelse

Beslutning om hvilke elementer der er relevante for både desktop og mobil er en vigtig del af processen. Tricket er at prioritere ved at forstå vigtigheden af ​​hver og sikre, at funktionerne fungerer lige så godt for mobile seere som desktop-seere. Tommelfingerreglen for dette er ideen om altid at holde fokus på indholdet og prioritere det.

Brug enkle grænseflader

E-handel responsivt design

Clutter er din fjende nummer én, og derfor er ideen hovedsagelig at stole på enkle, uklare, men alligevel brugbare grænseflader og design. Mobil shoppingoplevelser er bedst, når der kun fokuseres på produkterne. Lad brugeren nemt gennemse dine produkter ved at slippe af med unødvendige widgets som ekstra bannere eller unødvendige internetsider.

Vejledningen er et websted, der viser store fotos og feeds fyldt med produkter. At holde browsing let og enkelt og rulle med rodfri grænseflader er det, der giver slutbrugeren mulighed for at holde fokus på den faktiske shopping gennem det tiltalende, men funktionelle design, der leveres ham.

Amazon gør brug af en fantastisk mobil grænseflade, der ser virkelig enkel ud, men som overhovedet ikke føles billig. En masse hvidafstand og varme farver skaber en smuk farvepalet, der glæder øjnene og gavner grænsefladerne meget. Ligegyldigt hvor mange widgets der er, ville ordet, der ville beskrive denne grænseflade, stadig være enkelhed på grund af ensartetheden i den måde grafikken interagerer med hinanden.

Brug kvalitetsgrafik og -billeder

Professionelle fotos fra e-handel

Mobile enheder, især telefoner, har relativt små skærme. Produktbilleder bør ikke være endnu mindre; produkterne skal ses detaljeret, det er derfor, du gerne vil bruge så mange billeder på fuld skærm som muligt. Hvis fotos er pixelerede eller små, vil det irritere kunderne og påvirke shoppingadfærden. Shopping på en mobilenhed er vanskelig nok, som det er. Brugeroplevelse består af flere kendsgerninger, og selvom billedkvalitet ikke er en del af den, tilføjer den helt sikkert troværdigheden og virker undertiden på slutbrugerens impulser, som bestemt udgør begrebet brugeroplevelse, som vi ser frem til forbedring på vores mobile websteder.

Har en effektiv checkout-proces

Da checkout-processen kræver adskillige tekstfelter, kan dette være en af ​​de sværeste dele af et e-handelswebsted for at komme rigtigt, men med udfordringen kommer resultater, da en effektiv checkout kan give store konverteringsfrekvenser. Processen skal være velstruktureret og let at følge på en mobilenhed, således at flere principper er nødt til at blive implementeret i denne forstand:

  • Liste over produkter med lette + og - knapper til styring af mængder
  • Et felt for eventuelle kuponkoder
  • Stor og klar 'kasse' -knap
  • Synlig 'hold shopping'-knap

Ved design af kasseprocessen er en trekkspilstruktur en god tilgang. Dette giver brugeren et klart overblik over processen og opbevarer alle relevante oplysninger på en skærm. Denne teori er blevet stillet spørgsmålstegn ved flere eksperter men disse synspunkter er subjektive, så du bør finde ud af, hvad der passer bedst til dine behov og være pro eller imod harmonika-funktionen.

Af en eller anden grund er brugeren ofte forpligtet til at logge ind / tilmelde sig for at gennemse og shoppe på mobile apps. Det er meget upraktisk for slutbrugeren at forpligte sig til en tilmelding fra en mobilenhed, ofte gange, fordi disse formularer kræver, at mange felter udfyldes.

Når nogen beslutter at købe noget på din hjemmeside, er det vigtigt, at du lader dem tjekke så let som muligt. Sørg for, at den proces, du får dem til at forpligte sig til, er en problemfri og tankeløs oplevelse - eller i det mindste skal den være en. Det er vigtigt ikke at irritere en bruger, når de prøver at tjekke ud. På dette tidspunkt har dine kunder besluttet at købe dit produkt, så lad dem gøre det rigtigt, men på en korrekt måde ved at slippe af med de problemer, de måtte komme foran.

Konklusion

Mobile enheder har et separat miljø med hensyn til e-handel, hvorfor en specifik tilgang er nødvendig. I denne artikel har vi drøftet nogle grundlæggende principper, der skal dækkes for at give en brugbar og effektiv oplevelse for slutbrugerne. Det er vigtigt at indse, at hvert websted har sine egne specifikke træk, og selvom en generel tilgang er mulig, er det lige så vigtigt at tilpasse sig afgørende specifikationer på dit eget websted.

Funktionsbillede forkortet af nadrosia

Catalin Zorzini

Jeg er blogger af webdesign og startede dette projekt efter at have brugt et par uger på at kæmpe for at finde ud af, hvad der er den bedste e-handelsplatform for mig selv. Tjek min nuværende top 10 e-handel byggere.