Come progettare in modo efficace l'header di un e-commerce

Intro

vediamo in questo articolo le linee generali su come progettare in modo efficace l’header di un e-commerce.
L’header è la parte più alta e fissa di un e-commerce, e in genere contiene almeno il logo, le voci del menu, il mini cart e l’area login.
L’header di un e-commerce è una delle parti più importanti della piattaforma, perché riguarda non solo la user experience ma anche l’intera navigabilità del sito.
Vediamo nel dettaglio gli elementi necessari dell’ header di un e-commerce.

Struttura

Il layout dell’e-commerce deve necessariamente avere la seguente struttura che verrà esposta di seguito. Il motivo è che dovendo inserire gli elementi che vedremo tra poco, l’unico modo per evitare disordine, è quello di utilizzare la seguente struttura per l’appunto.

Topbar

La topbar è la barra più in alto (la barra bianca nell’immagine). Può contenere gli elementi extra come link social, promozioni in corso e switch language.

Barra di ricerca

La barra di ricerca va posizionata al centro e deve essere grande tanto da permettere non solo un facile utilizzo, ma anche eventuali advanced search e autocomplete.

Login, wishlist e minicart

A destra della barra di ricerca si posizionano gli ultimi elementi principali di un sito e-commerce, quindi link ad area di login che si trasforma in My account/Logout dopo l’accesso, wishlist e minicart del sito.

Voci del menu

Un errore tipico che si fa in fase di progettazione/mockup di un e-commerce riguarda proprio le voci del menu. Spesso infatti si confondono le voci del menu con le categorie.
Un normale sito infatti, ha solo le voci del menu, come ad esempio “Chi siamo”, “Servizi” e “Contatti”. Un e-commerce invece, nelle voci a menu deve avere le categorie dei propri prodotti, ma mentre un sito ha in genere circa 6 pagine principali, un e-commerce ha decine e decine di categorie. Ovviamente non è possibile inserire nel menu di un sito, 30 voci/categorie oltre le eventuali voci tipiche del sito. Inoltre le categorie spesso hanno altre decine di sottocategorie, che renderebbero i sottomenu inutilizzabili.
Pertanto ciò che occorre fare, è inserire le voci visibili come in figura per le pagine e le categorie in evidenza, e prevedere un burger menu laterale per la navigazione delle categorie.

Versione mobile

Nonostante è comune opinione tra i non professionisti che non sia così, lo sviluppo del mobile viene di conseguenza al layout desktop in base ai canoni di responsività. Pertanto a mobile avremo sempre visibili nell’header le icone di login, ricerca, wishlist e minicart. E ovviamente dovrà essere presente anche un burger menu con al suo interno quanto meno le categorie in visualizzazione dropdown o drilldown.

Come svilupparlo

Ovviamente nessuna piattaforma come Magento, Shopify e WooCommerce, di base mettono a disposizione un header con queste caratteristiche. Anche i temi di questi CMS non consentono un header così ottimizzato. Pertanto l’unico modo per avere un header efficace e completo, come in figura, è quello di sviluppare lato codice, tutte le customizzazioni necessarie.

Note

Abbiamo visto come progettare in modo efficace l’header di un e-commerce. Il caso di scuola qui esposto è stato ottenuto su piattaforma Magento 2, customizzando completamente l’header dell’e-commerce.
Per ogni domanda non esitate a chiederci una consulenza gratuita tramite la pagina contatti.