eCommerce e Responsive Upscaling

Ad oggi il responsive design ha preso piede come buona pratica per lo sviluppo della maggior parte dei siti web, purtroppo nei siti di eCommerce non è ancora stato accolto in modo così completo.

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“.
  1. Registrazione: il box per la registrazione può essere reso in modo meno intrusivo, visualizzandolo accanto ad altri contenuti, in uno spazio “libero” del monitor.03-sigup-overlay-opt
  2. 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.04-header-footer-links-opt
  3. 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.05-carousel-slider-opt
  4. 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.06-filled-cart-opt
  5. 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à.07-product-columns-opt
  6. 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.08-larger-product-images-opt
  7. 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.09-scaling-rearranging-opt
  8. 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).10-sticky-filters-opt
  9. 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.11-recently-viewed-items-opt
  10. 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.12-sticky-product-page-opt
  11. 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.13-sticky-order-opt
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/

Condividi su...

NESSUN COMMENTO

POSTA UN COMMENTO


Sei curioso di conoscerci? Contattaci subito e vieni a scoprire i nostri servizi!

Per offrirti il miglior servizio possibile in questo sito utilizziamo i cookies, anche di terze parti a solo scopo statistico. Continuando la navigazione ne autorizzi l'uso. Ulteriori informazioni.