Rifare il sito: Case Study sul nostro website

Rifare il sito: Case Study sul nostro website

13 MAG 2022

Abbiamo parlato, nel nostro precedente articolo, sulla necessità del rifacimento di siti web per questioni legate prettamente più al funzionamento che al design. 

Lo stesso sito di Laser s.r.l., quello su cui stai leggendo questo articolo, ha subito proprio un intervento di profondo redesign e rifacimento all’inizio dello scorso anno! 

I motivi che ci hanno spinto alle modifiche, più legati al design che alle funzioni, sono stati molteplici. Affronteremo solo nel nostro prossimo articolo la necessità di rivedere il sito per questioni di UX e UI, navigazione, grafica ed elementi estetici, ma iniziamo a darvi qualche anteprima proprio su questi argomenti e su come si legano a responsività e funzioni tecniche! 

Prestazioni con un tocco di UX ed accessibilità

Sul precedente sito, gli elementi di pagina risultavano essere grossi e piuttosto ingombranti. Molto dello spazio a schermo non era ottimizzato all’uso, cioè non aveva funzionalità utili all’utente ma era un mero esercizio estetico. Due li abbiamo proprio nella homepage: 

Prima: 

Praticamente tutto lo schermo viene occupato, all’apertura del sito, da un’animazione in Javascript, che ha già un certo impatto sulle prestazioni di caricamento in negativo, e colloca il menu di navigazione in una posizione “anomala” per i design attuali, posizionandola in fondo allo schermo.

Dopo: 

La porzione di schermo usata a fini decorativi viene ridotta, ed il menu di navigazione del sito viene immediatamente contenuto in un bottone in alto a destra, la classica posizione dei menu da diversi anni. L’utente immediatamente sa dove deve cliccare per aprirlo e navigare. L’animazione viene sostituita con uno sfondo video, più leggero, che possiede anche una dinamica per cui non si avvia se la velocità della connessione non è sufficiente o andrebbe ad impattare sui caricamenti. 

 Anche la tinta più scura ha una funzione legata al design ed all’accessibilità: un maggiore contrasto rende più leggibile il contenuto del sito agli utenti con difficoltà visive.  

 

Mobile friendly, una scelta fondamentale

Nel precedente sito, alcuni degli elementi di pagina non erano ancora pensati per una fruizione da cellulare, poiché non erano ancora i dispositivi da cui transitava la maggior parte degli utenti (oggi il traffico da smartphone può toccare anche l’80% delle visite ad un sito). 

Nel rifacimento del nostro sito, abbiamo tenuto conto della visualizzazione da mobile come la prima opzione dei nostri visitatori, adattando gli elementi. Un esempio lampante, sempre sulla homepage, sono i loghi dei clienti di Laser. 

Prima:  

I loghi occupavano, singolarmente, praticamente tutto lo spazio a schermo, rendendo la Home una pagina infinitamente lunga da navigare e frustrando l’utente nel raggiungere i contenuti. 

   

Dopo: 

I loghi sono disposti in un contenitore che li dimensiona e scala a seconda delle dimensioni del dispositivo che li sta visualizzando, mantenendoli sempre in una griglia ordinata, coerente tra dispositivi e che occupi il giusto spazio a schermo, permettendo di passare al contenuto successivo senza difficoltà. A livello visivo inoltre, risultano più appaganti e leggibili. 

 

Portfolio: più chiarezza ed essenzialità

Ogni azienda ci tiene a mostrare il proprio lavoro nella maniera migliore, più chiara ed essenziale possibile. Anche noi abbiamo scelto questo approccio nel nostro Showcase, andando a lavorare non solo sulle funzioni necessarie degli elementi, ma ragionando anzitutto cosa sarebbe stato utile all’utente in primis. 

Prima: 

Il precedente showcase dei nostri lavori utilizzava una visualizzazione a schede in cui ogni case study riceveva dinamicamente, impostando dei valori da backoffice, un’animazione di copertina che andava a decorare la pagina. In più, passando sopra con il mouse, si aveva una piccola animazione del tutto. 
Molto carino ma non così utile per l’utente, che si trovava a guardare un’animazione sì ben fatta, ma poco chiara nei contenuti. 

 

Dopo: 

Con il rifacimento del sito abbiamo optato per una strada più diretta e content-first: è immediatamente evidente non solo il nome del cliente, ma il tipo di lavorazione (app, e-commerce, sito, applicazione IoT.  

Portando il mouse sopra una delle card, inoltre, appare un testo introduttivo che spiega in poche parole il progetto, eliminando di fatto la necessità di aprire una nuova pagina per capire di cosa stiamo parlando.

Le news: fruizione, e rapidità nell’accesso

L’ultimo esempio che vogliamo portare è proprio su questa pagina! La precedente impostazione delle news prevedeva troppi click da parte dell’utente per navigare i contenuti del nostro blog. E’ vero, non siamo un canale di notizie su cui gli utenti passano la giornata a scorrere i contenuti, ma per ogni azienda è importante far sì che i contenuti informativi, pubblicitari, gli articoli tecnici o anche solo le novità da comunicare al pubblico siano immediatamente raggiungibili ed organizzate, sia essa un’azienda legata al food, industria pesante o…software! 

Prima:

L’articolo ha un suo corpo di testo ed un’immagine di cover, peraltro molto grande a schermo. Non ci sono notizie correlate, un archivio diviso per date e per tornare alle altre news è necessario raggiungere un link a fondo pagina che ci riporta all’elenco news, rendendo la navigazione più scomoda. 


Dopo: 

Ora il blocco news è più armonico: l’immagine di apertura è grande ma senza ingombrare, ed integra immediatamente in un riquadro la data di pubblicazione, come fosse una copertina. La disposizione dei contenuti è rimasta la stessa, ma c’è una barra laterale che permette di visionare gli ultimi tre articoli pubblicati, oltre che un’archivio diviso per anno e mese, che mostra anche quanti articoli sono stati pubblicati in un dato mese. 


Questa volta, non metteremo uno screenshot, ma puoi navigare liberamente le news del sito per vedere come funziona l’archivio. Chissà che non trovi qualche articolo di tuo gradimento, ad esempio sull’importanza di aprire un e-commerce, o potresti addentrarti invece nei nostri servizi, scoprendo il nostro nuovo prodotto: il social commerce su Facebook! 

 

Conclusioni 

Per il momento, ci salutiamo qui, ma vedremo la prossima settimana, in un nuovo articolo del nostro blog, quali sono le necessità legate alla grafica, alla UX, alla UI ed al design generale di un sito, che abbiamo già parzialmente toccato qui. Seguici per approfondire e, se sei interessato, iscriviti alla nostra newsletter!