Fikus

I want to break free

Fikus è un bed & breakfast situato nella magnifica Valle d’Itria, a Ceglie Messapica. E’ nato dall’incontro di due vite – Francesco e Luisa – di due pugliesi migranti per il mondo impegnati nella carriera professionale. Si incontrano a Bruxelles, un po’ per caso, che diviene così culla della loro storia. Insieme hanno preso una decisione coraggiosa: barattare la loro vita internazionale, ricca di stimoli e opportunità lavorative, per inseguire un sogno. Per loro Fikus diviene un luogo dove conciliare gli impegni professionali frenetici e veloci sotto l’ombra di un ulivo, a respirare l’odore della propria terra, con lentezza. Fikus è accoglienza, la casa tipicamente meridionale con un fascino internazionale. Dal website di Fikus traspare la semplicità ricca di dettagli di un posto meraviglioso. Un layout che lascia spazio a fotografie fullscreen ariose, copy curate ed empatiche, e una palette naturale che rispecchia la campagna pugliese. In una mattina d’aprile, Francesco mi ha chiesto di intervenire sul website Fikus. Con l’approssimarsi dell’estate, la struttura di booking avrebbe dovuto ricevere miglioramenti tecnici ed estetici per risolvere alcuni importanti problemi legati alla User eXperience (UX) esistente. Una gestione più efficiente delle risorse avrebbe garantito performance migliori durante la navigazione, specialmente da mobile, dove una parte importante di potenziali clienti approdava da canali social e referral esterni.

Progetto Fikus - Homepage del sito web Fikus, raffigurante scorcio della piscina immersa negli ulivi - Portfolio di Gianluca Rinaldi Web Designer

UX Challenges

Un content audit preventivo del website avrebbe consentito di individuare i principali problemi di uso e i flaws associati alle performance. Il benchmark avviato su ciascuna pagina ha rivelato importanti implicazioni legate all’uso degli assets fotografici.

La pagina home è strutturata in uno slider fullscreen di fotografie a risoluzione molto elevata, alcune in formato RAW non compresso. Una situazione analoga si riscontra nella pagina Gallery, dove l’elevato numero di fotografie comporta un eco importante del problema. La conseguenza maggiore legata all’uso di immagini non ottimizzate per il web è il tempo che queste impiegano per essere scaricate dal browser e visualizzate su schermo. Maggiore è il peso dell’immagine, maggiore è il tempo di caricamento, condizione aggravata da connessione non stabile o di bassa qualità. Nel caso di Fikus, gli assets tecnici non ottimizzati comportavano un ulteriore problema con performance percepibili peggiori. In numeri, la home completava il suo caricamento in 6 secondi per 3 MB di peso, mentre la gallery in 1 minuto per 34 MB. L’uso di assets fotografici non compressi era diffuso sul website, rendendo necessario un intervento su larga scala. In termini di usabilità, il tempo ideale di caricamento di una pagina è un range tra i 3 e 5 secondi. Superata questa soglia, l’utente inizia a manifestare impazienza, perdita di attenzione sul task che stava svolgendo e, su tempi ancora maggiori, una percezione del brand meno qualitativa rispetto ad altri competitors. Tempi di caricamento più bassi si traducono in maggiori guadagni.

Fikus dispone di un sistema di booking web tradizionale, basato sulla compilazione di un form associato alla struttura che si desidera prenotare. Il visual si sviluppa in moduli ordinati di larghezza fissa, che non beneficiano dello spazio massimo messo a disposizione dal parent container. Ne consegue che per campi complessi il testo entra in overflow costringendo uno scrolling orizzontale nei moduli a linea singola, verticale per quelli multiriga.

Su mobile la problematica è accentuata dal fatto che le gestures per lo scrolling orizzontale in componenti non di default rende più complessa la revisione dei dati inseriti.

La selezione delle date di check-in e check-out adotta il principio di familiarità osservato su moltissimi altri motori di booking. Un tratto peculiare è che il sistema consente di settare, lato backend, l’effettiva disponibilità della struttura per evitare overbooking e sovrapposizione di prenotazioni. Il settaggio dell’availability nel backend è però complesso e time-consuming, e avrebbe dovuto lasciare spazio a un sistema minimalistico e meno impegnativo.

UX Solutions

Il focus principale si è sviluppato attorno ai form di prenotazione, per la loro capacità di generare conversioni. La User Interface dei moduli è stata completamente rivista per osservare i principi di usabilità e responsive design, a partire dall’uso di una struttura fluida e non basata su fixed width. I moduli di inserimento dati si sviluppano sulla totalità dello spazio a disposizione, con altezza e line-height migliorate per maggiore leggibilità su ogni schermo e condizione visiva. La disposizione è rimasta colonnare, ma con un layout diviso che vede le labels di compilazione a sinistra e il campo a destra, per adattarsi ai pattern di lettura occidentali F-shaped e consentire una revisione più agevole in caso di errore di compilazione.

Il booking engine è stato sostituito con moduli date-picker predefiniti che non richiedessero configurazione in backend e beneficiassero delle strutture di default messe a disposizione da OS mobile e desktop, per maggiore familiarità di utilizzo. L’aggiunta di ulteriori moduli ha permesso di ottenere più informazioni su necessità specifiche del cliente, nell’ottica di un miglioramento costante del servizio fornito. L’intera struttura, infine, si adatta fluidamente su mobile rispettando i principi di design operati su desktop per garantire la massima usabilità.

Gli assets fotografici costituiscono la seconda maggiore area di improvement del website. Con esclusione delle illustrazioni (tratti neri su sfondo bianco, che godono di percentuali di compressione molto elevate), quasi tutte le fotografie presenti (111 in totale) eccedevano la soglia massima considerata ottimale (180 – 230 KB), raggiungendo picchi massimi di 4 MB e pesando in media 500 KB. Determinando il massimo fattore di qualità disponibile, data la ricchezza di dettaglio delle immagini e la necessità di fornirle in risoluzioni elevate ai fini estetici e commerciali stessi, il threshold fissato è di 230 KB. La compressione avrebbe favorito la qualità riducendo la risoluzione massima o preservato la risoluzione diminuendo la qualità, in base al contesto (in home, dove la struttura fullscreen necessita di risoluzione, la seconda opzione, in gallery, dove si attiva una lightbox, la prima). La lavorazione delle immagini è avvenuta in Photoshop e Riot, strumento di batch processing per larghi quantitativi di immagini. La riduzione complessiva è stata pari al 71% in home (da 8 MB a 2) e dell’88% in gallery (da 34 MB a 4). Altri assets minori sono stati compressi con un guadagno aggiuntivo di 400 KB.

Un ulteriore fine-tuning delle performance è ottenibile studiando il critical resource path (CRP) delle risorse scaricate dal browser durante la visualizzazione del website. Determinati file tecnici (quelli Javascript) bloccano il rendering della pagina aumentando i tempi di caricamento e deteriorando le performance percepite ed effettive. Un content audit degli scripts tecnici ha rivelato come una serie di essi non fossero essenziali per il funzionamento del website, o venissero richiesti in sezioni dove il codice non venisse effettivamente eseguito. Rimuovendo gli scripts non utilizzati e abilitando il selective loading in pagine specifiche, è stato possibile ridurre il tempo di render-blocking e aumentare le performance associate.

Last words

Il lavoro svolto da Francesco e Luisa in Fikus è meticoloso, seguendo un’evoluzione che li ha portati a divenire, in poco, una riconosciuta perla di architettura e bellezza naturale. Il website doveva rispecchiare questa attenzione, favorendo la sua scoperta in tempi rapidi e fornendo la possibilità di ricevere conversioni in ambito mobile più efficacemente. Di Fikus ne hanno parlato Elle Decor, Domus, Marcopolo e Corriere Livingx

FollowIns.Lin.
...

This is a unique website which will require a more modern browser to work!

Please upgrade today!