Cos’è la UX (User Experience) e UI (User Interface) e perchè la uso nei siti web?

Ogni prodotto web deve essere creato in funzione dell’aumento della visibilità e notorietà del marchio, l’aumento degli utenti e dei clienti e quindi deve portare un aumento delle vendite dei prodotti o dei servizi.

La UX (esperienza utente) e la UI (interfaccia utente) sono una parte fondamentale per la buona riuscita di questi nostri buoni propositi. In breve, la User Experience riguarda la qualità dell’esperienza e le emozioni che gli utenti vivranno nel nostro sito, mentre la User Interface riguarda la parte visuale della presentazione, la parte grafica, l’interfaccia. Il sito web non è una vetrina, ma una cosa viva, un super concentrato di emozioni da trasmettere all’utente/cliente.

La prima impressione

La prima domanda che l’utente si pone attraccando al nostro sito web è: “Vale la pena che mi avventuri in questo sito? Mi sarà utile?” Quindi è ovvio, che la prima impressione è quella che conta.
E’ indubbio che per realizzare un buon sito web devo cercare di far sentire l’utente a proprio agio, a casa sua, ed ho pochissimi secondi per riuscirci e guadagnare la sua fiducia. A differenza dal mondo reale la concorrenza si trova a pochi clic di distanza. In questo nostro articolo puoi trovare alcuni consigli su come ideare un sito web.

Le pagine sul web non sono delle brochure, dei quotidiani, dei volantini pubblicitari o un manuale. Il modo e il tempo dedicato a leggere e scorrere una pagina internet è completamente diverso da un giornale cartaceo. Volendo esagerare, le pagine web non si leggono ma si scorrono.

Don’t make me think – La navigazione deve essere intuitiva, semplice evitando gli elementi di distrazione e tutti i contenuti importanti devono essere trovati dall’utente con un massimo di 2 clic.

“Don’t make me think”

Non farmi pensare, questo il titolo del libro e della filosofia di Steve Krug grande esperto di User Experience, libro da cui ho preso alcuni spunti per il mio lavoro e per questo articolo. Una lettura semplice e dedicata a tutti che consigliamo vivamente.
Quando parto con un nuovo sito internet, devo mettermi in testa che il motto dell’utente è: “Voglio trovare SUBITO le informazioni che stò cercando SENZA FARMI PENSARE”. La navigazione deve essere intuitiva, semplice evitando gli elementi di distrazione e tutti i contenuti importanti devono essere trovati dall’utente con un massimo di 2 clic.

Spesso si tende a fare interfacce eccessivamente moderne e graficamente troppo elaborate perdendo di vista il punto focale.

L’utente sarà in grado di trovare le informazioni che stà cercando? Arriverà dove voglio portarlo io? Ogni sito web deve essere capace di spiegarsi da solo, devo evidenziare in modo chiaro e univoco il percorso da seguire come una ideale freccia luminosa lampeggiante, in pratica creare degli indizi visivi e rendere ovvio dove cliccare.

Ogni utente naviga in maniera diversa dall’altro, ma la maggioranza di loro naviga le pagine web secondo delle convenzioni che esistono dall’alba del web, si aspetta di trovare i menù di navigazione in posizioni prestabilite, in alto o lateralmente, si aspetta di trovare i link con le parole sottolineate, cioè che tutto sia chiaro e comprensibile al primo colpo d’occhio senza dover pensare a che azione compiere.

Mobile Friendly

Oggi più che mai il mio progetto web deve essere “mobile friendly” o “responsive” cioè si deve adattare alla visione e alla navigazione confortevole su tutti i dispositivi mobili. Ricordiamo che il numero di utenti che navigano sui dispositivi mobili ha superato quella dei dispositivi fissi e aumenterà sempre di più. Se qualcuno vi propone un progetto in cui non si parla di “mobile friendly” salutate cordialmente e passate avanti.

Caratteri e formattazione

Potevo forse dimenticarmi della leggibilità dei testi? Assolutamente no. Anche in questo caso devo porre particolare attenzione ai tipi di font utilizzati e alla formattazione dei paragrafi. Per migliorare la fruizione e la comprensione dei contenuti utilizzeremo titoli, sottotitoli, elenchi, grassetti e corsivi su cui indirizzare l’occhio dell’utente. E ovviamente un occhio di riguardo per il contrasto tra testi e sfondo.

I colori possono essere stimolanti, positivi, rassicuranti, grintosi, energetici, rilassanti, decisi e calmanti. Per ogni mio progetto cerco di valutare in che modo voglio emozionare il mio utente.

Colori

I colore ci influenza inconsciamente e ci crea delle sensazioni. I colori dei loghi delle più grandi aziende mondiali sono accuratamente studiati per creare emozioni ben precise, nulla viene lasciato al caso. I colori possono essere stimolanti, positivi, rassicuranti, grintosi, energetici, rilassanti, decisi e calmanti. Per ogni mio progetto cerco di valutare in che modo voglio emozionare il mio utente. Affronteremo più avanti questo tema in modo più articolato, aggiungendo anche una serie di strumenti gratuiti su come combinare insieme i colori.

Foto e video

Si sa, una foto o un video valgono più di mille parole. Gli utenti vanno ghiotti di questi contenuti. Osiamo e attireremo l’attenzione. Mi raccomando, parola d’ordine “originalità”.

Eye movement tracking

F-Shaped Pattern For Reading Web Content
by JAKOB NIELSEN

Come legge la pagina web un occhio umano? Prendo spunto dallo studio di Jakob Nielsen (F-Shaped pattern for reading web content) per capire come l’occhio umano si muove in una pagina web. L’occhio si muove generalmente disegnando una ideale F, prima con un movimento orizzontale nella parte alta dello schermo, poi scende in basso ed effettua una breve escursione laterale per poi scendere ancora verticalmente. L’immagine è esplicativa. Serve aggiungere altro?

Call to action

Per intercettare e catturare l’interesse del nostro navigatore di passaggio devo usare strumenti come la “call to action” o “invito all’azione”, i famosi tasti “contattami”, “confrontare i prezzi”, “preventivo gratuito” e altro. L’unico obiettivo è la conversione, cioè l’azione che vogliamo che il nostro visitatore compia, ad esempio, un acquisto, una richiesta informazioni, la compilazione di un form o l’iscrizione ad un servizio.

Uniformità

E’ chiaro che l’uniformità della struttura dell’interfaccia del mio sito e delle mie pagine aiuta l’esperienza dell’utente. Manteniamo quindi gli stessi colori e lo stesso stile in tutte le pagine, manteniamo lo stesso sistema di navigazione. In pratica un sistema omogeneo. Metto bene in evidenza dov’è l’utilizzatore, cioè quale pagina del sito internet sta navigando e mettendogli comodamente a disposizione il menu di navigazione.

Test di usabilità

Che dite, non sarebbe bene analizzare il nostro sito web con dei test di usabilità? Cioè? Prendo delle persone comuni, che non sanno nulla del nostro progetto web e le metto davanti allo schermo e le faccio navigare. E io cosa faccio? Le osservo navigare, un alla volta ponendo loro delle domande e dando loro dei compiti da svolgere. Di cosa parla questo sito? A cosa stai pensando? Questa procedura di acquisto ti sembra semplice? Credetemi ho sempre delle sorprese. Vedere un utente navigare vale più di mille teorie!

Riassumendo:

• Chiaro, semplice, utile, efficace e piacevole
• Mobile friendly
• Colori e contrasto sfondo
• Formattazione
• Font, titoli e sottotitoli
• Eye movement tracking
• Call to action
• Uniformità delle pagine e della navigazione
• Test di usabilità

Grazie per avermi seguito fin qui.
Se pensate che vi sia stato utile, una condivisione fa sempre piacere.
Buon lavoro e alla prossima!