User Interfaces Design

Interfacce Utente - Design

Carmine Dodaro - Università della Calabria

Libro di Testo e Letture Consigliate

Libro di testo: Jenifer Tidwell, Charles Brewer; Aynne Valencia. Designing Interfaces. O'Reilly Media, terza edizione.

Altre letture:

• Steven Branson. UX/UI Design: Introduction Guide To Intuitive Design And User-Friendly Experience.
• Emrah Yayici. UX Design and Usability Mentor Book: With Best Practice Business Analysis and User Interface Design Tips and Techniques.
• Alfonso Cannavacciuolo. Manuale di copywriting e scrittura per il web.
• Serena Giust. UX Writing (Italian Edition).
• Vikalp Kaushik. A Handbook For Better Designing: Beginner's guide to UI Design.
• Adham Dannaway. Practical UI.
• https://www.uxlibrary.org
• https://www.justinmind.com/ui-design
• http://uipatterns.io

UI and UX Design

UI and UX Design: Differenze

User Interface (UI):

​

• Allude alla vista e al design dell’interfaccia.

​

• È ciò che l’utente vede sullo schermo: i simboli, i contenuti, colori, sfondi, componenti animati.

​

User eXperience (UX):

​

• Allude all’esperienza dell’utente, che indica il funzionamento di un qualche sistema e come gli individui cooperano con questo sistema.

​

• È l’analisi di come l’utente naviga all’interno dei componenti dell’UI.

​

• Chi si occupa di UX analizza il comportamento degli utenti quando interagiscono con il sistema.

​

UX Design: Cos’è

• UX design si riferisce a come costruire relazioni tra un’organizzazione, i suoi oggetti e i suoi utenti.

​

• Vuol dire analizzare, creare e migliorare tutte le parti dell’interazione con gli oggetti di un’organizzazione al fine di ottenere il massimo della soddisfazione degli utenti.

​

• L’obiettivo è di migliorare il coinvolgimento degli utenti e, attraverso un’analisi approfondita, creare un prodotto che sia semplice da usare e da acquistare e di rendere piacevole l’utilizzo.

​

• Una/Uno UX designer analizza come si sente l’utente nella sua esperienza con l’organizzazione/prodotto e quanto è semplice raggiungere i propri obiettivi.

​

• Esempio: Quanto è semplice effettuare il checkout durante l’acquisto di un prodotto?

​

UI Design: Cos’è

​

​

• Un lavoro che ha l’obiettivo di realizzare un’interfaccia convincente e piacevole che genera una reazione emotiva nell’utente.

​

• Il design dell’UI considera tutti componenti visuali e interattivi di un’interfaccia, incluso pulsanti, simboli, scelta dei colori, ecc.

​

User Interface Design

User Interface Design

Ci sono quattro aree per pianificare un’interfaccia grafica:

​

• Contesto: Chi sono gli utenti che useranno l’interfaccia grafica? Che conoscenze hanno del software?

​

• Obiettivi: Cosa faranno con l’interfaccia grafica? Come interagiranno con il software che state sviluppando?

​

• Ricerca: Come si fanno a capire il contesto e gli obiettivi?

​

• Schemi comportamentali: Concetti e comportamenti relativi all’interfaccia grafica.

Contesto

Al centro di una buona interfaccia grafica ci sono le persone, quindi gli utenti che la useranno. Se si conoscono gli utenti si può realizzare un’interfaccia grafica più adatta alle loro esigenze.

​

In questa fase è necessario capire chi sono gli utenti:

​

• Quali sono le loro aspettative?
• Qual è il loro dominio di competenza?
• Qual è il livello atteso per l’utilizzo del software?

Contesto

Quando si realizza un’interfaccia grafica si deve pensare alle skill degli utenti, sia nel presente e sia nel futuro.

• Alcuni software sono utilizzati tutti i giorni per il loro lavoro. Da un lato gli utenti diventeranno degli esperti. Dall’altro saranno meno disposti a tollerare delle mancanze anche piccole.
• Esempi di software: Excel, Photoshop, Eclipse, ecc.
• Focus su funzionalità.
• Si assume che l’utente sappia cosa fare.
• Sono ottimizzati per migliorare l’efficienza delle operazioni, non il loro apprendimento.
• Alcuni software sono utilizzati poche volte o addirittura una sola volta. Le mancanze sono più tollerate.
• Esempi di software: applicazioni per prenotare viaggi, installer, guide turistiche, ecc.
• Poche funzionalità, focus sulla semplificazione.
• Non si fanno assunzioni su conoscenza pregresse.
• Si utilizzano sistemi di aiuto contestuale.

Contesto

La maggior parte delle interfacce è nel mezzo tra i due estremi visti precedentemente.

• Devono avere modalità di utilizzo semplici per gli utenti che la usano poche volte.
• Devono essere ottimizzate per consentire agli utenti avanzati di compiere azioni più complesse in modo efficiente.
• L’utilizzo tipico segue uno schema ben definito:
• L’utente ne apprende l’utilizzo di base.
• Raggiunge un livello che ritiene adeguato per il proprio utilizzo.
• Non apprende ulteriormente finché non ha una motivazione specifica.

​

Obiettivi

Chi usa il software lo fa per rispondere a delle esigenze, quindi ha una motivazione specifica per farlo. Tra queste rientrano:

​

• Cercare qualcosa.
• Imparare qualcosa.
• Controllare o monitorare qualcosa.
• Creare qualcosa.
• Interagire con altre persone.
• Essere intrattenuti.

Per molti di questi obiettivi c’è una vasta ricerca su come aiutare le persone a raggiungerli.

Obiettivi

È importante chiedersi sempre il perché dell’utilizzo. Ad esempio, un utente non ha mai come obiettivo l’interazione in sé con dei campi di testo, ma tipicamente lo fa per raggiungere un obiettivo, come inserire i dati personali per registrarsi oppure inserire i dati della carta di credito per acquistare un oggetto, ecc.

​

Un esercizio utile è chiedersi il perché si utilizzano determinate applicazioni note. Ad esempio, perché si usano i client email?

• Sicuramente per comunicare con altre persone. Ma ci sono altri modi di farlo, usando il cellulare, una lettera, un documento formale, una chat, ecc.
• Quindi cos’è che spinge gli utenti a usare le mail?
• La possibilità di scegliere quando inviare una mail, leggere o rispondere?
• La possibilità di archiviare il contenuto?
• Una convenzione sociale?
• Altro?

Obiettivi

Un errore comune è analizzare/trattare gli utenti come un’unica grande entità pensando a pochi casi di utilizzo o con un solo obiettivo in mente.

​

​

Per realizzare un buon design occorre tenere a mente diversi fattori, come le aspettative, le sensazioni, le preferenze, i valori, ecc. Quindi bisogna cercare di interessarsi agli utenti, capire le loro esigenze e le loro necessità.

Ricerca

La ricerca è il punto di partenza per capire contesto e obiettivi. È importante capire:

• Gli obiettivi degli utenti nell’utilizzare il software.
• I task specifici che svolgono per raggiungere questi obiettivi.
• Il linguaggio e le parole tecniche che usano per descrivere quello che fanno.
• Le loro skill nell’utilizzo di software simili a quello che si sta progettando.
• La loro predisposizione verso ciò che si sta progettando e come design diversi possono cambiare questa attitudine.

​

​

​

Ricerca

Gli strumenti da utilizzare nella ricerca possono essere:

• Le interviste. Parlare con i futuri utenti è sempre importante, in modo da capire le aspettative e il vocabolario. In alcuni casi si possono osservare degli schemi che possono essere successivamente utilizzati per guidare lo sviluppo del design.
• I sondaggi. Permettono di raccogliere informazioni su molti utenti, ma devono essere abbastanza dettagliati per essere utili.
• L’osservazione diretta. Si può osservare come gli utenti svolgono i task richiesti dal software. Questo può essere utile anche nel caso in cui si debba migliorare successivamente l’interfaccia.
• Casi di studio. Si possono utilizzare alcuni utenti particolari come casi di studio per capirne le attitudini, soprattutto nel caso in cui si debba ricostruire l’interfaccia di un software esistente.

​

​

​

​

Schemi Comportamentali

Sebbene ogni persona sia unica, negli anni i designer e gli scienziati comportamentali hanno studiato il loro comportamento osservando degli schemi comportamentali. Tra questi abbiamo:

• Esplorazione sicura.
• Gratifica immediata.
• Minima soddisfazione.
• Cambi di idee.
• Scelte ritardate.
• Costruzione incrementale.
• Abitudini.
• Micropause.
• Memoria spaziale e memoria potenziale.
• Ripetizione in sequenza.
• Solo tastiera.
• Approvazione sociale e collaborazioni.

​

​

​

Schemi Comportamentali: Esplorazione Sicura

Per esplorazione sicura si intende permettere agli utenti di sperimentare/esplorare l’interfaccia senza perdersi e senza causare danni.

​

Quando gli utenti si sentono liberi di esplorare senza conseguenze negative dirette e senza fastidi sono più propensi a imparare l’interfaccia. Ad esempio, nell’esplorazione rientra la possibilità di spostarsi facilmente tra le varie schermate.

​

Linee guida:

• Rendere visibile lo stato del sistema. Ad esempio, dove si trova l’utente e come tornare indietro.
• Il sistema deve rispecchiare il più possibile il mondo reale.
• Controllare gli utenti e renderli liberi di muoversi.

​

​

​

Schemi Comportamentali: Gratifica Immediata

Le persone amano vedere subito i risultati delle loro azioni. Se l’applicazione permette di ottenere un risultato in modo istantaneo o dopo pochi secondi gli utenti sono più predisposti al loro utilizzo successivo, anche nel caso in cui dovesse diventare più difficoltoso.

​

Linee guida:

• Cercare di anticipare le esigenze degli utenti.
• Assicurarsi un punto di ingresso ovvio, per cominciare a sperimentare con l’interfaccia.
• Non rallentarli nell’utilizzo. Ad esempio richiedere la registrazione solo dopo che l’utente abbia compiuto delle azioni tali da giustificare la richiesta. Si può fare riferimento ai siti di prenotazione online (come le compagnie aeree o di alberghi), che tipicamente richiedono la registrazione solo dopo che si è scelto il prodotto/servizio da acquistare.

​

​

​

Schemi Comportamentali: Minima Soddisfazione

Esiste una parola inglese, cioè satisficing, che è una combinazione di satisfying and sufficing, coniata per descrivere il comportamento delle persone in ambito economico e sociale, con l’obiettivo di indicare il fatto che le persone preferiscono accettare qualcosa che sia sufficientemente buono piuttosto che migliore se apprendere tutte le alternative ha un costo in termini di tempo o di sforzo.

​

In termini di interfaccia significa che le persone tenderanno a effettuare rapide scansioni dell’interfaccia cercando prima di tutto di ottenere velocemente il loro obiettivo. Quindi se l’interfaccia presenta delle opzioni che permettono subito di ottenere qualcosa è molto probabile che gli utenti le useranno.

​

Linee guida:

• Guidare gli utenti su cosa fare subito, ad esempio evidenziando dove scrivere o cliccare.
• Usare nomi corti, veloci da leggere e significativi.
• Usare l’interfaccia per comunicare dei significati, ad esempio con forme diverse.
• Rendere semplice il movimento all’interno dell’interfaccia.

​

​

​

Schemi Comportamentali: Cambi di Idee

A volte le persone, durante lo svolgimento di un’attività, decidono di interromperla o di svolgere un’altra attività. Ad esempio, un utente potrebbe decidere di avviare una registrazione a un sito, interromperla momentaneamente, e riprenderla successivamente.

​

Linee guida:

• Rendere possibile cambiare idea dando delle scelte agli utenti a meno che non ci sia una buona ragione per non farlo.
• Supportare l’interruzione di un processo e la successiva ripresa minimizzando la perdita dei dati. Nel caso di form recuperare i dati inseriti precedentemente.

​

​

Schemi Comportamentali: Scelte Ritardate

È un processo legato alla gratificazione immediata. Spesso, le persone preferiscono concentrarsi su ciò che è fondamentale per terminare un processo e ritardare le cose superflue. Ad esempio, nel caso della registrazione a un sito le persone vogliono inserire i dati minimi per poterlo utilizzare.

​

Linee guida:

• Non fornire all’utente troppe richieste iniziali per completare un processo.
• Nel caso di form, separare chiaramente i valori opzionali da quelli richiesti. Permettete agli utenti di andare avanti velocemente o di saltare le cose opzionali.
• A volte è preferibile separare le domande importanti da quelle che sono opzionali. Evidenziare le prime e nascondere le seconde.
• In alcuni casi si possono usare campi precompilati, se possibile.
• Rendere possibile l’inserimento successivo di ciò che si è saltato, rendendo evidente dove si possono inserire i dati. Ad esempio usando la frase: “Puoi sempre cambiare questa scelta in seguito cliccando su Impostazioni”.
• Se un sito o un’applicazione fornisce dei servizi utili, è preferibile permettere agli utenti di esplorarlo prima di richiedere la registrazione (come nel caso della gratifica immediata).

​

​

Schemi Comportamentali: Costruzione Incrementale

I processi di creazione di contenuti di solito non sono lineari dall’inizio alla fine. Tipicamente, sono processi dove si crea una porzione di qualcosa, poi si cambia quello che si è creato, si guarda il contenuto, eventualmente si verifica (ad esempio nel caso del codice), si correggono gli errori, e poi si va avanti alla porzione successiva. Oppure si riparte da zero, nel caso in cui il contenuto non sia soddisfacente.

​

Nel caso in cui si realizzi un software che richiede la creazione di qualcosa in modo creativo si dovrebbe supportare questo processo.

​

Linee guida:

• L’interfaccia non deve distrarre il processo di creazione.
• L’interfaccia deve prevedere la possibilità di creare piccole porzioni di ciò che si sta realizzando.
• L’interfaccia deve essere veloce e permettere di fare cambi e di salvare in modo efficiente.
• Il ritardo tra i cambi effettuati dall’utente e la vista del risultato deve essere minima.

​

Schemi Comportamentali: Abitudini

Qual è la combinazione di tasti per salvare? Come si torna indietro su una pagina web? Come si scorre una schermata con uno smartphone? Come si effettua lo zoom di una foto con uno smartphone?

​

Tutte queste azioni sono diventate delle abitudini consolidate negli utenti. La loro consistenza all’interno delle varie applicazioni è fondamentale.

​

Attenzione: le abitudini possono essere anche negative. Ad esempio, gli utenti tenderanno a cliccare velocemente il tasto OK ogni volta che appare una finestra di dialogo e in alcuni casi potrebbe portare a errori.

​

Linee guida:

• Essere consistenti con le aspettative su alcuni concetti fondamentali. Ad esempio, ctrl+c e ctrl+v sono universali per copiare e incollare.
• Essere consistenti all’interno dell’interfaccia. Ad esempio, con la posizione dei vari pulsanti simili all’interno dell’interfaccia.
• Gestire in modo diverso le operazioni delicate o irreversibili. Ad esempio, la cancellazione di un account potrebbe richiedere l’inserimento di una stringa particolare e della password.

​

​

Schemi Comportamentali: Micropause

Nella vita di tutti i giorni abbiamo sempre delle micropause, cioè delle pause di pochi minuti in cui si svolgono attività veloci. Ad esempio, durante l’attesa di un autobus.

​

Alcune applicazioni sono spesso utilizzate durante queste micropause, possono essere giochi online con partite della durata di due o tre minuti oppure possono essere applicazioni social.

​

Linee guida:

• Consentire agli utenti di avere la possibilità di usare l’applicazione nelle micropause, se possibile.
• Nel caso di giochi, permettere partite veloci e, nel caso di giochi online, rendere veloce la ricerca degli avversari.
• Nel caso di applicazioni, ridurre al minimo i tempi di caricamento.
• Permettere di annotare e di salvare gli elementi per una consultazione futura.
• Nel caso di scambi di messaggi, rendere possibile le risposte veloci.

​

​

Schemi Comportamentali: Memoria Spaziale

Quando si gestiscono oggetti e documenti le persone tendono a ricordare la loro posizione nello spazio.

​

Ad esempio, pensiamo alla home page di Google.

​

Linee guida:

• Non cambiare l’ordine spaziale scelto dagli utenti, a meno che non sia richiesto espressamente.
• Evitare di cambiare troppo spesso l’ordine degli elementi nell’interfaccia tra una versione e l’altra. Ad esempio, l’ordine delle icone nella toolbar.

Schemi Comportamentali: Memoria Potenziale

La memoria potenziale è la memoria di qualcosa che si intende fare nel futuro. In genere, le persone usano strumenti diversi per ricordare di fare qualcosa. Ad esempio, si può lasciare l’ombrello agganciato alla maniglia della porta per ricordare di prenderlo prima di uscire.

​

Alcune persone utilizzano queste tecniche anche nell’interazione del software. Per esempio, alcuni sviluppatori lasciano dei commenti particolari all’interno del codice per ricordarsi di fare qualcosa. Oppure potrebbero lasciare la scrittura di una mail a metà per ricordare di inviarla successivamente.

​

Linee guida:

• Non fare assunzioni sull’utilità di qualcosa. Ad esempio, non chiudere una finestra se non è utilizzata per un certo periodo di tempo.
• Non organizzare automaticamente gli oggetti senza una precisa istruzione dell’utente.
• Permettere all’utente di lasciare dei task incompiuti e di completarli successivamente. Adottare tutti gli strumenti possibili per consentire la ripresa in un modo agevole.

​

​

Schemi Comportamentali: Ripetizione in Sequenza

In molte applicazioni gli utenti si trovano a dover compiere la stessa operazione in sequenza. Un esempio tipico è il trova/sostituisci. Supportare al meglio queste operazioni è cruciale per una buona interfaccia grafica.

​

Linee guida:

• Fornire la possibilità di compiere un’operazione per volta e di compiere tutte le operazioni contemporaneamente.
• Nel caso di operazioni delicate mostrare il risultato delle operazioni e chiedere conferma.
• Rendere possibile la selezione di tutti gli elementi e di ripetere la stessa azione su tutti gli elementi selezionati.
• Osservare il comportamento degli utenti per capire quale operazioni ripetute sono compiute con più frequenza e rendere agevole la ripetizione.

​

​

Schemi Comportamentali: Solo Tastiera

Molte persone preferiscono limitare al minimo l’utilizzo del mouse, gestendo tutte le operazioni con la tastiera.

​

Linee guida:

• Fornire scorciatoie da tastiera per tutte le operazioni più comuni, come il salvataggio, copia, incolla, ecc.
• Dare la possibilità all’utente di scegliere la propria combinazioni di tasti per alcune operazioni.
• Molti utenti useranno il tab per muoversi all’interno dell’interfaccia. Assicurarsi che il movimento sia quello atteso.

​

Schemi Comportamentali: Approvazione sociale e Collaborazioni

Gli esseri umani sono sociali. Le persone sono influenzate dall’ambiente che le circonda e a loro volta influenzano gli altri con i loro comportamenti. Da ciò deriva che le persone sono più orientate a effettuare una qualche azione se vedono che è stata raccomandata da altre persone di cui si fidano. Un comportamento tipicamente definito come approvazione sociale (in inglese, social proof).

​

Linee guida:

• La social proof motiva le persone a compiere delle azioni. Rendere possibile l’interazione con altre persone potrebbe migliorare la percezione dell’interfaccia.
• Fornire la possibilità di effettuare recensioni e commenti.
• Permettere di condividere le attività.
• Permettere la collaborazione con altri utenti.

Usabilità e Accessibilità

Accessibilità:

Indica la capacità dell’interfaccia grafica di essere utilizzata da tutti, comprese le persone con disabilità.

Ad esempio, è preferibile non usare elementi che richiamano direttamente ai colori: "Clicca sul pulsante rosso per andare avanti" oppure prevedere metodi diversi per l’input (vocale, da tastiera, ecc.).

​

Usabilità:

Indica la capacità dell’interfaccia grafica di essere fruita dal proprio target di utenza. L’usabilità è strettamente connessa alla flessibilità, più cresce la flessibilità e più decresce l’usabilità dell’interfaccia. Rendere un’interfaccia flessibile significa soddisfare un certo numero di requisiti pratici, che inevitabilmente porta a rendere l’interfaccia stessa più complessa.

Valutazione dell’Usabilità

I criteri da utilizzare per valutare l’usabilità sono:

• Curva di apprendimento: quanto è facile per un nuovo utente imparare ad usare il sistema?
• Velocità delle operazioni: quanto è aderente alle esigenze comuni degli utenti?
• Robustezza: quanto è tollerante agli errori?
• Recupero: quanto è facile rimediare ad un errore?
• Adattabilità: quanto è adattabile il sistema a diversi tipologie di lavoro?

​

​

Riepilogo

Una delle problematiche principali del design è che le persone si accorgono di un’interfaccia solo quando è negativa. Quindi, le buone interfacce sono spesso invisibili agli utenti, ma non lo sono i suoi effetti.

​

L’obiettivo di chi realizza un’interfaccia è quello di rendere naturale e piacevole l’esperienza per gli utenti.

​

In generale si dovrebbero tenere in mente le seguenti linee guida:

• Anticipare le esigenze degli utenti.
• Organizzare le informazioni dal punto di vista degli utenti.
• Offrire le informazioni in modo chiaro e semplice.
• Utilizzare colori, forme, o gli stili per mettere in risalto qualcosa.
• Usare un vocabolario comprensibile per gli utenti.
• Mostrare chiaramente quali sono gli step successivi.
• Mostrare in modo chiaro dove si trova l’utente all’interno della schermata e cosa sta succedendo.
• Mostrare in modo chiaro quando un task è stato completato con successo.

Esempio

Navigazione

Social Proof

Uso dei colori per dare risalto

Anticipare le esigenze