10 interfaces utilisateur d'intégration CSS et JavaScript gratuites

L'objectif de l'onboarding est de familiariser les nouveaux utilisateurs avec une interface. Cela vient dans de nombreux styles différents, et il n'y a pas de bonne façon de le faire. Mais si vous étudiez comment les sites et les applications s'intègrent, vous pouvez trouver des idées pour votre propre travail.

Et avec ces interfaces utilisateur d'intégration CSS et JavaScript gratuites, vous aurez de nombreuses idées qui offrent à la fois de l'inspiration et des extraits de code pour vous aider à démarrer.

1. Diapositives de carrousel

L'intégration du carrousel rotatif est extrêmement populaire sur les mobiles où l'espace d'écran est limité. Mais cet effet peut tout aussi bien fonctionner sur les sites Web où vous avez besoin de faire passer rapidement des informations.

Découvrez cette démo de diapositives de carrousel créée par Nick Wanninger pour voir ce que je veux dire.

Il s'agit d'un exemple d'intégration totalement gratuit créé à l'aide de Flickity et d'un code CSS de base. Cela fonctionne à la fois pour les mobiles et les ordinateurs de bureau, c'est donc un excellent choix si vous avez besoin d'une solution réactive.

2. Réagissez quotidiennement à l'interface utilisateur

En tant que conception de pratique simple, Jack Oliver a créé ce stylo React Daily UI à partir de zéro. Et c'est l'une des expériences d'intégration les plus élégantes que j'ai vues.

L'interface comporte du texte factice car il n'est pas destiné à une utilisation pratique dans le monde réel, mais il est très propre et devrait laisser suffisamment de place pour contenir à peu près n'importe quoi dans la page.

Une chose à noter est que je ne pouvais pas faire fonctionner cela sur mobile avec des balayages, et il semble ne reconnaître que les tapotements pour le moment. Mais pour une solution en un clic, c'est vraiment sympa.

3. Écrans d'accueil

Non seulement ce stylo dispose d'une interface incroyable pour l'intégration, mais il a également des animations personnalisées pour démarrer.

Le développeur Jeff Ham connaît bien une interface et a créé cet écran d'intégration immaculé. Il s'appuie sur JavaScript pour créer les animations "écran suivant" et les événements de basculement pour les clics/tapotements de l'utilisateur.

Un bel ajout à cette interface est le bouton suivant bleu en bas. Cela permet à l'utilisateur d'avancer écran par écran avec un grand CTA bien en vue. Je parierais que cela augmenterait le nombre total de personnes qui se convertissent et améliorerait la qualité de l'expérience globale.

4. Boardal

Cet extrait de Boardal est plutôt unique car ce n'est pas quelque chose que vous voyez souvent.

Il utilise une fenêtre modale avec un contenu d'intégration pour aider les utilisateurs à parcourir le site plus rapidement. C'est une conception personnalisée créée uniquement pour les tests, et c'est l'un des moyens les plus cool d'améliorer le processus d'intégration.

Notez que cela fonctionne mieux sur un bureau car il repose sur l'effet modal (pas idéal pour les petits écrans).

Donc, si vous aimez le design et que vous voulez un moyen simple d'améliorer l'intégration de votre site, alors essayez Boardal.

5. Visite guidée

En règle générale, l'intégration est considérée comme un processus étape par étape présentant de nouvelles pages et fonctionnalités à l'utilisateur. Mais je trouve personnellement les visites guidées beaucoup plus utiles.

Si vous voulez un simple extrait pour commencer, cette visite guidée est parfaite. Il s'appuie sur les composants Bootstrap et utilise de petites info-bulles avec des boutons "suivant" pour faire avancer la visite.

L'utilisateur peut fermer la visite à tout moment s'il est ennuyé ou s'il ne s'en soucie plus. Cela en fait une visite facultative, donc moins de personnes seront ennuyées par le processus.

Dans l'ensemble, c'est ma méthode d'intégration préférée, même si cela demande un peu plus d'efforts pour la configurer. Mais cette démo vous donne au moins un modèle pour commencer.

6. Visite du matériel

Une autre méthode de visite est la visite à progression automatique qui met en évidence des fonctionnalités spécifiques.

Le meilleur exemple que j'ai trouvé est ce stylo créé par Gregor Adams. Il est basé sur les directives matérielles et utilise des cercles en surbrillance pour présenter des parties de la page. Cette technique est parfaite si vous avez des interfaces très complexes avec beaucoup de fonctionnalités.

En assombrissant toute la page, vous mettez l'accent sur une zone à la fois. Cela attire immédiatement l'attention de l'utilisateur, ce qui est exactement ce que vous devez faire pour une bonne intégration.

Je sais que cela ne conviendra pas à tous les sites Web, mais si vous aimez l'interface, je vous recommande fortement de l'essayer.

7. Intégration de l'application Android

Les applications mobiles ont généralement plus besoin du processus d'intégration que les sites Web. Il est courant que les concepteurs d'interfaces utilisateur mobiles intègrent des fonctionnalités dans un écran plus petit, ce qui peut submerger les utilisateurs sans introduction guidée.

Ce guide d'intégration de Mat Swainson est un petit exemple éloquent de ce qui peut être fait pour les applications pour smartphone.

Il est basé sur un modèle Android, mais ce n'est certainement pas le seul style que vous pouvez utiliser. J'aime la façon dont il prend en charge le balayage natif, qui fonctionne même dans les navigateurs Web mobiles.

De plus, le petit indicateur de progression en haut est une belle touche. Certainement une page d'intégration simple mais qui vaut la peine d'être sauvegardée si vous cherchez de l'inspiration.

8. Introduction ionique

Il y a beaucoup de choses que vous pouvez faire avec Ionic et ce stylo en est un excellent exemple.

Le développeur Clifford Fajardo a créé une intro Ionic intégrée fonctionnant uniquement sur le framework JavaScript. Il prend en charge toutes les interactions mobiles telles que les tapotements, les balayages et prend même en charge les options de double tapotement si vous souhaitez cette fonctionnalité.

Ionic est principalement utilisé pour le développement mobile, et il fonctionne également très bien pour les sites Web mobiles. Je ne peux pas dire que cet écran d'accueil conviendra à tous les sites Web, mais c'est un choix solide si plus de 50 % de votre audience provient du mobile.

9. Forme verticale

Avec une légère animation d'interface utilisateur en gelée et un design très simple, cette forme verticale est un régal unique.

Il utilise pleinement les propriétés CSS flex ainsi que des animations JavaScript et CSS personnalisées. Certes, je trouve le contenu un peu mince, il n'offre donc pas grand-chose en termes d'intégration détaillée.

Cependant, vous pouvez prendre cette interface et vous l'approprier sans trop d'efforts, ce qui laisse beaucoup de place à l'imagination.

10. Info-bulle de la visite guidée

Voici un autre exemple de visite guidée, mais celui-ci utilise une boîte d'info-bulle complète fixée sur la page.

Si vous consultez l'extrait de code, vous verrez qu'il n'est intégré à aucune interface spécifique. Il s'agit plutôt d'une info-bulle flottante avec des conseils et des étapes de progression pour l'utilisateur.

La combinaison de cette interface utilisateur avec un script de positionnement d'info-bulle fixe vous permettrait de déplacer facilement cette chose dans votre interface avec des info-bulles pointant vers toutes vos fonctionnalités principales. Ce modèle nécessitera une réelle personnalisation pour le faire fonctionner, mais pour une interface utilisateur simple, c'est magnifique.