È un dato di fatto che le persone non useranno mai con piacere una applicazione se non trovano il modo di cavarsela da soli.

Non vorrei sembrare troppo fatalista eppure sono abbastanza sicuro che quando navighi in un sito web o usi una qualsiasi applicazione ci sono due cose a cui tieni particolarmente.

La prima è trovare subito quello che ti serve (soprattutto se sai già cosa cercare) mentre la seconda è capire come muoversi e dove andare.

Tutto ciò è normale perché fa parte del naturale bisogno di controllo di cui tutti abbiamo bisogno per sentirci al sicuro.

Se queste due aspettative vengono tradite o non soddisfatte appieno, è probabile che la tua esperienza sarà frustrante per non dire problematica.

Rendere una applicazione web o un sito accessibile (leggasi facile da usare) è qualcosa che ne decreta indiscutibilmente il successo o la rovina.

Per fortuna Oracle APEX mette a disposizione di noi sviluppatori diversi strumenti che ci aiutano a non tradire le speranze più o meno consapevoli degli utenti.

In questo articolo desidero spiegarti alcune strategie utili per creare applicazioni in Oracle APEX facili da navigare e quindi facili da usare.

Buona lettura!

Menu (di Navigazione) per Tutti i Gusti

Immagina questa scena: è sabato pomeriggio ed entri in un centro commerciale per acquistare qualcosa, ad esempio un frullatore.

Hai due possibilità: puoi bloccare un commesso e chiedere dove si trova il reparto elettrodomestici (in particolare qual è la corsia dei frullatori) oppure puoi farti un giro e cercare da solo quello che ti serve.

Cosa fai?

È molto probabile che la risposta dipenda dalla fretta che hai e dalla tua pazienza in quel momento.

Diciamo che hai il pomeriggio libero e quindi decidi di dare una occhiata in giro con calma.

Quindi, ti metti a passeggiare tra i vari reparti.

Pensaci, se il centro commerciale fosse una applicazione web, questa attività di perlustrazione altro non sarebbe che l’esplorazione del menu di navigazione.

In una applicazione web il menu di navigazione è quella sezione in cui trovi i link alle pagine e funzionalità principali.

Tutti i siti ne hanno almeno uno ed è qualcosa di indispensabile, per diversi motivi.

Serve per trovare quello di cui abbiamo bisogno e, allo stesso tempo, ci permette di intuire (senza dover necessariamente aprire ogni singola pagina) quali sono i contenuti e le funzionalità che l’applicazione mette a tua disposizione.

Nelle app realizzate con Oracle APEX ci sono due tipi di menu che possono essere configurati:

• Navigation Menu: è il menu principale dell’applicazione, quello che verrà usato per spostarsi tra le varie aree dell’applicazione.

• Navigation Bar: è un menù secondario che serve per gestire quelle che si chiamano utilities, ovvero funzionalità che servono per aiutare l’utente ad usare l’applicazione (come ad esempio il link Help o il bottone Sign Out)

Vediamo dove e come si configurano questi menu.

Dove trovare i Menu di Navigazione

Quando crei una nuova applicazione, Oracle APEX genera automaticamente due menù: quello per la navigazione (navigation menu) e quello per la barra di navigazione (navigation bar).

Puoi modificare e gestire questi menù nel modo seguente

• Accedi all’App Builder e vai in Shared Components
• Vai alla sezione Navigation and Search e clicca su Navigation Menu

• Clicca su Application Navigation per aprire la configurazione del menu

Quella che si apre è la pagina di configurazione nel menu di navigazione che altro non è che una Lista APEX che può essere configurata e personalizzata come tutte le altre liste.

Vediamo anche come accedere rapidamente al menù della barra di navigazione.

• Dall’APP Builder vai sempre in Shared Components > Navigation and Search e clicca su Navigation Bar List

• Clicca su Navigation Bar

Anche in questo caso ci troviamo davanti una Lista APEX che possiamo modificare come meglio crediamo.

Come configurare il Menu e la Barra di Navigazione

Quando parlo di modificare il menu o la barra di navigazione intendo dire che vogliamo aggiungere oppure rimuovere delle voci di menu o dei link.

Fare questo tipo di operazioni è abbastanza facile, facciamo un esempio.

Supponiamo di aver creato una nuova pagina chiamata Test Page che deve essere agganciata al menù di navigazione principale.

• Accedi alla pagina di configurazione nel menu di navigazione come ti ho spiegato nel paragrafo precedente
• Clicca Create Entry.

• Configura le opzioni principali ovvero
  • Parent List Entry: voce di menù all’interno della quale l’entry corrente è contenuta (questa opzione ha senso se vuoi creare dei menu su più livelli)
  • Sequence: indica l’ordinamento
  • List Entry Label: etichetta della voce di menu

• Nella sezione Target andrai ad indicare la pagina di destinazione ed eventuali parametri da passare.

• Clicca Create List Entry per completare la configurazione di base

Ecco il risultato finale

Possiamo aggiungere al menu di navigazione tutte le pagine che desideriamo e, qualora serva, abbiamo la possibilità di creare dei menu annidati (o multi-livello).

Supponiamo, ad esempio, di voler aggiungere una nuova voce di menù, chiamata Sub Test Page 1, al di sotto di Test Page.

Creiamo una nuova List Entry, come abbiamo fatto poco fa, con l’accortezza di indicare nella proprietà Parent List Entry qual è la voce di menu all’interno della quale deve essere inclusa.

Ecco il risultato finale

Come modificare l’aspetto del Menu e della Barra di Navigazione

Quello che ti ho mostrato fino a questo momento serve per configurare quante e quali sono le pagine che devono essere raggiungibili dal menu.

Un’altra cosa che puoi fare in APEX è decidere quale deve essere l’aspetto del menù di navigazione.

Esistono diverse opzioni disponibili che puoi usare a seconda di come sarà usata la tua applicazione (ad esempio se vuoi creare una app ottimizzata per l’uso da mobile). Vediamo insieme alcune.

• Dall’APP Builder vai in Shared Components > User Interface e clicca User Interface Attributes

• Nella sezione Navigation Menu puoi configurare diversi parametri:
  • Display Navigation: abilita/disabilita il menu di navigazione principale
  • Navigation Menu List: ti permette di scegliere quale List APEX deve essere utilizzata da Oracle APEX per popolare il menu di navigazione.
  • Position: puoi decidere di avere un menù Verticale (Side) oppure un menù a Orizzontale (Top)
  • List Template: indica quale template grafico deve usato per visualizzarlo.

Questa qui sotto è la classica configurazione del menù verticale laterale.

Il template Side Navigation Menu è quello predefinito di APEX per questo tipo di visualizzazione.

Una opzione interessante di questo template è quella che ti permette di mostrare le icone quando il menù è collassato (Collapse Mode = Icon)

Ecco il risultato

Se, invece, preferisci un menù orizzontale una configurazione tipo è la seguente

• Position: Top
• List Template: Top Navigation Tabs
• Template Options
  • Desktop: Display labels above
  • Mobile: Do not display labels

Sugli schermi più grandi il menù verrà visualizzato in questo modo

Sugli schermi più piccoli, invece, sarà ottimizzato per la visualizzazione da mobile attraverso un menù ancorato al footer della pagina (leggi APP Mobile in Oracle APEX: 5 suggerimenti da tenere a mente).

Anche la barra di navigazione può essere configurata in modo del tutto simile.

• Sempre da Shared Components > User Interface clicca User Interface Attributes
• Vai alla sezione Navigation Bar per scegliere la List APEX e l’aspetto nella barra di navigazione

Questa qui sotto è la classica configurazione predefinita che dovresti trovare

Questi sono sono alcuni esempi di opzioni di visualizzazione. Ti invito a provarne altri per trovare quello che meglio si adatta alle tue esigenze.

Come usare le Liste APEX nella pagine

Le Liste APEX possono essere utilizzate all’interno di pagine per creare ulteriori menu di navigazione.

Questo meccanismo è utile soprattutto nelle applicazioni molto complesse, quelle che hanno tante pagine, per le quali gestire tutto usando esclusivamente il menu di navigazione potrebbe non essere la scelta più adatta.

Un esempio potrebbe essere una pagina Reports all’interno della quale andiamo a raggruppare i link ai vari reports (che altro non sono che ulteriori pagine APEX) in due o più liste separate.

Organizzare questi stessi contenuti tramite in menu di navigazione è ovviamente fattibile.

Tuttavia, per l’utilizzatore finale avere una pagina organizzata in questo modo è sicuramente una soluzione più bella e funzionale.

Proviamo a creare una semplice Lista APEX ed includiamola in una Pagina.

La prima cosa da fare, come puoi immaginare, consiste nel creare una Lista APEX.

• Vai in Share Components > Navigation and Search e clicca su Lists

• Clicca Create e configura la Lista APEX

Una volta configurata la lista possiamo usarla all’interno delle pagine

• Dall’APP Builder clicca sulla Pagina all’interno della quale desideri visualizzare la Lista
• Crea una nuova Page Region di tipo List

• Clicca sulla Page Region per configurarne le proprietà
  • Type: List
  • List: seleziona la List APEX che vuoi visualizzare

• Clicca su Attributes per configurare l’aspetto della Lista. Ad esempio puoi usare il template Link List (ma ce ne sono molti altri).

Salva il tutto e se serve aggiungi altre Liste usando lo stesso metodo. In questo modo potrai organizzare come meglio credi i contenuti che devo essere accessibili dalla pagina.

Chi Cerca Trova

I menu e le liste aiutano ad organizzare i contenuti di una applicazione e sono il modo migliore di navigare per l’utente, quando sa già come muoversi o dove andare per trovare quello di cui ha bisogno.

Purtroppo però, sono meno utili quando l’utente non conosce ancora com’è organizzata l’applicazione oppure quando, benché abbia chiaro in testa ciò di cui ha bisogno, non sa esattamente dove trovarlo.

Se ti ricordi, ci siamo lasciati che stavamo esplorando le corsie del centro commerciale alla ricerca di un frullatore.

Dove cercarlo?

Probabilmente nel reparto elettrodomestici ma come arrivarci velocemente senza il rischio di sbagliare strada?

Chiedere ad un commesso è il modo più veloce per scoprire dove andare.

Ripensando alla nostra applicazione, questo significa costruire una qualche funzionalità di ricerca che ci permetta di trovare velocemente quello di cui abbiamo bisogno.

Una volta trovata la pagina devo poter cliccare su un link per accedere direttamente alla funzionalità che mi interessa, senza dover passare dal menu di navigazione.

Insomma, qualcosa di simile a questo:

Fortunatamente ci viene in aiuto la funzionalità Search introdotta da poco in Oracle APEX e che ho spiegato nell’articolo su come costruire una pagina di ricerca globale in Oracle APEX.

In particolare, ti mostrerò come possiamo sfruttare il componente Search per costruire una ricerca di pagine usando le liste.

Prima di tutto devi creare una o più Liste APEX per organizzare i vari contenuti come meglio preferisci: quali e quante liste creare dipende da come vuoi presentare agli utenti i contenuti.

Ad esempio, potresti creare una lista per i Reports mentre un’altra potrebbe contenere i link alle pagine che servono per gestire i Clienti e così via..

Ora devi configurare per ciascuna Lista APEX ben due Ricerche APEX.

• Vai in Shared Components > Navigation and Search e clicca Search Configurations

• Clicca Create per configurare una nuova Ricerca APEX
• Assegna un nome alla Ricerca, ad esempio Search Reports

• Collega la Ricerca APEX alla Lista APEX che hai creato prima ed eventualmente collega gli attributi della lista

• Crea una nuova Lista APEX come copia della precedente (il motivo ti sarà chiaro tra pochissimo) con un nome diverso. Ad esempio io l’ho chiamata ALL Reports

Ripeti la stessa operazione per tutte le liste che vuoi includere nella pagina di ricerca.

Quando sei pronto crea una nuova Search Page.

• Accedi all’APP Builder e clicca Create Page
• Seleziona Search Page e premi Next
• Collega alla Search Page le Ricerche. In particolare io ho configurato le seguenti coppie di Ricerche
  • Search Reports, ALL Reports
  • Search Manage Customers, ALL Manage Customers

• Clicca Create Page per completare le configurazione della pagina.
• Seleziona le Ricerche che hai chiamato con il prefisso ALL

• Per ciascuna di esse, attiva l’opzione Use ad Initial Result

Il risultato che otterrai sarà una pagina che inizialmente mostra tutte le pagine incluse nelle Liste APEX.

Scrivendo nella form di ricerca una parola chiave la pagina mostrerà solamente i link delle pagine di interesse.

Se lo desideri puoi configurare più Search Regions per organizzare i risultati in più blocchi che aiuteranno l’utente a capire meglio di cosa si tratta.

Ecco il risultato finale

Segui le Briciole di Pane

In inglese, la parola breadcrumb significa briciola di pane ed in informatica fa riferimento a dei link che consentono agli utenti di tenere traccia della posizione in cui si trovano su un sito e di quanto sono distanti dalla home page.

Questo termine così peculiare è stato scelto in riferimento alle fiabe di Pollicino di Charles Perrault e di Hänsel e Gretel dei fratelli Grimm (che, secondo gli esperti, ha numerosi punti di contatto con la prima, più vecchia): in entrambe le storie, le briciole di pane sono state utili ai protagonisti per ritrovare la strada di casa e non perdersi nel bosco.

Come per la scia di briciole di pane lasciata dai nostri eroi, i breadcrumb aiutano i visitatori a non perdersi tra le pagine dell’applicazione che stanno usando, fornendo indicazioni costanti sulla loro posizione corrente.

In pratica, permette di visualizzare in ogni momento le pagine e i link sui quali l’utente ha cliccato per arrivare alla pagina corrente e rende facile tornare ad una delle pagine precedenti, se necessario.

Dove Trovare i Breadcrumb

In effetti definire i Breadcrumb non è particolarmente difficile, considerato il fatto che Oracle APEX già in fase di creazione di una pagina si preoccupa da solo di agganciare la stessa pagina ad un Breadcrumb di default.

Tuttavia, prima di parlare di questo, desidero mostrarti dove viene salvata la configurazione dei Breadcrumb.

• Da Shared Components vai in Navigation and Search e clicca su Breadcrumb

Quello che notiamo subito è il fatto che in Oracle APEX puoi trovare (e creare) più di un Breadcrumb.

Uno di questi (quello che si chiama con grande fantasia Breadcrumb) viene generato automaticamente da APEX quando crei una nuova applicazione.

Se apri la definizione del Breadcrumb noterai che consiste in un albero con una struttura gerarchica dove ciascun nodo, chiamato Entry, è associato ad una pagina dell’applicazione.

Clicca su una qualsiasi Entry per vedere le sue proprietà

• Breadcrumb Entry > Page: pagina collegata all’entry.
• Breadcrumb Entry > Parent Entry: nodo padre.
• Breadcrumb Entry > Short Name: nome del link che verrà visualizzato nella pagina.
• Target > Page: link della pagina (generalmente è la stessa pagina alla quale è collegata l’entry)

Come configurare i Breadcrumb

É possibile configurare l’Entry Breadcrumb di una pagina già nel wizard di creazione.

• Dall’APP Builder clicca Create Page.
• Apri la sezione Navigation e configura le seguenti proprietà
  • Use Breadcrumb: Yes
  • Breadcrumb: seleziona il Breadcrumb al quale collegare la pagina corrente (puoi lasciare quello proposto di default)
  • Breadcrumb Parent Entry: seleziona la pagina padre

• Completa la creazione della pagina premendo Create Page

Avendo scelto di creare il Breadcrumb verrà automaticamente creata una Page Region di tipo Breadcrumb.

Supponiamo di aver configurato i breadcrumb come in figura

Questo è ciò che otterremo. Cliccando su uno qualsiasi dei link del breadcrumb saremo in grado di tornare immediatamente alla pagina selezionata

Non dimenticare i Punti di Riferimento

Sapete perché la Stella Polare e la Croce del Sud sono così importanti?

Ebbene, da sempre queste due stelle sono state usate dall’uomo come punti di riferimento nella navigazione e nell’esplorazione.

Usate da secoli, sono dei veri e propri fari nella notte, essendo punti fissi nell’orbita celeste rispettivamente dell’emisfero boreale e quello australe.

Mi sono permesso di scomodare qualche semplice concetto di astronomia per introdurne alcuni decisamente più terreni e che riguardano sempre la creazione delle applicazioni web.

Come i navigatori di una volta, anche gli utenti delle applicazioni hanno bisogno di alcuni punti di riferimento che li aiutino a tornare a casa (home page) quando ne hanno bisogno.

Adesso non voglio dilungarmi su come deve essere costruita una delle pagina più importanti di una app (l’home page appunto) di cui magari scriverò un post al riguardo.

Quello su cui però vorrei farti riflettere è che rispetto ad una qualsiasi altra pagina dell’applicazione, l’home page merita sicuramente una attenzione particolare perché deve essere sempre raggiungibile dagli utenti, nel modo più semplice possibile.

Ci sono sostanzialmente due cose che puoi fare. La prima, quella forse più scontata arrivati a questo punto, è creare una voce di menù dedicata.

Inoltre sarebbe opportuno che a questa voce di menù fosse associata la classica icona a forma di casa stilizzata: ovviamente non è qualcosa di indispensabile ma concorderai che al giorno d’oggi l’uso è ormai una convezione che vale la pena rispettare.

Oltre al menu di navigazione, al giorno d’oggi è abbastanza comune che le persone che navigano in un sito o in una applicazione e web si aspettano di tornare all’home page cliccando sul nome del sito nella barra di navigazione.

Per configurare il link all’home page devi seguire i seguenti passaggi:

• Accedi all’APP Builder e vai in Shared Components
• Clicca su User Interface Attributes

• Vai alla sezione Attributes e seleziona la pagina che rappresenta l’Home Page

Conclusioni

Abbiamo finito.

In questo tutorial abbiamo visto quali sono i metodi e le strategie per aiutare gli utenti a lavorare meglio con le applicazioni web.

In particolare abbiamo visto come possiamo organizzare i contenuti e le pagine di una applicazione realizzata con Oracle APEX usando in modo furbo i menù di navigazione.

Inoltre abbiamo visto quanto facilmente puoi creare una pagina di ricerca per aiutare concretamente gli utenti a trovare ciò di cui hanno bisogno.

Spero che queste informazioni ti siano utili.

Un abbraccio

Daniele