2 modifiche di UX per migliorare l'app di Italotreno

Dopo essermi confrontato con l'app di Trenitalia mi sono appassionato di app per la mobilità. Mi avete scritto in tanti che l'app di Italo si può migliorare, vediamo se è vero?

Giulio Michelon
Life in Belka

--

Recensioni

Partiamo dal giudizio degli utenti, che è la cosa più importante! Le recensioni sono feroci.

  • 2/5⭐️ su App Store — iOS
  • 3,8/5️️️⭐️ su Play Store — Android

La valutazione su iOS è addirittura inferiore a quella di Trenitalia (2,9/5)

Su Play Store le recensioni votate come "le più utili" vanno da una a due stelle. Lamentano lentezza, bug e poca cura verso la user experience.

Un estratto delle critiche degli utenti di Italo Treno

Il commento più importante tra questi — secondo me — lamenta: quasi tutti i dati sono salvati su server, dettagli del biglietto compresi, invece che nella memoria del telefono.

Un modo semplice per risolvere il problema potrebbe essere l’integrazione di Wallet, che permette di salvare i biglietti nella memoria di iPhone e di richiamarli facilmente.

Mi immagino la scena: un utente termina il piano dati, o ha difficoltà con la connessione. Inizia a pensare: “come farò a dimostrare di avere un biglietto?”, e si sentirà in difficoltà, oltre che arrabbiato verso l'app che non gli mostra il biglietto acquistato!

Prime impressioni

La prima cosa che salta all'occhio su iOS è che l'app non è aggiornata per la risoluzione degli iPhone più grandi. Parlo degli iPhone successivi a iPhone 6, quindi negli ultimi quattro anni non è mai stato sistemato questo problema. Brutto inizio.

Trovo che la prima schermata abbia numerosi elementi carenti. In ordine di priorità:

  1. La call to action principale, cioè l'offerta per acquistare i biglietti scontati, che occupa il 50% dello schermo, non si può premere.
    Dal punto di vista business questo è un problema grosso: come faccio ad accedere a quell'offerta?
  2. Provo a registrarmi, ma per creare un account devo andare alla versione desktop.
    Il traffico da mobile in Italia rappresenta il quaranta per cento del totale. Trovo sia miope tagliarlo fuori dalle registrazioni. Inoltre, questa app viene usata prevalentemente in mobilità, dove le persone non hanno accesso a un pc desktop.
  3. Premendo il logo di Italo in alto torno alla schermata principale.
    Questo è un pattern comune su web, ma su app è errato. Normalmente per questo task si naviga lo stack, o si usa la tab bar. Siamo di fronte a un anti-pattern d’interazione.
  4. L'hamburger menu (☰) è dalla parte opposta di dove si trova solitamente, ed è un pattern d’interazione inefficace.
  5. L'icona sul fondo, che occupa il posto che di solito è riservato alla tab bar, è poco comprensibile. Premendola scopro che mostra le offerte. Assomiglia a una tab bar, ma non lo è! Siamo di fronte a un anti-pattern d'interazione.
  6. Il logo è presente due volte, senza un apparente motivo. Overbranding?

Abbiamo critiche a sufficienza. Qualche proposta!

L'app è davvero estesa. Mi piacerebbe poterla riprogettare da capo, ma non ho così tanto tempo da dedicare a questo articolo!

Per questo ho deciso di concentrare i miei sforzi su due punti:

  1. Le offerte speciali
  2. La navigazione dell'app

Offerte speciali

Una parte interessante — e assente nell'app di Trenitalia — è la promozione delle offerte.

Le offerte di Italo Treno sono un elemento di novità rispetto a Trenitalia

Ritengo che questa feature sia importante e, se ben sviluppata, può portare degli incrementi al business.

La mia proposta è presentata nel mockup qui sotto. Cerca di risolvere il problema dell’assenza di call to action per l'utente verso l'offerta descritta.

Ho ripreso la ricerca in testa, come già analizzato nell'articolo riguardo a Trenitalia.

Sotto alla ricerca ho aggiunto un banner con un bottone, che una volta premuto, ci porta alla pagina di acquisto biglietto già completata con l'offerta.

I dettagli dell'offerta sono descritti sotto al codice dell'offerta, assieme alla durata. In questo modo è molto più semplice per l'utente capire cosa sta acquistando.

Navigazione dell'app

L'architettura informativa dell'app, partendo dalla prima schermata, è carente. I tasti sono tutti diversi, e alcuni (come l'icona sul fondo) sono difficilmente decifrabili.

Ho evidenziato con dei numeri tutte le parti interattive e ho riportato il loro significato:

  1. Il logo si può premere e riporta alla prima schermata
  2. Hamburger menu
  3. Accedi
    questo c'è anche all'interno dell'hamburger menu
  4. Acquista biglietto
  5. Modifica biglietto
  6. Italo in viaggio
    una sezione dalla quale si può consultare lo stato di un treno
  7. Italo informa
    Promozioni commerciali. In questo momento riporta uno sconto del 40%

Proposta di redesign

Per razionalizzare l'interazione della prima schermata utilizzerei un pattern molto diffuso nelle app moderne: quello della tab o bottom bar (documentazione Android e documentazione iOS).

Si tratta di una barra alla base dell'applicazione che porta alle sezioni principali. È un pattern ampiamente usato in app celebri come Instagram, Facebook e Twitter. Permette di organizzare meglio gli spazi.

La mia proposta su tab bar

La tab bar risolve efficacemente l'organizzazione degli spazi. Gli elementi alla base sono:

  1. Home → questo sostituisce il logo di Italo in alto
  2. Biglietti → “Cerca o Modifica Biglietto”
  3. Stato Treni → “Italo in Viaggio”
  4. Offerte → Questo sostituisce il tasto misterioso alla base
  5. Altro → hamburger menu

Utilizzando la tab bar l'applicazione è più ordinata, e riesce a dare la stessa quantità di opzioni e informazioni.

Ma possiamo fare di meglio: cinque elementi alla base sono un po' densi. Ho deciso di riprendere il pattern dei biglietti visto nell'analisi dell'app di Trenitalia, cioè di mettere i biglietti direttamente in homepage.

Oltre a questo le offerte possono essere spostate in alto a destra, come fossero delle notifiche, in modo da alleggerire ulteriormente la tab bar. È possibile anche evidenziarle con un badge rosso quando ci sono nuove offerte non lette.

Il risultato

Conclusioni

Speravo di trovare una situazione migliore rispetto a quella dei concorrenti, ma la situazione mi sembra tale e quale a quella di Trenitalia.

Anche qui, l'app da un punto di vista meramente funzionale può andare, ma il design e la user experience sono molto trascurati.

Inizio a notare mio malgrado un pattern. Non capisco perché questo tipo di utility non vogliano aggiornare quello che è a mio parere lo strumento principe per comprare i biglietti in mobilità, cioè le app.

Il rischio è di restare relegati a meri fornitori del servizio, e di cedere il processo di vendita, con i relativi margini, a chi lo fa meglio, come ad esempio Trainline.

--

--