Ripensare l’esperienza utente del trading online

Il problema

L’abbondanza e diversità dei dati di mercato e finanziari 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 fornire 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 dei dati 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 al rischio, 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 una serie di punti critici:

  1. I collegamenti di navigazione non sono evidenziati correttamente
  2. L’attenzione al contenuto viene persa durante lo scorrimento
  3. I servizi principali (ricerca, portafoglio, ordini) non sono in evidenza
  4. Manca un riepilogo dei dati dell’ordine richiesti
  5. Non c’è una panoramica dei beni personali
  6. Le sessioni di inattività costringono ripetute autenticazioni
  7. Il contenuto non è sempre visibile e accessibile a causa della presenza di più iframe e collegamenti nidificati
  8. Il sito non è reattivo e i testi non sono ben leggibili
  9. L’interazione è compromessa dal layout fisso e dall’incoerenza dei componenti dell’interfaccia utente (campi, titoli e pulsanti) e dalla mancanza di un feedback chiaro e in tempo reale in caso di errori
  10. L’uso eccessivo di grafici e tabelle complesse rende difficile l’interpretazione dei dati
  11. I banner e gli avvisi non sono aggiornati
  12. Manca un tutorial online

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 sicronizzazione e 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.
    I dati sono aggiornati in tempo reale e filtrati in base alla tipologia.

  • Portafoglio titoli
    L’utente ha un riepilogo della posizione e della performance.
    Per ciascun titolo in portafoglio sono evidenziati i dati principali e l’andamento.
    Una navigazione a pannelli permette di visualizzare il dettaglio del titolo.
  • 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.