Onboarding
L’onboarding viene presentato all’utente al primo utilizzo con l’obiettivo di illustrare le funzionalità principali dell’applicazione. Attraverso le call to action l’utente potrà andare avanti nel flusso di presentazione delle funzionalità o saltare la presentazione (caso in cui l’utente conosca gia le funzionalità). Il processo di onboarding può essere richiamato anche negli utilizzi successivi in altre sezioni dell’app come nell’assistenza.
A - Descrittivo-informativo
Immagine accompagnata di titolo e testo descrittivo, stepper e pulsanti “Avanti” e “Indietro”.
B - Dinamico
Immagine di sottofondo a tutto schermo accompagnata di titolo e testo breve, stepper e pulsanti “Continua” e “Salta”.
Componenti
Descrittivo-informativo
Immagine accompagnata di titolo e testo descrittivo, stepper e pulsanti “Avanti” e “Indietro”.
Dinamico
Immagine di sottofondo a tutto schermo accompagnata di titolo e testo breve, stepper e pulsanti “Continua” e “Salta”.
<h5 class="fw-bold">Descrittivo-informativo</h5>
<div class="steppers it25-stepper-mobile-info white-bg p-2">
<div class="steppers-header it25-header fw-bold" aria-live="polite">
<a class="steppers-btn-jumping">Salta</a>
</div>
<div class="steppers-content" aria-live="polite">
<!-- Esempio START -->
<div class="container">
<div class="row mb-3">
<div class="col-12">
<img src="/bootstrap-lombardia/dist/assets/img/image-bg.png" width="160" height="150" alt="foo" />
</div>
</div>
<div class="row">
<div class="col-12">
<span class="f-30 fw-bold primary-color">Lorem ipsum dolor</span>
</div>
</div>
<div class="row">
<div class="col-12 pe-0 mb-3 f-16 pe-md-3 primary-blue-color">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</div>
</div>
</div>
<!-- Esempio END -->
</div>
<nav class="steppers-nav it25-dots">
<ul class="steppers-dots d-flex">
<li class="done current"><span class="visually-hidden">Step 1 di 3 - Confermato</span></li>
<li class="done other"><span class="visually-hidden">Step 2 di 3 - Confermato</span></li>
<li class="done other"><span class="visually-hidden">Step 3 di 3 - Confermato</span></li>
</ul>
</nav>
<nav class="steppers-nav">
<button type="button" class="btn btn-outline-primary btn-mobile-radius steppers-btn-prev">Indietro</button>
<button type="button" class="btn btn-primary btn-mobile-radius steppers-btn-next">Avanti</button>
</nav>
</div>
<h5 class="fw-bold">Dinamico</h5>
<div class="steppers it25-stepper-mobile-info it25-dynamic white-bg p-2">
<div class="steppers-content it25-flex-center" aria-live="polite">
<!-- Esempio START -->
<div class="container">
<div class="row">
<div class="col-12">
<span class="f-30 fw-bold primary-blue-color">Titolo</span>
</div>
</div>
<div class="row">
<div class="col-12 pe-0 mb-3 f-16 pe-md-3 primary-blue-color">Testo</div>
</div>
</div>
<!-- Esempio END -->
</div>
<nav class="steppers-nav it25-dots">
<ul class="steppers-dots d-flex">
<li class="done current"><span class="visually-hidden">Step 1 di 3 - Confermato</span></li>
<li class="done other"><span class="visually-hidden">Step 2 di 3 - Confermato</span></li>
<li class="done other"><span class="visually-hidden">Step 3 di 3 - Confermato</span></li>
</ul>
</nav>
<nav class="steppers-nav it25-dynamic-footer">
<button type="button" class="btn btn-primary btn-mobile-radius steppers-btn-next">Continua</button>
<a class="mt-3 steppers-btn-jumping fw-bold" href="#">Salta</a>
</nav>
</div>