UX Design & Usabilità del Web: Cosa c'è dietro l'esperienza dell'utente?

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

User Experience (UX) Design, Usabilità, Human Interface Design e Human Centered Design - questi sono solo alcuni dei termini con cui ci confrontiamo sempre più spesso. Ma cos'è in realtà? Perché l'usabilità e l'esperienza dell'utente dovrebbero interessarti in particolare come web designer? E come potete ottenere un valore aggiunto attraverso UX anche se non avete un UX Designer nel vostro team?

Nel mio ultimo articolo su webdesign armonioso Vi ho mostrato come creare le vostre linee guida di progettazione. Tuttavia, il web design armonioso è influenzato da diversi fattori - ecco perché oggi vi presenterò la User Experience:

UX Design & Usabilità del Web: Cosa c'è dietro l'esperienza dell'utente?

Perché dovrei occuparmi di UX?

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

Nella progettazione della stampa, il percorso di comunicazione è chiaro: c'è un mittente (ad esempio, un poster o un opuscolo) e un destinatario (quello a cui è rivolto il supporto). Il destinatario non ha altro da fare se non ricevere il messaggio, capirlo e poi prendere una decisione (di acquisto).

Il web design, invece, è interattivo: non solo si invia un messaggio, ma si crea anche una conversazione. 

User Experience: l'esperienza dell'utente

Fin dai primi tempi di Internet, le aziende si occupano degli aspetti psicologici di queste interazioni. Tuttavia, a quel tempo non si parlava di progettisti di UX, ma di Human Interaction Designers - e la professione era generalmente molto meno comune di quanto non lo sia oggi.

Che cos'è l'esperienza utente?

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

Tuttavia, vorrei limitarmi alla parte del sito web che è direttamente collegata ad un sito web: l'usabilità. Il percorso attraverso il nostro prodotto dovrebbe quindi essere il più piacevole e senza soluzione di continuità possibile. Tuttavia, non bisogna ignorare il budget e le linee guida interne dell'azienda.

Una buona usabilità può avere un impatto significativo sui vostri dati di vendita. Ciò che mi spinge personalmente è il dovere, come operatore di un sito web, di non frustrare l'utente.

Affrancature, significati e feedback

In parole povere, l'accessibilità economica descrive ciò che è generalmente possibile. Utilizzando l'esempio di una schermata del desktop, questa sarebbe la possibilità di "cliccare". Poiché sarebbe inutile e frustrante cliccare a caso in qualsiasi punto del sito web, includiamo i significanti. Questi mostrano all'utente dove qualcosa è possibile e cosa. 

Uno dei più famosi significanti è un pulsante. Limita l'area di interazione. Sappiamo che quando clicchiamo qui succede qualcosa. Questo è di solito intensificato dagli effetti hover - o quando il cursore si trasforma in un dito indice quando mi muovo su di esso (hovere). Anche questi sono dei significanti.

Cosa sono i costi, i significati e il feedback?

L'offerta descrive quale interazione è generalmente possibile. I significanti (indicatori) segnalano che è possibile un'interazione. Il feedback, invece, assicura che l'utente sappia che la sua interazione ha innescato qualcosa.

Lo stato attivo del pulsante mi mostra come feedback che qualcosa è successo quando l'ho cliccato. Tutti e tre i processi sono intrecciati e possono contribuire a rendere il vostro sito web più facile da usare fin dall'inizio.

  1. Quali interazioni sono generalmente possibili?
  2. Come posso mostrare ai miei utenti che sono possibili?
  3. Come sanno di aver fatto la "cosa giusta"?

La possibilità di interazione è spesso definita dal dispositivo utilizzato per accedere al sito web: Su un computer desktop (standard) non è possibile strisciare e toccare, mentre non c'è effetto hovering sui dispositivi mobili.

Questo è esattamente ciò di cui si deve tener conto nella scelta dei significanti. Per esempio, i collegamenti diventano chiari solo quando ci passo sopra il mouse? Allora un visitatore mobile non riconosce che un'interazione è addirittura possibile. 

Gli utenti interagiscono fisicamente e digitalmente

Le offerte e i significanti possono anche andare oltre l'interfaccia del vostro sito web. Il visitatore può essere influenzato da circostanze esterne o utilizzare determinate interazioni in modo diverso da quanto originariamente previsto. Ad esempio, il pulsante indietro del browser è una funzione che si trova al di fuori del vostro sito web. 

Se il visitatore ha accidentalmente navigato verso una parte della vostra pagina in cui non riesce a trovare quello che cerca, è probabile che navigherà usando il pulsante indietro invece dei link della vostra pagina. 

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

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

Ma dovete anche essere consapevoli che non potete "rieducare" i vostri utenti. Non si può "dissuaderli" da un comportamento così "sbagliato", ma si può pianificare questo comportamento e assicurarsi che ci siano abbastanza alternative.

Un altro buon esempio, che ha già causato mal di testa a tutti noi, è l'uso - purtroppo ancora molto diffuso - di browser obsoleti o di Internet Explorer. Alcuni layout non sono visualizzati in modo creativo come in Firefox o Chrome, ad esempio. Anche se questo è fastidioso, dobbiamo progettare e programmare per questi utenti allo stesso modo.

Peggio che usare l'app per accedere alla pagina o al pulsante indietro, ad esempio, è quando il visitatore della pagina si arrende completamente - o perché l'uso del nostro sito crea troppa frustrazione o perché ci sono troppe poche alternative per la gestione degli errori.

Perché i test di usabilità?

A proposito, il modo migliore per scoprire tali comportamenti è osservarli. Chi testa il sito web è relativamente insignificante. Non è necessario trovare persone che utilizzeranno effettivamente il sito in seguito. Perché gli errori di usabilità davvero grossolani si verificano con quasi tutti gli utenti. 

L'importante è che non si dica al tester cosa fare o come arrivare dove. La cosa più importante è identificare e scrivere i possibili ostacoli e complicazioni per rendere il vostro sito web più facile da usare. Meno lo si dice alla persona che esegue il test, più il risultato è imparziale.

I 4 diversi indicatori

Che tipo di segnali potete impostare sul vostro sito per evidenziare le interazioni? Distinguiamo quattro diverse categorie, che vi presenterò brevemente.

1. Significato esplicito

I significanti espliciti consistono in un prompt in forma di testo, come "Clicca qui". Spesso questi possono essere trovati insieme ad altri indicatori, come i moduli di contatto o i pulsanti. Questi dovrebbero essere il più chiari e concisi possibile. Inoltre, per motivi di semplicità, si dovrebbe ripiegare su formulazioni familiari ed evitare formulazioni presumibilmente creative. 

Il valore di riconoscimento consente all'utente di sapere con un alto grado di certezza quale risultato può aspettarsi da un'interazione.

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

UX Design & Usabilità del Web: Cosa c'è dietro l'esperienza dell'utente?
https://www.lonelyplanet.com/portugal/lisbon

2. modelli di design: modelli e convenzioni

I Design Patterns si riferiscono a progetti ricorrenti ai quali siamo talmente abituati da non richiedere più spiegazioni o ulteriori riferimenti. Ce ne sono relativamente tanti. 

Tutti dovrebbero sapere, ad esempio, che cliccando sul logo si ritorna alla pagina dell'indice. O che il testo blu sottolineato rappresenta un link. La barra di navigazione di un sito web - così come la usiamo oggi - è un altro di questi fenomeni. Ci aspettiamo che appaia in certi punti di una pagina. Sappiamo che il Nav Bar ci serve come indice e ci guida attraverso il sito web. Anche una barra del menu che si trasforma in un'icona di Amburgo sui dispositivi mobili non ha bisogno di ulteriori spiegazioni. 

Modelli comuni che abbiamo imparato negli ultimi anni

La cosa sorprendente è che questi disegni hanno spesso una validità internazionale. Lo si vede particolarmente bene se si vuole orientarsi su un sito di cui non si parla la lingua. Quindi vale la pena non reinventare la ruota qui. Invece, per una migliore fruibilità del vostro sito, si raccomanda di affrontare gli schemi stabiliti. 

Questo è chiaramente visibile nell'esempio di un lato 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 le informazioni più importanti (contatto) al primo tentativo.

UX Design & Usabilità del Web: Cosa c'è dietro l'esperienza dell'utente?
https://bulka.cafe/

3. significanti nascosti

È possibile vederle solo eseguendo una determinata azione, come l'hovering e lo scorrimento. 

I significanti nascosti hanno il vantaggio di rendere il layout pulito e ordinato. Così possono rendere il vostro progetto più snello. 

Tuttavia, hanno anche alcuni svantaggi. Vengono trovati dall'utente solo se sa che sono presenti o se esegue accidentalmente l'interazione di attivazione. Pertanto, questi segnali non sono adatti per le chiamate importanti, ma al massimo per le chiamate secondarie di azione (call-to-actions).

Quando si utilizzano i significatori nascosti, si dovrebbe anche tenere presente che potrebbe essere necessario trovare una soluzione separata per ogni dispositivo finale.

Un buon esempio è Pinterest:

pinterest

Nella versione desktop appaiono nuove Call-To-Actions quando sono in bilico. Poiché l'utente clicca intuitivamente sull'immagine per aggiungerla alla sua collezione, la funzione molto probabilmente non passerà inosservata, ma i designer hanno sviluppato un piano B: Cliccando sull'immagine si apre un'ampia visuale in cui sono visibili tutte le possibili interazioni.

È interessante vedere come il tutto si risolve nella versione touch screen. Anche qui ci sono interazioni nascoste - ma per scopi diversi.

UX Design & Usabilità del Web: Cosa c'è dietro l'esperienza dell'utente?

Nell'immagine a sinistra si può vedere la panoramica generale della pagina. Il menu in basso si ritrae solo quando l'utente scorre verso l'alto - cosa che all'inizio sembra insolita, ma è anche molto intuitiva. Quando cerchiamo la navigazione, di solito scorriamo verso l'alto. 

Le Call-To-Actions aggiuntive - come nella versione desktop - sono disponibili solo dopo aver effettivamente cliccato sull'immagine. Quindi non sono più significanti nascosti. 

Quello che mi ha sorpreso, però, è che Pinterest usa due icone diverse per la stessa interazione nelle due versioni. Dal punto di vista dell'usabilità, non credo sia raccomandabile. Se l'utente passa dalla versione mobile a quella desktop, o viceversa, utilizzando le stesse icone sarebbe più facile orientarsi. Questo rende l'utilizzo più agevole. L'usabilità è migliorata positivamente.

4. significanti metaforici

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

Il loro utilizzo nel mondo digitale si è sviluppato in un modello di design. Tuttavia, bisogna fare attenzione: L'utilizzo di un indicatore metaforico con un simbolo modificato potrebbe confondere gli utenti.

Ad esempio, se si utilizza una casella di posta elettronica al posto della nota busta, ciò potrebbe danneggiare l'usabilità del vostro sito web. Perché? L'utente deve mettere in pausa e considerare il passo successivo. Deve chiedersi se questo simbolo corrisponda a ciò che vuole ottenere.

UX Design & Usabilità del Web: Cosa c'è dietro l'esperienza dell'utente?
Copyright: https://www.iconfinder.com/icons/2296974/email_inbox_letter_mail_mailbox_icon_icon

Conclusione

L'usabilità non significa solo che i vostri visitatori troveranno in qualche modo la loro strada attraverso il sito. L'usabilità significa che l'attenzione è rivolta al visitatore nel suo complesso - il "viaggio" attraverso il vostro sito deve essere il più fluido possibile. 

Ogni interruzione - cioè ogni volta che l'utente deve fermarsi e chiedersi "Che cosa viene effettivamente offerto qui? Cosa succede quando clicco su di esso? Allora torno? Dove mi trovo? Come sono arrivato qui?" - è controproducente.

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

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

Lettura consigliata

Uno dei libri più famosi sulla fruibilità è "Non fatemi pensare!" di Steve Krug. Il titolo è il programma qui e, alla fine, questo è ciò che ogni approccio di usabilità comporta.

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

Quali sono le vostre domande sull'usabilità del web e sul design dell'esperienza utente? Quali processi potete consigliare? Si prega di utilizzare la funzione di commento. Volete altri consigli sul web design e lo sviluppo? Poi seguiteci su TwitterFacebook o nella 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 mail non sarà pubblicato. I campi obbligatori sono contrassegnati con * marcato.