NativeScript #101: Guida completa alle TabView - Parte 1

   

144

             

15

SafeValue must use [property]=binding:

Uno degli elementi fondamentali di cui dobbiamo occuparci durante le prime fasi di sviluppo di un applicazione, è l’organizzazione delle pagine e dei contenuti con i quali gli utenti interagiscono. 

E’ importante infatti, garantire una customer journey intuitiva e in generale, organizzare i nostri contenuti in modo da poter essere facilmente raggiungibili. In questo articolo analizzeremo nel dettaglio le TabBars, così chiamate nel mondo Nativescript, uno dei trend più utilizzati per la navigazione mobile.


Analizzeremo nel dettaglio questo componente, partendo da una serie di analisi in ambito design sino ad arrivare all’implementazione vera e propria in Nativescript dove creeremo una piccola applicazione dove implementeremo questo componente.

TAB BAR, UNO SGUARDO AL DESIGN

Prima di entrare nel dettaglio su come implementare le TabView in un'applicazione Nativescript, facciamo un’analisi di questo componente in termini di UI e UX design, cercando di capire perché è così diffuso e quali sono le best practice per migliorarne l’efficacia.

Uno schedario multimediale 


Nel digital design vengono spesso utilizzate metafore di idee e oggetti per creare interfacce che cercano di simulare il comportamento di azioni che compiamo nella vita reale.
Pensa a come utilizzi il tuo smartphone e ai vari "gesti" che compi con il tuo dito per interagire con le applicazioni, ti renderai conto che molte di esse combinate con una buona interfaccia, riescono ad essere naturali da compiere proprio perché molto simili a qualcosa che già facciamo nella realtà.
Ad esempio, la gesture "swipe", cioè trascinare il dito orizzontalmente o verticalmente su uno schermo, viene spesso utilizzata nelle applicazioni di visualizzazione di documenti o libri dove l'obbiettivo è quello di emulare il naturale gesto che facciamo nella realtà quando vogliamo girare delle pagine.

Seguendo questo approccio, le TabView sono un'ottimo esempio di organizzazione di contenuti che sfrutta un comportamento umano molto basilare, cioè la nostra capacità di organizzare elementi attraverso una logica che li lega, identifichiamo attribuendo caratteristiche e cerchiamo di raggruppare elementi simili in aree comuni

Nel caso delle TabView infatti, avremo degli indici, una o più parole, che suggeriscono lo scopo di ognuno di questi contenitori e dove al loro interno troviamo funzioni e proprietà legate tra di loro.

E’ facile pensare a questi componenti come una sorta di schedari multimediali dove delle etichette identificative, aiutano ad organizzare e a trovare facilmente documenti comuni tra di loro, in base a dei criteri di identificazione.

Nel nostro caso non avremo documenti fisici ma contenuti e funzionalità che vengono organizzate attraverso la stessa logica.
Per esempio, se all'interno di un'applicazione avremo una TabView con una tab dedicata alle impostazioni, mi aspetto di trovare al suo interno una serie di funzioni che mi permetteranno di personalizzarne l’esperienza, stessa cosa vale per una pagina di ricerca, mi aspetto di trovare al suo interno componenti di ricerca atti a questo scopo.


Il concetto è molto semplice e applicazioni che le usano efficacemente sono facili da trovare, probabilmente avrai installata sul tuo telefono almeno un'app che utilizza questo sistema di navigazione ed è praticamente cosa certa se utilizzi social networks come Facebook, Instagram, Linkedin e molti altri, che hanno adottato questa soluzione ormai da qualche anno e che hanno contribuito fortemente alla diffusione del trend. 


Facebook App

 

 
Linkedin App
 
 


Instagram App

 

Pinterest App

 

Tob bar o Bottom Bar? 

L’utilizzo di una TabBar è pressocche simile tra i vari design che ti ho appena mostrato, ma c’è un elemento che li differenzia gli uni dagli altri ed è il posizionamento.

Negli esempi sopra possiamo vedere come Facebook delega la navigazione dell’app nella parte superiore dello schermo, mentre Pinterest e Linkedin, dividono la navbar nella parte alta e la TabBar nella parte bassa.

La domanda sorge spontanea :

“Qual’è il corretto posizionamento di una TabBar?”

Uno studio condotto da Steven Hoober sull’usabilità dei dispositivi mobile, ha riportato i seguenti risultati riguardo a come interagiamo con i nostri dispositivi portatili:




  • one handed 49%
  • cradled 36%
  • two handed 15%


Prendendo in considerazione le prime due posizioni, possiamo notare che l’85% delle persone interagisce con il proprio smartphone principalmente utilizzando il proprio pollice e sostenendo il dispositivo con una o due mani.

Ciò ci porta ad osservare un’altro dato interessante che proviene da quest’ultimo, cioè quali aree sono facilmente più raggiungibili durante una navigazione di questo tipo.

Nell’immagine qui sotto, puoi notare in verde le aree facilmente raggiungibili, in giallo quelle che richiedono un po’ di sforzo e in rosso quelle che richiedono all’utente l’ausilio dell’altra mano o comunque un’altro tipo di posizionamento.




Come puoi notare dalle due immagini, un’altro fattore da considerare è l’altezza con cui viene posizionata la mano rispetto al device in quanto quest’ultima incide fortemente sulle aree raggiungibili dal pollice.

Prendendo in considerazione quindi questo tipo interazione che coinvolge più di 3/4 delle persone, tenendo in considerazione quest'ultima immagine potremmo concludere che porre una TabBar nella parte inferiore dello schermo sia la soluzione ottimale ma non è sempre così.

La reale locazione più opportuna di questo componente dipende anche da altri fattori ed è influenzata dallo scopo dell'app.

C’è infatti chi preferisce preferisce posizionarla in alto in quanto manterebbe la logica top down che l’occhio umano utilizza quando si approcia ad analizzare un nuovo elemento, analizziamo gli elementi dall’alto verso il basso e quindi uno dei primi elementi che l’utente dovrebbe vedere e interagire è appunto la tab bar.

Gli studi in merito a questi comportamenti purtroppo non sono scesi tanto nel dettaglio ma credo che la risposta a questo quesito risieda analizzando i grossi player che ho citato più indietro che utilizzano la tab bar come sistema di navigazione primario. Infatti se dai uno sguardo agli esempi che ti ho proposto a inizio articolo, puoi notare che diversi social networks utilizzano soluzioni diverse.

Ciò ci porta quindi a concludere che non esiste un una risposta definitiva al quesito della “barra sotto, barra sopra” in quanto potete verificare voi stessi quanto sia poco differente interagire con una o con l’altra e il fatto che grossi player utilizzino soluzioni diverse, ci fa comprendere che fatta una buona Tab Bar, il posizionamento diventa una questione di scelta e preferenze.

Android e Ios

Riprendendo il discorso precedente, una delle differenze tra le Tabs di Android e le Tab Bars di IOS, oltre al nome, è proprio il posizionamento, infatti il Material Design di Android pone le Tab nella parte alta dello schermo, mentre le Tab Bars adottano un posizionamento in basso.
Questa differenza in realtà non è per nulla rilevante in quanto, esistono delle proprietà che ci permetteno di customizzare il posizionamento di quest’ultime a nostro piacimento.

Best Practises

Quando utiliziamo le tab views per la nostra applicazione, ci sono alcune regole da seguire per applicare correttamente il componente e delle best practises per migliorarne l’efficacia e l'usabilità, ecco qui un elenco riassuntivo dei punti che trovo più interessanti:

  • Evidenzia la posizione corrente
  •  
  • Dividi la tab bar da 3 fino a 5 macro sezioni 
  •  
  • Identifica le varie sezioni con un’icona e una o più parole descrittive, fai in modo che il testo non venga tagliato o che occupi troppo spazio, nel caso riduci la dimensione del font  

  • Gestisci pop up e altre schermate all’interno della tab corrente, la tab bar deve esssere sempre visibile

  

  • Nascondi la barra durante la navigazione per dare spazio al contenuto principale

  

  • Dedica abbastanza spazio per ogni tab 

Come utilizzare le TabViews in Nativescript

Qui puoi trovare il link della repository Github dalla quale puoi scaricare l’applicazione immediatamente 

Dopo aver analizzato il metodo delle Tabs per la navigazione mobile, vediamo ora come applicare le TabViews in un’applicazione Natviscript, costruiremo una piccola app con diverse views e vedremo come oganizzare al meglio le pagine, varie properties per la customizzazione.
Per questo esempio utilizzeremo Angular come framework di riferimento e Android come sistema operativo finale

Creiamo l’applicazione

Prima di tutto, creiamo una nuova applicazione Nativescript utilizzando il template blank che ci permette di creare un’applicazione grezza

 tns create tabs-demo --template tns-template-blank-ng 

Esiste un comando dedicato della CLI che ci permette subito di generare una app basata su Tabs

 tns create tabs-demo --template tns-template-tab-navigation-ng 

Noi pero’ implementeremo le tabs manualmente per capire meglio come funziona questo componente.

Una volta creata, accedi alla cartella con il tuo editor preferito

In questo tutorial andremo a creare una semplice app che grazie ad una TabView mostra una serie di voci (Home, Cerca e impostazioni) che mostrano dei semplici messaggi personalizzati. Quello che ci interessa non è tanto il contenuto delle pagine ma entrare nel dettaglio su come vengono implementate quest’ultime. Ogni pagina sarà un component dedicato che andremo a personalizzare con delle Label dedicate.

Il Componente TabView

Prima di mettere le mani in pasta nel codice, diamo un occhiata all’app che abbiamo appena generato, puoi aprire l’app sul tuo device tramite il comando

 tns preview  

oppure digita

 tns run 

per lanciare la preview su un dispositivo collegato al tuo pc o su un emulatore installato sulla tua macchina.

Come puoi notare abbiamo sostanzialmente poco, una pagina Home con nulla al suo interno, giusto quello che ci serve per partire.

Come ho detto prima, andremo a creare 3 componenti diversi, quello riservato alla Home lo riutilizzeremo da quello esistente mentre gli altri 2 andremo a crearli tra poco.

Struttura del progetto

Aprendo la cartella del nostro progetto e seguendo il seguente percorso src/app, troviamo i file, come ci spettavamo, il componente di bootstrap principale, app.component, e la pagina con home con tutti i suoi file dedicati all’interno.

Questa applicazione pur essendo basilare, contiene già delle configurazioni che ne determinano la natura, infatti come potrai notare, esiste un file di routing, app-routing, il che indica che l’app è volta a visualizzare una pagina per volta. Il nostro obbiettivo è differente, noi vogliamo delegare la gestione delle diverse pagine alla tabview mantenendo comunque una separazione delle pagine in termini di codice.

Dunque ciò che dobbiamo fare è rimuovere questo tipo di logica, per farlo ci basterà rimuovere il riferimento presente nell’app.component.html che contiene il tag , quest’ultimo infatti è il main entry che permette di visualizzare le logiche di ruouting dell’applicazione.
Se volete del tutto eliminare qualsiasi riferimento al routing nella vostra applicazione, vi basterà eliminare il file app-routing.module.ts e rimuovere il riferimento di esso dall’app.module.ts.

Facciamo la stessa operazione per il componente Home che prevede lo stesso tipo di logica, eliminiamo i file home.module.ts e home-routing.moule.ts

Ora che il nostro file app.component.html è vuoto, possiamo istanziare una nuova tab views al suo interno e come anticipato prima, creeremo tre voci, più tardi ti mostrerò anche come aggiungere delle icone, prima pero’ creiamo i component Cerca e Impostazioni. Per rendere questa operazione più semplice, andremo ad utilizzare un pacchetto che ci permetterà di creare componenti Angular in maniera semplice, dunque digita il seguente comando nel prompt dei comandi assicurandoti di esser posizionato nella cartella del progetto

 tns extension install nativescript-angular-cli 

Ora lanciamo i due comandi per la creazione dei componenti

 tns generate component cerca tns generate component impostazioni 

Il file app.module.ts dovrebbe ora contenere i riferimenti ai nuovi componenti, importiamo insieme ad essi anche l’Home component. 

Inseriamo la TabView

Ora che i nostri componenti, sono pronti, andiamo ad inserire il codice della TabView

Copiamo questo codice all’interno dell’app.component.html e in seguito lanciamo il comando tns preview, il risultato dovrebbe essere il seguente

Se in Android preferisci avere la barra in basso, ti basta aggiungere al tag TabView la seguente property

 androidTabsPosition=”bottom” 

Per IOS invece dove la Tab Bar è di defualt posta nella parte bassa dello schermo, non esiste una property per cambiare quest aspetto e bisogna affidarsi ad altre soluzioni come le SegmentedBar, ti lascio il link se fossi interessato ad approfondire l’argomento

Aggiungiamo i componenti

Ora che la nostra TabViews funziona, andiamo a inserire i tag che rappresentano i componenti Cerca e Impostazioni.

Prima, rinominiamo i selettori all’interno di ognuno dei componenti, quindi apri il file component.ts di ognuno di essi e modifichiamo i decoratori come segue:

home.component.ts  

@Component({

selector: "Home", 

moduleId: module.id,

templateUrl: "./home.component.html"


}) 

cerca.component.ts 

@Component({
selector: "Cerca",
moduleId: module.id,
templateUrl: "./cerca.component.html"
 }) 

impostazioni.component.ts

@Component({
selector: "Impostazioni",
moduleId: module.id,
templateUrl: "./impostazioni.component.html"
 }) 

Personalizziamo i tre componenti con una testo che ci indica quale tab stiamo visualizzando.

Apriamo i file home.component.html, cerca.component.html e impostazioni.component.html e aggiungiamo un semplice Stack Layout che contiene una Label  

Ora apriamo il file app.component.html e inseriamo i riferimenti ai tag appena modificati dei nostri componenti

Lanciamo ora tns preview e vediamo il risultato

 

 

Se fin qui è andato tutto bene, ottimo! Abbiamo implementato con successo una TabView in Nativescript!

(see http://g.co/ng/security#xss)