Overview
Attraverso uno studio approfondito del sito Mazda, ho potuto notare attraverso una metodo induttivo le problematiche dalle più generali alle più specifiche, passando dalle problematiche più comuni ai clienti a quelle più effimere. Con i dati del sondaggio da me stipulato ho potuto poi creare un prototipo migliore della versione attuale. Non poteva ovviamente mancare un test di usabilità con conseguente miglioramento del prototipo.
Deadline
1 month
Role
User experience & User interface Designer
Errori di progettazione
Utilità Il sito Mazda offre un'interazione limitata, con assenza di funzioni utili come assistenza clienti o prenotazione auto. Questo rende il sito meno interessante per gli utenti, che potrebbero preferire recarsi direttamente in concessionario.
Navbar: La Navbar è troppo affollata e ridondante. Alcune voci potrebbero essere eliminate o accorpate, semplificando la navigazione e riducendo la confusione per l'utente.
Ridondanza Il sito presenta troppi testi e CTA ripetuti, rendendo l'esperienza confusa e poco efficace. Il design varia troppo, come dimostrato da pulsanti con testi incompleti.
Pattern UX e UI Il sito presenta troppi passaggi per completare le azioni e errori di design, come l'uso inappropriato delle checkbox e testi sottolineati non cliccabili, che confondono l'utente.
Card I caroselli non permettono lo swipe e sono mal progettati, con clusterizzazione confusa e una freccia di navigazione poco visibile. Uno slider mal posizionato aumenta la confusione.
Clusterizzazione La disposizione degli elementi visivi è disordinata, rendendo difficile la comprensione e riducendo l'estetica. Le funzioni sono passive e non offrono reale interattività.
Utilità
Il punto centrale delle problematiche da me evidenziate nel sito di Mazda si concentrano proprio su questo livello. Il sito infatti permette all’utente un uso molto limitato, con un’interazione prettamente passiva, questo perché non sono presenti touchpoint particolarmente evidenti o “accesi”. Non sono presenti funzioni che mettano in contatto il cliente con assistenza clienti, come non sono presenti possibilità di ordinare o prenotare un’auto. L’utilità del sito è esclusivamente concernente alla scoperta dei modelli e delle possibili offerte e di informazioni che aiutino la conoscenza dell’utente ma che vengono ricollocate ad un concessionario autorizzato. In questo senso il sito perde tutti i possibili interessi che l’utente potrebbe avere navigando sul sito, essendo che, sarebbe molto più conveniente, in effort ed in risultati ottenuti, bypassare il sito e dirigersi in un concessionario
Navbar
Una volta che l'utente accede al sito, uno degli elementi che scannerizzerà visivamente è la Navbar. Data la sua importanza nella navigazione e nella comprensione della posizione dell'utente, risulta cruciale. Nella navbar presentata da Mazda ci sono diverse opportunità di miglioramento.
In primo luogo, si potrebbero eliminare le voci nella parte superiore, poiché includono funzionalità già accessibili tramite altri pulsanti presenti nella schermata. In secondo luogo, potrebbe essere utile rimuovere un bottone, poiché la sua posizione è innaturale e comporta cambiamenti in diverse schermate. Infine, un cambiamento più radicale consisterebbe nel ridurre significativamente le voci del menù, poiché molte di esse potrebbero essere consolidate sotto un'unica voce. Una disposizione eccessiva di voci simili crea confusione, rendendo difficile per l'utente comprenderne il motivo. Riducendo il numero di voci, sarà più facile memorizzare non solo le opzioni, ma anche il contenuto di ciascuna pagina.
Ridondanza
In tutto il sito è presente una quantità di bottoni, testi, e link esagerata, aggravato poi dalla ridondanza delle CTA. Questo trasmette al cliente un messaggio che viene ripetuto più e più volte, dando all’utente l’impressione che il contenuto della pagina, alla fin fine non sia poi così ricco come sembra, vengono più volte citate nella stessa pagina ma in sezioni diverse argomenti molto simili. Questa costruzione oltre che essere ripetitiva e noiosa per l’utente, lede particolarmente la legge di Hick, la quale consiglia di selezionare per l’utente un quantitativo ristretto di elementi, che possano aiutare l’utente a scegliere molto più velocemente. Oltre la ridondanza il design system subisce all’interno delle pagine una modifica non indifferente, possiamo per esempio notare come nel 2° Screenshot, il testo all’interno del bottone sia incompleto
Card
I caroselli e le card sono stati un altro punto su cui la mia attenzione è stata soffermata più volte, è infatti possibile in queste schermate vedere un carosello che contiene molteplici card che contengono modelli di auto. L’azione per chi ha un dispositivo di touchpad o touchscreen ma schermi abbastanza grandi per visualizzare la schermata di queste dimensioni è quella di effettuare uno swipe laterale per visionare i diversi modelli, questa funzione purtroppo non è disponibile, la problematica che ho evidenziato qui è che subito dopo la spiacevole scoperta di non poter usare la comodità di uno swipe, è la confusione che ne deriva dopo, poiché apparentemente non è presente alcun pulsante che indichi uno scorrimento orizzontale ma nella verità se con il mouse ci spostiamo verso destra, per precisione nella parte in cui la card successiva è con una bassa opacità, da lì spunterà una freccia che consentirà la navigazione del carosello.
l’unico elemento visivo che potrebbe completare in maniera adeguata il carosello è lo slider, il quale però ha una problematica non indifferente, infatti troviamo che la clusterizzazione degli elementi visivi non è per niente eccellente, in primo piano troviamo che la linea dello slider non è distanziata perfettamente, si trova molto vicino alla card della Mazda Cx-30, il quale di per sé potrebbe essere inteso come elemento all’interno della card, ciò potrebbe però essere risolto da card che abbiano dei bordi o un background di colore differente, questo per far comprendere bene i margini delle card
Pattern Ux/Ui
Nel sito sono inoltre presenti diversi accorgimenti da poter sicuramente migliorare sia per poter aumentare quello che è l’engagement del sito, sia per l’usabilità stessa.
Prima di tutto troviamo come in questa configurazione vengano elencati molti step prima di portare al termine il compito, reputo che questa esposizione così tanto dettagliata sia esagerata oltre che controproducente. Creando così tanti step, anche se dovessero essere facili e brevi da compilare, danno l’impressione iniziale di non essere sicuramente immediati. Segue poi un elemento abbastanza ambiguo, un testo con la sottolineatura, questo nel campo della UX e della Ui, come ricorda la legge di jackob, trasmetterebbe all’utente un reindirizzamento ad un’altra pagina, il quale non viene poi rispecchiato. Un altro errore è poi presente nelle card che sono, prima di tutto eccessivamente esaustive, se l’utente dovesse avere molta pazienza potrà pur leggerle ma sarà praticamente impossibile ricordare le differenze dei vari modelli, inoltre è poi presente un errore ben più grave, ovvero l’uso della checkbox riguardo una scelta singola, questo infatti è un errore molto grave nel campo della Ux e della Ui
Cos'altro?
Il percorso ovviamente non è stato così semplice, dietro ci sono stati tante iterazioni e tentavi, ciò ha portato alla realizzazione di un prototipo e una qualità elevata