Riassunti

UI vs UX Design

UI allude alla vista e al design dell'interfaccia. L'UI è la cosa che l'utente vede sullo schermo: i simboli, i contenuti, colori, sfondi, componenti animati.

UX allude all'esperienza dell'utente, che indica il funzionamento di un qualche sistema e come gli individui cooperano con questo sistema. L'UX è 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

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.

Un 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

Un lavoro creativo con 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.

Principi di UI Design

• La chiarezza è la caratteristica fondamentale di ogni interfaccia. Gli utenti devono percepire l'utilità dell'interfaccia stessa e prevedere cosa accadrà quando useranno l'interfaccia.
• Le interfacce migliorano l'interazione tra gli utenti e i prodotti. Possono aiutare a spiegare, mostrare relazioni tra oggetti e dare accesso ai servizi.
• L'attenzione è fondamentale. È difficile leggere senza interruzioni, quindi non si deve appesantire l'interfaccia con elementi che possono distrarre.
• Lasciare agli utenti il controllo dell'interfaccia. In generale non si deve creare un'interfaccia che generi interazioni improvvise o confusionali.
• Ogni schermata dovrebbe supportare una singola attività.
• Le schermate con una singola attività essenziale possono avere un certo numero di attività ausiliarie. Queste attività dovrebbero essere opzionali.
• È difficile che un'interazione sia l'ultima, quindi una buona interfaccia deve prevedere i passaggi successivi per ogni interazione che un utente ha con l'interfaccia.
• Le persone tendono ad avere buone sensazioni nei confronti di cose che si comportano come previsto. In pratica, questo implica che un'utente dovrebbe avere la possibilità di prevedere come andrà avanti un componente dell'interfaccia solo guardandolo. Se sembra un pulsante si deve comportare come un pulsante.
• La coerenza è importante. I componenti visivi che generano le stesse azioni dovrebbero avere una visualizzazione simile.
• Organizzare i componenti visivi aumenta l'efficienza dell'interazione. Non obbligare gli utenti a dare un senso agli oggetti, ma crea il design in modo da mostrare le relazioni sullo schermo.
• Evidenzia ma non decidere con i colori. Il colore degli oggetti fisici cambia in base alla luce ambientale e i colori possono essere usati per catturare l'attenzione, ma non dovrebbero essere usati per differenziare gli oggetti.
• È importante evitare di spiegare troppo o di mostrare tutto allo stesso tempo.
• In un'interfaccia perfetta, l'aiuto non è essenziale perché l'interfaccia è comprensibile e utilizzabile. Il livello subito sotto la perfezione è quella in cui l'aiuto è in linea, e soprattutto accessibile quando e dove è richiesto.
• I design migliori sono impercettibili. Se l'interfaccia non è notata dagli utenti che la usano significa che è naturale e intuitiva.
• Ogni regola generale che vedremo è "ovvia". Tuttavia, si può generare confusione quando dobbiamo applicare queste regole nella realizzazione di un'interfaccia e valutare le circostanze.
• Qual è il design migliore? Nella maggior parte dei casi la risposta giusta per ogni domanda che riguarda il design di interfacce è dipende. Noi vedremo delle linee guida generali, ma ogni caso va valutato nel contesto in cui si applica.
• Differenza tra semplice da "usare" e da "imparare". Idealmente, le interfacce dovrebbero essere semplici da "usare". Tuttavia, in alcuni casi è complesso (ad esempio per alcuni tipi di applicazioni aziendali). In questo caso, l'interfaccia dovrebbe essere semplice da "imparare".
• Immagini o Testo? La prima forma di comunicazione era in forma di immagini, è naturale associare alcuni concetti complessi alle immagini.

Realizzazione di un'interfaccia grafica

Quando si progetta un'interfaccia grafica, è necessario considerare:

• il target dei suoi utenti: skill, esperienza, attese, ecc.;
• gli utenti spesso giudicano un sistema dalla sua interfaccia e non dalle funzionalità che offre;
• un'interfaccia grafica progettata male può essere causa di abbandono del sistema.

La componente umana

• Le persone hanno una memoria a breve termine limitata;
• Le persone tipicamente possono ricordare 7/8 elementi informativi. Avere un'interfaccia grafica che presenta più di questi elementi crea confusione ed errori;
• Le persone sbagliano! Quando succede i messaggi di errore devono essere appropriati;
• Le persone sono diverse tra di loro: hanno capacità fisiche e mentali diverse, preferenze di interazione diverse, ecc. Una buona interfaccia grafica non dovrebbe essere basata sulle capacità di chi la realizza.

I principi da rispettare

• Familiarità: l'interfaccia dovrebbe usare termini e concetti dettati dalla esperienza di chi utilizzerà il sistema.
• Consistenza: quando possibile, operazioni comparabili dovrebbero essere attivate allo stesso modo.
• Minima sorpresa: gli utenti non dovrebbero essere sorpresi dal comportamento del sistema.
• Riparabilità: l'interfaccia deve sempre prevedere la possibilità di riparare agli errori.
• Guida: l'interfaccia deve prevedere sempre messaggi significativi e semplici da interpretare.
• Diversità: l'interfaccia deve prevedere dei meccanismi appropriati per i diversi tipi di utenti.

Accessibilità

L'interfaccia grafica dovrebbe essere accessibile a tutti, comprese le persone con disabilità.

Ad esempio, è preferibile non usare elementi che richiamano direttamente ai colori: "Clicca sul pulsante rosso per andare avanti", perché alcuni degli utenti potrebbero non distinguere chiaramente i colori.

Usabilità

L'usabilità invece si riferisce alla fruizione dell'interfaccia grafica da parte del proprio target di utenza.

Ad esempio, bisogna considerare che alcune operazioni, come la pressione contemporanea di più tasti, potrebbero apparire ostiche per utenti poco esperti, mentre sarebbero desiderabili per utenti più esperti.

Legame tra flessibilità e usabilità

Più cresce la flessibilità e più decresce l'usabilità dell'interfaccia. Rendere una interfaccia flessibile significa soddisfare un certo numero di requisiti pratici, che inevitabilmente porta a rendere l'interfaccia stessa più complessa.

KISS

L'acronimo KISS significa "keep it simple, stupid". I design semplici funzionano meglio e sono più affidabili. Semplicità significa elementi minimali con interazioni minimali tra questi elementi. Tuttavia, cos'è la semplicità? Limitare le cose che gli utenti possono fare? Dipende dall'interfaccia che si va a creare e per quale tipologia di utenti!

Legame tra opzioni e tempo

Il tempo necessario a prendere una decisione cresce in base al numero di opzioni disponibili. Ridurre il numero di opzioni, riduce i tempi di risposta e gli errori.

Spazi vuoti

Spesso si tende a riempire tutti gli spazi con qualche componente grafico, piuttosto che lasciarli vuoti. Invece, più è densa un'interfaccia e minore è il valore percepito del prodotto. Ad esempio, nel mostrare i prodotti, sarebbe preferibile un'interfaccia minimale per i prodotti costosi e un'interfaccia densa per i prodotti a poco prezzo.

Piacevolezza estetica

Le interfacce grafiche gradevoli da un punto di vista estetico sono percepite come più semplici da usare rispetto a quelle brutte. Inoltre, le persone tendono ad essere più tolleranti rispetto ai problemi incontrati quando l'interfaccia è più gradevole. Per rendere un'interfaccia gradevole si può usare la simmetria, che è naturalmente percepita in modo gradevole a livello estetico, o altre tecniche specifiche.

Allineamento

Gli elementi dovrebbero essere allineati, lungo le righe o colonne, oppure il corpo lungo un asse centrale. L'allineamento degli elementi dona all'interfaccia grafica un senso di unità.

Attenzione ai dettagli

Tutti gli elementi del design, anche i più insignificanti, devono avere lo stesso standard di qualità. L'attenzione dedicata ai componenti che non sono visti spesso dagli utenti è una buona indicazione della qualità dell'interfaccia.

Dimostra che è stato applicato rigore e attenzione nella creazione di tutti gli elementi dell'interfaccia.

Regola 80/20

È una regola intuitiva che dice che la maggior parte degli effetti in un sistema abbastanza grande è causato da una bassa percentuale di variabili.

Ad esempio, l'80% dell'uso di un prodotto di solito coinvolge un 20% delle sue componenti.

Quindi è importante concentrarsi sul 20% delle funzionalità critiche.

Prossimità

I componenti dovrebbero essere il più vicino possibile agli elementi che sono oggetto dell'azione.

Ad esempio, il pulsante di login dovrebbe essere vicino ai campi usati per il login.

Consistenza

Le persone tendono a preferire le cose già viste in passato.

Ad esempio, il control di tipo radio è spesso associato ad una scelta singola, utilizzarlo per una scelta multipla potrebbe confondere le persone. Un altro esempio è sull'uso appropriato dei colori, il colore verde è associato al "go", mentre il colore rosso è associato a "stop".

Controllo

Il livello di controllo dovrebbe essere legato all'esperienza dell'utente. Gli utenti poco esperti lavorano meglio quando l'interfaccia offre poche opzioni e poco controllo, gli utenti esperti lavorano meglio quando l'interfaccia offre tante opzioni e personalizzazioni. In generale, si possono prevedere due tipologie di utilizzo: beginner e expert.

Analisi costi/benefici

Se il costo associato con la realizzazione di un'interfaccia supera i benefici, allora l'interfaccia non è ottimale. Un errore comune è credere che aggiungere funzionalità aumenta il valore dell'interfaccia o del prodotto.

Questo è vero solo se i benefici apportati dalla funzionalità aggiunta superano i costi della complessità maggiore nell'utilizzo. Se non è così, allora aggiungere la funzionalità decresce il valore dell'interfaccia o del prodotto.

Attenzione agli utenti

Fate attenzione all'utilizzo dell'interfaccia grafica da parte dell'utente.

Ad esempio, potrebbe essere utile osservare come gli utenti interagiscono con l'interfaccia grafica per analizzare eventuali criticità, oppure per ridurre il numero di azioni necessarie ad usare alcune funzionalità.

Gamification

Usare strategie legate ai giochi in contesti diversi può migliorare l'esperienza. Questo aspetto coinvolge il raggiungimento di obiettivi chiari e una mostra degli obiettivi raggiunti in modo evidente.

Spesso si considera il modello SAPS: status, access, power, and stuff. Lo status indica il livello di un giocatore, le persone sono motivate a raggiungere uno status più alto. Access indica l'interazione privata o comunque speciale con un servizio. Power indica l'esercizio di potere di un giocatore rispetto ad un altro. Stuff indica premi tangibili, come gadget o buoni sconti, per chi raggiunge degli obiettivi.

Misurare la difficoltà

Raggiungere un obiettivo troppo semplicemente porta le persone ad annoiarsi. Rendere il raggiungimento di un obiettivo troppo difficile può essere frustrante.

Raggruppare gli elementi

Le informazioni sono più semplici da processare e ricordare se sono raggruppate in unità informative. Nel caso in cui le informazioni siano troppe è preferibile mostrare solo le informazioni essenziali, magari applicando dei passaggi incrementali.

Ad esempio, è più semplice leggere e ricordare 347 12 36 47 rispetto a 347123647. Oppure la suddivisione di un testo lungo in paragrafi più brevi.

Testi lunghi

"Mi scuso per la lunghezza della mia lettera, ma non ho avuto il tempo di scriverne una più breve"

Blaise Pascal

• È importante effettuare un lavoro di sintesi, ma in alcuni casi è inevitabile avere testi lunghi.
• Chi legge è in cerca di riferimenti: se si cerca un prodotto non è detto che si vogliano tutte le informazioni, magari si vuole sapere solo il prezzo o la disponibilità.
• Gli utenti spesso leggono usando il cosiddetto scanning. In questo caso gli utenti cercano titoli, parole in grassetto o in corsivo, o testo colorato. Se si evidenziano le parole chiave si semplifica questo processo.
• Il testo va diviso in paragrafi brevi e omogenei con un solo concetto per paragrafo.
• Le persone notano i testi scritti in forma di domanda/risposta, gli elenchi puntati/numerati e altre forme grafiche che permettono al testo di emergere.

UX Writing

• Poche tra le informazioni che volete trasmettere saranno effettivamente lette. Quindi è fondamentale organizzare in modo ottimale i messaggi da mostrare;
• Usare parole e verbi semplici, possibilmente nella forma attiva. Non mescolate pronomi possessivi diversi nello stesso contesto;
• Evitate frasi o termini non adatti agli utenti della vostra interfaccia, ad esempio quelli sensibili;
• Essere originali non è sempre la scelta giusta. Gli utenti sono abituati a uno standard di parole, quindi è importante non forzarli a imparare nuovi elementi per usare la nuova interfaccia;
• Evitate parole troppo tecniche o non di uso comune;
• Cercate di usare parole che siano politicamente corrette ed evitate di utilizzare il genere se non è necessario.

Organizzazione delle informazioni

Le informazioni possono essere raggruppate in 5 modi detti Five Hat Racks: categoria, tempo, posizione, alfabeto, gerarchico.

• Categoria: Organizzare le informazioni per similarità. Es. i libri per genere;
• Tempo: Organizzare le informazioni in un qualche ordine temporale. Es. per mese oppure cronologico;
• Posizione: Organizzare le informazioni in base ad elementi geografici o spaziali. Es. una mappa con i negozi più vicini;
• Alfabeto: Organizzare le informazioni in ordine alfabetico. Es. un dizionario;
• Gerarchico: Organizzare le informazioni in ordine gerarchico, quando un pezzo di informazione è connesso ad un altro in ordine di importanza o valore. Es. la visualizzazione dei file in un file system

Colori

I colori aggiungono una dimensione extra all'interfaccia e possono aiutare un utente a capire alcune strutture informative complesse.

I colori possono essere utilizzati per evidenziare eventi eccezionali.

Evidenziate al massimo il 10% degli elementi visibili. Quando tutto è evidenziato significa che non è evidenziato niente!

Gli errori comuni nell'uso dei colori includono:

• l'uso dei colori per comunicare dei significati;
• l'uso eccessivo dei colori nello schermo.

Le regole principali per i colori sono:

• limitare il numero di colori usati;
• usare i colori per mostrare un cambio nello stato del sistema;
• attenzione all'accoppiamento di colori diversi.

Messaggi di errore

La progettazione dei messaggi di errore è fondamentale nella realizzazione di una UI. Regole generali:

• il miglior messaggio di errore è quello che non appare, l'ideale sarebbe di prevenire i possibili errori. Tuttavia, quando non si riesce è importante saper gestire gli errori;
• i messaggi di errore possono cambiare la percezione sul sistema;
• i messaggi devono essere educati, concisi, consistenti e costruttivi. Non bisogna tentare di essere divertenti;
• i messaggi di errore devono essere orientati all'utente e non al sistema in alcuni casi è opportuno prevedere una soluzione al problema. Esempio: il messaggio "Password sbagliata." potrebbe mostrare anche un pulsante per reimpostarla;
• una tecnica semplice per evitare gli errori è la conferma: chiedere sempre se si vuole eliminare qualcosa oppure se si sta compiendo un'operazione a rischio;
• ridurre al necessario il numero di azioni che può fare un utente previene gli errori

Progettazione di un'interfaccia grafica

La progettazione di un'interfaccia grafica è un processo interattivo che richiede interazioni continue tra utenti e progettisti. Le 3 attività principali sono:

• Analisi dell'utente: capire cosa faranno gli utenti con il sistema;
• Preparazione di prototipi: sviluppare diversi prototipi da validare;
• Valutazione dell'interfaccia: mostrare i prototipi agli utenti e analizzare le reazioni.

Valutazione dell'usabilità

I 5 criteri principali 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?

Implementazione del codice

Si utilizza il pattern MVC, architettura software che permette di separare le componenti principali di un'interfiia grafica: la rappresentazione dell'informazione e l'interazione con l'utente.

MVC è l'acronimo di Model-View-Controller e l'idea è di creare tre componenti diversi:

• 1 Model: rappresenta i dati di dominio, la logica applicativa e il meccanismo di persistenza;
• tante View: l'interfaccia grafica vera e propria;
• tanti Controller: fanno da intermediari tra il Model e View. Gestisce le azioni degli utenti e li mappa su azioni sul modello. Quindi, in generale è responsabile della gestione degli eventi.

Pattern MVC

Il flusso di controllo si può mostrare in 5 passi di esecuzione:

1. l'utente compie un'azione sulla View;
2. il Controller riceve l'evento di input;
3. il Controller notifica l'azione al Model;
4. il Model notifica alla View il proprio cambio di stato;
5. la View legge il Model e si aggiorna;

Pattern MVC modificato

Il flusso di controllo si può mostrare in 4 passi di esecuzione:

1. l'utente compie un'azione sulla View;
2. il Controller riceve l'evento di input;
3. il Controller notifica l'azione al Model e alla View;
4. la View legge il Model e si aggiorna;

Esempio

Controller

class ProvaController implements MouseListener, ...
    private ProvaModel oggettoModel;
    private ProvaView oggettoView;
    ProvaController(ProvaModel model,ProvaView) {
        this.oggettoModel = model;
        this.oggettoView = view;
    }
    mousePressed() {
        oggettoModel.faiqualcosa();
        oggettoView.faiqualcosa();
    }

View

class ProvaView extends JPanel
    private ProvaController oggettoController;
    ProvaView(ProvaController oggetto) {
        oggettoController = oggetto;
        addListener(oggettoController);
    }
    paintComponent() {
        ProvaModel model = oggetoController.getModel();
        disegnaInBaseAllOggettoModel();
    }