\n T\u00e4n\u00e4 vuonna verkkokaupassa on n\u00e4hty t\u00e4rkeit\u00e4 k\u00e4ytt\u00f6liittym\u00e4- ja UX-suunnittelutrendej\u00e4. N\u00e4ill\u00e4 trendeill\u00e4 pyrit\u00e4\u00e4n luomaan saumaton k\u00e4ytt\u00f6kokemus ja lis\u00e4\u00e4m\u00e4\u00e4n sitoutumista, liikennett\u00e4, tuloksia, myynti\u00e4 ja houkuttelemaan laadukkaita liidej\u00e4.\n<\/p>\n
\n N\u00e4m\u00e4 trendit ovat tulleet j\u00e4\u00e4d\u00e4kseen, ja niiden seuraaminen on v\u00e4ltt\u00e4m\u00e4t\u00f6nt\u00e4, jos haluat verkkokauppasi pysyv\u00e4n kilpailukykyisen\u00e4.\n<\/p>\n
\n Tarkastellaanpa n\u00e4it\u00e4 trendej\u00e4 l\u00e4hemmin ja analysoidaan muutamia esimerkkej\u00e4 verkkokaupan br\u00e4ndeist\u00e4.\n<\/p>\n
\n 1 Kutsu minimalismiin
\n<\/h5>\n
\n T\u00e4n\u00e4 vuonna vauhtiin noussut trendi osoittaa kasvavaa taipumusta tehd\u00e4 verkkosivustoista minimalistisempia.\n<\/p>\n
\n Miksi minimalismi?\n<\/p>\n
\n T\u00e4m\u00e4 UI- ja UX-suunnittelun suuntaus on reaktio monimutkaiseen ja ”t\u00e4ytetylle” suunnittelulle. Ja koska k\u00e4ytt\u00f6liittym\u00e4\u00e4 on yh\u00e4 enemm\u00e4n yksinkertaistettu, minimalismi tarjoaa kaiken sen saavuttamiseksi.\n<\/p>\n
\n Katsotaanpa esimerkki\u00e4 huonekaluvalmistajan Iskosin tanskalaisesta verkkosivustosta:\n<\/p>\n
\n Ensi silm\u00e4yksell\u00e4 n\u00e4et jo minimalistisen web-suunnittelun t\u00e4rkeimm\u00e4t ominaisuudet, nimitt\u00e4in:\n<\/p>\n
- \n
- Negatiivinen tila \u2013 valkoinen tila tai etusivun tausta\n <\/li>\n
- Litte\u00e4 tekstuuri \u2013 kaikki kuvat ja k\u00e4ytt\u00f6liittym\u00e4elementit eiv\u00e4t k\u00e4yt\u00e4 3D:t\u00e4 tai muita tekniikoita erottuakseen joukosta, koska ne tekev\u00e4t sen jo negatiivisen tilan ansiosta.\n <\/li>\n
- Kontrastinen (kova) kuva \u2013 taustan ja k\u00e4ytt\u00f6liittym\u00e4elementtien kirkkaiden v\u00e4rien sijaan minimalistisessa suunnittelussa on k\u00e4ytetty kuvia, jotta olennaiset elementit erottuvat joukosta (t\u00e4ss\u00e4 tapauksessa valmistaja esittelee tuotteitaan).\n <\/li>\n
- Minimalistinen typografia \u2013 t\u00e4m\u00e4 sivusto on loistava esimerkki minimalistisesta suunnittelusta, sill\u00e4 se k\u00e4ytt\u00e4\u00e4 mieleen sopivaa fonttikokoa ja rauhallista mutta kontrastista kirjasinv\u00e4ri\u00e4.\n <\/li>\n<\/ul>\n
\n Voit my\u00f6s huomata rajallisen v\u00e4rimaailman yleisesti. T\u00e4m\u00e4 l\u00e4hestymistapa luo erinomaisen k\u00e4ytt\u00f6liittym\u00e4n, koska se kiinnitt\u00e4\u00e4 k\u00e4ytt\u00e4j\u00e4n huomion suoraan asiaan.\n<\/p>\n
\n Sivusto on jaettu osiin k\u00e4ytt\u00e4m\u00e4ll\u00e4 vain yksinkertaista otsikkoa ja tuotteen kuvia.\n<\/p>\n
\n T\u00e4m\u00e4n sivuston erottuva k\u00e4ytt\u00f6liittym\u00e4elementti on ponnahdusvalikkoikkuna n\u00e4yt\u00f6n kulmassa:\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 T\u00e4h\u00e4n valikkoon ei tarvitse lis\u00e4t\u00e4 osioita, koska ne ovat kaikki jo etusivulla, joten t\u00e4m\u00e4 valikko toimii lis\u00e4tietol\u00e4hteen\u00e4 k\u00e4ytt\u00e4j\u00e4lle, joka haluaa olla enemm\u00e4n vuorovaikutuksessa br\u00e4ndin kanssa.\n<\/p>\n
\n T\u00e4llaiset mallit, joissa on yksinkertainen navigointi ja tuote p\u00e4\u00e4painopisteen\u00e4, ovat t\u00e4ydellisi\u00e4 UI\/UX-suunnittelun erinomaisuuden saavuttamiseksi.\n<\/p>\n
\n 2 Br\u00e4nd\u00e4yksen painottaminen
\n<\/h5>\n\n Toinen trendi UI- ja UX-suunnittelussa on k\u00e4ytt\u00e4j\u00e4kokemuksen ja br\u00e4nd\u00e4yksen v\u00e4lisen yhteyden vahvistaminen.\n<\/p>\n
\n K\u00e4ytt\u00e4j\u00e4kokemuksen m\u00e4\u00e4rittelee se, kuinka l\u00e4helt\u00e4 k\u00e4ytt\u00e4j\u00e4 voi l\u00e4hesty\u00e4 br\u00e4ndi\u00e4, ja t\u00e4h\u00e4n tuli k\u00e4ytt\u00f6liittym\u00e4- ja UX-suunnittelijoiden keskittymispiste. Lis\u00e4ksi br\u00e4nd\u00e4ykseen keskittyv\u00e4 muotoilu tekee k\u00e4ytt\u00e4j\u00e4kokemuksen jokaisesta askeleesta keskittyneen t\u00e4m\u00e4n k\u00e4ytt\u00e4j\u00e4n esittelyyn br\u00e4ndiin.\n<\/p>\n
\n Loistava esimerkki br\u00e4nd\u00e4yksen painottamisesta k\u00e4ytt\u00f6liittym\u00e4- ja UX-suunnittelussa on Unsubscribe, hiustenhoitotuotteiden verkkokauppabr\u00e4ndi.\n<\/p>\n
\n Heid\u00e4n verkkosivustonsa on mestariteos, joka yhdist\u00e4\u00e4 k\u00e4ytt\u00f6kokemuksen ja br\u00e4nd\u00e4yksen joka vaiheessa. Selatessaan t\u00e4t\u00e4 verkkosivustoa k\u00e4ytt\u00e4j\u00e4 t\u00f6rm\u00e4\u00e4 erilaisiin elementteihin, mik\u00e4 auttaa saavuttamaan t\u00e4ydellisen vuorovaikutuksen br\u00e4ndin kanssa:\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 Sen lis\u00e4ksi, ett\u00e4 he n\u00e4kev\u00e4t iskulauseissaan sanan ”unsubscribe”, joka vastaa br\u00e4ndin nime\u00e4, he tekev\u00e4t tavoitteestaan \u200b\u200bmy\u00f6s verkkosivuston keskipisteen, joka on auttaa aktiivisia ihmisi\u00e4 pit\u00e4m\u00e4\u00e4n hiuksistaan \u200b\u200bparemmin huolta:\n<\/p>\n
![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-314434-6383971d7a536.webp\")
<\/a><\/p>\n\n Ja tietysti sivusto on tehty parhaita minimalistisia k\u00e4yt\u00e4nt\u00f6j\u00e4 noudattaen, mik\u00e4 auttaa luomaan yksinkertaisen mutta monipuolisen k\u00e4ytt\u00f6liittym\u00e4n ja kaiken kaikkiaan positiivisen k\u00e4ytt\u00f6kokemuksen.\n<\/p>\n
\n 3 Rohkeammaksi
\n<\/h5>\n\n T\u00e4n\u00e4 vuonna suunnittelijat ovat havainneet kasvavan trendin rohkeampien mutta yksinkertaisempien fonttien k\u00e4ytt\u00f6\u00f6n. T\u00e4m\u00e4 suuntaus osuu yhteen edell\u00e4 mainitun minimalismin trendin kanssa.\n<\/p>\n
\n Verkkokaupassa lihavoituja fontteja k\u00e4ytet\u00e4\u00e4n kiinnitt\u00e4m\u00e4\u00e4n k\u00e4ytt\u00e4j\u00e4n huomio viestiin, joka yleens\u00e4 sijoitetaan sivun keskelle. T\u00e4ss\u00e4 on esimerkki Limniasta, verkkokauppabr\u00e4ndist\u00e4, joka myy hienoja koruja:\n<\/p>\n
![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-314434-63839720e3448.webp\")
<\/a><\/p>\n\n Vaikka verkkosivustolla on k\u00e4yt\u00f6ss\u00e4 videota mallista, joka esittelee tuotetta taustalla, huomiotamme ei kiinnit\u00e4 se, vaan sivun keskelle lihavoitu teksti.\n<\/p>\n
\n Eniten k\u00e4ytetyist\u00e4 fonteista UI- ja UX-suunnittelijat suosivat Helveticaa, Sansia ja Universia. Et voi kuitenkaan valita satunnaisesti kirjasinta UI\/UX-suunnittelulle. T\u00e4m\u00e4 valinta riippuu useista eri tekij\u00f6ist\u00e4, nimitt\u00e4in:\n<\/p>\n
- \n
- Rohkeuden taso toisin kuin muussa suunnittelussa.\n <\/li>\n
- Fontin koko ja miten se n\u00e4hd\u00e4\u00e4n toisin kuin muussa suunnittelussa.\n <\/li>\n
- Fontin tyyppi, rohkeusaste, koko ja v\u00e4ri suhteessa br\u00e4ndisi estetiikkaan.\n <\/li>\n<\/ul>\n
\n Kaikki n\u00e4m\u00e4 tekij\u00e4t vaikuttavat siihen, miten k\u00e4ytt\u00e4j\u00e4 n\u00e4kee br\u00e4ndisi ja on vuorovaikutuksessa sen kanssa, joten kirjasinten valinnan pit\u00e4isi edist\u00e4\u00e4 k\u00e4ytt\u00f6liittym\u00e4n ja UX-suunnittelun johdonmukaisuutta.\n<\/p>\n
\n 4 Sopeutuminen matkapuhelimeen
\n<\/h5>\n\n Mainitsimme t\u00e4m\u00e4n artikkelin johdannossa, ett\u00e4 yli puolet asiakkaistasi suosii ostoksia mobiililaitteiden kautta. Ja koska verkkokauppabr\u00e4ndit toimivat p\u00e4\u00e4asiassa verkossa (vain osalla niist\u00e4 on fyysisi\u00e4 esittelytiloja), mobiilik\u00e4ytt\u00f6liittym\u00e4n suunnitteluun panostaminen on pakollista.\n<\/p>\n
\n Interaction Design Foundationin mukaan mobiilik\u00e4ytt\u00f6kokemuksella pyrit\u00e4\u00e4n luomaan positiivisia mobiilikokemuksia verkkosivujen, sovellusten ja muiden mobiililaitteilla k\u00e4ytett\u00e4vien palveluiden kautta. Mobiilik\u00e4ytt\u00f6liittym\u00e4n keskeiset tavoitteet ovat tehokkuus ja l\u00f6ydett\u00e4vyys.\n<\/p>\n
\n Verkkokauppabr\u00e4ndille mobiilik\u00e4ytt\u00f6liittym\u00e4 tarkoittaa ennen kaikkea verkkosivuston kaikkien elementtien t\u00e4ydellist\u00e4 saavutettavuutta ja k\u00e4ytt\u00f6liittym\u00e4n yksinkertaisuutta.\n<\/p>\n
\n Loistava esimerkki verkkosivuston mukauttamisesta sek\u00e4 p\u00f6yt\u00e4koneille ett\u00e4 mobiililaitteille on Boria, ranskalainen kodinsisustustuotteita myyv\u00e4 verkkokauppabr\u00e4ndi:\n<\/p>\n
![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-314434-63839723c6abc.webp\")
<\/a><\/p>\n\n Borian verkkosivuston mobiiliversiossa on v\u00e4hemm\u00e4n sisustuselementtej\u00e4. Se kuitenkin s\u00e4ilytt\u00e4\u00e4 kaikki keskeiset osat, joita asiakkaat tarvitsevat tehd\u00e4kseen ostoksia mobiililaitteiden kautta:\n<\/p>\n
![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-314434-63839726c8a52.webp\")
<\/a><\/p>\n\n Mobiilik\u00e4ytt\u00f6kokemukseen sijoittaminen ei ole vain hyv\u00e4n k\u00e4ytt\u00f6kokemuksen edellytys. Se on t\u00e4rke\u00e4\u00e4 my\u00f6s verkkokauppabr\u00e4ndisi SEO-sijoituksen kannalta.\n<\/p>\n
\n Google sijoittuu eritt\u00e4in korkealle tuotemerkit, joilla on korkealaatuiset mobiililaitteisiin mukautetut verkkosivustot. Mutta on olemassa useita s\u00e4\u00e4nt\u00f6j\u00e4, jotka tekev\u00e4t mobiilisivustosta erinomaisen. T\u00e4st\u00e4 syyst\u00e4 Google julkaisi vuonna 2015 mobiilik\u00e4ytt\u00f6liittym\u00e4n suunnitteluvinkkej\u00e4 kehitt\u00e4jille ja p\u00e4ivitt\u00e4\u00e4 n\u00e4it\u00e4 vinkkej\u00e4 s\u00e4\u00e4nn\u00f6llisesti uusien trendien tullessa. N\u00e4ist\u00e4 vinkeist\u00e4 l\u00f6yd\u00e4t:\n<\/p>\n
- \n
- \n Tutki ennen prototyypin tekemist\u00e4<\/strong>. Koska UX-suunnittelijat ovat puolueellisia, Google neuvoo olemaan ryhtym\u00e4tt\u00e4 heti prototyyppien tekemiseen, vaan tutkimaan kohdeyleis\u00f6\u00e4 ensin heuristisen analyysin ja AB-testauksen avulla.\n <\/li>\n
- \n Ty\u00f6skentele kosketuskohteissa<\/strong>. Vaikka mobiilisivuston k\u00e4ytt\u00f6liittym\u00e4 on k\u00e4ytt\u00e4j\u00e4yst\u00e4v\u00e4llinen ja verkkosivusto latautuu nopeasti mobiililaitteille, k\u00e4ytt\u00e4j\u00e4t hylk\u00e4\u00e4v\u00e4t silti sivuston, jos sill\u00e4 on elementtej\u00e4, jotka eiv\u00e4t reagoi heid\u00e4n kosketukseensa. T\u00e4m\u00e4 tarkoittaa, ett\u00e4 n\u00e4iss\u00e4 elementeiss\u00e4 on liian pieni\u00e4 kosketuskohteita, ja Google suosittelee niiden tekemist\u00e4 v\u00e4hint\u00e4\u00e4n 7-10 mm leveiksi.\n <\/li>\n
- \n V\u00e4hemm\u00e4n sotkua<\/strong>. T\u00e4m\u00e4 vihje on synonyymi k\u00e4ytt\u00f6liittym\u00e4- ja UX-suunnittelun minimalistiselle trendille, ja se osoittaa, ett\u00e4 Google luokittelee sekalaiset mobiilisivustot alemmas, koska niiden kanssa on vaikea olla vuorovaikutuksessa.\n <\/li>\n<\/ul>\n
\n Toisin sanoen verkkokauppabr\u00e4ndien tulisi kiinnitt\u00e4\u00e4 yht\u00e4 paljon huomiota verkkosivustojensa toimivuuteen sek\u00e4 p\u00f6yt\u00e4koneilla ett\u00e4 mobiililaitteilla tarjotakseen t\u00e4yden br\u00e4ndikokemuksen.\n<\/p>\n
\n 5 Nopeuteen keskittyminen
\n<\/h5>\n\n Mainitsimme artikkelin alussa my\u00f6s, ett\u00e4 asiakkaat tekev\u00e4t p\u00e4\u00e4t\u00f6ksen, ovatko he vuorovaikutuksessa br\u00e4ndisi kanssa ensimm\u00e4isten 0,05 sekunnin aikana vieraillessaan verkkosivustollasi.\n<\/p>\n
\n Verkkokaupan br\u00e4ndeille alhainen sivun latausnopeus voi olla haitallista. Koska kyseess\u00e4 on eritt\u00e4in kilpailukykyinen toimiala, k\u00e4ytt\u00e4j\u00e4n ei ole mit\u00e4\u00e4n ongelmaa etsi\u00e4 toinen verkkokauppabr\u00e4ndi, jolla on samanlainen tuote mutta nopeasti latautuva verkkosivusto.\n<\/p>\n
\n Suorituskyky on my\u00f6s osa k\u00e4ytt\u00f6kokemusta, ja se kertoo paljon siit\u00e4, kuinka arvostat k\u00e4vij\u00f6it\u00e4si verkkokauppabr\u00e4ndin\u00e4.\n<\/p>\n
\n Joten mik\u00e4 on UX-suunnittelijan tavoite, kun kyseess\u00e4 on t\u00e4ydellinen sivun latausnopeus?\n<\/p>\n
\n Unbouncen mukaan aloitussivun latautuminen kest\u00e4\u00e4 keskim\u00e4\u00e4rin 15,3 sekuntia. T\u00e4m\u00e4 on kuitenkin jo hyvin pitk\u00e4, jos tavoitteenasi on luoda positiivinen k\u00e4ytt\u00f6kokemus.\n<\/p>\n
\n Siten Unbounce v\u00e4itt\u00e4\u00e4, ett\u00e4 paras sivun latausnopeus on 2,4\u20133,21 sekuntia, mutta viidess\u00e4 sekunnissa latautuvat sivustot saavat my\u00f6s pidempi\u00e4 keskim\u00e4\u00e4r\u00e4isi\u00e4 istuntoja (l\u00e4hteen mukaan 70 % pidempi\u00e4).\n<\/p>\n
\n N\u00e4in ollen positiivisen k\u00e4ytt\u00f6kokemuksen perimm\u00e4inen tavoite on saavuttaa keskim\u00e4\u00e4rin 3 sekunnin sivun latausnopeus.\n<\/p>\n
\n 6 Pukuhuonekokemuksen luominen
\n<\/h5>\n\n Siirryt\u00e4\u00e4n nyt keskustelumme teknisest\u00e4 osasta niihin palvelutrendeihin, joita verkkokauppabr\u00e4ndit voivat tarjota parantaakseen k\u00e4ytt\u00e4j\u00e4kokemusta ja vuorovaikutusta br\u00e4ndin kanssa.\n<\/p>\n
\n Yksi t\u00e4m\u00e4n vuoden kasvavista trendeist\u00e4 k\u00e4ytt\u00f6liittym\u00e4- ja UX-suunnittelussa on ollut virtuaalisten pukuhuoneiden k\u00e4ytt\u00f6\u00f6notto.\n<\/p>\n
\n Verkkopukuhuonekokemus tuli vastauksena kuluttajien kasvaviin vaatimuksiin olla enemm\u00e4n vuorovaikutuksessa tuotteiden kanssa ja kokeilla niit\u00e4. Me kaikki tied\u00e4mme, ett\u00e4 ostamme sian s\u00e4kiss\u00e4, jos emme voi fyysisesti koskea tuotteeseen. T\u00e4m\u00e4 p\u00e4tee erityisesti verkkokauppabr\u00e4ndeihin, jotka myyv\u00e4t vaatteita tai asusteita.\n<\/p>\n
\n Yksi t\u00e4llaisista verkkokaupan br\u00e4ndeist\u00e4 on laseja myyv\u00e4 verkkoyritys Warby Parker, joka vastasi ongelmaan lanseeraamalla mobiilisovelluksen, jossa k\u00e4ytt\u00e4j\u00e4t voivat kokeilla eri muotoisia laseja ottamalla kuvan:\n<\/p>\n
![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-314434-6383972a0f7bf.webp\")
<\/a><\/p>\n\n T\u00e4m\u00e4 sovellus on auttanut paljon asiakkaita, jotka haluavat ostaa silm\u00e4laseja, mutta ep\u00e4r\u00f6iv\u00e4t mink\u00e4 muotoiset lasit sopivat kasvoilleen.\n<\/p>\n
\n T\u00e4m\u00e4 trendi on UX:n ja AR:n (lis\u00e4tyn todellisuuden) yhdist\u00e4minen, kun asiakkaat ovat vuorovaikutuksessa tosiel\u00e4m\u00e4n esineiden kanssa, joita tehostavat tietokoneella luodut sensoriset modaliteetit saadakseen t\u00e4ydellisen k\u00e4ytt\u00e4j\u00e4kokemuksen br\u00e4ndist\u00e4.\n<\/p>\n
\n 7 Tarinan kertominen visuaalisesti
\n<\/h5>\n\n Toinen trendi, joka pyrkii parantamaan k\u00e4ytt\u00f6kokemusta sivuston sis\u00e4ll\u00f6n kautta, on visuaalinen tarinankerronta.\n<\/p>\n
\n Tarinankerronnan rooli markkinoinnissa on valtava. Tutkimus osoittaa, ett\u00e4 tarinoina toimitetut markkinointiviestit ovat jopa 22 kertaa kiinnostavampia ja mieleenpainuvampia. Tarinankerronta merkitsee enemm\u00e4n arvoa, mink\u00e4 vuoksi se siirtyi onnistuneesti UX-suunnitteluun ja siit\u00e4 tuli visuaalinen tarinankerronta.\n<\/p>\n
\n Verkkokaupan br\u00e4ndille visuaalinen tarinankerronta on k\u00e4ytt\u00f6kokemuksen kannalta olennaista, sill\u00e4 se tuo asiakkaat l\u00e4hemm\u00e4ksi br\u00e4ndi\u00e4 ja tarjoaa heille eksklusiivisen osallistumisen t\u00e4m\u00e4n br\u00e4ndin m\u00e4\u00e4rittelyyn.\n<\/p>\n
\n Yksi visuaalisen tarinankerronta ja positiivinen k\u00e4ytt\u00f6kokemus onnistuneesti yhdist\u00e4vist\u00e4 br\u00e4ndeist\u00e4 on Always, P&G:n henkil\u00f6kohtaisen hygienian br\u00e4ndi:\n<\/p>\n
![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-314434-6383972d84b88.webp\")
<\/a><\/p>\n\n Visuaalisen tarinankerronnan avulla Aina kertoo, kuinka br\u00e4ndi osallistuu useisiin sosiaalisiin syihin, paljastaen tarinoita, kuinka ihmiset ovat vuorovaikutuksessa br\u00e4ndin ja sen tuotteen kanssa henkil\u00f6kohtaisen n\u00e4k\u00f6kulmansa kautta:\n<\/p>\n
![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-314434-63839730a17d5.webp\")
<\/a><\/p>\n\n Sis\u00e4ll\u00f6n sijoittelussa on kuitenkin ongelma, kun on kyse visuaalisesta tarinankerronnasta UX-suunnittelussa. Sen mukaan, mit\u00e4 kielt\u00e4 kohdeyleis\u00f6 puhuu ja mihin suuntaan he lukevat (vasemmalta oikealle tai oikealta vasemmalle), sis\u00e4lt\u00f6 sijoitetaan eri tavalla.\n<\/p>\n
\n Esimerkiksi yleis\u00f6lle, joka lukee vasemmalta oikealle, sis\u00e4lt\u00f6 tulisi sijoittaa keskelle tai vasemmalle ja noin 75 merkki\u00e4 rivi\u00e4 kohden:\n<\/p>\n
![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-314434-6383973383a31.webp\")
<\/a><\/p>\n\n Visuaalinen tarinankerronta on UX-suunnittelun taustalla oleva metodologia, joka on olennainen verkkokauppabr\u00e4ndeille, koska ne perustavat koko kokemuksensa asiakkaan kanssa verkkokokemuksiin.\n<\/p>\n
\n 8 Kassan tekeminen vaivattomaksi
\n<\/h5>\n\n Toinen vaativien asiakkaiden trendi on tehd\u00e4 kassalle vaivatonta. Vaivaton kassa on my\u00f6s yksi UX-suunnittelun suurimmista haasteista.\n<\/p>\n
\n InvestCRO:n tuoreiden tilastojen mukaan keskim\u00e4\u00e4r\u00e4inen ostoskorin hylk\u00e4\u00e4misprosentti on 65,23 %, johon seuraavat syyt vaikuttavat merkitt\u00e4v\u00e4sti:\n<\/p>\n
- \n
- 14 % \u2013 ei vieraiden kassavaihtoehtoa\n <\/li>\n
- 11 % \u2013 monimutkainen kassaprosessi\n <\/li>\n
- 7% \u2013 ei tarpeeksi maksuvaihtoehtoja\n <\/li>\n<\/ul>\n
\n Koska maksujen suorittaminen ja kassaaminen kuuluvat k\u00e4ytt\u00f6kokemukseen, UX-suunnittelijan tulisi huolehtia siit\u00e4, ett\u00e4 se on vaivatonta.\n<\/p>\n
\n Jos verkkosivusto kamppailee korkean ostoskorin hylk\u00e4\u00e4misasteen kanssa, UX-suunnittelijan teht\u00e4v\u00e4n\u00e4 on:\n<\/p>\n
- \n
- Selvit\u00e4 miksi n\u00e4in tapahtuu k\u00e4ytett\u00e4vyystestauksen avulla (k\u00e4ytt\u00e4j\u00e4haastattelujen ja asiakastuesta saatujen tietojen avulla).\n <\/li>\n
- Kartoita asiakkaan matka k\u00e4ytett\u00e4vyystestauksesta ker\u00e4ttyjen tietojen perusteella.\n <\/li>\n
- Tee AB-testaus n\u00e4hd\u00e4ksesi kuinka ratkaisu toimii.\n <\/li>\n<\/ul>\n
\n Koska verkkokauppabr\u00e4ndin menestys riippuu paljon asiakkaan kassakokemuksesta, t\u00e4m\u00e4n prosessin helpottaminen UX-suunnittelun avulla on t\u00e4rke\u00e4 panos positiiviseen k\u00e4ytt\u00f6kokemukseen.\n<\/p>\n
\n 9 Keskity henkil\u00f6kohtaisiin tarjouksiin
\n<\/h5>\n\n Personointi on trendi, joka on tullut j\u00e4\u00e4d\u00e4kseen. Ja UX voi vied\u00e4 sen uudelle tasolle suunnittelemalla yksil\u00f6llisi\u00e4 tarjouksia.\n<\/p>\n
\n Monet verkkokauppabr\u00e4ndit k\u00e4ytt\u00e4v\u00e4t sit\u00e4 jo hyv\u00e4kseen.\n<\/p>\n
\n Esimerkiksi Thinx, alusvaatteita ja henkil\u00f6kohtaisen hygienian tuotteita myyv\u00e4 verkkokauppabr\u00e4ndi, on suunnitellut kyselyn, joka auttaa valitsemaan k\u00e4ytt\u00e4j\u00e4n tarpeisiin sopivia tuotteita:\n<\/p>\n
![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-314434-638397366f145.webp\")
<\/a><\/p>\n\n Kyselyn tulosten perusteella br\u00e4ndi luo yksil\u00f6llisi\u00e4 tarjouksia, jotka sopivat erinomaisesti ensikertalaisille.\n<\/p>\n
\n Toinen yritys, vaatteita myyv\u00e4 verkkokauppabr\u00e4ndi Tobi, on keskittynyt inklusiivisuuteen suunnittelemalla ponnahdusikkunan, jonka avulla vammaiset voivat mukauttaa verkkosivustoa k\u00e4ytt\u00f6liittym\u00e4n k\u00e4ytt\u00f6mukavuuden lis\u00e4\u00e4miseksi:\n<\/p>\n
![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-314434-638397393475a.webp\")
<\/a><\/p>\n\n N\u00e4iden UI- ja UX-suunnittelupanostusten tavoitteena on yksil\u00f6id\u00e4 jokaisen k\u00e4ytt\u00e4j\u00e4n kokemus br\u00e4ndist\u00e4 ja tunnustaa jokaisen k\u00e4ytt\u00e4j\u00e4n ainutlaatuiset ominaisuudet ja k\u00e4ytt\u00e4ytyminen.\n<\/p>\n
\n 10 Keskustele asiakkaan kanssa
\n<\/h5>\n\n Verkkokaupassa chatbotit ovat t\u00e4rke\u00e4ss\u00e4 roolissa, koska ne tarjoavat asiakastukea. Ne ovat my\u00f6s osa k\u00e4ytt\u00f6kokemusta riippumatta siit\u00e4, k\u00e4ytt\u00e4v\u00e4tk\u00f6 he graafista k\u00e4ytt\u00f6liittym\u00e4suunnittelua vai puhek\u00e4ytt\u00f6liittym\u00e4suunnittelua.\n<\/p>\n
\n K\u00e4ytt\u00f6liittym\u00e4suunnittelu tarjoaa verkkokaupan br\u00e4ndeille suurta monipuolisuutta chatbottien luomisessa. Esimerkiksi MeUndies, alusvaatteita myyv\u00e4 verkkokauppabr\u00e4ndi, k\u00e4ytt\u00e4\u00e4 verkkosivustonsa chatbotia vastatakseen haetuimpiin kysymyksiin:\n<\/p>\n
- \n Ty\u00f6skentele kosketuskohteissa<\/strong>. Vaikka mobiilisivuston k\u00e4ytt\u00f6liittym\u00e4 on k\u00e4ytt\u00e4j\u00e4yst\u00e4v\u00e4llinen ja verkkosivusto latautuu nopeasti mobiililaitteille, k\u00e4ytt\u00e4j\u00e4t hylk\u00e4\u00e4v\u00e4t silti sivuston, jos sill\u00e4 on elementtej\u00e4, jotka eiv\u00e4t reagoi heid\u00e4n kosketukseensa. T\u00e4m\u00e4 tarkoittaa, ett\u00e4 n\u00e4iss\u00e4 elementeiss\u00e4 on liian pieni\u00e4 kosketuskohteita, ja Google suosittelee niiden tekemist\u00e4 v\u00e4hint\u00e4\u00e4n 7-10 mm leveiksi.\n <\/li>\n
- \n Tutki ennen prototyypin tekemist\u00e4<\/strong>. Koska UX-suunnittelijat ovat puolueellisia, Google neuvoo olemaan ryhtym\u00e4tt\u00e4 heti prototyyppien tekemiseen, vaan tutkimaan kohdeyleis\u00f6\u00e4 ensin heuristisen analyysin ja AB-testauksen avulla.\n <\/li>\n