\n L'e-commerce ha visto affermarsi alcune importanti tendenze di progettazione di UI e UX quest'anno. Queste tendenze riguardano la creazione di un'esperienza utente senza soluzione di continuit\u00e0 e aumentano il coinvolgimento, il traffico, le conversioni, le vendite e, di conseguenza, attraggono lead di alta qualit\u00e0.\n<\/p>\n
\n Queste tendenze sono qui per rimanere e seguirle \u00e8 essenziale se vuoi che la tua attivit\u00e0 di e-commerce rimanga competitiva.\n<\/p>\n
\n Diamo un'occhiata pi\u00f9 da vicino a queste tendenze e analizziamo alcuni esempi di marchi di e-commerce.\n<\/p>\n
\n 1 Un appello al minimalismo
\n<\/h5>\n
\n Una tendenza che ha guadagnato slancio quest'anno mostra la crescente tendenza a rendere i siti Web pi\u00f9 minimalisti.\n<\/p>\n
\n Perch\u00e9 il minimalismo?\n<\/p>\n
\n Questa tendenza nella progettazione di UI e UX \u00e8 la reazione a un design complesso e “imbottito”. E, poich\u00e9 c'\u00e8 una crescente tendenza a semplificare l'interfaccia utente, il minimalismo offre tutto per raggiungerlo.\n<\/p>\n
\n Diamo un'occhiata all'esempio di un sito Web con sede in Danimarca di Iskos, il produttore di mobili:\n<\/p>\n
\n A prima vista, puoi gi\u00e0 vedere gli attributi principali del web design minimalista, vale a dire:\n<\/p>\n
- \n
- Spazio negativo: spazio bianco o sfondo della home page\n <\/li>\n
- Texture piatta: tutte le immagini e gli elementi dell'interfaccia utente non utilizzano il 3D o altre tecniche per distinguersi perch\u00e9 lo fanno gi\u00e0 grazie allo spazio negativo.\n <\/li>\n
- Immagini (dure) contrastanti: invece dei colori vivaci dello sfondo e degli elementi dell'interfaccia utente, il design minimalista utilizza immagini per far risaltare gli elementi essenziali (in questo caso, il produttore mostra i propri prodotti).\n <\/li>\n
- Tipografia minimalista: questo sito Web \u00e8 un ottimo esempio di design minimalista, poich\u00e9 utilizza una dimensione del carattere decente e un colore del carattere calmo ma contrastante.\n <\/li>\n<\/ul>\n
\n Puoi anche notare una combinazione di colori limitata nel complesso. Questo approccio crea un'ottima interfaccia utente poich\u00e9 attira l'attenzione di un utente direttamente sul punto.\n<\/p>\n
\n Il sito web \u00e8 suddiviso in sezioni utilizzando solo un semplice titolo e immagini del prodotto.\n<\/p>\n
\n Un elemento dell'interfaccia utente contrastante su questo sito Web \u00e8 una finestra del menu a comparsa nell'angolo dello schermo:\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 Non c'\u00e8 bisogno di aggiungere ulteriori sezioni a questo menu poich\u00e9 sono gi\u00e0 tutte nella home page, quindi questo menu funge da ulteriore fonte di informazioni per l'utente, che desidera interagire maggiormente con il marchio.\n<\/p>\n
\n Tali design, con una navigazione semplice e il prodotto come punto focale principale, sono perfetti per raggiungere l'eccellenza del design UI\/UX.\n<\/p>\n
\n 2 Dare enfasi al marchio
\n<\/h5>\n\n Un'altra tendenza nella progettazione di UI e UX riguarda il rafforzamento della connessione tra esperienza utente e branding.\n<\/p>\n
\n L'esperienza dell'utente \u00e8 definita da quanto vicino l'utente pu\u00f2 avvicinarsi al marchio, e questo \u00e8 diventato il punto su cui i progettisti di UI e UX devono concentrarsi. Inoltre, un design incentrato sul branding rende ogni fase dell'esperienza dell'utente focalizzata sull'introduzione di questo utente al marchio.\n<\/p>\n
\n Un ottimo esempio di enfasi sul branding nella progettazione di UI e UX \u00e8 Unsubscribe, marchio di e-commerce di prodotti per la cura dei capelli.\n<\/p>\n
\n Il loro sito Web \u00e8 un capolavoro che combina l'esperienza dell'utente e il marchio in ogni fase del processo. Scorrendo questo sito web, un utente si imbatter\u00e0 in diversi elementi, che aiutano a raggiungere una completa interazione con un marchio:\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 Oltre a vedere la parola “unsubscribe” nei loro slogan, che corrisponde al nome del marchio, fanno anche del loro obiettivo un punto focale del sito Web, ovvero aiutare le persone attive a prendersi cura dei propri capelli meglio:\n<\/p>\n
![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-314434-6383971d7a536.webp\")
<\/a><\/p>\n\n E, naturalmente, il sito Web \u00e8 realizzato con le migliori pratiche minimaliste, contribuendo a creare un'interfaccia utente semplice ma versatile e un'esperienza utente complessivamente positiva.\n<\/p>\n
\n 3 Diventa pi\u00f9 audace
\n<\/h5>\n\n Quest'anno, i designer hanno osservato una tendenza crescente di caratteri pi\u00f9 audaci ma pi\u00f9 semplici. Questa tendenza coincide con la tendenza del minimalismo, di cui sopra.\n<\/p>\n
\n Nell'e-commerce, i caratteri in grassetto vengono utilizzati per focalizzare l'attenzione di un utente su un messaggio che di solito viene posizionato al centro della pagina. Ecco un esempio di Limnia, un marchio di e-commerce che vende gioielli raffinati:\n<\/p>\n
![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-314434-63839720e3448.webp\")
<\/a><\/p>\n\n Sebbene il sito utilizzi un video di un modello che mostra il prodotto sullo sfondo, la nostra attenzione non \u00e8 attirata da esso, ma piuttosto dal messaggio posto al centro della pagina in grassetto.\n<\/p>\n
\n Tra i font pi\u00f9 utilizzati, i designer di UI e UX preferiscono Helvetica, Sans e Univers. Tuttavia, non puoi scegliere a caso il carattere per il design dell'interfaccia utente\/UX. Questa scelta dipende da diversi fattori, vale a dire:\n<\/p>\n
- \n
- Livello di audacia in contrasto con il resto del design.\n <\/li>\n
- Dimensione del carattere e come viene percepito in contrasto con il resto del design.\n <\/li>\n
- Tipo, livello di audacia, dimensione e colore del carattere in relazione all'estetica del tuo marchio.\n <\/li>\n<\/ul>\n
\n Tutti questi fattori influenzano il modo in cui un utente percepisce e interagisce con il tuo marchio, quindi la scelta dei caratteri dovrebbe contribuire alla coerenza del design dell'interfaccia utente e dell'esperienza utente.\n<\/p>\n
\n 4 Adattamento per dispositivi mobili
\n<\/h5>\n\n Abbiamo menzionato nell'introduzione a questo articolo che pi\u00f9 della met\u00e0 dei tuoi clienti preferisce fare acquisti tramite dispositivi mobili. E poich\u00e9 i marchi di e-commerce operano prevalentemente online (solo alcuni di essi hanno showroom fisici), \u00e8 obbligatorio investire nella progettazione di UX mobile.\n<\/p>\n
\n Secondo l'Interaction Design Foundation, l'esperienza utente mobile ha lo scopo di creare esperienze mobili positive tramite siti Web, applicazioni e altri servizi utilizzati su dispositivi mobili. Gli obiettivi chiave della UX mobile sono l'efficienza e la rilevabilit\u00e0.\n<\/p>\n
\n Per un brand di e-commerce, mobile UX significa, prima di tutto, la completa accessibilit\u00e0 a tutti gli elementi del sito web e la semplicit\u00e0 dell'interfaccia.\n<\/p>\n
\n Un ottimo esempio di adattamento di un sito Web sia per desktop che per dispositivi mobili \u00e8 Boria, un marchio di e-commerce francese che vende decorazioni per la casa:\n<\/p>\n
![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-314434-63839723c6abc.webp\")
<\/a><\/p>\n\n La versione mobile del sito Web di Boria ha meno elementi di design. Tuttavia, conserva tutte le sezioni chiave necessarie ai clienti per fare acquisti tramite dispositivi mobili:\n<\/p>\n
![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-314434-63839726c8a52.webp\")
<\/a><\/p>\n\n Investire nella UX mobile non \u00e8 solo un prerequisito per un'ottima esperienza utente. \u00c8 anche importante per il posizionamento SEO del tuo marchio di e-commerce.\n<\/p>\n
\n Google classifica i marchi con siti Web di alta qualit\u00e0 adattati ai dispositivi mobili molto in alto. Ma ci sono diverse regole che rendono eccezionale un sito mobile. Ecco perch\u00e9, nel 2015, Google ha pubblicato suggerimenti per la progettazione di UX mobile per gli sviluppatori, aggiornandoli regolarmente con l'arrivo di nuove tendenze. Tra questi suggerimenti puoi trovare:\n<\/p>\n
- \n
- \n Ricerca prima del prototipo<\/strong>. Poich\u00e9 i progettisti di UX sono di parte, Google consiglia di non entrare subito nella prototipazione, ma di ricercare prima il pubblico di destinazione mediante analisi euristiche e test AB.\n <\/li>\n
- \n Lavora sui touch target<\/strong>. Anche se l'interfaccia di un sito Web mobile \u00e8 intuitiva e il sito Web si carica rapidamente sui dispositivi mobili, gli utenti abbandoneranno comunque il sito Web se presenta elementi che non rispondono al loro tocco. Ci\u00f2 significa che questi elementi hanno touch target troppo piccoli e Google consiglia di renderli larghi almeno 7-10 mm.\n <\/li>\n
- \n Meno disordine<\/strong>. Sinonimo della tendenza al minimalismo nel design dell'interfaccia utente e dell'esperienza utente, questo suggerimento indica che Google classifica i siti Web mobili disordinati pi\u00f9 in basso, poich\u00e9 \u00e8 difficile interagire con essi.\n <\/li>\n<\/ul>\n
\n In altre parole, i marchi di e-commerce dovrebbero prestare uguale attenzione alla funzionalit\u00e0 dei loro siti Web sia su desktop che su dispositivi mobili per offrire l'esperienza completa del marchio.\n<\/p>\n
\n 5 Puntare sulla velocit\u00e0
\n<\/h5>\n\n All'inizio dell'articolo, abbiamo anche accennato al fatto che i clienti decidono se interagire con il tuo marchio nei primi 0,05 secondi di visita al tuo sito web.\n<\/p>\n
\n Per i marchi di e-commerce, una bassa velocit\u00e0 di caricamento della pagina pu\u00f2 essere dannosa. Poich\u00e9 si tratta di un settore molto competitivo, non vi \u00e8 alcun problema per un utente a cercare un altro marchio di e-commerce con un prodotto simile ma un sito Web a caricamento rapido.\n<\/p>\n
\n Anche le prestazioni fanno parte dell'esperienza dell'utente e la dicono lunga su come apprezzi i tuoi visitatori come marchio di e-commerce.\n<\/p>\n
\n Quindi, qual \u00e8 l'obiettivo per un designer UX quando si tratta di una perfetta velocit\u00e0 di caricamento della pagina?\n<\/p>\n
\n Secondo Unbounce, occorrono in media 15,3 secondi per caricare una pagina di destinazione. Questo, tuttavia, \u00e8 gi\u00e0 molto lungo se il tuo obiettivo \u00e8 creare un'esperienza utente positiva.\n<\/p>\n
\n Pertanto, Unbounce afferma che la migliore velocit\u00e0 di caricamento della pagina \u00e8 compresa tra 2,4 e 3,21 secondi, ma i siti che si caricano in cinque secondi ottengono anche sessioni medie pi\u00f9 lunghe (70% in pi\u00f9 secondo la fonte).\n<\/p>\n
\n Pertanto, l'obiettivo finale per un'esperienza utente positiva \u00e8 raggiungere una velocit\u00e0 di caricamento della pagina di 3 secondi in media.\n<\/p>\n
\n 6 Creare l'esperienza del camerino
\n<\/h5>\n\n Passiamo ora dalla parte tecnica della nostra discussione alle tendenze nei servizi che i marchi di e-commerce possono offrire per migliorare l'esperienza dell'utente e l'interazione dell'utente con il marchio.\n<\/p>\n
\n Una delle tendenze in crescita nel design di UI e UX quest'anno \u00e8 stata l'introduzione di camerini virtuali.\n<\/p>\n
\n L'esperienza dei camerini online \u00e8 stata una risposta alle crescenti richieste dei consumatori di interagire maggiormente con i prodotti e provarli. Sappiamo tutti che stiamo comprando un maiale in un colpo se non possiamo toccare fisicamente il prodotto. Ci\u00f2 \u00e8 particolarmente vero quando si tratta di marchi di e-commerce che vendono vestiti o accessori.\n<\/p>\n
\n Uno di questi marchi di e-commerce \u00e8 Warby Parker, un'azienda online che vende occhiali, ha risposto a questo problema lanciando un'app mobile, in cui gli utenti possono provare diverse forme di occhiali semplicemente scattando una foto:\n<\/p>\n
![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-314434-6383972a0f7bf.webp\")
<\/a><\/p>\n\n Questa app \u00e8 stata molto utile per i clienti che desiderano acquistare occhiali ma sono titubanti su quale forma degli occhiali si adatter\u00e0 al loro viso.\n<\/p>\n
\n Questa tendenza \u00e8 la fusione tra UX e AR (realt\u00e0 aumentata), in quanto i clienti interagiscono con oggetti della vita reale, che vengono potenziati da modalit\u00e0 sensoriali generate al computer, per ricevere un'esperienza utente completa con il marchio.\n<\/p>\n
\n 7 Raccontare una storia attraverso immagini
\n<\/h5>\n\n Un'altra tendenza che mira a migliorare l'esperienza dell'utente attraverso i contenuti del sito Web \u00e8 la narrazione visiva.\n<\/p>\n
\n Il ruolo dello storytelling nel marketing \u00e8 enorme. La ricerca mostra che i messaggi di marketing forniti come storie sono fino a 22 volte pi\u00f9 coinvolgenti e memorabili. Storytelling significa pi\u00f9 valore, motivo per cui \u00e8 migrato con successo al design UX ed \u00e8 diventato visual storytelling.\n<\/p>\n
\n Per un marchio di e-commerce, la narrazione visiva \u00e8 essenziale per l'esperienza dell'utente, poich\u00e9 avvicina i clienti al marchio e offre loro una partecipazione esclusiva alla definizione di questo marchio.\n<\/p>\n
\n Uno dei marchi che combina con successo narrazione visiva ed esperienza utente positiva \u00e8 Always, il marchio per l'igiene personale di P&G:\n<\/p>\n
![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-314434-6383972d84b88.webp\")
<\/a><\/p>\n\n Usando il visual storytelling, Always racconta come il brand partecipa a una serie di cause sociali, rivelando le storie, come le persone interagiscono con il brand e il suo prodotto attraverso il loro punto di vista personale:\n<\/p>\n
![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-314434-63839730a17d5.webp\")
<\/a><\/p>\n\n C'\u00e8, tuttavia, un problema con il posizionamento dei contenuti quando si tratta di narrazione visiva nel design UX. A seconda della lingua parlata dal pubblico di destinazione e in quale direzione legge (da sinistra a destra o da destra a sinistra), il contenuto verr\u00e0 posizionato in modo diverso.\n<\/p>\n
\n Ad esempio, per il pubblico che legge da sinistra a destra, il contenuto dovrebbe essere posizionato al centro o a sinistra e con circa 75 caratteri per riga:\n<\/p>\n
![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-314434-6383973383a31.webp\")
<\/a><\/p>\n\n Lo storytelling visivo \u00e8 una metodologia alla base del design UX, essenziale per i marchi di e-commerce, poich\u00e9 basano tutta la loro esperienza con il cliente sulle esperienze online.\n<\/p>\n
\n 8 Effettuare il pagamento senza sforzo
\n<\/h5>\n\n Un'altra tendenza dei clienti esigenti \u00e8 rendere il checkout pi\u00f9 semplice. Il checkout senza sforzo \u00e8 anche una delle maggiori sfide nella progettazione di UX.\n<\/p>\n
\n Secondo le recenti statistiche di InvestCRO, il tasso medio di abbandono del carrello \u00e8 del 65,23%, a cui contribuiscono in modo considerevole i seguenti motivi:\n<\/p>\n
- \n
- 14% – nessuna opzione di pagamento per gli ospiti\n <\/li>\n
- 11% \u2013 processo di pagamento complesso\n <\/li>\n
- 7% \u2013 opzioni di pagamento insufficienti\n <\/li>\n<\/ul>\n
\n Poich\u00e9 il completamento dei pagamenti e il checkout appartengono all'esperienza dell'utente, il designer UX \u00e8 colui che dovrebbe preoccuparsi di renderlo pi\u00f9 semplice.\n<\/p>\n
\n Se il sito Web \u00e8 alle prese con un elevato tasso di abbandono del carrello, \u00e8 compito di un progettista UX:\n<\/p>\n
- \n
- Scopri perch\u00e9 questo sta accadendo con l'aiuto dei test di usabilit\u00e0 (attraverso interviste agli utenti e dati ricevuti dall'assistenza clienti).\n <\/li>\n
- Mappa il percorso del cliente con la considerazione dei dati raccolti dai test di usabilit\u00e0.\n <\/li>\n
- Esegui il test AB per vedere come funziona la soluzione.\n <\/li>\n<\/ul>\n
\n Poich\u00e9 il successo di un marchio di e-commerce dipende molto dall'esperienza del cliente con il checkout, rendere questo processo pi\u00f9 semplice con il design UX \u00e8 un contributo importante per un'esperienza utente positiva.\n<\/p>\n
\n 9 Puntare su offerte personalizzate
\n<\/h5>\n\n La personalizzazione \u00e8 la tendenza che \u00e8 qui per restare. E UX pu\u00f2 portarlo a un altro livello progettando offerte personalizzate.\n<\/p>\n
\n Molti marchi di e-commerce ne stanno gi\u00e0 facendo un grande uso.\n<\/p>\n
\n Ad esempio, Thinx, un marchio di e-commerce che vende biancheria intima e prodotti per l'igiene personale, ha progettato un sondaggio per aiutare a scegliere i prodotti che si adattano alle esigenze di un utente:\n<\/p>\n
![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-314434-638397366f145.webp\")
<\/a><\/p>\n\n A seguito dei risultati del sondaggio, il marchio crea offerte personalizzate, perfette per i nuovi clienti.\n<\/p>\n
\n Un'altra azienda, Tobi, un marchio di e-commerce che vende vestiti, si \u00e8 concentrata sull'inclusivit\u00e0 progettando una finestra pop-up per aiutare le persone con disabilit\u00e0 ad adattare il sito Web per rendere l'interfaccia utente pi\u00f9 comoda da usare:\n<\/p>\n
![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-314434-638397393475a.webp\")
<\/a><\/p>\n\n Questi contributi alla progettazione di UI e UX hanno l'obiettivo di personalizzare l'esperienza di ogni utente con il marchio, riconoscendo le caratteristiche e i comportamenti unici di ogni utente.\n<\/p>\n
\n 10 Conversare con il cliente
\n<\/h5>\n\n Nell'e-commerce, i chatbot svolgono un ruolo importante, fornendo assistenza ai clienti. Fanno anche parte dell'esperienza dell'utente, indipendentemente dal fatto che utilizzino il design dell'interfaccia utente grafica o il design dell'interfaccia utente vocale.\n<\/p>\n
\n Il design dell'interfaccia utente offre una grande versatilit\u00e0 ai marchi di e-commerce quando si tratta di creare chatbot. Ad esempio, MeUndies, un marchio di e-commerce che vende biancheria intima, utilizza il chatbot del proprio sito Web per rispondere alle domande pi\u00f9 cercate:\n<\/p>\n
- \n Lavora sui touch target<\/strong>. Anche se l'interfaccia di un sito Web mobile \u00e8 intuitiva e il sito Web si carica rapidamente sui dispositivi mobili, gli utenti abbandoneranno comunque il sito Web se presenta elementi che non rispondono al loro tocco. Ci\u00f2 significa che questi elementi hanno touch target troppo piccoli e Google consiglia di renderli larghi almeno 7-10 mm.\n <\/li>\n
- \n Ricerca prima del prototipo<\/strong>. Poich\u00e9 i progettisti di UX sono di parte, Google consiglia di non entrare subito nella prototipazione, ma di ricercare prima il pubblico di destinazione mediante analisi euristiche e test AB.\n <\/li>\n