NativeScript #101: Guida completa alle TabView - Parte 1

   

132

             

15

SafeValue must use [property]=binding:

Nativescript è un fantastico framework che cavalca il trend delle Hybrid Mobile Application, cioè applicazioni mobile sviluppate con tecnologie provenienti dallo sviluppo web.

Dopo aver utilizzato e amato per un lungo periodo Ionic, ho approciato da diverso tempo per alcuni progetti, Nativescript e sono rimasto sorpreso dalle sue funzionalità e caratteristiche.
Infatti, se con Ionic era possibile creare applicazioni facilmente ma con dei compromessi sicuramente evidenti, Nativescript pone l'attenzione a queste nuove soluzioni mantenendo uno sguardo ben fisso sui reali bisogni dello sviluppo mobile nativo che sappiamo essere ricco di minuziosi particolari che contraddistinguono una piattaforma dall'altra, Android e Ios, e che richiedono competenze specifiche.

Ho così deciso di cominciare una serie di tutorial dedicati a questo framework al quale dedicherò diversi articoli dove andremo non solo a vedere nel dettaglio l’utilizzo di quest’ultimo ma anche ad analizzare le varie sfaccettature della sua presenza nel design e sviluppo i applicazioni mobile, gli articoli saranno molto discorsivi nella parte iniziale per poi passare a una seconda parte di implementazione Nativescript.
Per la scrittura e la pubblicazione degli articoli non andrò con ordine, l’obbiettivo è quello di coprire il maggior numero di topic possibile, ti invito a lasciare un commento qui sotto se hai qualche argomento che ti piacerebbe venisse approfondito.

Dopo questa piccola premessa, oggi dedichiamo la nostra attenzione al concetto di navigazione mobile e in particolare vedremo una delle implementazioni più utilizzate in ambito UX, le TabBars.

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 TabView, 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 che questo componente per visualizzare una serie i pagine.

TAB BAR, UNO SGUARDO AL DESIGN

Prima di entrare nel dettaglio su come implementare le TabView nella nostra 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 si avvicino sempre più al mondo reale per suscitare una sensazione di familiarità nei confronti dell'utilizzatore. Ti basta pensare al concetto che sta dietro alla gesture “swipe” degli smartphone che tutti utilizziamo, essa inaftti cerca proprio di emulare l’azione di voltare una pagina quando si legge un libro, ciò crea quella sensazione di star utilizzando qualcosa che conosciamo bene nella vita reale.

Utilizzare le Tab per organizzare l’interfaccia della nostra app, è un'eccellente metafora del metodo organizzativo che la maggiora parte di tutto noi utilizza quotidianamente, identifichiamo attribuendo caratteristiche e cerchiamo di raggruppare elementi simili in aree comuni. Nel caso delle Tab 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 alle TabBars 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 TabBar 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 di quest'ultimi 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 Tab Bar è 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 e cioè quali aree quindi 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)