Come abbiamo migliorato l'esperienza degli utenti grazie all’interfaccia grafica

Quello che vediamo a occhio nudo di un prodotto digitale è la sua interfaccia grafica e i contenuti di qualsivoglia tipo che la popolano. Si tende a credere che questa sia la parte principale di un prodotto, come ci insegna la legge di Pareto: il 20% del lavoro porta l'80% dei risultati. Ovviamente noi sappiamo che il motore di un prodotto è la sua parte fondamentale, il suo cuore, ma è difficile trasmettere questo valore senza uno studio di UX e UI approfondito che rende il prodotto piacevole e perfettamente usabile per gli utenti.
Noi abbiamo sperimentato questo fenomeno sulla nostra pelle ovvero quando SolidRules aveva ancora un'interfaccia che possiamo definire "rudimentale", un po' vintage direbbe qualcuno.

Ci siamo accorti che nonostante sotto al cofano di SolidRules ci fosse un bel motore la sua carrozzeria destava poca fiducia. Abbiamo capito così che un ottimo prodotto con una pessima interfaccia grafica semplicemente non può essere considerato un ottimo prodotto perché il mercato di certo lo boccerà.
In questo articolo vogliamo raccontarti più nel dettaglio l'importanza di una buona interfaccia grafica sulla base della nostra esperienza e ti racconteremo anche dell'evoluzione e dei miglioramenti apportati dentro SolidRules che lo hanno reso quello che è oggi. Inoltre, vi sveleremo qualcosa anche sulla direzione futura.

Cos’è un’interfaccia grafica e come funziona

Quando parliamo di interfaccia grafica (UI) intendiamo il punto di incontro tra utente e prodotto digitale, come un sito Web o una App.
La UI consiste nella parte visuale ed è formata da componenti grafici studiati per garantire una facile consultazione dei dati e una coesione visiva all'interno del nostro prodotto.
Ma non basta che l’interfaccia sia gradevole, questa sarà costruita in modo da agevolare l’utente nel portare a termine i suoi obiettivi nel minor tempo possibile e senza sforzi cognitivi. Questo è reso possibile da un insieme di attività focalizzate sugli utenti dalle quali si riescono ad ottenere dati che ci aiuteranno a direzionare l’interfaccia verso le esigenze di chi la utilizza, raccogliendo feedback dagli utenti e iterando di continuo le soluzioni. Queste attività prendono il nome di esperienza utente (UX).

Caso studio: SolidRules e i risultati del miglioramento dell'interfaccia grafica

Per te che ci conosci già, questo sarà un breve ripasso, per te che sei nuovo da queste parti ti spieghiamo in breve cos'è e cosa fa SolidRules attraverso questo esempio.
Immagina un’azienda che produce ascensori, è probabile che sia composta da:
- Ufficio commerciale
- Ufficio tecnico
- Produzione
- Service e manutenzione
- Ufficio ricambi
- E altro

Ora immagina che l’azienda abbia comprato 10 software diversi per gestire 10 reparti; quindi, avrà 10 fornitori con cui interfacciarsi, 10 prodotti su cui formare e mantenere aggiornato l’organico, ecc… folle vero?
SolidRules è una suite di prodotti che ti permette di gestire tutti i reparti da un unico punto. Così quell’azienda potrà continuare a produrre ascensori utilizzando un solo prodotto e concentrandosi sulle cose importanti.
A partire dal preventivo, passando per l'offerta e la progettazione fino alla produzione e post-vendita. Questo è tutto l'universo di cui si occupa SolidRules. E come ben immaginerai far convergere e collaborare fra di loro tutte queste informazioni in un unico posto in modo organizzato e facile da navigare è stata una bella sfida.
Ma noi crediamo così tanto in SolidRules che prima di consegnarvelo lo proviamo sulla nostra pelle nella vita di tutti i giorni, e lo stesso è accaduto per le modifiche all'interfaccia grafica.
Continua la lettura per scoprire quali sono state queste modifiche e che impatto hanno avuto sull'utilizzo del prodotto.

Come un'interfaccia grafica può migliorare le performance di un prodotto digitale

Passando all’aspetto pratico, il prodotto e le sue funzionalità si sono evoluti negli anni, così come l’interfaccia grafica che è stata adattata di volta in volta per restare al passo con SolidRules e con le esigenze degli utenti.
Alcune delle prime difficoltà erano legate a problemi di performance: tutte le informazioni (e ne gestiamo davvero tante) di una pagina venivano caricate in un colpo solo e questo provocava lentezza quindi impossibilità di lavorare in modo efficiente.
Qui è entrato in scena il primo pattern di design che caratterizza ancora oggi le schermate di SolidRules: le tab.
Organizzando i dati in contenitori e caricandoli solo al momento del bisogno, il tempo di caricamento delle pagine è calato notevolmente. Questo intervento è stato utile non solo per le performance, ma anche in termini di architettura dell'informazione: i dati sono stati raggruppati in modo intuitivo in macro-sezioni, raggiungibili senza dover scorrere lungo la pagina in cerca del punto esatto.
L’introduzione delle tab è riuscita anche a fornire una organizzazione gerarchica alla pagina, ma questo cambiamento non era ancora abbastanza.

Il design che evita la perdita di contesto

È il turno delle tabelle di dati (data table), le protagoniste non solo per la frequenza con cui le utilizziamo ma anche per la loro grandezza. Una lista infinita di elementi dalla quale dovevamo aprire e consultare un elemento alla volta in una nuova pagina per poi tornare alla tabella. Lo spostamento continuo da una pagina all’altra provocava perdita di contesto, soprattutto quando lo si doveva fare molte volte.
In questo caso abbiamo iterato il design inserendo un pulsante su ogni riga della tabella in grado di aprire al clic un’anteprima dell’elemento senza il bisogno di cambiare pagina.
Un caso simile è stato quello delle form. Stai compilando la tua form e al “conferma” si presenta una finestra che ti indica una lista di errori, la chiudi per risolverli e… la lista non c’è più. Certo ogni campo in errore è segnalato da un bordo rosso inferiore, ma devi passarci sopra con in mouse per leggere il messaggio. Per non parlare dei campi fuori dal campo visivo, in fondo alla pagina o nelle tab.
La proposta in questo caso è stata inserire la lista degli errori in un banner nella parte superiore della pagina, sempre visibile e consultabile dall’utente.
Questo vale sia per gli errori che altri tipi di messaggi. Ad esempio, la conferma di un’operazione andata a buon fine gestita con una finestra che compare all’improvviso bloccando quello che stavi facendo, interromperà il tuo flusso di lavoro mettendo in difficoltà il tuo carico cognitivo. È una finestra che appare per pochi secondi, ma ogni secondo vale.
La soluzione più adatta in questo caso è un elemento chiamato toast (no, non quel toast): un messaggio che compare vicino ai bordi dello schermo per pochi secondi. La noti, la leggi, continui con il tuo lavoro senza dover interagire con il messaggio per chiuderlo.

Informazioni comprensibili e facili da trovare

In competizione con la complessità delle tabelle, ci sono i menu. Le azioni che puoi compiere su una pagina sono innumerevoli e trovare quella che stai cercando in pochi secondi è determinante. I nostri menu consistevano in una serie di pulsanti con un’icona diversa per ogni funzione. Fino a 5 pulsanti andava tutto bene, ma interpretare e ricordarsi la funzione di molte icone iniziava a essere un problema.
Per ridurre questa frizione, alle icone sono state aggiunte delle etichette e i pulsanti sono stati organizzati e classificati in voci e sottovoci di menu. In questo modo la funzione delle azioni è diventata più chiara e sono state messe in risalto le azioni principali, posizionando quelle secondarie in tendine apribili al clic.

Non c'è coerenza senza un Design System

Un prodotto usabile non deve essere interpretato ogni volta che lo si usa, dobbiamo essere in grado di riconoscere la sua interfaccia invece di cercare di ricordarcela.
È un risultato che si raggiunge assicurandosi che gli elementi in un'interfaccia utente siano uniformi e che si comportino allo stesso modo per creare nell’utente un senso di controllo, familiarità e affidabilità.
Si può così ricorrere alla libreria di interfaccia utente, una collezione di elementi dello stesso stile pronti per l’uso. Ma avere a disposizione i pezzi non basta, serve sapere come usarli.
E qui entra in gioco il Design System, una piattaforma come unico punto di riferimento per tutti gli stakeholder, designer e developer compresi, alla quale attingere per qualsiasi tipo di linea guida aziendale. Anche per le interfacce.
Al momento della scrittura di questo articolo il Design System di SolidRules è agli inizi, ma presto arriveremo ad una soluzione solida su cui contare.

L’utente al centro delle scelte di design

Abbiamo visto quanto un'interfaccia può evolversi per andare incontro ai bisogni di chi la utilizza, bisogni che cambiano e che vanno individuati di continuo per ottenere un'esperienza utente sempre migliore (UX).
E mentre da una parte abbiamo l'analisi delle richieste del nostro target, dall'altra abbiamo la progettazione della parte visuale che ha il compito di mantenere coerenza e trasmettere familiarità all'utente che la osserva (UI).
Questo è solo un punto di partenza del nostro viaggio per rendere SolidRules facile da adattare alle tue esigenze.
SolidRules ti interessa (o lo stai già provando) e ci sono aspetti sull'usabilità che non ti convincono? Parliamone!

Altro da Alexide