Eurawest Logo
website ui design

Ricordate queste dieci linee guida se volete sviluppare design di interfacce utente belle, user-friendly e human-centered.

Un sito web è più di una semplice collezione di pagine interconnesse. È un’interfaccia, un luogo dove molte cose si scontrano, interagiscono e hanno un effetto l’una sull’altra – in questo caso, la presenza online di una persona e di un’azienda o individuo. Il visitatore avrà un’esperienza come risultato di quel contatto, ed è il tuo lavoro come web designer di rendere quell’esperienza la migliore possibile.

E la chiave è tenere il tuo utente in mente prima di tutto e per tutto il tempo.

Fortunatamente, nonostante la sua giovane età, il web design deve molto allo studio scientifico dell’interazione uomo-computer (HCI). E questi nove consigli dalla ricerca HCI ti aiuteranno a mantenere l’attenzione sui tuoi clienti durante tutto il processo di design.

Il design dell’interfaccia, che si concentra sulla forma e la funzione delle interfacce, è un sottoinsieme del design dell’esperienza utente, che si concentra sul quadro generale: l’intera esperienza, non solo l’interfaccia.

1. Conoscere i propri clienti.

Soprattutto, dovete avere una conoscenza approfondita dei vostri utenti interni ed esterni. Sì, richiede una conoscenza approfondita dei dati demografici che le vostre app di analisi possono raccogliere. Ma, cosa più importante, richiede una consapevolezza di ciò di cui hanno bisogno e di ciò che li trattiene dal raggiungere i loro obiettivi.

Per raggiungere questo livello di empatia, è necessario più di un esame approfondito dei dati. Si tratta di conoscere i visitatori del tuo sito web. Richiede parlare con loro faccia a faccia, vederli usare il vostro prodotto (e forse altri), e fare loro domande più dettagliate di “Ti piace questo design?

Cosa vogliono raggiungere? Cosa li trattiene dal raggiungere i loro obiettivi? Come può un sito web aiutare le persone a superare o navigare queste sfide?

Non considerare solo ciò che i tuoi utenti vogliono. Scavate più a fondo per scoprire di cosa hanno bisogno. I desideri sono, dopo tutto, il prodotto di bisogni insoddisfatti. Sarai in grado di soddisfare i bisogni più profondi di un utente, mentre ti occupi anche delle sue richieste più basilari, se riesci a soddisfare i loro bisogni più profondi.

Le intuizioni che otterrete dall’analisi dei dati e dall’interazione con i clienti influenzeranno ogni decisione che prenderete, da come le persone usano la vostra interfaccia a quali tipi di informazioni enfatizzerete all’interno di quell’interfaccia.

2. Determinate come la vostra interfaccia sarà usata dagli utenti.

Prima di progettare la vostra interfaccia, dovete prima descrivere come le persone la useranno. Data la crescente prevalenza di dispositivi touch-based, è un problema più urgente di quanto si possa pensare.

Le persone si impegnano con i siti web e le app in due modi: direttamente (attraverso i componenti dell’interfaccia del prodotto) e indirettamente (attraverso gli elementi dell’interfaccia del prodotto) (interagendo con elementi ui esterni al prodotto).

Esempi di incontri diretti

Le interazioni indirette sono quelle che avvengono quando due o più persone interagiscono in modo diverso.

A volte, un’interazione può sembrare troppo semplice.

Dovreste basare le vostre decisioni su chi sono i vostri utenti e su quali dispositivi usano. Se state progettando per gli anziani o per quelli con limitata destrezza fisica, non dovreste dipendere dallo swiping. Se state progettando per scrittori o programmatori che preferiscono interagire con le applicazioni usando la tastiera piuttosto che il mouse, vorrete incorporare tutte le scorciatoie da tastiera comuni per risparmiare tempo.

3. Stabilite i vostri obiettivi.

Molte attività su un sito web o un’app hanno delle conseguenze: premere un pulsante potrebbe portare all’acquisto di qualcosa, alla cancellazione di una pagina o alla pubblicazione di un commento sarcastico sulla torta di compleanno della nonna. E c’è ansia ovunque ci siano implicazioni.

Di conseguenza, prima che gli utenti clicchino quel pulsante, assicuratevi che capiscano cosa succederà. Questo può essere fatto tramite il design e/o il copy.

Stabilire le aspettative attraverso il design

Fissare le aspettative con la copia

Sembra ragionevole chiedere alle persone se sono certe di attività con conseguenze irreversibili, come la rimozione permanente di qualcosa.

4. Essere pronti a fare errori.

Le persone commettono errori, ma non dovrebbero essere punite per essi (sempre). Potete contribuire a diminuire le conseguenze dell’errore umano facendo una delle due cose:

Ti imbatterai in una serie di tecniche di prevenzione degli errori nell’ecommerce e nella progettazione di moduli. I pulsanti vengono disabilitati fino a quando tutti i campi non sono stati completati. Il modulo rileva quando un indirizzo e-mail viene inserito erroneamente. I pop-up chiedono se vuoi davvero abbandonare il tuo carrello (sì, Amazon, non importa quanto possa danneggiare la povera creatura).

Anticipare gli errori è tipicamente meno aggravante che tentare di porvi rimedio dopo il fatto. Questo è dovuto al fatto che si verificano prima del fantastico senso di successo che viene dal premere il pulsante “Next” o “Submit”.

Tuttavia, ci sono momenti in cui bisogna semplicemente lasciare che le cose accadano. I messaggi di errore descrittivi brillano davvero in questo momento.

Quando si creano messaggi di errore, assicurarsi che raggiungano due obiettivi:

Descrivere il problema. “Lei ha dichiarato di essere nato su Marte”, per esempio, che l’umanità deve ancora colonizzare. Ancora.”

Descrivi come risolvere il problema. Per esempio, “Inserisci un luogo di nascita qui sulla Terra”.

Vale la pena menzionare che lo stesso libro può essere usato in situazioni di non-errore. Per esempio, se cancello qualcosa per errore ma è recuperabile, avvisami con una riga di testo che dice “Puoi sempre ripristinare le cose cancellate andando nel cestino e cliccando su Ripristina”.

L’approccio poka-yoke è un modo per anticipare gli errori degli utenti. Poka-yoke è un termine giapponese che significa “a prova di errore”.

5. Dare un feedback immediato

Nel mondo reale, l’ambiente ci dà degli input. Quello che diciamo ha un effetto sugli altri (di solito). Un gatto fa le fusa o sibila in reazione al nostro graffio (a seconda del suo umore e di quanto facciamo schifo a graffiare i gatti).

Troppo spesso, le interfacce digitali non rispondono, lasciandoci confusi se ricaricare la pagina, riavviare il portatile, o semplicemente buttarlo fuori dalla prima finestra disponibile.

Se un sito web si carica in meno di 5 secondi, non mostrate una barra di progresso perché farà sembrare il tempo di caricamento più lungo. Usate invece un design che non implica un progresso, come la classica “girandola del destino” di Mac. Non è affatto così. Se usi le barre di progresso sul tuo sito, pensa ad utilizzare alcuni trucchi estetici per far sembrare il caricamento più veloce.

6. Fate attenzione alle dimensioni e al posizionamento degli elementi.

La legge di Fitts è un’idea significativa nell’interazione uomo-computer (HCI), che afferma:

La distanza e le dimensioni di un obiettivo influenzano il tempo necessario per acquisirlo.

Per dirla in un altro modo, più vicino e/o più grande è qualcosa, più velocemente si può posizionare il cursore (o il dito) su di esso. Questo ha una serie di implicazioni per l’interazione e le tattiche di progettazione dell’interfaccia utente, le più importanti delle quali sono le seguenti:

Rendere visibili e cliccabili i pulsanti e gli altri “obiettivi del clic” (come le icone e i link di testo). Questo è particolarmente importante quando si tratta di font, menu e altri elenchi di link, poiché una mancanza di spazio porterà gli utenti a cliccare spesso sui link sbagliati.

Per le attività più popolari, aumentate le dimensioni e il risalto dei pulsanti.

Posizionare la navigazione sui bordi o sugli angoli dello schermo, insieme ad altri popolari componenti visivi interattivi come le barre di ricerca. Quest’ultimo metodo può sembrare controintuitivo, ma funziona perché riduce la necessità di precisione: un utente non dovrà più preoccuparsi di mancare il suo obiettivo di clic.

Quando considerate la posizione e la dimensione degli elementi, tenete a mente il vostro modello di interazione. Se il tuo sito richiede uno scorrimento orizzontale piuttosto che verticale, dovrai considerare dove e come informerai i clienti del cambiamento.

7. Quando si tratta di standard, non essere un fannullone.

I designer sono inclini a riprogettare le cose a causa della loro creatività, ma questa non è sempre l’idea migliore.

Perché? Perché una versione modificata di un’interazione o di un’interfaccia ben nota aumenta il “carico cognitivo”, costringendo le persone a ripensare una tecnica precedentemente padroneggiata. Naturalmente è permesso reinventare la ruota tutte le volte che si vuole, ma solo se questo migliora il design.

8. Mantenete le vostre interfacce utente il più semplici possibile.

Quando si parla di semplicità, si fa spesso riferimento allo studio dello psicologo di Harvard George Miller “The Magical Number Seven, Plus or Minus Two: Some Limits on our Capacity for Processing Information”. Secondo i risultati, gli esseri umani possono conservare in modo affidabile solo da 5 a 9 cose nella loro memoria a breve termine. Miller l’ha liquidato come una coincidenza, ma questo non sembra dissuadere gli altri dal tirarlo in ballo.

Di conseguenza, sembra seguire che più semplice è qualcosa, più facile è ricordarlo a breve termine. Di conseguenza, riducete al minimo il numero di elementi che un utente deve ricordare per poter usare la vostra interfaccia velocemente e con successo. Questo può essere reso più semplice dal chunking o dalla divisione del materiale in piccoli pezzi facilmente digeribili.

Questa idea è in linea con la legge di Tesler sulla conservazione della complessità, che afferma che i progettisti di interfacce utente dovrebbero rendere le loro interfacce il più semplice possibile. Questo può comportare nascondere la complessità di un’applicazione dietro un’interfaccia semplice, quando possibile. Un esempio ben noto di un prodotto che sfida questo criterio è Microsoft Word.

La maggior parte delle persone usa Word solo per alcune cose – digitare, per esempio – mentre altri lo usano per una varietà di attività. Tutti, d’altra parte, iniziano con la stessa versione di Word e la stessa interfaccia utente, lasciando l’utente medio – che non è un power user – sopraffatto dal numero di funzioni che quasi sicuramente non userà mai.

Di conseguenza, è stata sviluppata la divulgazione progressiva, in cui le funzionalità avanzate sono sepolte dietro interfacce secondarie. Brevi pezzi di testo introducono un prodotto o un servizio prima di condurre i visitatori a un sito web dove possono saperne di più. Questo è un evento tipico delle home page dei siti web. (Questa è anche una grande tecnica per il design mobile, dove la navigazione è sempre una sfida).

Nei link e nei pulsanti, usate con parsimonia “learn more” e termini simili non specifici. Perché? Perché non è chiaro su cosa i clienti “impareranno di più”. Le persone spesso cercano un link su un sito web che li porti dove vogliono andare, e dire “per saperne di più” 15 volte non aiuta. Questo è particolarmente vero per coloro che usano lettori di schermo.

9. Rendere le decisioni il più semplice possibile.

Molto di internet ci urla contro: i “banner” si trasformano in pubblicità a tutto schermo. Emergono modali che ci invitano a iscriverci a blog che non abbiamo ancora letto. I video interstitials mettono un freno al nostro progresso, costringendoci a perdere la cognizione del tempo. Non parliamo nemmeno di widget, flyout o tooltip…

Questo ha un impatto su quasi tutto ciò che costruiamo:

L’elenco potrebbe continuare all’infinito. Ma la verità principale è che più diretto è il nostro design, più veloce e facile è per i clienti prendere le decisioni che vogliamo. Questo è il motivo per cui le landing page e le email non-newsletter dovrebbero avere solo una chiamata all’azione.

10. Presta molta attenzione alle informazioni.

Anche se tutti vorremmo che i nostri progetti fossero valutati solo per i loro meriti artistici, la verità è che l’ottimizzazione del tuo progetto per soddisfare i suoi obiettivi è altrettanto importante.

Anche se tutti vorremmo che i nostri progetti fossero valutati solo per i loro meriti artistici, la verità è che l’ottimizzazione del tuo progetto per soddisfare i suoi obiettivi è altrettanto importante.

Mentre la ricerca e il test degli utenti possono aiutarti a concentrare le tue decisioni di design per raggiungere l’obiettivo del tuo sito, i dati raccolti dopo il lancio sono inestimabili.

Di conseguenza, impostate l’analitica del vostro sito e analizzatela regolarmente. Ci sono molti strumenti di analisi disponibili, tuttavia raccomando Google Analytics e/o Mixpanel a seconda del tipo di progetto.

Mixpanel si concentra sugli eventi, raccogliendo dati basati su ciò che i visitatori fanno sul tuo sito, mentre Google Analytics è più comportamentale, raccogliendo dati come la durata della sessione, le fonti di traffico e altri dati. Mentre entrambe le applicazioni forniscono entrambi i tipi di dati, eccellono in aree diverse, quindi scegli quella che meglio si adatta alle tue esigenze.

Entrambi questi strumenti sono gratuiti da usare per una quantità limitata di punti dati. Lo scambio di chiavi API è un modo comune per Webflow e tecnologie simili per rendere semplice l’impostazione delle analisi. 

Hai imparato le basi, quindi ora è il momento di andare avanti.

Ora andate avanti e progettate alcune interfacce utente attraenti e utili. Inoltre, sentitevi liberi di lasciare un commento con i migliori e peggiori esempi di design di interfacce utente che avete visto nelle terre selvagge di internet.

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *