User onboarding con Ionic
Quando sviluppiamo una nuova app, non sempre l’utente riesce a percepirne tutte le funzionalità: il processo di user onboarding con Ionic che vedremo in questo articolo ci permette di riuscire alla nostra app di farsi notare e di far scoprire all’utente tutte le feature messe a disposizione.
Repository
https://github.com/serenasensini/Ionic5-onboarding
User onboarding: cos’è
Tutti gli utenti hanno bisogno di una piccola guida quando iniziano a utilizzare la tua nuova app: è fondamentale prenderli per mano e guidarli attraverso le diverse sezioni chiave del tuo prodotto…
Ma attenzione: un buon flusso di onboarding è molto più di un semplice tour del prodotto: è necessario illustrare perché quello a cui hai lavorato è perfetto per l’utente che sta per utilizzarla, il modo in cui può sfruttarla al meglio e l’ideale è che gli utenti si sentano come se conoscessero la tua app da sempre.
Esempio di user onboarding con Ionic
Procedimento
In questo esempio, vediamo come creare delle semplici slides che l’utente può scorrere per dare un’occhiata alle funzionalità della nostra app, e lo faremo seguendo i prossimi passi.
Definizione delle slides
Andiamo a costruire tre slides, ognuna delle quali con delle immagini esemplificative e una breve descrizione della funzionalità di cui vogliamo illustrare le potenzialità: è chiaro che quanto mostrato di seguito sia puramente di esempio, ma è perfetto per rendere l’idea di quello su cui stiamo andando a lavorare.
All’interno della pagina onboarding.page.html andiamo ad inserire un componente ion-slides come riportato di seguito, dove inseriamo due slides che hanno due pulsanit, uno per saltare il tutorial e uno per scorrere in avanti.
Il componente _ion-slides_ha già di per sé permette tramite la gesture di sliding di passare da una slide all’altra in maniera molto semplice, ma è utile guidare in questo senso l’utente: in più, attiviamo il pager che permette all’utente di capire qual è lo step corrente che sta visualizzando.
<ion-slides pager="true">
<ion-slide class="ion-padding">
<img src="../../assets/slide1.webp" >
<div class="slider-text">
<h2>Spiaggia, arrivo!</h2>
<p>
Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Nulla ultricies, erat vitae
porta consequat.
</p>
</div>
<div class="navigator">
<ion-button color="primary" fill="clear" (click)="skip()">SALTA</ion-button>
<ion-button color="primary" fill="clear" (click)="next()">AVANTI</ion-button>
</div>
</ion-slide>
<ion-slide class="ion-padding">
<img src="../../assets/slide2.webp" >
<div class="slider-text">
<h2>Non vedo l'ora di mangiare gelato...</h2>
<p>
Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Nulla ultricies, erat vitae
porta consequat.
</p>
</div>
<div class="navigator">
<ion-button color="primary" fill="clear" (click)="skip()">SALTA</ion-button>
<ion-button color="primary" fill="clear" (click)="next()">AVANTI</ion-button>
</div>
</ion-slide>
<ion-slide class="ion-padding">
<img src="../../assets/slide3.webp" >
<div class="slider-text">
<h2>...e nuotare nel mare!</h2>
<p>
Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Nulla ultricies, erat vitae
porta consequat.
</p>
</div>
<ion-button color="primary" [routerLink]="'/home'">Andiamo!</ion-button>
</ion-slide>
</ion-slides>
Funzioni avanti e salta
Le funzioni che i nostri pulsanti andranno a richiamare dovrebbero compiere due azioni: nel caso della funzione next, si dovrebbe scorrere da una slide all’altra, mentre nel caso della funzione skip, l’utente decide di saltare il tutorial e quindi non glielo dovremmo più mostrare.
Definiamo quindi le due funzioni nel seguente modo: per la funzione next, usiamo il decorator ViewChild che ci permette di fare riferimento all’oggetto_IonSlides_ e manipolarlo attraverso la pagina_onboarding.page.ts_:
@ViewChild(IonSlides) slides: IonSlides;
...
next() {
this.slides.slideNext();
}
Per la funzione skip andiamo invece ad utilizzare uno dei plugin messi a disposizione dalla community di Ionic che ci permette di memorizzare la scelta dell’utente e di ricordarci che questo ha deliberatamente scelto di non seguire il tutorial o di non visualizzarlo più.
Utilizziamo questo strumento in due punti: quando carichiamo la pagina, controlliamo che non sia già stato visionato il tutorial e che l’utente non abbia scelto di nasconderlo; invece, tramite la funzione skip, andiamo a memorizzare la scelta dell’utente, per poi mostrare la pagina principale dell’app.
constructor(public storage: NativeStorage, public router: Router) {
this.storage.getItem('skipped').then((val) => {
console.log('skipped:');
console.log(val);
if (val){
this.router.navigate(['/home']);
}
}, reason => {
console.log(reason);
});
}
...
skip() {
this.storage.setItem('skipped', true).then(() => {
this.router.navigate(['/home']);
}, reason => {
console.log(reason);
this.router.navigate(['/home']);
});
}
Gestione del routing
All’interno del componente di routing, andiamo a definire il modo in cui la nostra app mostrerà le diverse pagine: la prima sarà sempre quella di onboardin__g, la quale poi effettuerà i dovuti controlli con le funzioni sopra definite.
Ci saranno poi tutte le altre pagine che fanno riferimento ai vari componenti presenti all’interno della nostra app, e nel caso di esempio c’è il componente home:
const routes: Routes = [
{
path: 'home',
loadChildren: () => import('./home/home.module').then( m => m.HomePageModule)
},
{
path: '',
redirectTo: 'onboarding',
pathMatch: 'full'
},
{
path: 'onboarding',
loadChildren: () => import('./onboarding/onboarding.module').then( m => m.OnboardingPageModule)
},
];
Test
Il risultato ottenuto dovrebbe essere il seguente:
Risultato ottenuto
