Interfaccia del Navigator¶
Il Navigator è ciò che l'utente finale vede quando interagisce con uno scenario. L'interfaccia è progettata per essere pulita e focalizzata sul contenuto, senza distrazioni.
Area intestazione¶
Nella parte superiore della schermata si trova l'intestazione con le informazioni di contesto.
A sinistra appare il titolo dello scenario, quello definito nei metadati del file JSON. Serve a identificare in quale percorso ci si trova, utile quando un'organizzazione ha più scenari da gestire.
A destra, se configurato, appare il branding aziendale: logo, nome dell'azienda, eventualmente un link al sito.
Indicatore di progresso¶
In basso a sinistra c'è l'indicatore di progresso, una riga che mostra "Passo X" dove X è il numero di schermate attraversate dall'inizio. Questo dà all'utente un senso di avanzamento nel percorso.
L'etichetta "Passo" è personalizzabile nelle traduzioni dello scenario. Per un quiz potrebbe essere "Domanda", per un workflow potrebbe essere "Fase".
Mappa¶
In basso a destra c'è il pulsnate per attivare la visualizzazioen della mappa, trattata in modo approfondito più avanti in questo capitolo.
Area contenuto¶
La sezione centrale è dedicata al contenuto del nodo corrente. Il testo viene renderizzato come Markdown, quindi supporta titoli, grassetto, corsivo, elenchi puntati e citazioni.
Il contenuto può iniziare con un titolo grande (H1) che fa da intestazione della schermata, seguito da paragrafi di testo, elenchi, citazioni evidenziate. La formattazione aiuta a strutturare informazioni complesse in modo leggibile.
Sotto il contenuto testuale possono apparire risorse aggiuntive: link a documenti, file da scaricare, video da guardare. Ogni risorsa ha un'icona che ne indica il tipo e un pulsante per accedervi.
Pulsanti di scelta¶
Nella parte inferiore dell'area contenuto appaiono i pulsanti di scelta. Ogni pulsante rappresenta un'opzione che l'utente può selezionare, con un testo descrittivo che anticipa dove porterà quella scelta.
I pulsanti cambiano colore in base allo stato. Il colore primario indica scelte non ancora esplorate. Un colore diverso indica scelte già fatte in precedenza, utile quando l'utente torna indietro per esplorare percorsi alternativi. Un terzo colore può indicare scelte esplorate ma non nel percorso corrente.
Quando un nodo non ha scelte, significa che è un punto finale del percorso. Al posto dei pulsanti di scelta appare un messaggio come "Fine del percorso" (anche questo testo è modificabile nell'editor degli scenari) e un pulsante per ricominciare.
Navigazione¶
Quando si è iniziato a percorrere uno scenario in alto compare il tasto "Indietro", permette di tornare alla scheda precedente, ripercorrendo il percorso fatto. È utile per rileggere informazioni o riconsiderare una scelta.
Il pulsante "Ricomincia" riporta all'inizio dello scenario, azzerando il percorso. Utile per esplorare da capo con scelte diverse.
Il pulsante "Vedi mappa" apre la visualizzazione ad albero del percorso, si può utilizzare anche per spostarsi nella struttura, vedi il paragrafo successivo.
Mappa del percorso¶
La mappa mostra l'intero scenario come un albero di nodi collegati. È una visualizzazione che permette di vedere dove ci si trova rispetto alla struttura complessiva.
Ogni nodo è rappresentato da un rettangolo con il titolo abbreviato. I nodi sono colorati in modo diverso in base al loro stato.
Il nodo corrente, quello in cui l'utente si trova, è evidenziato con il colore primario. I nodi già visitati nel percorso corrente hanno un colore che indica "già visto". I nodi non ancora raggiunti sono grigi o con bordo tratteggiato.
Le linee che collegano i nodi rappresentano le scelte. Anche le linee cambiano colore: quelle percorse sono continue ed evidenziate, quelle non ancora esplorate sono tratteggiate. Le frecce poste sulle linee indicano da quale nodo a quale nodo si muove l'utente, i collegamentio infatti sono sempre monodirezionali.
Cliccando su un nodo nella mappa si salta direttamente a quella scheda, se già visitata.
La mappa si chiude con il pulsante di chiusura in alto a destra.
Responsività¶
L'interfaccia si adatta automaticamente alle dimensioni dello schermo. Su dispositivi mobili i pulsanti diventano più grandi per facilitare il tocco, la mappa si ridimensiona per restare leggibile, il testo mantiene proporzioni adeguate alla lettura.
La navigazione rimane funzionale anche su schermi piccoli: tutti i controlli restano accessibili e il contenuto scorre verticalmente quando necessario.