Impariamo a riconoscere le Icone dei Siti Mobile

La standardizzazione delle icone per un sito mobile è un processo che deve ancora iniziare, pertanto non esiste una definizione comune ed i significati differiscono spesso molto dal mondo Android a quello Apple e fino a quello Microsoft. Tale guida non ha la presunzione di esaurire l'argomento, ma prova a fare un minimo di chiarezza.

Toolbar

Nei siti mobile più recenti o meglio realizzati, la toolbar è a scomparsa. Ovvero si nasconde quando scorriamo verso il fondo della pagina e riappare quando torniamo su. Anche i migliori browser hanno una Url Bar a scomparsa, così scorrendo la pagina verso il basso avremo una visione a schermo intero, senza l'ingombro di alcuna toolbar.

Quindi se ci sentiamo "smarriti" perchè non ritroviamo le nostre toolbar, basta scorrere la pagina verso l'alto e dovrebbero riapparire. Sul nostro sito è a scomparsa ma lasciamo all'utente la possibilità di renderla fissa agendo negli "Strumenti".

Icona Burger - Navigazione (o Nav)

Si chiama così perchè ricorda l'icona dell'hamburger ed è posta normalmente su una delle due estremità della toolbar. Il mondo Android la consiglia a sinistra e sono più frequenti i siti che la collocano in questa posizione. Noi l'abbiamo posta a destra, per nostra preferenza nell'avere il logo a sinistra.
Questa icona ci porta sul Menu di Navigazione (o NavMenu) che ci aprirà le porte verso tutte le aree del sito ed anche verso le sezioni più specifiche. La soluzione più comunemente adottata è una finestra "sliding" che appare da sinistra.
Noi abbiamo adottato una nostra soluzione che abbiamo chiamato NavMenu Semantico (perchè non sconvolge la semantica della pagina HTML), dove il menu è in fondo alla pagina, anche per garantirne il doppio accesso (ci si accede non solo con l'icona, ma anche con il comune "scroll" della pagina).

Icona More

Il mondo Android la interpreta come "Menu" (per azioni secondarie di configurazione e aiuti), ma generalmente viene intesa come l'icona "More", vale a dire "più informazioni". Si posiziona nel lato opposto rispetto alla Burger.
Noi la usiamo per indicare la sezione dove trovare altre pagine correlate rispetto a quella corrente, ovvero "più informazioni" rispetto alla pagina. Ad esempio se siamo sulla pagina di un prodotto, la More porterà nella sezione dove trovare eventuali News del prodotto o link verso altre pagine correlate, come ad esempio la versione PDF o la pagina dove trovare altri prodotti dello stesso brand o categoria.

Strumenti (Tools o Setting)

Questa icona porta ai settaggi di navigazione e li possiamo personalizzare alcune preferenze di navigazione. Ad esempio nella nostra pagina dei settaggi troviamo il modo per attivare funzionalità, come quella della Tilt & Slide (funzione nostra esclusiva) ed altre configurazioni relative alla grafica od a preferenze di navigazione.

Icone Navigazionali

Si distinguono tra quelle che consentono la navigazione all'interno della pagina e quelle di navigazione esterna che consentono la navigazione su una pagina precedente o successiva (page back / page forward) . Le icone di navigazione interna, si raffigurano come "up & down" (giu/su), vengono usate per andare velocemente al top header (la parte più alta della pagina) od al bottom footer (la parte più bassa della pagina).

Mentre le icone back & forward, sono più difficili da trovare su un sito mobile, perchè quelle in dotazione con il browser hanno un funzionamento più specifico e più preciso. Noi utilizziamo solo l'icona back.

Search (Ricerca)

Se il sito implementa corettamente questa funzionalità (come nel caso della maggior parte), premendo questa icona si abilita direttamente la tastiera dello smartphone per digitare la keyword da ricercare nel sito. Una volta digitata la keyword si dovrà premere il tasto di "conferma ricerca" (tasto "invio" o "lente" etc, varia a seconda del sistema operativo o della tastiera digitale impostata) oppure premere nuovamente sull'icona "Search" della Toolbar.

Logo

L'icona del logo del sito è posta sulla toolbar, spesso al centro o a sinistra e più raramente a destra. Oltre alla funzione estetica, ha anche quella funzionale di portare sulla home page del sito. Spesso è anche una buona scappatoia se qualcosa non sta funzionando a dovere.

Le icone in una versione mobile sono oggi molto diffuse e normalmente sono monocromatiche, perchè meglio distinguibili e non distorgono l'equilibrio grafico. Ad esempio le troviamo nelle liste, ma anche nelle cards(sono quegli oggetti rettangolari a forma di carta di credito e che hanno una leggera elevazione rispetto al piano) ed in altri elementi. Ci sono poi delle icone che hanno un portamento navigazionale che sono quelle che illustriamo in questo paragrafo.

Swapping

Swapping significa scambiare, in questo caso, relativamente alle immaggini od ai contenuti di un carosello. Su un mobile l'operazione si effettua anche con lo "swipe" (strisciata), ovvero trascinando con il dito verso una direzione. Lo swipe normalmente coinvolge lo sliding, ovvero il passaggio da una slide ad un'altra.

Le icone freccia destra/sinistra, normalmente vogliono anche denotare la presenza di un'area per lo swipe. Ma le freccie stesse, se premute, riproducono l'effetto swipe, funzionalità che si rende molto utile soprattutto se lo swipe non sta funzionando bene. Il mal funzionamento dello swipe è purtroppo ricorrente e può essere di varia natura (hardware, software etc).
Va ricordato inoltre che sui dispositivi più moderni, lo swipe più che essere una vera strisciata, consiste in un colpettino verso una direzione.

Schermo Intero

Questa modalità non è ancora molto diffusa, perchè solo di recente i browser hanno aperto agli sviluppatori di siti mobile questa possibilità. In pratica l'icona porta alla modalità a schermo intero ed il browser richiede preventivamente la conferma da parte dell'utente se accettare o meno questa modalità.

Non vi è dubbio che i siti mobile presenteranno sempre più questa funzionalità e probabilmente adotteranno lo stesso meccanismo adottato sul nostro sito. Quando clicchiamo su una immagine, molti siti ti portano su una finestra "modal", (ovvero una pagina dove le azioni per l'utente sono limitate a poche azioni specifiche) ed appare l'immagine in grandi dimensioni. In questa finestra dovrebbe apparire l'icona dello schermo intero.

Premendo l'icona schermo intero l'immagine diventa ancora più grande e spazia sull'intera dimensione dello schermo, esattamente come avviene con le foto che abbiamo scattato con il nostro smartphone, ovvero possiamo maneggiare delle immagini a schermo intero che scorriamo in sequenza con lo swipe.
Per vedere come funziona, cliccate ora su una bella immagine.

Landscape per caratteri più grandi

Per quelli che stentano nel vedere bene da vicino, la rotazione dello smartphone sulla visualizzazione landscape (in orizzontale) è la scappatoia più veloce (sempre che il sito mobile provveda per questo aiuto).

Il browser Safari adotta automaticamente questa tecnica, ma dovrebbe essere invece una soluzione che dovrebbe partire dagli sviluppatori del sito che conoscono meglio le particolarità grafiche delle proprie pagine. Comunque oltre al nostro sito, sempre più siti mobile si stanno orientando verso questa tecnica e speriamo che tanti ancora seguano l'esempio per consentire una buona esperienza di navigazione anche a coloro che con la vista "stentano".

No Pinch Zoom

Purtroppo oggi la maggior parte dei siti mobile (incluso il nostro) non abilitano l'utilissima funzione del pinch zoom (ingrandimento dell'area con le due dita). Per motivi di sicurezza i browser oggi non offrono agli sviluppatori la possibilità di avere pieno controllo sullo zoom per correggere alcune azioni indesiderate. Speriamo che ci sia una evoluzione in tal senso nei prossimi anni ...