Ripensare l’esperienza utente del trading online

Il problema

L’abbondanza e complessità di dati presenti in una piattaforma di trading online richiede un’accurata architettura dell’informazione. Allo stesso tempo, i vincoli tecnici e normativi non devono compromettere la fluidità e la facilità di navigazione: l’utente si aspetta di poter consultare la propria posizione finanziaria e concludere le operazioni di negoziazione in velocità e sicurezza.

All’interno dell’offerta bancaria BNL, la piattaforma trading è stata oggetto di un lavoro di restyiling, con l’obiettivo di rimuovere le criticità e inefficienze della UX e trovare le soluzioni per un’interfaccia grafica ottimizzata.

Cliente

BNL – Gruppo BNP Paribas (Italia)

Attività

  • User persona
  • User flow
  • Architettura dell’informazione
  • Wireframe e prototipo ad alta definizione
  • Interfaccia grafica

Strumenti

Sketch  Principle

Approccio e soluzione

Nella prima fase del progetto, si è cercato di identificare il profilo dell’utente: a tal scopo sono state condotte interviste dirette assieme all’analisi di profilazione dei clienti BNL. Da quest’attività sono emersi due persona con comportamenti e bisogni differenti:

  • un “power trader” con alta disponibilità e propensione ad investire, interessato a ricevere risposte tempestive e aggiornamenti sulle proprie operazioni;
  • un “basic trader”, meno attivo nella negoziazione e più interessato alla propria posizione finanziaria e all’andamento del mercato.

Il feedback degli utenti, insieme all’analisi dell’usabilità e alla simulazione cognitiva, hanno rivelato alcune criticità principali:

  1. I link non sono evidenziati correttamente
  2. Manca un focus sul contenuto
  3. I servizi principali (ricerca, portafoglio, ordini) non sono in evidenza
  4. Non c’è una panoramica degli asset in portafoglio
  5. Il sito non è reattivo e i testi non sono ben leggibili
  6. L’interazione è ostacolata dall’incoerenza dei componenti UI e dalla mancanza di un feedback chiaro e tempestivo
  7. L’uso eccessivo di grafici e tabelle complesse non facilita l’interpretazione dei dati
  8. Guide online e tutorial non sono adeguatamente evidenziati

 

Per trovare un riscontro quantitativo, sono stati analizzati i principali indicatori di utilizzo della piattaforma ovvero le pagine più visitate, la frequenza di rimbalzo e i percorsi di uscita. Questo ha confermato alcuni bisogni e criticità tra cui l’accesso non immediato ai servizi principali (Ricerca, Portafoglio e lista Ordini) e l’assenza di un’anteprima dei propri investimenti.

Successivamente attraverso interviste e sessioni di team brainstorming con i product owner sono state isolati i requisiti di business e i rispettivi indicatori di performance con i quali valutare l’efficacia della soluzione proposta.

 

Poichè una delle principali criticità riguardava l’organizzazione e fruibilità dei contenuti, si è deciso di rivedere l’architettura dell’informazione e sottoporla a verifica con un tree testing. Le percentuali non alte di completamento di alcune attività – negoziazione dei titoli e consultazione delle news – hanno suggerito una diversa denominazione e articolazione delle relative voci del menu di navigazione.

I dati empirici sin qui emersi sono serviti per elaborare i wireframe ad alta definizione che, dopo varie iterazioni, sono stati approvati dai product owner e stakeholder. Sulla base di questi wireframe si è giunti quindi a un prototipo interattivo.

 

Punti chiave

La proposta di redesign prevede un layout fluido e responsive per adattarsi alle diverse risoluzioni. I contenuti sono stati riorganizzati e semplificati senza l’uso di iframe per facilitarne la fruizione ed eliminare il problema di aderenza al layout.

  • Menu di navigazione
    I servizi principali sono accessibili da una sidebar laterale per dare focus ai contenuti della pagina. I link di ogni singola sezione sono sempre visibili ed evidenziati.
  • Dashboard
    L’utente ha un vista d’insieme aggiornata della propria posizione (patrimonio, investimenti, portafoglio titoli, watchlist, ordini) e dell’andamento del mercato.
    I dati sono aggiornati in base al profilo finanziario mentre un menu contestuale permette di accedere al dettaglio del titolo o di effettuare un ordine.
    Alert, banner e notifiche sono integrati nella dashboard. Un tutorial guida l’utente sulle principali funzionalità.
  • Toolbar e motore di ricerca
    Il motore di ricerca interno è persistente allo scorrimento della pagina.
    Un elenco di risultati ordinati in base alla tipologia facilita l’accesso ai contenuti.
    I principali indicatori di mercato sono visualizzati in una toolbar fissa espandibile, aggiornati in tempo reale e filtrati in base alla tipologia.

  • Portafoglio titoli
    L’utente ha un riepilogo della propria posizione e della performance dei titoli.
    Per ciascun titolo in portafoglio sono evidenziati i dati principali e l’andamento e una navigazione a pannelli permette di visualizzarne il dettaglio.
  • Modulo d’ordine
    E’ possibile visualizzare il saldo e la disponibilità di ciascun deposito titoli.
    I componenti UI sono stati ridisegnati per garantirne uniformità e accessibilità.
    Aiuti visivi contestuali prevengono errori e ripetizioni nell’inserimento dell’ordine.