UX Design & Web Usability: cosa c'è dietro la User Experience?

Sonja Hoffmann Ultimo aggiornamento 21.10.2020
8 Min.
UX design usability
Ultimo aggiornamento 21.10.2020

User Experience (UX) Design, Usabilità, Human Interface Design e Human Centered Design - questi sono solo alcuni termini con cui ci confrontiamo sempre più spesso. Ma cos'è in realtà? Perché dovresti essere interessato all'usabilità e all'esperienza utente come web designer? E come puoi ottenere un valore aggiunto attraverso l'UX anche se non hai un UX designer nel tuo team?

Nel mio ultimo articolo sul web design armonioso, vi ho mostrato come creare le vostre linee guida di design. Tuttavia, un web design armonioso è plasmato da diversi fattori - quindi oggi vi presenterò l'esperienza dell'utente:

UX Design & Web Usability: cosa c'è dietro la User Experience?

Perché dovrei preoccuparmi dell'UX?

Molti italiani designer che conosco hanno un forte background nel design della comunicazione - quindi vengono dalla direzione della stampa. Qui creano composizioni sofisticate che presentano un messaggio preciso.

Nel design della stampa, il percorso di comunicazione è chiaro: c'è un mittente (per esempio, un poster o una brochure) e un destinatario (la persona a cui il mezzo è rivolto). Il destinatario non deve fare altro che ricevere il messaggio, capirlo e poi prendere una decisione (di acquisto).

Il web design, d'altra parte, è interattivo: non è solo inviare un messaggio, è creare una conversazione. 

Esperienza utente: l'esperienza dell'utente

Fin dai primi giorni di Internet, le aziende hanno osservato gli aspetti psicologici di queste interazioni. Tuttavia, allora non si parlava di UX designer, ma di human interaction designer - e la professione era generalmente molto meno comune di oggi.

Cos'è l'esperienza utente?

L'esperienza dell'utente secondo gli standard odierni non inizia quando si visita un sito web e non finisce quando lo si lascia. Piuttosto, descrive l'intera esperienza che un utente ha con la marca o il prodotto - dal primo all'ultimo contatto.

Tuttavia, vorrei limitarmi solo alla sottoarea che è direttamente collegata a un sito web: l'usabilità. Il percorso attraverso il nostro prodotto deve quindi essere il più piacevole e senza soluzione di continuità possibile. Tuttavia, non bisogna trascurare il budget e le specifiche interne dell'azienda.

Una buona usabilità può avere un impatto non trascurabile sulle vostre cifre di vendita. Ciò che mi spinge personalmente è il dovere come operatore di un sito web di non frustrare l'utente.

Affordanze, significanti e feedback

In parole povere, l'Affordance descrive ciò che è generalmente possibile. Usando uno schermo desktop come esempio, questa sarebbe la capacità di "cliccare". Dal momento che sarebbe ozioso e frustrante se si dovesse cliccare a caso dappertutto sul sito web, costruiamo dei segnalatori (indicatori). Questi mostrano all'utente dove qualcosa è possibile e cosa. 

Uno dei significanti più noti è un bottone. Delimita l'area di interazione. Sappiamo che se clicchiamo qui, succederà qualcosa. Questo è di solito rafforzato dagli effetti hover - o quando il cursore si trasforma in un dito indice quando ci passo sopra. Anche questi sono significanti.

Cosa sono Affordances, Signifiers e Feedback?

L'Affordance descrive quale interazione è generalmente possibile. I significanti segnalano che un'interazione è possibile. Il feedback, d'altra parte, assicura che l'utente sappia che la sua interazione ha innescato qualcosa.

Lo stato attivo del pulsante mi mostra come feedback che è successo qualcosa quando ci ho cliccato sopra. Tutti e tre i processi vanno uno dentro l'altro e possono aiutare come domande di base per rendere il vostro sito web più user-friendly in primo luogo.

  1. Quali interazioni sono generalmente possibili?
  2. Come posso mostrare ai miei utenti che sono possibili?
  3. Come fanno a sapere che hanno fatto la cosa "giusta"?

La possibilità di interazione è spesso definita dal dispositivo utilizzato per accedere al sito web: Lo swiping e il touch non sono possibili su un computer desktop (standard), mentre non c'è alcun effetto hover sui dispositivi mobili.

Questo è esattamente ciò che deve essere considerato quando si scelgono i significanti. Per esempio, i link sono chiari solo quando ci passo sopra con il mouse? Allora un visitatore mobile non riconosce affatto che un'interazione è possibile. 

Gli utenti interagiscono fisicamente e digitalmente

Le opportunità e i significanti possono anche andare oltre l'interfaccia del vostro sito web. Il vostro visitatore può essere influenzato da circostanze esterne, o usare certe interazioni in modo diverso da come era stato originariamente previsto. Per esempio, il pulsante di ritorno del browser è una circostanza esterna al tuo sito web. 

Se il visitatore ha accidentalmente navigato in una parte del tuo sito dove non può trovare quello che vuole, c'è una buona probabilità che navigherà usando il pulsante indietro - invece dei link sul tuo sito. 

Come le interazioni sono deliberatamente usate "in modo scorretto" - un esempio

Spesso prenoto voli tramite un fornitore di servizi straniero la cui pagina non è visualizzata di default né in tedesco né in inglese. Improvvisamente non sono riuscito a trovare le impostazioni della lingua tramite la versione mobile. Tuttavia, mi sono ricordato che avevo già avuto accesso al sito web tramite l'app, dove tutto è stato poi visualizzato in inglese per impostazione predefinita. Da allora, accedo al sito mobile solo attraverso la deviazione "app", perché me lo ricordo e perché preferisco fare due clic in più che cliccare in giro per la frustrazione su una pagina mobile.

Dovete anche essere consapevoli che non potete "rieducare" i vostri utenti. Non si può impedire loro di fare le cose nel modo sbagliato, ma si può pianificare questo comportamento e assicurarsi che ci siano abbastanza alternative.

Un altro buon esempio che ha causato mal di testa a tutti noi è l'uso - purtroppo ancora diffuso - di browser obsoleti o Internet Explorer. Alcuni layout non vengono visualizzati con lo stesso valore creativo che hanno in Firefox o Chrome, per esempio. Anche se questo è fastidioso, dobbiamo progettare e programmare altrettanto per questi utenti.

Perché peggio che accedere al sito tramite l'app, per esempio, o usare il pulsante indietro, è quando il visitatore del sito rinuncia del tutto - sia perché usare il nostro sito crea troppa frustrazione o perché ci sono troppo poche alternative di gestione degli errori.

Perché i test di usabilità?

A proposito, il modo migliore per scoprire questi comportamenti è l'osservazione. Chi testa il sito web è relativamente poco importante. Non è necessario trovare persone che usano effettivamente il sito in seguito. Perché errori di usabilità davvero grossolani si verificano con quasi tutti gli utenti. 

È importante non dire al tester cosa fare o come arrivare dove. La chiave è identificare e annotare i possibili ostacoli e complicazioni per rendere il tuo sito web più user-friendly. Meno si dice all'intervistato, più i risultati sono imparziali.

I 4 diversi indicatori

Quali segnali puoi impostare sulla tua pagina per evidenziare le interazioni? Distinguiamo quattro diverse categorie, che vi presenterò brevemente.

1. significante esplicito

I segnalatori espliciti consistono in un prompt in forma di testo, come "clicca qui". Li troverai spesso insieme ad altri indicatori, come i moduli di contatto o i pulsanti. Questi dovrebbero essere il più chiari e concisi possibile. Inoltre, per amore della semplicità, si dovrebbe ripiegare su frasi familiari ed evitare formulazioni presumibilmente creative. 

Il valore di riconoscimento permette all'utente di sapere con un buon grado di certezza quale risultato aspettarsi da un'interazione.

"VEDERE PIÙ" è un esempio di un semplice significante esplicito.

UX Design & Web Usability: cosa c'è dietro la User Experience?
https://www.lonelyplanet.com/portugal/lisbon

2. design pattern: modelli e convenzioni

I design pattern si riferiscono a design ricorrenti a cui siamo diventati così abituati che non richiedono più spiegazioni o ulteriori riferimenti. Ce ne sono relativamente tanti. 

Tutti dovrebbero sapere, per esempio, che cliccando sul logo si torna alla pagina dell'indice. O che il testo blu sottolineato rappresenta un link. Anche la barra di navigazione di un sito web - come la usiamo oggi - è un fenomeno del genere. Ci aspettiamo che siano in certi posti di una pagina. Sappiamo che la barra di navigazione serve come guida per i contenuti, conducendoci attraverso il sito web. Una barra di menu che si trasforma in un'icona hamburger sui dispositivi mobili non ha bisogno di ulteriori spiegazioni. 

Modelli comuni che abbiamo imparato negli ultimi anni

La cosa sorprendente è che questi modelli hanno spesso una validità internazionale. Lo si vede particolarmente bene se ci si vuole orientare su un sito di cui non si parla la lingua. Quindi vale la pena non reinventare la ruota qui. Invece, è raccomandato per una migliore usabilità del tuo sito, se ti occupi dei modelli stabiliti. 

Questo è ben visibile sull'esempio di una pagina di un ristorante (selezionato a caso) a Mosca. Anche se non parlo russo e non so leggere il cirillico, vedo subito come posso navigare nella pagina. Posso vedere in quale punto di navigazione mi trovo e sono in grado di filtrare subito le informazioni più importanti (contatto).

UX Design & Web Usability: cosa c'è dietro la User Experience?
https://bulka.cafe/

3. significante nascosto

Si possono vedere solo eseguendo una certa azione, come il passaggio del mouse e lo scorrimento. 

I segnalatori nascosti hanno il vantaggio di far sembrare il layout pulito e ordinato. Quindi possono rendere il vostro design più snello. 

Tuttavia, hanno anche alcuni svantaggi. L'utente li trova solo se sa che sono presenti o se esegue accidentalmente l'interazione di attivazione. Pertanto, questi segnali non sono adatti per le call-to-action importanti, ma al massimo per quelle secondarie.

Inoltre, quando si usano i segnalatori nascosti, bisogna tenere presente che potrebbe essere necessario trovare una soluzione separata per ogni dispositivo finale.

Pinterest è un buon esempio:

pinterest

Nella versione desktop, nuove call-to-action appaiono al passaggio del mouse. Dal momento che l'utente clicca intuitivamente sull'immagine per aggiungerla alla sua collezione, la caratteristica molto probabilmente non passerà inosservata.Tuttavia, i progettisti hanno sviluppato un piano B: Cliccando sull'immagine si apre una vista grande in cui sono visibili tutte le possibili interazioni.

È interessante il modo in cui il tutto è risolto nella variante touch-screen. Anche qui, ci sono interazioni nascoste - ma per altri scopi.

UX Design & Web Usability: cosa c'è dietro la User Experience?

L'immagine a sinistra mostra la panoramica generale della pagina. Il menu in basso si ritrae solo quando l'utente scorre verso l'alto - il che sembra insolito all'inizio, ma è anche molto intuitivo. Quando cerchiamo la navigazione, di solito scorriamo verso l'alto. 

Tuttavia, le call-to-action aggiuntive - come nella versione desktop - sono disponibili solo quando si è effettivamente cliccato sull'immagine. Così, non sono più significanti nascosti. 

Tuttavia, mi ha sorpreso che Pinterest usi due icone diverse per la stessa interazione nelle due versioni. Dal punto di vista dell'usabilità, non credo che questo sia consigliabile. Se l'utente passa dalla versione mobile a quella desktop, o viceversa, l'uso delle stesse icone porterebbe a un orientamento più veloce. Questo rende l'uso più fluido. L'usabilità è così positivamente migliorata.

4. significante metaforico

Una lente di ingrandimento, che segnala che il campo di ricerca si trova qui. La busta che rappresenta l'invio di messaggi. Il pulsante che ti segnala la possibilità di premerlo. Tutti i principi hanno in comune il fatto che li conosciamo dal mondo reale. 

La loro utilità nel mondo digitale è diventata un modello di design. Qui però bisogna fare attenzione: Se usate un indicatore metaforico con un simbolo modificato, potrebbe confondere i vostri utenti.

Se usi una cassetta postale invece della familiare busta, per esempio, questo potrebbe danneggiare l'usabilità del tuo sito web. Perché? L'utente deve fermarsi e pensare al prossimo passo. Deve chiedersi se questo simbolo corrisponde a ciò che vuole ottenere.

UX Design & Web Usability: cosa c'è dietro la User Experience?
Copyright: https://www.iconfinder.com/icons/2296974/email_inbox_letter_mail_mailbox_icon_icon

Conclusione

L'usabilità non significa solo che i tuoi visitatori trovano in qualche modo la loro strada attraverso il sito. Piuttosto, usabilità significa che l'attenzione qui è posta olisticamente sul visitatore - il "viaggio" attraverso il tuo sito dovrebbe essere il più possibile senza soluzione di continuità. 

Ogni interruzione - cioè, ogni volta che l'utente deve fermarsi e chiedersi "Cosa viene offerto qui? Cosa succede se ci clicco sopra? Tornerò ancora? Dove mi trovo? Come sono arrivato qui?". - è controproducente in questo senso.

È possibile costruire una pagina in modo tale che non ci siano interruzioni? Molto probabilmente no. A seconda delle informazioni presentate, alcune interruzioni, pensieri diretti e una leggera frustrazione possono anche essere auspicabili.

È importante conoscere i diversi strumenti per poterli utilizzare per il proprio progetto.

Lettura consigliata

Uno dei libri più famosi sull'usabilità è"Don't make me think!" di Steve Krug. Il titolo dice tutto ed è, alla fine, quello che riguarda ogni approccio all'usabilità.

  • "Don't Make Me Think, Revisited: A Common Sense Approach to Web Usability", Steve Krug.
  • "Il design delle cose quotidiane", Donald A. Norman.
  • https://www.uxpin.com/ offre alcuni e-book molto interessanti da scaricare gratuitamente
Le tue domande sull'esperienza utente

Quali domande hai sull'usabilità del web e sul design dell'esperienza utente? Quali processi può consigliare? Sentitevi liberi di usare la funzione di commento. Vuoi altri consigli su web design e sviluppo? Allora seguici su Twitter, Facebook o tramite la nostra newsletter.

Dopo aver studiato Game Design e scrittura creativa, si è specializzata nel web e app designe e nel loro sviluppo. La sua attenzione è rivolta alla gamification e al capire la motivazione e l'esperienza dell'utente, insieme alla passione e alla curiosità per i trend tecnologici.

Articoli correlati

Commenti su questo articolo

Scrivi un commento

Il tuo indirizzo e-mail non sarà pubblicato. I campi obbligatori sono contrassegnati con *.