Ma qualcosa sta cambiando ed in una modalità nuova!
Finora, nella stragrande maggioranza dei casi, il design responsive si è focalizzato verso il supporto di una corretta visualizzazione da smartphone e tablet, rivolgendo poca attenzione alle opportunità che possono presentarsi incentrando l’attenzione sui moderni desktop large-scale.
Prima di approfondire questo argomento bisogna tenere in considerazione alcune cose sullo stato attuale degli eCommerce:
- Solo una piccola percentuale dei siti più famosi sono ottimizzati per i desktop wide screen (circa il 18%)
- Circa tre quarti degli acquisti vengono conclusi da PC
- Circa un terzo dei visitatori hanno schermi con dimensioni superiori ai 1350px
Sulla base di questi dati sembra che valga veramente la pena realizzare una versione ottimizzata per i desktop large-scale, ed in effetti questo scenario potrebbe diventare la nuova frontiera dell’usabilità degli eCommerce. Vediamo come potremmo sfruttare i “nuovi spazi” per un layout pensato per ottimizzare l’esperienza dei visitatori con schermi grandi, basandoci sul principio “stesso contenuto – diverso contenitore“.
- Registrazione: il box per la registrazione può essere reso in modo meno intrusivo, visualizzandolo accanto ad altri contenuti, in uno spazio “libero” del monitor.
- Scorciatoie da Header e Footer: tutti quei link secondari, che generalmente si trovano in header e footer (Ordini, Area Riservata, Supporto e FAQ) potrebbero essere raggruppati in un unico box a margine affinché siano sempre a portata di mano ma senza dargli troppa rilevanza.
- Carosello: in uno schermo largo ogni carosello immagini potrebbe semplicemente ingrandirsi e adattarsi allo spazio a disposizione, ma questo potrebbe avere dei comportamenti inaspettati. La soluzione migliore è utilizzare una layout a colonne, con 3 o 4 immagini per visualizzazione, in grado di attarsi alla risoluzione in modo ottimale.
- Carrello: se il carrello contiene dei prodotti è meglio utilizzare un box a margine della pagina per mostrarne il contenuto, rimpiazzando il classico carrello drop-down. Dare al cliente la possibilità di consultare il carrello rapidamente migliora l’usabilità ed aumenta le conversioni.
- Elenco prodotti: uno dei modi più ovvi di sfruttare lo spazio di un desktop large-scale è quello di aumentare il numero di prodotti per riga. L’importante è mantenere sempre un buon rapporto numero di informazioni / leggibilità.
- Elenco prodotti (bis): un secondo modo per migliorare la visualizzazione dei prodotti è quello di scalare ogni voce dell’elenco, aumentando la percezione dei dettagli al colpo d’occhio. Anche in questo caso è necessario prestare attenzione, i box dei prodotti non devono diventare troppo intrusivi “annegando” i contenuti a margine.
- Elenco prodotti (tris!): il non plus ultra è ovviamente la combinazione delle due precedenti, aumentare un po’ il numero di prodotti e scalarne un po’ le dimensioni; in questo modo la lista di prodotti non diventa dispersiva ed aumentano le informazioni visive su ogni prodotto.
- Filtri sticky: per sfruttare al meglio lo spazio guadagnato con uno schermo largo, si potrebbero riunire i filtri applicati alla ricerca e/o all’ordinamento dei prodotti in un box sticky (sempre visibile allo scroll della pagina).
- Elementi visualizzati di recente: man mano che il cliente naviga il sito, la traccia dei prodotti visualizzati potrebbe essere raggruppata in un box a margine per migliorare la navigabilità del sito.
- Sintesi di prodotto sticky: le schede dei singoli prodotti possono essere piene di contenuti, informazioni e recensioni risultando alle volte dispersive. In un desktop grande potremmo sfruttare un po’ di spazio per creare un box sticky contenente le informazioni salienti del prodotto.
- Checkout – riepilogo ordine sticky: durante il checkout il modo migliore per “occupare” l’enorme quantità di spazio bianco a disposizione è quella di inserire un box con il riepilogo dell’ordine e tutte le informazioni riguardanti l’assistenza al cliente. In questa fase, dare al cliente informazioni rassicuranti tipo “questo è quello che stai per pagare” o “per qualsiasi dubbio contattaci pure”, riduce drasticamente la percentuale di carrelli abbandonati.
Queste sono solo alcune idee per ottimizzare un eCommerce per i desktop large-scale e molte altre potrebbero venir fuori ragionando in quest’ottica per ogni specifica tipologia di negozio onLine. Al lavoro!
fonte: https://www.smashingmagazine.com/2015/08/responsive-upscaling-large-screen-e-commerce-design/
