In questo post ti voglio presentare la nuova pagina di confronto di CostiRealiAuto.

Il mio obiettivo era quello di rendere questa pagina più semplice e chiara, in particolar modo nella versione mobile.

Vediamo nel dettaglio quello che ho fatto.

Il titolo

La versione precedente della pagina di confronto aveva il nome dei due modelli e la percorrenza organizzati nel seguente modo:




Nella nuova versione ho dato un po' di struttura in modo da rendere la pagina più chiara e ordinata:




Allo stesso tempo ho aggiunto alcune informazioni che mancavano nella precedente versione:
 
  • il Prezzo di acquisto
  • il Consumo medio del veicolo
  • il prezzo del Carburante.

Penso che avere queste informazioni sott'occhio renda il confronto piu agevole.

Risparmio sul prezzo di acquisto

Nella versione precedente questa sezione era un box che si estendeva per tutta la larghezza della pagina e non era subito chiaro quale fosse il modello più economico da acquistare.

Risparmio sul prezzo di acquisto precedente versione


Nella nuova versione della pagina di confronto, il box informativo, si trova sotto al modello più economico.
In questo modo è subito evidente il modello che ti farà risparmiare al momento dell'acquisto.


Risparmio sul prezzo di acquisto nuova versione

Differenza sul consumo annuale di carburante

Questa sezione è praticamente identica alla precedente pagina di confronto con la differenza che adesso ho aggiunto anche la spesa mensile.

Risparmio sul carburante nella nuova versione


Il risparmio annuale sul carburante viene mostrato in un box che si trova sempre sul lato del modello più risparmioso.

Punto di pareggio e relativo grafico

Nella precedente versione le informazioni sul punto di pareggio erano frammentate.
Il grafico era posizionato all'inizio della pagina e la descrizione con i valori di pareggio (tempo e percorrenza) si trovavano alla fine.

Nella nuova versione ho voluto creare una sezione dedicata al solo punto di pareggio dove si trovano sia i valori di pareggio che il relativo grafico.


Nuova sezione del punto di pareggio

Versione mobile migliorata

Oltre alle varie modifiche sopra esposte la cosa che mi premeva di più era quella di migliorare la versione mobile.

Nella precedente versione le informazioni di confronto erano incolonnate verticalmente.
Anche se la descrizione dei vari box informativi era abbastanza chiara, l'impatto visivo era un po' confuso:

Versione mobile precedente


Nella nuova versione, la struttura della pagina di confronto è sempre la stessa, sia sullo schermo grande di un computer desktop sia sul display piccolo di uno smartphone.

Il risultato finale è il seguente:

Nuova versione mobile


Spero di aver fatto una cosa gradita e mi auguro di essere riuscito nel mio intento di rendere più semplice e chiara la pagina di confronto di CostiRealiAuto.

A presto,
Marco