10 interfaces de usuario de incorporación gratuitas de CSS y JavaScript

El objetivo de la incorporación es que los nuevos usuarios se familiaricen con una interfaz. Esto viene en muchos estilos diferentes, y no hay una forma correcta de hacerlo. Pero si estudia cómo se incorporan los sitios y las aplicaciones, puede obtener ideas para su propio trabajo.

Y con estas interfaces de usuario integradas gratuitas de CSS y JavaScript, tendrá muchas ideas que le ofrecerán inspiración y fragmentos de código para ayudarlo a comenzar.

1. Diapositivas de carrusel

La incorporación de carrusel giratorio es muy popular en los dispositivos móviles, donde el espacio de la pantalla es limitado. Pero este efecto puede funcionar igual de bien en sitios web en los que necesita transmitir información rápidamente.

Echa un vistazo a esta demostración de carrusel de diapositivas creada por Nick Wanninger para ver a qué me refiero.

Es un ejemplo de incorporación totalmente gratuito creado con Flickity y un código CSS básico. Esto funciona tanto para dispositivos móviles como para computadoras de escritorio, por lo que es una excelente opción si necesita una solución receptiva.

2. IU de reacción diaria

Como un diseño de práctica simple, Jack Oliver creó este bolígrafo React Daily UI desde cero. Y es una de las experiencias de incorporación más elegantes que he visto.

La interfaz presenta texto ficticio ya que no está diseñada para un uso práctico en el mundo real, pero es muy limpia y debería dejar suficiente espacio para que quepa casi cualquier cosa en la página.

Una cosa a tener en cuenta es que no pude hacer que esto funcionara en el móvil con deslizamientos, y parece que solo reconoce los toques en este momento. Pero para una solución de solo clic, es realmente agradable.

3. Pantallas de incorporación

Este bolígrafo no solo presenta una interfaz increíble para la incorporación, sino que también tiene animaciones personalizadas para arrancar.

El desarrollador Jeff Ham conoce bien una interfaz y creó esta pantalla de incorporación inmaculada. Se basa en JavaScript para crear las animaciones de "pantalla siguiente" y los eventos de alternancia para los clics/toques del usuario.

Una buena adición a esta interfaz es el siguiente botón azul en la parte inferior. Esto le permite al usuario avanzar pantalla por pantalla con un gran CTA a la vista. Apuesto a que esto aumentaría el número total de personas que se convierten y mejoraría la calidad de la experiencia en general.

4. Tablero

Este fragmento de Boardal es bastante único, ya que no es algo que se vea con frecuencia.

Utiliza una ventana modal con contenido incorporado para ayudar a los usuarios a navegar por el sitio más rápido. Es un diseño personalizado creado únicamente para realizar pruebas y es una de las mejores formas de mejorar el proceso de incorporación.

Tenga en cuenta que esto funciona mejor en un escritorio porque se basa en el efecto modal (no es ideal para pantallas más pequeñas).

Entonces, si le gusta el diseño y desea una manera fácil de mejorar la incorporación de su sitio, entonces pruebe Boardal.

5. Visita guiada

Por lo general, la incorporación se considera un proceso paso a paso que presenta nuevas páginas y funciones al usuario. Pero personalmente encuentro que las visitas guiadas son mucho más útiles.

Si desea comenzar con un fragmento simple, esta visita guiada es perfecta. Se basa en componentes de Bootstrap y utiliza pequeños consejos sobre herramientas con botones "siguiente" para avanzar en el recorrido.

El usuario puede cerrar el recorrido en cualquier momento si se molesta o ya no le importa. Esto lo convierte en un recorrido opcional, por lo que menos personas se molestarán con el proceso.

En general, este es mi método de incorporación preferido, aunque se necesita un poco más de esfuerzo para configurarlo. Pero esta demostración al menos le brinda una plantilla para comenzar.

6. Recorrido de materiales

Un método de recorrido alternativo es el recorrido de avance automático que resalta características específicas.

El mejor ejemplo que encontré es este bolígrafo creado por Gregor Adams. Se basa en las pautas del material y utiliza círculos resaltados para mostrar partes de la página. Esta técnica es perfecta si tiene interfaces muy complejas con muchas características.

Al oscurecer toda la página, enfoca un área a la vez. Esto capta la atención del usuario de inmediato, que es exactamente lo que debe hacer para una buena incorporación.

Sé que esto no encajará bien en todos los sitios web, pero si te gusta la interfaz, te recomiendo que la pruebes.

7. Incorporación de aplicaciones de Android

Las aplicaciones móviles suelen necesitar el proceso de incorporación más que los sitios web. Es común que los diseñadores de UI móviles incluyan funciones en la pantalla más pequeña, lo que puede abrumar a los usuarios sin una introducción guiada.

Esta guía de incorporación de Mat Swainson es un ejemplo pequeño pero elocuente de lo que se puede hacer con las aplicaciones para teléfonos inteligentes.

Está basado en un modelo de Android, pero ciertamente no es el único estilo que puedes usar. Me gusta cómo admite el deslizamiento nativo, que funciona incluso en navegadores web móviles.

Además, el pequeño indicador de progreso en la parte superior es un buen toque. Definitivamente una página de incorporación simple pero vale la pena guardarla si está buscando inspiración.

8. Introducción iónica

Hay muchas cosas que puede hacer con Ionic y este bolígrafo es un gran ejemplo.

El desarrollador Clifford Fajardo creó una introducción de Ionic integrada que se ejecuta únicamente en el marco de JavaScript. Admite todas las interacciones móviles como toques, deslizamientos e incluso admite opciones para toques dobles si desea esa función.

Ionic se utiliza principalmente para el desarrollo móvil y también funciona muy bien para sitios web móviles. No puedo decir que esta pantalla de incorporación se adapte a todos los sitios web, pero es una opción sólida si más del 50% de su audiencia proviene de dispositivos móviles.

9. Forma vertical

Con una ligera animación de interfaz de usuario gelatinosa y un diseño realmente simple, esta forma vertical es un regalo único.

Utiliza las propiedades flexibles de CSS con pleno efecto junto con algunas animaciones personalizadas de JavaScript y CSS. De acuerdo, el contenido me parece un poco escaso, por lo que no ofrece mucho en cuanto a la incorporación detallada.

Sin embargo, podrías tomar esta interfaz y realmente hacerla tuya sin mucho esfuerzo, por lo que deja mucho a la imaginación.

10. Información sobre herramientas de la visita guiada

Aquí hay un ejemplo más de visita guiada, pero este usa un cuadro de información sobre herramientas completo fijo en la página.

Si revisa el fragmento, verá que no está integrado en ninguna interfaz específica. Más bien, es solo una información sobre herramientas flotante con consejos y pasos de progreso para el usuario.

La combinación de esta interfaz de usuario con un script de posicionamiento de información sobre herramientas fijo le permitiría mover fácilmente esta cosa alrededor de su interfaz con información sobre herramientas que apunta a todas sus funciones principales. Esta plantilla requerirá una personalización real para que funcione, pero para una interfaz de usuario simple, es hermosa.