Come migliorare la progettazione dell'esperienza utente ottimizzando l'ansia interstiziale

Oggi stiamo parlando di qualcosa che ci fa rabbrividire tutti: l'ansia interstiziale - sì, suona orribile e, sinceramente, dal punto di vista del designer non è davvero eccezionale. Tuttavia, faremo del mio meglio per capovolgere quei cipiglio discutendo tutto ciò che è necessario sapere, compresi i modi in cui è possibile ottenere un'ansia interstiziale ottimizzata durante il processo di progettazione.

L'ansia interstiziale è quella sensazione di irritazione che provi quando interagisci con una pagina web o il design di un'app e qualcosa sembra semplicemente strano. Non si carica, è in ritardo o semplicemente non funziona come dovrebbe. Entrerò più in dettaglio su questa frase in seguito, ma è importante sapere di cosa si tratta e quanto sia importante nel design UX.

Quando si tratta di design, i marchi devono tenere a mente i consumatori e la loro esperienza digitale. Devono creare piattaforme entusiasmanti e coinvolgenti e offrire al loro pubblico esattamente ciò che stanno cercando.

Questo non è solo nel contenuto, ma nell'aspetto e nell'atmosfera del design. È nel modo in cui gli utenti passano da una pagina di un blocco di contenuto a quella successiva. E se è confuso o in ritardo, è allora che gli utenti inizieranno a provare questa ansia interstiziale che li spegnerà dalla tua pagina e dal tuo marchio nel suo insieme.

Operatori di marketing e imprenditori: ascoltate! Questa guida all'ansia interstiziale può aiutarti a trasformare il design del tuo sito web e della tua app per promuovere conversioni, vendite e identità del marchio nel suo insieme.

Che cos'è l'ansia interstiziale ottimizzata?

In primo luogo, prima di iniziare a ottimizzarlo, l'ansia interstiziale si riferisce allo stato momentaneo di tensione che gli utenti sperimentano tra un'azione e una risposta. Ad esempio, se sono su un sito Web e scelgo di fare clic su un pulsante (azione) per passare a un'altra pagina, quella pagina dovrà essere caricata (risposta) prima che io possa visualizzarla.

Se sei nato prima della banda larga, avrai fin troppo familiarità con le pagine web a caricamento lento: il generatore di ansia definitivo! Questo, insieme al feedback ritardato e ai problemi di latenza, sono in genere i motivi principali alla base dei ritardi che un utente sperimenterà tra la propria azione e la risposta prevista.

Potresti pensare che questi pensieri e sentimenti siano fugaci, ma hanno un profondo impatto sugli utenti e rimangono con loro anche se inconsciamente. Gli utenti prenderanno inevitabilmente una nota mentale della lentezza del tuo sito e la equivarranno a un'inefficienza del tuo marchio generale.

E questo significa un disastro per future conversioni, lead, vendite e crescita.

L'ansia interstiziale ottimizzata è importante per l'esperienza utente?

Se preferisci avere persone felici che tornano sul tuo sito, allora sì! Avere un design incentrato sull'utente è fondamentale per ridurre l'ansia del design UX e promuovere il tuo marchio e la tua attività. In tutta serietà, l'ansia interstiziale può avere un impatto sfortunatamente profondo sulle prestazioni del tuo sito Web o della tua app.

Durante la Web 2.0 Conference del 2006, Marissa Mayer, allora vicepresidente di Google, ha rivelato una ricerca che mostrava che un ritardo di 0,5 secondi nel tempo di caricamento ha comportato un calo del 20% del traffico per la pagina di ricerca di Google.

Un utente su cinque ha lasciato il sito perché è rimasto in stallo per mezzo secondo...

Ora pensa a cosa potrebbe significare potenzialmente in relazione al tuo sito web. Se scegli di lasciare incustoditi i problemi di velocità e prestazioni, quanto tempo passerà prima che i tuoi utenti sperimentino un'ansia simile e alla fine si alienino? Non molto tempo, secondo Mayer.

Guardate in questo modo. Il tuo sito web potrebbe essere pieno di tutte le risposte giuste. Le tue campagne social potrebbero risuonare perfettamente con il tuo pubblico di destinazione. I tuoi progetti creativi potrebbero attirare l'attenzione del cliente perfetto. Tuttavia, non conterà nulla se quelle persone non possono accedere alle informazioni che hai passato ore a creare sul tuo sito.

Le persone non vogliono solo buoni contenuti, vogliono efficienza. Vogliono quello che vogliono, dove lo vogliono, ma soprattutto, quando lo vogliono. Se il tuo sito sta producendo ritardi in tale processo, i consumatori probabilmente cercheranno altrove le informazioni, i prodotti o i servizi che stavano cercando originariamente.

Utilizzo dell'ansia interstiziale ottimizzata per migliorare il design UX

L'ultima cosa che vuoi è un design UX che influisca negativamente sull'esperienza che i visitatori del tuo sito Web stanno vivendo. Pertanto, l'utilizzo dell'ansia interstiziale ottimizzata è un ottimo modo per ridurre la probabilità che gli utenti incontrino velocità di caricamento lente o problemi di transizione.

Prima di delineare effettivamente i modi in cui puoi farlo, è importante capire che ci sono due componenti collegate che formano l'ansia interstiziale: l'ansia di transizione e l'ansia temporale.

Ansia di transizione

In primo luogo, consideriamo l'ansia di transizione che le persone possono provare. Questo è il primo passo della sequenza e si riferisce all'ansia derivata dal periodo di transizione verso un'altra schermata o pagina. Questo passaggio di transizione da una sezione di un sito o fase di un processo a un altro deve essere completamente senza soluzione di continuità. Se un utente sperimenta un attrito, alla fine ostacolerà il processo e interromperà quella che dovrebbe essere un'esperienza continua.

Un ottimo esempio di ansia transitoria è durante la fase di checkout di una transazione online che un utente sta effettuando. Supponiamo, ad esempio, di aver aggiunto al carrello tutti gli articoli che desideri acquistare da Amazon. Sei pronto per pagare il tuo ordine e inizia a seguire i passaggi per rivedere il tuo acquisto.

Tutto sembra andare secondo i piani, tuttavia, ti accorgi che quando fai clic su Completa acquisto vieni reindirizzato alla home page di Amazon.

"Il mio ordine è stato completato?"

"Sono stato accusato?"

"Dov'è l'e-mail di conferma del mio ordine?"

Queste sono tutte potenziali domande che potresti farti in preda al panico se non hai ricevuto la schermata o la pagina di transizione prevista. Il cambiamento improvviso provoca un aumento dell'ansia: è solo il nostro istinto naturale.

Anche se c'è una soluzione facile, anche se è stato solo un piccolo inconveniente momentaneo, è sufficiente spegnere le persone e riempirle di una negatività che rimarrà con loro in futuro. E potrebbe persino indurli a lasciare il tuo sito e terminare del tutto l'acquisto.

ansia temporale

La seconda forma di ansia interstiziale si concentra sulla tensione causata dal tempo necessario per caricare una pagina a cui un utente sta tentando di accedere. Ciò si verifica dopo che un utente è passato alla nuova pagina o schermata, ma si riferisce specificamente al tempo necessario per caricare tutti i contenuti delle pagine.

Naturalmente, più tempo ci vuole, più diventerai ansioso e, in particolari situazioni, può essere piuttosto stressante: di nuovo, pensa a un processo di acquisto.

Ad esempio, stai cercando di acquistare i biglietti per un concerto di Ed Sheeran. Ti aspetti che sarà difficile ottenere i biglietti e che il sito web potrebbe essere più lento del solito, ma ti aspetti comunque di seguire il normale processo di prenotazione se sei abbastanza fortunato da avere l'opportunità di acquistare i biglietti.

Arrivi alla fase di pagamento del processo di prenotazione: hai quasi ricevuto i tuoi biglietti! Tuttavia, quando si fa clic su "paga ora", la schermata passa a una schermata caricata solo al 25% circa. Non puoi dire se hai pagato o meno i biglietti e lo schermo sembra bloccarsi.

"Devo aggiornare la pagina?"

"E se dovessi pagare due volte?"

"Ho perso il mio posto in coda?"

Questo è un ottimo esempio di ansia temporale e una cosa comunemente sperimentata. Sei letteralmente nel limbo se ti sono stati assegnati i biglietti o meno.

Ed è una cosa che possiamo riferire anche a tutti. Non sei sicuro di cosa fare, non sei sicuro di aver fatto qualcosa di sbagliato: tutto ciò che sai è che c'è un ritardo nel processo e che i risultati finali potrebbero non essere mai raggiunti.

Su scala ridotta, tuttavia, questa ansia può essere avvertita quando una pagina non viene caricata. Non devi essere nelle fasi finali di una transazione. Se vuoi davvero acquistare un nuovo vestito, ma le immagini dei prodotti sul tuo rivenditore online preferito non vengono caricate, sarai costretto a cercare altrove, in modo semplice e chiaro.

E il tuo marchio non lo vuole.

Come migliorare l'esperienza utente attraverso l'ansia interstiziale ottimizzata

Per semplicità, scomponiamo ancora questo nei tipi precedentemente identificati di ansia interstiziale. Iniziare con…

Come ridurre l'ansia di transizione

Il modo ottimale per ridurre l'ansia di transizione è attraverso l'uso di animazioni sottili e transizioni tra gli schermi. Come mai? Bene, questo dovrebbe aiutare gli utenti ad adattarsi gradualmente al cambiamento tra la pagina o le schermate che altrimenti avrebbero un aspetto molto diverso.

Come hanno capito le aziende online, imparare a incanalare l'ansia della transizione a proprio vantaggio è un approccio migliore rispetto al tentativo di rimuoverla del tutto. Creando elementi di transizione, come offrire un'anteprima di uno snippet o un assaggio di ciò che verrà nella sezione successiva, gli utenti possono anticipare, piuttosto che preoccuparsi, ciò che accadrà dopo.

Tempi di caricamento e lentezza in alcuni casi sono inevitabili. E cercare di risolvere questi problemi potrebbe richiedere più tempo e causare più irritazione di quanto desiderino i marchi. Ma incorporare queste animazioni è un modo semplice ed efficace per creare una transizione senza interruzioni che aumenta la positività e l'eccitazione.

Usando un esempio pratico di vita reale, immagina quando sei svegliato alle 6:00 dalla sveglia (non è un bel pensiero, lo so!). Ora, peggiora ulteriormente questa esperienza immaginando come reagiresti se anche la luce della tua camera da letto si accendesse inaspettatamente allo stesso tempo. Saresti scioccato, agitato, arrabbiato, sconvolto e probabilmente confuso.

Tuttavia, se la luce della tua camera da letto dovesse accendersi gradualmente nel corso del tempo in cui la sveglia è attiva, allora avresti nove minuti per adattarti alla luce, piuttosto che essere preso alla sprovvista e lasciato in uno stato di shock. Questo è lo stesso principio che viene applicato alla transizione graduale della pagina web.

Hai bisogno di aiuto con la tua destinazione online? Queste agenzie di web design e sviluppo possono aiutarti a trasformare il tuo sito da squallido a favoloso!

Come ridurre l'ansia temporale

Esistono due metodi chiave che puoi utilizzare per contrastare il problema dell'ansia temporale, entrambi incentrati sull'uso di elementi visivi per fornire qualcosa di più interessante di uno schermo vuoto: un'animazione di caricamento e un'animazione segnaposto.

Caricamento animazione

L'utilizzo di un'animazione di caricamento come una ruota che gira o una barra di caricamento può essere tutto ciò che serve per trasformare una sequenza di caricamento della pagina confusa in un'esperienza utente soddisfacente. Potresti essere a conoscenza e probabilmente hai sperimentato l'animazione di caricamento di Facebook.

Quello che potresti non realizzare è che in base al tipo di grafica utilizzata per l'animazione, gli utenti si sentiranno diversamente. Ad esempio, è stato suggerito che "quando agli utenti è stata presentata un'animazione di caricamento personalizzata nell'app Facebook iOS (a sinistra) hanno incolpato l'app per il ritardo. Ma quando agli utenti veniva mostrato lo spinner del sistema iOS (a destra), era più probabile che incolpassero il sistema stesso.

Ancora una volta, inserendo questa tecnica in un contesto, pensa all'ultima volta che sei stato in un ascensore. Diciamo che eri al ventesimo piano e volevi scendere al quarto. Quando l'ascensore inizia a muoversi, ovviamente ne sei consapevole.

Tuttavia, cosa accadrebbe se non avessi idea di quale piano fossi. Come fai a sapere quando scendere? Mentre aspetti in ascensore, di solito puoi vedere il numero del piano visualizzato. Quando scendi verso il quarto piano sai quando aspettarti che l'ascensore si fermi.

Questo non solo ti dà la possibilità di prepararti leggermente, ma alla fine rende il viaggio piacevole o, in altre parole, è un'esperienza utente senza attriti!

E puoi persino incorporare alcuni contenuti e animazioni di marca qui per far sembrare che sia stato tutto fatto apposta! Questo può aggiungere una giocosità e una personalità creativa al tuo marchio e alla tua identità che rende gli utenti più felici di interagire e impegnarsi.

Il branding è importante e il design ha un effetto immenso sul branding. Se hai problemi con l'ansia da UX, potrebbe essere a tuo favore usare il problema a tuo vantaggio e consolidare in risposta un'identità di marca entusiasmante e innovativa.

Animazione segnaposto

In alternativa, puoi optare per un'animazione segnaposto che simula l'aspetto del contenuto effettivo quando viene caricato. L'esempio seguente è di Medium, che utilizza un semplice wireframe dell'immagine come segnaposto, mentre l'immagine effettiva viene caricata.

Questo è un modo più semplice ed elegante per risolvere il problema dell'ansia. E funziona alla grande per i marchi che non hanno bisogno né vogliono tutte le campane e i fischietti che provengono da animazioni creative e complicate.

Promuove una sensazione e un'atmosfera di eleganza e raffinatezza che conferisce al tuo marchio un'autorità che altrimenti andrebbe persa a causa dei tempi di caricamento lenti e dei design pieni di ansia.

Utilizzo dell'ansia interstiziale ottimizzata per creare progetti

Ora che abbiamo una comprensione di cos'è l'ansia interstiziale, come si relaziona all'utente e come possiamo ridurla, possiamo iniziare a mettere insieme i passaggi che i designer possono intraprendere per garantire che i loro progetti soddisfino le aspettative UX stabilite dalle persone che importa — gli utenti!

Sulla base delle potenziali soluzioni delineate sia per l'ansia transitoria che per quella temporale, è chiaro che il movimento svolge un ruolo importante nella riduzione dell'ansia interstiziale. Issara Willenskomer di UX in Motion ha messo insieme un "Manifesto UX in Motion" in cui delinea le 12 opportunità specifiche per supportare l'usabilità nei tuoi progetti UX utilizzando il movimento.

Nel caso dell'ansia interstiziale, ciò significa:

• Ridurre il tempo di caricamento di una pagina o di una schermata
• Ridurre al minimo il numero di schermate e pagine vuote
• Ridurre qualsiasi attrito causato da transizioni stagnanti

E così i marchi possono utilizzare queste 12 opzioni delineate per creare un design dinamico e intuitivo.

Puoi incorporare elementi dinamici anche nei siti web aziendali! Dai un'occhiata a questi migliori siti Web professionali per l'ispirazione!

I 12 principi di UX In Motion

Due cose mi vengono in mente con l'immagine sopra. In primo luogo, i movimenti sono piuttosto sottili e, in secondo luogo, è piuttosto interessante come 12 semplici movimenti possano costituire le basi da cui sono costruite la maggior parte delle animazioni.

Queste sono solo le basi, ma possono essere sviluppate in modi dinamici e creativi per creare un design che promuova l'interattività, il coinvolgimento e, si spera, anche le vendite.

Willenskomer approfondisce ciascuno di questi elementi in modo molto dettagliato, ma in sintesi sono i seguenti:

1. Easing: il comportamento dell'oggetto si allinea con le aspettative dell'utente quando si verificano eventi temporali
2. Offset e ritardo: definisce le relazioni e le gerarchie degli oggetti quando si introducono nuovi elementi e scene
3. Parenting: crea relazioni gerarchiche spaziali e temporali quando si interagisce con più oggetti
4. Trasformazione: crea uno stato continuo di flusso narrativo quando cambia l'utilità dell'oggetto
5. Modifica del valore: crea una relazione narrativa dinamica e continua quando il soggetto del valore cambia
6. Mascheramento: crea continuità in un oggetto di interfaccia o in un gruppo di oggetti quando l'utilità è determinata da quale parte dell'oggetto o del gruppo viene rivelata o nascosta
7. Sovrapposizione: crea relazioni spaziali tra oggetti e narrativa nella pianura visiva quando gli oggetti a strati dipendono dalla posizione
8. Clonazione: crea continuità, relazione e narrativa, quando nuovi oggetti hanno origine e se ne vanno
9. Oscuramento: consente agli utenti di orientarsi spazialmente in relazione a oggetti o scene, non nella gerarchia visiva primaria
10. Parallasse: crea una gerarchia spaziale nella pianura visiva quando gli utenti scorrono
11. Dimensionalità: fornisce una struttura narrativa spaziale quando nuovi oggetti nascono e partono
12. Dolly & Zoom: preserva la continuità e la narrazione spaziale durante la navigazione tra oggetti e spazi dell'interfaccia

Tenere a mente queste 12 opzioni di movimento è un'ottima guida per garantire che il tuo design sia al top del suo gioco, incorporando il movimento dove necessario per ridurre l'ansia e favorire una sensazione di eccitazione nel design del tuo sito Web e della tua app.

Tutto ciò che le aziende online devono sapere sull'ansia interstiziale ottimizzata

In sintesi, abbiamo dato un'occhiata all'ansia interstiziale, che cos'è e in che modo può influire sull'esperienza utente di siti Web e app. E non è solo un'altra tendenza passeggera del design.

Come rapido riassunto, ecco alcuni punti chiave rapidi da tenere a mente quando esaminerai l'argomento in futuro:

• L'ansia interstiziale è lo stato momentaneo di tensione che un utente sperimenta tra un'azione e una risposta, come fare clic su un pulsante e attendere il caricamento della pagina
• Ci sono due fasi dell'ansia interstiziale: transitoria e temporale
• Transizionale si riferisce al passaggio da una schermata o pagina a un'altra
• Temporale è il tempo necessario per caricare una pagina o una schermata e in che modo influisce sul comportamento dell'utente
• L'introduzione di transizioni di pagina graduali e il caricamento di animazioni della schermata ti aiuterà a ottenere un'ansia interstiziale ottimizzata e, quindi, una progettazione UX più performante
• I 12 principi di UX in motion definiscono i modi in cui è possibile utilizzare l'animazione per migliorare l'usabilità

L'ansia interstiziale è spesso trascurata ed è diventata solo di recente un argomento di discussione nel mondo del design, del branding e del marketing. Ma è un concetto importante da comprendere e correggere nei propri progetti.

Gli utenti esprimono giudizi in base al design del web e delle app. Arrivano alle proprie conclusioni sul tuo marchio in risposta a come i tuoi progetti li fanno sentire. E se frustrano, confondono o irritano, non torneranno.

Si spera che tu abbia una migliore comprensione del concetto dopo aver letto questo articolo. Se pensi che abbiamo perso dei punti cruciali o se desideri farci domande sull'ansia interstiziale ottimizzata, puoi sempre condividere i commenti.

Vuoi più approfondimenti sul design? Iscriviti alla dose giornaliera di DesignRush!

L'esperienza utente è fondamentale anche nella progettazione delle app. DesignRush ha un elenco di ottime società di progettazione e sviluppo di app che possono creare una destinazione mobile efficace per il tuo marchio.