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:

Perché preoccuparsi del design 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 (ad esempio, un poster o una brochure) e un destinatario (la persona a cui è rivolto il mezzo). Il destinatario non deve fare altro che ricevere il messaggio, comprenderlo e poi prendere una decisione (di acquisto).

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

User Experience: 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.

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 significativo sui tuoi dati di vendita. Ciò che mi spinge personalmente è il dovere, come proprietario di un sito web, di non frustrare l'utente.

Affordances, significanti e feedback

In poche parole, l'affordance descrive ciò che è generalmente possibile. Utilizzando l'esempio di una schermata del desktop, questa sarebbe la possibilità di "cliccare". Poiché sarebbe noioso e frustrante dover cliccare a caso dappertutto sul sito web, abbiamo inserito dei segnali (indicatori). Questi mostrano all'utente dove è possibile fare qualcosa e cosa. 

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

Lo stato attivo del pulsante mi indica che è successo qualcosa quando l'ho cliccato. Tutti e tre i processi sono correlati tra loro e possono essere utilizzati come domande di base per rendere il tuo sito web più facile da usare.

1. Quali interazioni sono generalmente possibili?
2. Come faccio a dimostrare ai miei utenti che sono possibili?
3. Come fanno a sapere di aver fatto la "cosa giusta"?

La possibilità di interazione è spesso definita dal dispositivo utilizzato per accedere al sito web: Lo scorrimento e il tocco non sono possibili su un computer desktop (standard), mentre non c'è l'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 caratteristiche e i significati possono anche andare oltre l'interfaccia del tuo sito web. Il tuo visitatore può essere influenzato da circostanze esterne o utilizzare alcune interazioni in modo diverso da quello originariamente previsto. Ad esempio, il pulsante indietro 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 vengono deliberatamente utilizzate in modo "scorretto": un esempio

Spesso prenoto voli tramite un fornitore di servizi straniero la cui pagina non viene visualizzata né in tedesco né in inglese per impostazione predefinita. Improvvisamente non sono riuscito a trovare le impostazioni della lingua nella versione mobile. 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 per dispositivi mobili solo tramite le "app", perché me lo ricordo e perché preferisco fare due click in più che cliccare con frustrazione su una pagina mobile.

Dovete anche essere consapevoli che non potete "rieducare" i tuoi 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 utilizzino effettivamente il sito in seguito. Perché errori di usabilità davvero grossolani si verificano con quasi tutti gli utenti. 

È importante che tu non dica al tester cosa fare o come arrivare. Il segreto è riconoscere e annotare i possibili ostacoli e complicazioni per rendere il tuo sito web più facile da usare. Meno cose dirai all'intervistato, più il risultato sarà imparziale.

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 certo grado di certezza quale risultato aspettarsi da un'interazione.

"VEDI ALTRO" è un esempio di significante semplice ed esplicito.

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, ad esempio, che cliccando sul logo si torna alla pagina dell'indice. O che il testo sottolineato in blu rappresenti un link. Anche la barra di navigazione di un sito web, così come la usiamo oggi, è un fenomeno di questo tipo. Ci aspettiamo che si trovino in determinati punti della pagina. Sappiamo che la barra di navigazione serve come indicazione dei contenuti e ci guida attraverso il sito web. Anche la barra del menù che si trasforma in 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).

3. significante nascosto

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

I segnali nascosti hanno il vantaggio di far apparire il layout pulito e ordinato. Così possono rendere il tuo 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:

Nella versione desktop, le nuove call-to-action appaiono al passaggio del mouse. Poiché l'utente clicca intuitivamente sull'immagine per aggiungerla alla sua collezione, è molto probabile che la funzione non passi inosservata. Ciononostante, i progettisti hanno sviluppato un piano B: Se fai clic sull'immagine, otterrai una visualizzazione ampia 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.

L'immagine di sinistra mostra la panoramica generale della pagina. Il menù 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, la call-to-action aggiuntiva, come nella versione desktop, è disponibile solo quando si è effettivamente cliccato sull'immagine. Ciò significa che non sono più significanti nascosti. 

Tuttavia, sono rimasto sorpreso dal fatto che Pinterest utilizzi due icone diverse per la stessa interazione nelle due versioni. Dal punto di vista dell'usabilità, non credo sia consigliabile. Se l'utente passa dalla versione mobile a quella desktop, o viceversa, l'utilizzo delle stesse icone renderebbe più facile orientarsi. In questo modo l'utilizzo è più agevole. L'usabilità è quindi migliorata in modo positivo.

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 tuoi utenti.

Se utilizzi una cassetta delle lettere invece della classica busta, ad esempio, potresti danneggiare l'usabilità del tuo sito web. Perché? L'utente deve fermarsi e pensare al passo successivo. Devono chiedersi se questo simbolo corrisponde a ciò che vogliono ottenere.

Conclusioni su UX Design e Usabilità del Web

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à.

• "Non farmi pensare: Un approccio di buon senso all'usabilità del web" di Steve Krug
• "Il design delle cose quotidiane" di Donald A. Norman
• UX Pin offre interessanti e-book da scaricare gratuitamente