Suggerimenti per semplificare la navigazione del tuo sito

Quello che succede sui progetti una volta avviato il percorso sbagliato è che di solito siamo riluttanti a tornare indietro anche se non ci sentiamo a nostro agio sulla direzione in cui ci stiamo dirigendo. Il problema attira più tempo o denaro che ha stato investito nel seguire la strada sbagliata.

È essenziale superare questa esitazione. Se una struttura di navigazione povera sta per introdurre problemi di usabilità (come nel caso del sito di esempio per questo articolo), dobbiamo correggere quella struttura sbagliata invece di continuare a sviluppare il sito.

Se non lo facciamo, sarà più difficile riparare il danno più tardi. Quando progettiamo o riprogettiamo la navigazione, dobbiamo ricordare che le esigenze dell'utente vengono prima di tutto.

Raramente sono necessarie strutture di navigazione complesse. Pensiamo che lo siano quando li creiamo per la prima volta. Quello che devi sempre fare è chiedersi se non c'è un modo più semplice per raggiungere lo stesso obiettivo.

Se c'è un modo più semplice, è necessario utilizzarlo, perché qualsiasi altra cosa, non importa quanto sembri impressionante, ti costerà di più di quanto non ti benefici a lungo termine. In questo articolo, utilizzeremo un esempio di sito web dal vivo per semplificare una struttura di navigazione complessa per migliorare l'usabilità.

Passo 1: esamina il design esistente

Il problema con cui stiamo iniziando è che il design di navigazione esistente ha una complessità eccessiva. Nel caso del sito di esempio che stiamo sviluppando per questo progetto, questa complessità sembrava necessario, ma solo perché un modo migliore non era immediatamente ovvio.

Innanzitutto aiuterà a capire perché la navigazione originale era complessa in primo luogo. Il sito soggetto è un sito tutorial e l'argomento delle esercitazioni è per un sistema piuttosto complicato.

Poiché il sito utilizza un emulatore live del sistema soggetto per lo studente su cui apprendere, significa che non possiamo (o non dovremmo) navigare da una pagina all'altra. Abbiamo bisogno di visualizzare il contenuto inserendolo in linea per evitare di ricaricare continuamente il sistema e di dover salvare lo stato del sistema.

Pertanto, i collegamenti di navigazione non sempre reindirizzano a pagine fisiche e la maggior parte reindirizzerà a pagine virtuali. La navigazione in questo caso può essere considerata suddivisa in lezioni, capitoli e argomenti.

La barra di navigazione in alto è già abbastanza semplice, anche se potrebbe avere un aspetto aggiornato. Quando l'utente arriva per la prima volta sul sito, vedrà il menu nella colonna di sinistra.

L'utente deve scegliere una lezione da questo menu prima di poter vedere i singoli capitoli e argomenti delle lezioni, come mostrato in Fig 2.

Ciò che rende questa struttura troppo complessa è che non ci dovrebbe essere la necessità di suddividere la navigazione in questo modo (l'utente non può selezionare elementi di navigazione di livello superiore senza un passaggio di navigazione aggiuntivo) e l'impaginazione numerica non è ideale per la selezione degli argomenti.

È facile, tuttavia, comprendere la logica alla base del motivo per cui la navigazione è stata originariamente progettata in questo modo. Il dispositivo emulato è stato creato per primo e aveva una determinata dimensione determinata dal codice SVG.

Cambiare le sue dimensioni con il codice prima che il supporto universale completo del browser per la funzione Zoom di CSS3 avrebbe significato cambiare tutto il codice JavaScript (su linee 10,000), che sarebbe stato uno spreco.

Quindi il design di navigazione originale è un tentativo di salvare lo spazio orizzontale in modo che sia la lezione sia il dispositivo emulato possano adattarsi allo schermo contemporaneamente.

Ora che conosciamo il difetto nella struttura di navigazione esistente, semplifica la pianificazione di un nuovo progetto di navigazione nel prossimo passaggio.

Passo 2: Pianifica un nuovo design

Poiché ora esiste un supporto più coerente (ma non eccellente) per lo Zoom CSS3 nei browser desktop più diffusi, il dispositivo emulato può essere ingrandito a una dimensione più piccola senza richiedere enormi quantità di ricodifica.

Se questo è fatto correttamente, sarà disponibile più spazio a sinistra, permettendoci di avere una colonna aggiuntiva nel mezzo.

Il cambiamento davvero ovvio è che il corpo della lezione è stato spostato completamente dall'area di navigazione, che è esattamente come dovrebbe essere.

Questo cambiamento consentirà una maggiore flessibilità nel sistema di navigazione e fornirà più spazio per la visualizzazione del corpo della lezione.

Passo 3: implementa il piano

Ricorda che ogni lezione può avere più capitoli e ogni capitolo può avere più argomenti. Come ci comportiamo con questo? Il modo più semplice è creare una pila pieghevole di voci di menu. L'espansione di una lezione rivela i suoi capitoli e l'espansione di un capitolo rivela i suoi argomenti.

In fig 4 puoi vedere l'elenco non compresso di lezioni mostrato nel menu di sinistra.

Notare anche l'aggiunta necessaria di un pulsante di navigazione nel corpo della lezione. Questo serve a rimuovere la necessità per l'utente di utilizzare sempre il menu di navigazione per passare all'argomento successivo o precedente nel capitolo.

Questo è ciò che l'utente vedrà se selezionano una lezione dal menu di sinistra:

Questi legami dall'aspetto un po 'criptici potrebbero non significare molto per voi, ma per qualcuno che si allena per essere un aviatore si spiega da sé. Espandendo l'elenco fino al terzo livello mostrerà le singole pagine degli argomenti, come mostrato in fig 6.

Man mano che l'elenco di collegamenti cresce, una barra di scorrimento verticale viene aggiunta alla pagina. Potremmo rendere la barra di scorrimento allegare al menu stesso impostando un'altezza fissa per il menu.

Materiale tecnico

Gli script esterni, i framework CSS e i caratteri utilizzati nell'esempio precedente includono:

  • Bootstrap v3.3.7
  • Font Awesome v4.7.0
  • Google Fonts: pompiere, concerto uno, varela round

Questi non sono affatto il - esclusivamente. modo per far funzionare qualcosa del genere, ma sono stati utilizzati in questo progetto come un modo per raggiungere rapidamente una soluzione sicura per il web senza la necessità di troppe codifiche o marcature aggiuntive.

Il costruttore per il prototipo di menu è straordinariamente semplice se si utilizza Bootstrap come framework CSS.

Al primo livello del rientro, si crea un div per l'area di navigazione (qui con l'ID di "leftSide") e un div di classe al suo interno per impostare le proprietà che lo spazio contenitivo dovrebbe avere. In questo caso stiamo semplicemente usando la classe "well" standard che è già predefinita in Bootstrap (fig 7).

All'interno di questo set, al terzo livello di indent, aggiungiamo un paio di paragrafi per nascondere e visualizzare il menu (fig 8). La proprietà di visualizzazione di ciascuno è importante, in quanto consentirà ai collegamenti di funzionare come un interruttore a levetta.

Come puoi vedere, facendo clic sui link si attivano le funzioni JavaScript per nascondere o mostrare la colonna. In questo caso "nascondere" significa semplicemente rimuovere il contenuto e ridurre la colonna a una dimensione più piccola, come mostrato in fig 9.

Ciò che fa la funzione hide è il restringimento della colonna di sinistra alla larghezza 40px (quanto basta per mostrare l'icona richiesta per l'espansione normale) e espande la larghezza della colonna centrale a 50% della finestra. Mostrando tutto torna come era in origine.

Ora abbiamo bisogno di creare un contenitore per contenere le voci del menu.

Quindi aggiungi l'elemento di navigazione, in questo caso il pannello "istruzioni".

Il collasso dell'elemento è gestito dai CSS e JavaScript di Bootstrap, quindi tutto ciò che dobbiamo fare è aggiungere funzioni per modificare il contenuto della colonna centrale quando viene cliccato un oggetto (l1s1 e l1s2).

Questi sono gestiti da uno script esterno, ma mostrato in fig 12 per motivi di completezza.

Torna al menu nel nostro file HTML. Un'interruzione di riga viene aggiunta come separatore semplice, quindi gli elementi rimanenti verranno aggiunti come una serie di elenchi annidati. Il costruttore iniziale è mostrato in fig 13.

Da questo momento in poi, aggiungere le voci rimanenti del menu è molto semplice. Per brevità, viene mostrata solo l'aggiunta del primo set di articoli, ma i set di articoli rimanenti vengono aggiunti esattamente nello stesso modo.

Tutti gli articoli devono essere aggiunti tra la coppia di tag lista, come mostrato.

La successiva voce di menu verrebbe aggiunta inserendo una nuova riga nella riga 75, quindi seguendo esattamente la stessa procedura per la voce T1-L2 e così via.

Una volta aggiunti tutti gli elementi (capitoli) da T1-L1 a T1-L6, aggiungeremo una nuova interruzione di riga e quindi avvieremo un nuovo elenco (come categoria T2), seguendo le stesse procedure fino al completamento del menu.

Il passaggio finale nella revisione del menu di navigazione consiste nell'aggiungere uno script per assicurarci che le voci del menu inizialmente non vengano visualizzate.

Se il tuo sito non sta ottenendo i risultati desiderati, una possibile ragione potrebbe essere che il tuo sistema di navigazione sia più complesso di quanto dovrebbe essere.

Ridurre la complessità del menu è un passo importante verso il miglioramento dell'usabilità del sito. Facilitando agli utenti la possibilità di orientarsi su sistemi complessi, sarai ricompensato da un maggior numero di visitatori di ritorno e probabilmente da ulteriori referral.

Bogdan Rancea

Bogdan è membro fondatore di Inspired Mag, avendo accumulato quasi 6 anni di esperienza in questo periodo. Nel tempo libero ama studiare musica classica ed esplorare le arti visive. È piuttosto ossessionato dai fissaggi. Possiede già 5.