\n E-handel har sett noen viktige UI- og UX-designtrender etablere seg i \u00e5r. Disse trendene er opptatt av \u00e5 skape en s\u00f8ml\u00f8s brukeropplevelse og \u00f8ke engasjement, trafikk, konverteringer, salg og tiltrekke potensielle kunder av h\u00f8y kvalitet som et resultat.\n<\/p>\n
\n Disse trendene er kommet for \u00e5 bli, og \u00e5 f\u00f8lge dem er avgj\u00f8rende hvis du vil at e-handelsvirksomheten skal forbli konkurransedyktig.\n<\/p>\n
\n La oss se n\u00e6rmere p\u00e5 disse trendene og analysere noen f\u00e5 eksempler p\u00e5 e-handelsmerker.\n<\/p>\n
\n 1 En oppfordring til minimalisme
\n<\/h5>\n
\n En trend som skj\u00f8t fart i \u00e5r viser den \u00f8kende tendensen til \u00e5 gj\u00f8re nettsider mer minimalistiske.\n<\/p>\n
\n Hvorfor minimalisme?\n<\/p>\n
\n Denne trenden innen UI- og UX-design er reaksjonen p\u00e5 kompleks og «fylt» design. Og siden det er en \u00f8kende tendens til \u00e5 forenkle brukergrensesnittet, tilbyr minimalisme alt for \u00e5 oppn\u00e5 det.\n<\/p>\n
\n La oss ta en titt p\u00e5 eksemplet p\u00e5 en dansk-basert nettside til Iskos, m\u00f8belprodusenten:\n<\/p>\n
\n Ved f\u00f8rste \u00f8yekast kan du allerede se hovedattributtene til minimalistisk webdesign, nemlig:\n<\/p>\n
- \n
- Negativt mellomrom \u2013 hvitt mellomrom eller bakgrunn p\u00e5 hjemmesiden\n <\/li>\n
- Flat tekstur \u2013 alle bilder og UI-elementer bruker ikke 3D eller andre teknikker for \u00e5 skille seg ut fordi de allerede gj\u00f8r det takket v\u00e6re negativ plass.\n <\/li>\n
- Kontrasterende (harde) bilder \u2013 i stedet for de lyse fargene p\u00e5 bakgrunns- og brukergrensesnittelementer, bruker den minimalistiske designen bilder for \u00e5 f\u00e5 de essensielle elementene til \u00e5 skille seg ut (i dette tilfellet viser produsenten produktene deres).\n <\/li>\n
- Minimalistisk typografi \u2013 denne nettsiden er et godt eksempel p\u00e5 minimalistisk design, ettersom den bruker anstendig skriftst\u00f8rrelse og rolig, men kontrasterende skriftfarge.\n <\/li>\n<\/ul>\n
\n Du kan ogs\u00e5 legge merke til et begrenset fargevalg generelt. Denne tiln\u00e6rmingen skaper et flott brukergrensesnitt siden det trekker oppmerksomheten til en bruker direkte til poenget.\n<\/p>\n
\n Nettsiden er delt inn i seksjoner kun ved hjelp av en enkel overskrift og bilder av produktet.\n<\/p>\n
\n Et kontrasterende UI-element p\u00e5 denne nettsiden er et popup-menyvindu i hj\u00f8rnet av skjermen:\n<\/p>\n
![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-314434-6383971020218.webp\")
<\/a>![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-314434-63839713995bc.webp\")
<\/a><\/p>\n\n Det er ikke n\u00f8dvendig \u00e5 legge til flere seksjoner til denne menyen siden de alle allerede er p\u00e5 hjemmesiden, s\u00e5 denne menyen fungerer som en ekstra informasjonskilde for brukeren som \u00f8nsker \u00e5 samhandle mer med merkevaren.\n<\/p>\n
\n Slike design, med enkel navigering og produktet som hovedfokus, er perfekte for \u00e5 oppn\u00e5 UI\/UX-design fortreffelighet.\n<\/p>\n
\n 2 Legge vekt p\u00e5 merkevarebygging
\n<\/h5>\n\n En annen trend innen UI- og UX-design handler om \u00e5 styrke sammenhengen mellom brukeropplevelse og merkevarebygging.\n<\/p>\n
\n Brukeropplevelse er definert av hvor n\u00e6rme brukeren kan n\u00e6rme seg merkevaren, og dette ble poenget for UI- og UX-designere \u00e5 fokusere p\u00e5. Dessuten, et design sentrert p\u00e5 merkevarebygging, gj\u00f8r hvert trinn i brukeropplevelsen fokusert p\u00e5 \u00e5 introdusere denne brukeren til merkevaren.\n<\/p>\n
\n Et godt eksempel p\u00e5 \u00e5 legge vekt p\u00e5 merkevarebygging i UI- og UX-design er Unsubscribe, e-handelsmerke for h\u00e5rpleieprodukter.\n<\/p>\n
\n Nettstedet deres er et mesterverk som kombinerer brukeropplevelse og merkevarebygging hvert trinn p\u00e5 veien. Ved \u00e5 rulle gjennom denne nettsiden vil en bruker komme over forskjellige elementer, som bidrar til \u00e5 oppn\u00e5 en fullstendig interaksjon med en merkevare:\n<\/p>\n
![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-314434-63839716c52bd.webp\")
<\/a>![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-314434-6383971a248cc.webp\")
<\/a><\/p>\n\n I tillegg til \u00e5 se ordet \u00abunsubscribe\u00bb i slagordene deres, som tilsvarer navnet p\u00e5 merkevaren, gj\u00f8r de ogs\u00e5 m\u00e5let deres til et fokuspunkt p\u00e5 nettstedet, som er \u00e5 hjelpe aktive mennesker til \u00e5 ta vare p\u00e5 h\u00e5ret bedre:\n<\/p>\n
![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-314434-6383971d7a536.webp\")
<\/a><\/p>\n\n Og selvf\u00f8lgelig er nettstedet laget med den beste minimalistiske praksisen, noe som bidrar til \u00e5 skape et enkelt, men allsidig brukergrensesnitt og en generell positiv brukeropplevelse.\n<\/p>\n
\n 3 Blir modigere
\n<\/h5>\n\n I \u00e5r har designere observert en \u00f8kende trend med dristigere, men enklere fonter. Denne tendensen faller sammen med minimalisme-trenden, nevnt ovenfor.\n<\/p>\n
\n I e-handel brukes fet skrift for \u00e5 fokusere brukerens oppmerksomhet p\u00e5 en melding som vanligvis er plassert midt p\u00e5 siden. Her er et eksempel p\u00e5 Limnia, et e-handelsmerke som selger fine smykker:\n<\/p>\n
![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-314434-63839720e3448.webp\")
<\/a><\/p>\n\n Selv om nettstedet bruker en video av en modell som viser frem produktet i bakgrunnen, trekkes ikke oppmerksomheten v\u00e5r av den, men snarere av meldingen plassert i midten av siden med fete bokstaver.\n<\/p>\n
\n Blant de mest brukte skriftene foretrekker UI- og UX-designere Helvetica, Sans og Univers. Du kan imidlertid ikke tilfeldig velge fonten for UI\/UX-design. Dette valget avhenger av flere forskjellige faktorer, nemlig:\n<\/p>\n
- \n
- Grad av dristighet i kontrast til resten av designet.\n <\/li>\n
- St\u00f8rrelse p\u00e5 skriften og hvordan den oppfattes i motsetning til resten av designet.\n <\/li>\n
- Type, grad av dristighet, st\u00f8rrelse og farge p\u00e5 skrifttypen i forhold til merkevarens estetikk.\n <\/li>\n<\/ul>\n
\n Alle disse faktorene p\u00e5virker hvordan en bruker oppfatter og samhandler med merkevaren din, s\u00e5 valget av fonter b\u00f8r bidra til konsistensen i UI- og UX-design.\n<\/p>\n
\n 4 Tilpasning for mobil
\n<\/h5>\n\n Vi nevnte i introduksjonen til denne artikkelen at mer enn halvparten av kundene dine foretrekker \u00e5 handle via mobile enheter. Og siden e-handelsmerker hovedsakelig opererer p\u00e5 nettet (med bare noen av dem som har fysiske utstillingslokaler), er det obligatorisk \u00e5 investere i mobil UX-design.\n<\/p>\n
\n I f\u00f8lge Interaction Design Foundation er mobil brukeropplevelse rettet mot \u00e5 skape positive mobilopplevelser via nettsider, applikasjoner og andre tjenester som brukes p\u00e5 mobile enheter. N\u00f8kkelm\u00e5lene for mobil UX er effektivitet og oppdagbarhet.\n<\/p>\n
\n For et e-handelsmerke betyr mobil UX f\u00f8rst og fremst full tilgjengelighet til alle elementene p\u00e5 nettstedet og enkelheten til grensesnittet.\n<\/p>\n
\n Et godt eksempel p\u00e5 \u00e5 tilpasse et nettsted for b\u00e5de stasjon\u00e6re og mobile enheter er Boria, et fransk e-handelsmerke som selger hjemmeinnredning:\n<\/p>\n
![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-314434-63839723c6abc.webp\")
<\/a><\/p>\n\n Mobilversjonen av Borias nettside har f\u00e6rre designelementer. Imidlertid bevarer den alle n\u00f8kkelseksjonene som er n\u00f8dvendige for kundene \u00e5 handle via mobile enheter:\n<\/p>\n
![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-314434-63839726c8a52.webp\")
<\/a><\/p>\n\n \u00c5 investere i mobil UX er ikke bare en forutsetning for god brukeropplevelse. Det er ogs\u00e5 viktig for SEO-rangeringen av e-handelsmerket ditt.\n<\/p>\n
\n Google rangerer merkevarer med nettsider av h\u00f8y kvalitet tilpasset mobile enheter sv\u00e6rt h\u00f8yt. Men det er flere regler som gj\u00f8r en mobilside flott. Det er grunnen til at Google i 2015 la ut designtips for mobil UX for utviklere, og oppdaterte disse tipsene jevnlig etter hvert som nye trender dukker opp. Blant disse tipsene kan du finne:\n<\/p>\n
- \n
- \n Unders\u00f8k f\u00f8r du prototyper<\/strong>. Siden UX-designere er partiske, anbefaler Google \u00e5 ikke g\u00e5 inn i prototyping med en gang, men f\u00f8rst unders\u00f8ke m\u00e5lgruppen ved hjelp av heuristisk analyse og AB-testing.\n <\/li>\n
- \n Arbeid med ber\u00f8ringsm\u00e5l<\/strong>. Selv om grensesnittet til et mobilnettsted er brukervennlig og nettstedet laster raskt p\u00e5 mobile enheter, vil brukere fortsatt forlate nettstedet hvis det har elementer som ikke reagerer p\u00e5 ber\u00f8ringen. Dette betyr at disse elementene har ber\u00f8ringsm\u00e5l som er for sm\u00e5, og Google anbefaler \u00e5 gj\u00f8re dem minst 7-10 mm brede.\n <\/li>\n
- \n Mindre rot<\/strong>. Synonymt med minimalisme-trenden i UI- og UX-design, indikerer dette tipset at Google rangerer rotete mobilnettsteder lavere, siden de er vanskelige \u00e5 samhandle med.\n <\/li>\n<\/ul>\n
\n Med andre ord, e-handelsmerker b\u00f8r v\u00e6re like oppmerksomme p\u00e5 funksjonaliteten til nettsidene deres b\u00e5de p\u00e5 stasjon\u00e6re og mobile enheter for \u00e5 levere hele merkeopplevelsen.\n<\/p>\n
\n 5 Fokus p\u00e5 hastighet
\n<\/h5>\n\n I begynnelsen av artikkelen nevnte vi ogs\u00e5 at kunder bestemmer seg for om de vil samhandle med merkevaren din i l\u00f8pet av de f\u00f8rste 0,05 sekundene av \u00e5 bes\u00f8ke nettstedet ditt.\n<\/p>\n
\n For e-handelsmerker kan lav sideinnlastingshastighet v\u00e6re skadelig. Siden det er en sv\u00e6rt konkurranseutsatt bransje, er det ikke noe problem for en bruker \u00e5 g\u00e5 og finne et annet e-handelsmerke med et lignende produkt, men et nettsted som laster raskt.\n<\/p>\n
\n Ytelse er ogs\u00e5 en del av brukeropplevelsen, og det sier mye om hvordan du verdsetter de bes\u00f8kende som e-handelsmerke.\n<\/p>\n
\n S\u00e5, hva er m\u00e5let for en UX-designer n\u00e5r det kommer til en perfekt sidelasthastighet?\n<\/p>\n
\n If\u00f8lge Unbounce tar det i gjennomsnitt 15,3 sekunder for en landingsside \u00e5 laste. Dette er imidlertid allerede veldig lenge hvis m\u00e5let ditt er \u00e5 skape en positiv brukeropplevelse.\n<\/p>\n
\n Dermed hevder Unbounce at den beste sideinnlastingshastigheten er fra 2,4 til 3,21 sekunder, men nettsteder som laster inn p\u00e5 fem sekunder f\u00e5r ogs\u00e5 lengre gjennomsnitts\u00f8kter (70 % lengre if\u00f8lge kilden).\n<\/p>\n
\n Dermed er det endelige m\u00e5let for positiv brukeropplevelse \u00e5 oppn\u00e5 en sideinnlastingshastighet p\u00e5 3 sekunder i gjennomsnitt.\n<\/p>\n
\n 6 Skape en garderobeopplevelse
\n<\/h5>\n\n La oss n\u00e5 bytte fra den tekniske delen av diskusjonen v\u00e5r til trendene innen tjenester som e-handelsmerker kan tilby for \u00e5 forbedre brukeropplevelsen og brukerinteraksjonen med merkevaren.\n<\/p>\n
\n En av de \u00f8kende trendene innen UI- og UX-design i \u00e5r har v\u00e6rt introduksjonen av virtuelle garderober.\n<\/p>\n
\n Online garderobeopplevelse kom som et svar p\u00e5 de \u00f8kende kravene fra forbrukere om \u00e5 samhandle mer med produktene og pr\u00f8ve dem. Vi vet alle at vi kj\u00f8per en gris hvis vi ikke kan r\u00f8re produktet fysisk. Dette gjelder spesielt n\u00e5r det kommer til e-handelsmerker som selger kl\u00e6r eller tilbeh\u00f8r.\n<\/p>\n
\n Et av slike e-handelsmerker er Warby Parker, et nettselskap som selger briller, som svarte p\u00e5 dette problemet ved \u00e5 lansere en mobilapp, der brukere kan pr\u00f8ve forskjellige brilleformer ved \u00e5 ta et bilde:\n<\/p>\n
![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-314434-6383972a0f7bf.webp\")
<\/a><\/p>\n\n Denne appen har v\u00e6rt veldig nyttig for kundene som \u00f8nsker \u00e5 kj\u00f8pe briller, men som er n\u00f8lende med hvilken form p\u00e5 brillene som passer til ansiktet deres.\n<\/p>\n
\n Denne trenden er sammensl\u00e5ingen mellom UX og AR (augmented reality), ettersom kunder samhandler med virkelige objekter, som er forbedret av datagenererte sensoriske modaliteter, for \u00e5 f\u00e5 fullstendig brukeropplevelse med merkevaren.\n<\/p>\n
\n 7 Fortelle en historie gjennom bilder
\n<\/h5>\n\n En annen trend som tar sikte p\u00e5 \u00e5 forbedre brukeropplevelsen via innholdet p\u00e5 nettsiden er visuell historiefortelling.\n<\/p>\n
\n Rollen til historiefortelling i markedsf\u00f8ring er enorm. Unders\u00f8kelsen viser at markedsf\u00f8ringsmeldinger levert som historier er opptil 22 ganger mer engasjerende og minneverdige. Historiefortelling betyr mer verdi, og det er grunnen til at det vellykket migrerte til UX-design og ble visuell historiefortelling.\n<\/p>\n
\n For et e-handelsmerke er visuell historiefortelling avgj\u00f8rende for brukeropplevelsen, siden den bringer kundene n\u00e6rmere merkevaren og tilbyr dem eksklusiv deltakelse i \u00e5 definere denne merkevaren.\n<\/p>\n
\n Et av merkene som vellykket kombinerer visuell historiefortelling og positiv brukeropplevelse er Always, P&Gs merkevare for personlig hygiene:\n<\/p>\n
![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-314434-6383972d84b88.webp\")
<\/a><\/p>\n\n Ved hjelp av visuell historiefortelling forteller Alltid hvordan merkevaren deltar i en rekke sosiale \u00e5rsaker, og avsl\u00f8rer historiene, hvordan folk samhandler med merkevaren og dets produkt gjennom deres personlige synspunkt:\n<\/p>\n
![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-314434-63839730a17d5.webp\")
<\/a><\/p>\n\n Det er imidlertid et problem med innholdsplassering n\u00e5r det gjelder visuell historiefortelling i UX-design. Avhengig av hvilket spr\u00e5k m\u00e5lgruppen snakker og i hvilken retning de leser (venstre-til-h\u00f8yre eller h\u00f8yre-til-venstre), vil innholdet plasseres annerledes.\n<\/p>\n
\n For eksempel, for publikum som leser fra venstre til h\u00f8yre, b\u00f8r innholdet plasseres i midten eller til venstre og med rundt 75 tegn per linje:\n<\/p>\n
![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-314434-6383973383a31.webp\")
<\/a><\/p>\n\n Visuell historiefortelling er en underliggende metodikk i UX-design, som er essensielt for e-handelsmerker, siden de baserer hele opplevelsen med kunden p\u00e5 nettopplevelser.\n<\/p>\n
\n 8 Gj\u00f8r kassen uanstrengt
\n<\/h5>\n\n En annen trend fra krevende kunder er \u00e5 gj\u00f8re kassen mer uanstrengt. Uanstrengt utsjekking er ogs\u00e5 en av de st\u00f8rste utfordringene innen UX-design.\n<\/p>\n
\n I f\u00f8lge den nylige statistikken fra InvestCRO er den gjennomsnittlige avbruddsraten for handlekurven 65,23 %, som f\u00f8lgende \u00e5rsaker utgj\u00f8r et betydelig bidrag:\n<\/p>\n
- \n
- 14 % \u2013 ingen mulighet for gjestekasse\n <\/li>\n
- 11 % \u2013 kompleks betalingsprosess\n <\/li>\n
- 7 % \u2013 ikke nok betalingsalternativer\n <\/li>\n<\/ul>\n
\n Siden fullf\u00f8ring av betalinger og utsjekking tilh\u00f8rer brukeropplevelsen, er UX-designer den som b\u00f8r v\u00e6re opptatt av \u00e5 gj\u00f8re det mer uanstrengt.\n<\/p>\n
\n Hvis nettstedet sliter med h\u00f8y avbruddsrate for handlekurven, er det en oppgave for en UX-designer \u00e5:\n<\/p>\n
- \n
- Finn ut hvorfor dette skjer ved hjelp av brukervennlighetstesting (gjennom brukerintervjuer og data mottatt fra kundest\u00f8tte).\n <\/li>\n
- Kartlegg kundereisen med hensyn til data samlet fra brukertesting.\n <\/li>\n
- Gj\u00f8r AB-testing for \u00e5 se hvordan l\u00f8sningen fungerer.\n <\/li>\n<\/ul>\n
\n Siden suksessen til et e-handelsmerke avhenger mye av en kundes opplevelse med utsjekking, er det \u00e5 gj\u00f8re denne prosessen mer uanstrengt med UX-design et viktig bidrag til positiv brukeropplevelse.\n<\/p>\n
\n 9 Fokus p\u00e5 personlig tilpassede tilbud
\n<\/h5>\n\n Personalisering er trenden som er kommet for \u00e5 bli. Og UX kan ta det til et nytt niv\u00e5 ved \u00e5 designe personlige tilbud.\n<\/p>\n
\n Mange e-handelsmerker gj\u00f8r allerede mye bruk av det.\n<\/p>\n
\n For eksempel har Thinx, et e-handelsmerke som selger undert\u00f8y og produkter for personlig hygiene, laget en unders\u00f8kelse for \u00e5 hjelpe til med \u00e5 velge produkter som passer behovene til en bruker:\n<\/p>\n
![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-314434-638397366f145.webp\")
<\/a><\/p>\n\n Etter resultatene av unders\u00f8kelsen lager merket personlige tilbud, som er perfekt for f\u00f8rstegangskunder.\n<\/p>\n
\n Et annet selskap, Tobi, et e-handelsmerke som selger kl\u00e6r, har fokusert p\u00e5 inkludering ved \u00e5 designe et popup-vindu for \u00e5 hjelpe funksjonshemmede med \u00e5 justere nettsiden for \u00e5 gj\u00f8re brukergrensesnittet mer behagelig for dem \u00e5 bruke:\n<\/p>\n
![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-314434-638397393475a.webp\")
<\/a><\/p>\n\n Disse UI- og UX-designbidragene har som m\u00e5l \u00e5 tilpasse hver brukers opplevelse med merkevaren, og anerkjenne hver brukers unike egenskaper og atferd.\n<\/p>\n
\n 10 Samtale med kunden
\n<\/h5>\n\n I e-handel spiller chatbots en viktig rolle, og gir kundest\u00f8tte. De er ogs\u00e5 en del av brukeropplevelsen, uansett om de bruker grafisk UI-design eller stemme UI-design.\n<\/p>\n
\n UI-design tilbyr stor allsidighet til e-handelsmerker n\u00e5r det kommer til \u00e5 lage chatbots. For eksempel, MeUndies, et e-handelsmerke som selger undert\u00f8y, bruker chatboten deres for \u00e5 svare p\u00e5 de mest s\u00f8kte sp\u00f8rsm\u00e5lene:\n<\/p>\n
- \n Arbeid med ber\u00f8ringsm\u00e5l<\/strong>. Selv om grensesnittet til et mobilnettsted er brukervennlig og nettstedet laster raskt p\u00e5 mobile enheter, vil brukere fortsatt forlate nettstedet hvis det har elementer som ikke reagerer p\u00e5 ber\u00f8ringen. Dette betyr at disse elementene har ber\u00f8ringsm\u00e5l som er for sm\u00e5, og Google anbefaler \u00e5 gj\u00f8re dem minst 7-10 mm brede.\n <\/li>\n
- \n Unders\u00f8k f\u00f8r du prototyper<\/strong>. Siden UX-designere er partiske, anbefaler Google \u00e5 ikke g\u00e5 inn i prototyping med en gang, men f\u00f8rst unders\u00f8ke m\u00e5lgruppen ved hjelp av heuristisk analyse og AB-testing.\n <\/li>\n