App mobile
Design dell’onboarding di un’app per la mindfulness
Il design dell'app di onboarding mindfulness usa tre schermate mobile rilassanti per presentare la pratica di Lull, adattarne la promessa e mostrare le opzioni di account.
Casi d'uso dell'app di onboarding mindfulness
- Flussi di onboarding mobilePresenta un prodotto attraverso schermate mobile sequenziali e mirate.
- Team di prodotti per la mindfulnessCostruisci un percorso di primo utilizzo gentile, centrato sulla pratica quotidiana.
- Content designerMetti alla prova messaggi concisi lungo stati di onboarding ripetuti.
- Designer di UI mobileStudia insieme tipografia, illustrazione, controlli e progressione.
Punti di forza del design di onboarding di Lull
- Narrazione in tre schermatePassa dalla calma introduzione alla pratica e alla configurazione dell'account.
- Un unico linguaggio visivoUsa una tela calda, titoli serif e un solo colore d'accento.
- Impegno progressivoRimanda le scelte di account fino a quando la promessa del prodotto è chiara.
- Scelta di account discretaRaggruppa con chiarezza le opzioni Apple, Google ed email.
L'app di onboarding, schermata per schermata
1 / 3Il flusso di onboarding di Lull
Il flusso di onboarding di Lull è un esempio ufficiale di OpenDesign, creato da OpenDesign. La fonte descrive tre schermate con un unico tono di voce: una tela calda, titoli serif e un solo accento. Il design è presentato come una sequenza di app mobile, non come un servizio finito di account o meditazione.
La prima schermata si apre con “Quiet beats noise.” Il testo di supporto presenta la pratica come “Twelve minutes a day” e “a practice that fits in a coffee break”, poi rifiuta esplicitamente “streaks” e “badges”. Questo abbinamento rende leggibile la promessa del prodotto prima di chiedere di creare un account.
Il trattamento visivo rafforza la stessa sobrietà. Una composizione circolare calda guida la prima schermata; una card di pratica a contorno con un cerchio arancione con spunta guida la seconda. Entrambe usano la stessa zona dell'illustrazione sopra titoli serif e brevi testi. Lo spazio generoso dà al messaggio il tempo di farsi leggere, ma lascia meno margine per testi più lunghi o controlli aggiuntivi.
Una prima impressione calma
La prima schermata combina un grande cerchio arancione, un piccolo cerchio chiaro e una base curva bassa con il titolo serif scuro. L'illustrazione non è una visualizzazione di dati: crea un'atmosfera prima che il testo spieghi la routine. Chi adatta questo schema dovrebbe mantenere l'equilibrio tra immagine e testo, oppure accettare una prima schermata più densa.
Casi d'uso del flusso
Questa sequenza è adatta a un'app di mindfulness che vuole spiegare la pratica quotidiana prima di proporre le opzioni di accesso. L'ordine è voluto: l'utente vede prima un'affermazione calma sul beneficio, poi una descrizione dell'adattamento e solo dopo la schermata di configurazione dell'account. Così si riduce il rischio che i controlli di autenticazione siano la prima cosa comunicata dal prodotto.
Il testo affronta anche una vera tensione dell'onboarding: una routine deve sembrare realizzabile senza promettere prestazioni non supportate. “Shorter on busy days, deeper on quiet ones” spiega in modo semplice l'adattamento previsto. Comunica flessibilità, ma il design non stabilisce come cambierebbero le sessioni né se questo comportamento sia implementato.
Il flusso è utile per studiare la gerarchia dei contenuti quanto lo stile dell'interfaccia. Le prime due schermate usano “Skip” in alto a destra e “Continue” in basso, mentre l'ultima cambia l'azione ausiliaria in “Help”. Queste etichette distinguono la progressione dall'assistenza, anche se le schermate non stabiliscono cosa faccia ciascun controllo in esecuzione.
Stabilire la pratica
Parti da “Quiet beats noise.” e da una routine quotidiana della durata di una pausa caffè prima di introdurre le decisioni sull'account.
Spiegare l'adattamento
Usa “Practice that meets you where you are.” per descrivere una promessa flessibile senza aggiungere un pannello di impostazioni.
Offrire scelte di account
Presenta Apple, Google ed email come righe separate dopo aver introdotto il valore del prodotto.
Dalla calma introduzione alla configurazione dell'account
Le tre schermate formano una narrazione compatta con una struttura ripetuta. Le prime due mantengono la stessa area di stato superiore, il controllo “Skip”, la zona dell'illustrazione, il titolo, il testo, gli indicatori di avanzamento e il pulsante “Continue” in basso. La ripetizione rende riconoscibile il passaggio tra gli stati introduttivi, ma fa anche percepire il diverso layout della terza schermata come un cambio di stato significativo.
Nella prima schermata il segno di avanzamento attivo è la pillola arancione a sinistra. Nella seconda si sposta al centro. La terza usa la pillola arancione a destra e sostituisce l'illustrazione e l'azione in basso con tre opzioni di account. I segnali visibili comunicano quindi la posizione nella sequenza, mentre il contenuto che cambia indica che l'onboarding è passato dalla spiegazione all'impegno.
La schermata finale inizia con “Make a place for it.” e la riga “Save your sessions across devices. We don’t email, we don’t share.” Presenta poi tre ampie righe con bordo: “Continue with Apple” “Continue with Google” e “Continue with email”. Il trattamento coerente delle righe favorisce il confronto, mentre le icone circolari distinte offrono un rapido indizio visivo per ciascun provider.
In basso, la dichiarazione di consenso mette “Terms” e “Privacy Policy” nel colore d'accento. La fonte indica quei link come segnaposto, quindi la schermata mostra la collocazione prevista del testo legale e non una navigazione completata. Il design mostra anche il compromesso di collocare il testo legale sotto le opzioni: resta fuori dall'area decisionale principale, ma è separato visivamente dai controlli che qualifica.
| Schermata | Struttura visiva | Avanzamento e controlli | Limite di implementazione |
|---|---|---|---|
| Benvenuto | Illustrazione circolare calda e testo Quiet beats noise. | Prima pillola di avanzamento; etichette Skip e Continue | Nessun gestore di clic né transizione di schermata nella fonte |
| Introduzione alla pratica | Card di pratica a contorno e spunta bianca in un cerchio arancione | Pillola di avanzamento centrale; etichette Skip e Continue | Il testo sulle sessioni adattive è una promessa raffigurata, non una regola implementata |
| Scelte di account | Righe separate per Apple, Google ed email più testo di consenso | Terza pillola di avanzamento; etichetta Help | Nessun gestore di autenticazione; le ancore Terms e Privacy non hanno destinazioni |
Struttura ripetuta, stato cambiato
La prima e la seconda schermata sono stati quasi paralleli, ma con illustrazioni diverse. La prima usa una composizione circolare calda; la seconda un pannello con bordo, brevi linee, un controllo arancione e un segno di spunta. Questo conserva la stessa densità visiva dando a ogni promessa il proprio simbolo. La terza schermata elimina del tutto il livello illustrativo, facendo spazio alle scelte di autenticazione e al testo di consenso.
Design visibile e limiti delle funzionalità
Le schermate stabiliscono un concept visivo di onboarding con tre stati distinti su smartphone, testi specifici, controlli, etichette dei provider, segni di avanzamento e collocazione del testo legale. Non stabiliscono account autenticati, archiviazione delle sessioni tra dispositivi, logica di sessione adattiva, navigazione completata verso Terms o Privacy, né un flusso di onboarding funzionante. Le frasi sul salvataggio delle sessioni e sulla mancata condivisione di informazioni sono testi di prodotto mostrati nel design, non comportamenti verificati del servizio.
Una nuova implementazione richiederebbe autenticazione, archiviazione delle sessioni, pratica adattiva e comportamento del consenso propri. In questa fonte, Skip e Help sono span di testo, Continue e le righe degli account sono div stilizzati, e Terms e Privacy Policy sono ancore senza destinazioni. La sequenza raffigura queste decisioni senza renderle operative.
Cosa insegna l'esempio
La lezione più trasferibile è il rapporto tra ordine dei messaggi e impegno: spiega la pratica, spiega la flessibilità prevista, poi chiedi un account. I testi, le illustrazioni e il linguaggio sulla privacy specifici di Lull appartengono a questo esempio. Un nuovo prodotto avrebbe bisogno di affermazioni, regole di adattamento e destinazioni di consenso proprie, anziché copiarli come fatti stabiliti.
Come creare il design di un'app di onboarding mindfulness in OpenDesign
Definisci la narrazione in tre schermate
Crea tre stati mobile con un'area di stato e una progressione coerenti: introduci la pratica, spiega come si adatta ai giorni che cambiano, poi presenta le opzioni di account. Mantieni l'azione principale nella stessa posizione nei primi due stati, prima di lasciare che l'ultimo stato cambi layout.
Scrivi i testi concreti delle schermate
Rifinisci testi brevi e specifici per i tre ruoli mostrati in questo artefatto: una promessa iniziale pacata, la spiegazione della pratica adattiva e un'indicazione per la configurazione dell'account. Distingui le affermazioni di prodotto visibili dai comportamenti ancora da implementare, in particolare per salvataggio delle sessioni, privacy e adattamento.
Prompt suggeritoCrea il design di un'app di onboarding mindfulness in tre schermate per Lull: la schermata 1 usa un'illustrazione circolare dai toni caldi, il titolo serif “Quiet beats noise.”, un testo conciso sulla pratica quotidiana, l'avanzamento al passo uno e Continue; la schermata 2 usa una semplice illustrazione della pratica a contorno, “Practice that meets you where you are.”, un testo sulle sessioni adattive, l'avanzamento al passo due e Continue; la schermata 3 usa “Make a place for it.”, tre righe di account separate per Apple, Google e email, il testo di consenso con Terms e Privacy Policy e l'avanzamento al passo tre. Mostra solo gli stati visivi; non dichiarare autenticazione, archiviazione, logica adattiva o link funzionanti.
Verifica il cambio di stato
Confronta le prime due schermate guidate dall'illustrazione con la terza, guidata dall'account. Verifica che la pillola di avanzamento si sposti da sinistra a centro a destra, che le etichette “Skip” e “Help” restino distinte e che le righe degli account e il testo di consenso abbiano spazio sufficiente senza indebolire la calma degli spazi visivi.
Esporta e ottieni un link di condivisione
Esporta il design completato, quindi usa Condividi in OpenDesign per ottenere un link di condivisione. Apri il link in una finestra del browser separata e verifica che la versione prevista e le sue risorse siano disponibili prima di inviarlo.
Design di un’app di missioni quotidiane
Il design dell'app di missioni quotidiane trasforma gli obiettivi di ogni giorno in un percorso mobile a tre schermate, con XP di esempio, card per categoria e dettaglio delle attività.
App mobile
Design di app per collezioni di scoperte
Abyssal Atlas collega una collezione di esemplari a una coda di immersioni. Scopri come record bloccati, due righe di filtri e conteggi di avanzamento indicano cosa scoprire in seguito.
App mobile
Design di app per collezioni marine
Abyssal Log collega una collezione di esemplari marini alle missioni di immersione. Ogni scheda sconosciuta spiega l’attività e i progressi ancora necessari per svelarla.
App mobile
Wireframe app mobile per il checkout di un marketplace
Un wireframe mobile in quattro schermate mappa onboarding, navigazione, dettaglio prodotto e conferma in un percorso di acquisto lineare.
App mobile