5 ottimi siti da cui rubare idee per la navigazione del sito

È facile per i progettisti trascurare i menu di navigazione.

Ci sono un paio di layout standard che raggiungeremo ogni volta, dicendoci "questo è ciò che gli utenti si aspettano". Ed è vero che attenersi a ciò che funziona ha più senso che puntare alla novità fine a se stessa, e che dobbiamo progettare tenendo conto delle aspettative degli utenti.

Ma quando i menu di navigazione dell’intestazione sono il modo principale in cui gli utenti navigano in un sito Web, non dovremmo guardare di nuovo e vedere se possiamo migliorare il nostro? Dopotutto, gli utenti non vedranno nessuno dei nostri altri gadget di design se non riescono nemmeno a uscire dalla home page.

Non sto sostenendo semplicemente il furto di uno di questi. Ma sto suggerendo di prendere una lezione da loro e costruire sulle loro idee, per creare menu di intestazione che siano effettivamente migliori della norma.

Con questo in mente, ecco sette dei migliori menu di intestazione innovativi che vedrai oggi sul web.

1: Reiss

Reiss è un’azienda di abbigliamento con sede nel Regno Unito. Il loro menu a discesa multi-opzione è familiare se hai mai acquistato vestiti online.

Ma a differenza della stragrande maggioranza delle attività di e-commerce, Reiss utilizza le immagini direttamente nel menu a discesa.

Invece di dover leggere una descrizione testuale, fare clic solo sulla base di quella e solo allora confrontarsi con un’immagine del prodotto che stai prendendo in considerazione, un visitatore di Reiss può semplicemente vedere immediatamente gli articoli.

Sappiamo che gli utenti sono fortemente influenzati dalle immagini dell’e-commerce. Sono un importante fattore di vendita. Quindi non ha senso introdurli il più presto possibile nel percorso del cliente?

Deludente, però, non portano quell’approccio innovativo al loro sito mobile, dove il menu è un menu di testo standard da un hamburger nell’angolo in alto a sinistra.

Forse è perché Reiss non vende molto sui dispositivi mobili, ma sappiamo che i viaggi degli acquirenti di e-commerce spesso iniziano sui dispositivi mobili, quindi se stai pensando di prendere in prestito questa idea di menu, prova a trovare un modo per implementarla altrettanto bene sul piccolo schermo.

2: sogno

La navigazione di Ruya si addice a un’agenzia orgogliosa del design. L’immagine dell’intestazione della home page è una mappa del viaggio attraverso il sito Web come un grande grafico; invece di leggere il testo, gli utenti possono selezionare un luogo sulla mappa da visitare.

Questo è un bel tocco perché replica il gioco: molti utenti avranno familiarità con i videogiochi che presentano mappe interattive come questa.

Per gli utenti cauti che non vogliono provare il nuovo menu animato interattivo, c’è un tradizionale menu hamburger in alto.

Questo layout di menu ha alcuni grandi vantaggi. È intuitivo, non perché sia ​​generico ma perché l’idea è familiare e ha un senso. È impressionante: dopo averlo visto, non dimenticherai il nome dell’agenzia. Il loro menu interattivo è una forma di content marketing? direi di si.

Ma presenta anche alcuni problemi. Rallenta la pagina. L’effetto è inferiore a quello che ti aspetteresti, ma se il tuo computer o la tua connessione Internet non sono almeno abbastanza veloci, non ne trarrai molto oltre alla frustrazione. E implementarlo significa che deve essere scritto un codice personalizzato significativo per la home page: è un sacco di lavoro da mettere in un’idea di design che non sai ripagherà.

Sul cellulare, purtroppo, il menu elegante e originale di Ruya è ridotto a un’immagine di sfondo statica.

È ancora visibile e sembra ancora buono. Ma non funziona come un menu. Considerata come un’immagine di intestazione, sembra piuttosto occupata, disordinata e – beh, inferiore in molti modi ad altre scelte.

Se i tuoi clienti di solito vengono con la banda larga superveloce e puoi risparmiare le ore di sviluppo e lo sforzo di progettazione per creare qualcosa di simile, tuttavia, potrebbe essere la cosa giusta per metterti davanti alla concorrenza. Ma ancora una volta, considerando che il cellulare è in realtà il primo schermo ora, non dovresti assicurarti che la tua creatività venga effettivamente vista dalla maggior parte dei tuoi visitatori?

3: Mashable

I menu Giganto sono popolari tra i siti incentrati sui contenuti. Il motivo è ovvio: siti come questo hanno semplicemente più pagine. (Mashable.com ha 256.000 pagine. Davvero!) E gli utenti vogliono naturalmente le cose più recenti, classificate. In un’epoca in cui sia il giornale che la rivista hanno avuto le loro funzioni usurpate da feed di notizie curati algoritmicamente ricchi di immagini, pubblicità e video, un sito di una rivista ha davvero bisogno di più di un indice arido.

Questa mossa è più lungimirante di quanto possa sembrare. Quando le riviste tecnologiche come Wired si sono trasferite per la prima volta online, hanno mantenuto un programma di pubblicazione delle riviste, rifacendo il sito ogni settimana come un nuovo numero. Quando si sono resi conto che gli utenti visitavano solo quando avevano nuovi contenuti, sono passati alla pubblicazione continua.

Il numero allora era un palinsesto editoriale costruito per la rivista cartacea. Sul Web puoi pubblicare in incrementi e ora lo fanno tutti. Ma per i siti di riviste, i menu di intestazione non devono imitare le pagine dei contenuti delle riviste reali. Non vincolati da inchiostro e carta, i menu di intestazione possono essere dinamici, colorati, intriganti e informativi: una risorsa a sé stante e che ti aiutano comunque a trovare ciò che desideri.

Purtroppo, proprio come tanti altri in questo elenco, il menu mobile di Mashable è molto meno interessante. Il menu meba che riempie lo schermo del sito desktop diventa una pila di tessere sul cellulare:

4: Monopo

Monopo fa un passo avanti rispetto alla maggior parte dei marchi nel mettere il proprio menu al centro della scena. Inizialmente la loro home page ha un menu di intestazione standard. Fai clic su un elemento, tuttavia, e verrai indirizzato a un menu che riempie lo schermo. Ci sono immagini per le voci di menu, con animazioni che attirano l’attenzione e attirano lo spettatore. Seleziona una sottocategoria e il menu illustrato diventa scorrevole, permettendoti di spostarti verso il basso nella pagina e vedere di più senza dover fare clic. È un menu come esperienza, come caratteristica, non un ripensamento riluttante.

Sul cellulare, il menu sembra molto più ordinario. C’è un classico hamburger in alto a destra, una casella di riepilogo davanti e al centro, quindi l’utente scorre verso il basso lo schermo oltre le immagini cliccabili.

È un layout che in realtà è più familiare dai blog rispetto alla parte principale di un sito Web, ma non è ancora nuovo e intrigante come il menu del desktop. Quello che ha è che è molto visivo, intuitivo da usare, e anche nella sua versione mobile le immagini accuratamente selezionate trasmettono un senso dell’approccio dell’agenzia.

Ciò che non offre, tuttavia, è un’esperienza di menu mobile innovativa. Le immagini sono fantastiche, ma sono ancora solo una pila di tessere.

5: Televisione di carta

Abbiamo esaminato i siti che posizionano i loro menu proprio dove gli utenti non possono perderli, concentrandosi sulla creazione di un’esperienza utente che consenta ai visitatori di assumere il controllo di come navigano nel sito fin dall’inizio.

Ma Paper Television è uno di un numero crescente di siti che adottano l’approccio opposto e optano per un menu nascosto a livello globale. Il menu di Paper Television è un hamburger all’angolo superiore. Ciò non impedisce agli utenti di orientarsi?

In teoria è buon design avere un menù imperdibile e in una location standard e riconoscibile. Ma per molti utenti mobili, un hamburger è standard e riconoscibile. Considera il fatto che il traffico di Paper Television va principalmente alla sua homepage:

E considera il fatto che le pagine di destinazione si convertono molto meglio quando le voci di menu vengono rimosse, a volte anche del 100%. Se la loro home page è essenzialmente una pagina di destinazione, Paper Television non dovrebbe rimuovere il più possibile la navigazione visibile mantenendo la possibilità di navigare nel sito per coloro che lo desiderano davvero?

Inoltre, la loro home page è quasi identica sui dispositivi mobili, solo con dimensioni leggermente diverse.

Un’esperienza davvero mobile-first dovrebbe andare oltre la semplice progettazione per la visualizzazione mobile e considerare la progettazione per le aspettative e le abitudini degli utenti mobili.

Un menu sempre nascosto, una conseguenza dello spazio ridotto su uno schermo mobile, ha perfettamente senso in questo contesto, quindi potremmo vederne di più lungo la linea!

Conclusione

C’è una gamma di diversi stili di menu in mostra qui, dai menu che occupano il sito e riempiono lo schermo ai menu che si nascondono. La cosa più importante di tutti questi menu è che iniziano cercando di dare all’utente qualcosa di nuovo e diverso: stanno cercando di prendere alcuni degli immobili più preziosi su un sito Web e trasformarli in qualcosa di più di una semplice fila di da cinque a sette opzioni selezionabili.

Dove molti di loro falliscono è sui dispositivi mobili, dove le creazioni interessanti ed eleganti che i loro designer hanno messo sui loro siti desktop tendono a lasciare il posto alle stesse vecchie, stesse vecchie carte a scorrimento. Cosa possiamo fare al riguardo? Faccelo sapere nei commenti qui sotto e rendi fantastici i tuoi menu!