10 interfacce utente di onboarding CSS e JavaScript gratuite

L'obiettivo dell'onboarding è far familiarizzare i nuovi utenti con un'interfaccia. Questo è disponibile in molti stili diversi e non esiste un modo giusto per farlo. Ma se studi come si integrano siti e app, puoi raccogliere idee per il tuo lavoro.

E con queste UI di onboarding CSS e JavaScript gratuite, avrai molte idee che offrono sia ispirazione che frammenti di codice per aiutarti a iniziare.

1. Diapositive a carosello

L'onboarding del carosello rotante è estremamente popolare sui dispositivi mobili dove lo spazio sullo schermo è limitato. Ma questo effetto può funzionare altrettanto bene sui siti Web in cui è necessario ottenere informazioni rapidamente.

Dai un'occhiata a questa demo di diapositive a carosello creata da Nick Wanninger per capire cosa intendo.

È un esempio di onboarding totalmente gratuito creato utilizzando Flickity e del codice CSS di base. Funziona sia per dispositivi mobili che desktop, quindi è una scelta eccellente se hai bisogno di una soluzione reattiva.

2. Reagisci all'interfaccia utente quotidiana

Come semplice design pratico, Jack Oliver ha creato da zero questa penna React Daily UI. Ed è una delle esperienze di onboarding più eleganti che abbia mai visto.

L'interfaccia presenta testo fittizio poiché non è pensata per un uso pratico e nel mondo reale, ma è molto pulita e dovrebbe lasciare abbastanza spazio per adattarsi praticamente a qualsiasi cosa nella pagina.

Una cosa da notare è che non sono riuscito a farlo funzionare sui dispositivi mobili con i swipe e al momento sembra riconoscere solo i tocchi. Ma per una soluzione di solo clic, è davvero bello.

3. Schermate iniziali

Questa penna non solo presenta un'incredibile interfaccia per l'onboarding, ma ha anche animazioni personalizzate per l'avvio.

Lo sviluppatore Jeff Ham conosce bene un'interfaccia e ha creato questa schermata di onboarding immacolata. Si basa su JavaScript per creare le animazioni della "schermata successiva" e gli eventi di attivazione/disattivazione per i clic/tocchi dell'utente.

Una bella aggiunta a questa interfaccia è il pulsante blu successivo in basso. Ciò consente all'utente di avanzare schermo per schermo con un grande CTA in bella vista. Scommetto che questo aumenterebbe il numero totale di persone che si convertono e migliorerebbe la qualità dell'esperienza complessiva.

4. Consiglio

Questo frammento di Boardal è piuttosto unico poiché non è qualcosa che vedi spesso.

Utilizza una finestra modale con contenuto di onboarding per aiutare gli utenti a navigare più velocemente nel sito. È un design personalizzato creato esclusivamente per i test ed è uno dei modi più interessanti per migliorare il processo di onboarding.

Nota che funziona meglio su un desktop perché si basa sull'effetto modale (non ideale per schermi più piccoli).

Quindi, se ti piace il design e desideri un modo semplice per migliorare l'onboarding per il tuo sito, dai una possibilità a Boardal.

5. Visita guidata

In genere l'onboarding è considerato un processo passo-passo che introduce nuove pagine e funzionalità per l'utente. Ma personalmente trovo le visite guidate molto più utili.

Se vuoi iniziare con un semplice frammento, allora questo tour guidato è perfetto. Si basa sui componenti Bootstrap e utilizza piccoli suggerimenti con pulsanti "successivo" per far avanzare il tour.

L'utente può chiudere il tour in qualsiasi momento nel caso si infastidisca o non gli interessi più. Questo lo rende un tour facoltativo, quindi meno persone saranno infastidite dal processo.

Nel complesso, questo è il mio metodo di onboarding preferito, anche se richiede un po' più di sforzo per configurarlo. Ma questa demo almeno ti offre un modello con cui iniziare.

6. Tour materiale

Un metodo di tour alternativo è il tour con avanzamento automatico che mette in evidenza caratteristiche specifiche.

Il miglior esempio che ho trovato è questa penna creata da Gregor Adams. Si basa sulle linee guida del materiale e utilizza cerchi evidenziati per mostrare parti della pagina. Questa tecnica è perfetta se hai interfacce molto complesse con molte funzionalità.

Oscurando l'intera pagina, metti a fuoco un'area alla volta. Questo attira immediatamente l'attenzione dell'utente, che è esattamente ciò che devi fare per un buon onboarding.

So che questo non si adatta bene a tutti i siti Web, ma se ti piace l'interfaccia, ti consiglio vivamente di provarla.

7. Integrazione dell'app Android

Le app mobili in genere richiedono il processo di onboarding più dei siti Web. È comune per i progettisti dell'interfaccia utente mobile stipare le funzionalità nello schermo più piccolo, che può sopraffare gli utenti senza un'introduzione guidata.

Questa guida all'onboarding di Mat Swainson è un piccolo ma eloquente esempio di cosa si può fare per le app per smartphone.

È basato su un modello Android, ma non è certamente l'unico stile che puoi usare. Mi piace il modo in cui supporta lo swiping nativo, che funziona anche nei browser Web mobili.

Inoltre, il piccolo indicatore di avanzamento in alto è un bel tocco. Sicuramente una semplice pagina di onboarding, ma vale la pena salvarla se stai cercando ispirazione.

8. Introduzione ionica

C'è molto che puoi fare con Ionic e questa penna è un ottimo esempio.

Lo sviluppatore Clifford Fajardo ha creato un'introduzione di Ionic integrata in esecuzione esclusivamente sul framework JavaScript. Supporta tutte le interazioni mobili come tocchi, scorrimenti e supporta persino le opzioni per i doppi tocchi se desideri quella funzione.

Ionic è utilizzato principalmente per lo sviluppo mobile e funziona molto bene anche per i siti Web mobili. Non posso dire che questa schermata di onboarding si adatti a tutti i siti Web, ma è una scelta solida se oltre il 50% del tuo pubblico proviene da dispositivi mobili.

9. Forma verticale

Con una leggera animazione dell'interfaccia utente in gelatina e un design davvero semplice, questa forma verticale è un piacere unico.

Utilizza le proprietà CSS flex in pieno effetto insieme ad alcune animazioni JavaScript e CSS personalizzate. Certo, trovo il contenuto un po' scarso, quindi non offre molto in termini di onboarding dettagliato.

Tuttavia, potresti prendere questa interfaccia e renderla davvero tua senza troppi sforzi, quindi lascia molto all'immaginazione.

10. Descrizione comando Tour guidato

Ecco un altro esempio di visita guidata, ma questo utilizza una casella di suggerimenti completa fissata sulla pagina.

Se controlli lo snippet vedrai che non è integrato in un'interfaccia specifica. Piuttosto è solo un suggerimento mobile con consigli e passaggi di avanzamento per l'utente.

La combinazione di questa interfaccia utente con alcuni script di posizionamento delle descrizioni comandi fissi ti permetterebbe di spostare facilmente questa cosa nell'interfaccia con le descrizioni comandi che puntano verso tutte le tue funzionalità principali. Questo modello richiederà una vera personalizzazione per farlo funzionare, ma per un'interfaccia utente semplice è bellissimo.