A continuación se expone la forma como la unidad de IDI (Investigación, Desarrollo e Innovación) de IAS Software implementa herramientas para algunos de sus proyectos de innovación escritos en React Natitve.
¿Qué es?
Onboarding es un recorrido guiado que instruye a los usuarios a través de su aplicación por medio de paso a paso, modal en pantalla, o información sobre herramientas. Estos elementos normalmente se muestran a todos los nuevos usuarios durante su primera visita. Consiste en pantallas introductorias de onboarding (inducción) con uno o varios pasos, explicando las herramientas con las que se relacionará.
¿Buscas que tus usuarios saquen el mayor provecho de tu aplicación? Esto es posible y una de las mejores estrategias para lograrlo es atraparlo de forma dinámica y gráfica mientras la interactúa. Una vez se encuentra en ella, se debería pensar en una manera de resaltar las características que logren atraparlo y llamar su atención; Pero ¿Qué mejor manera de presentar una aplicación, que brindar una bienvenida al usuario, incorporándolo, guiándolo y resaltando el funcionamiento y las cualidades de la misma?
¿Por qué lo implementamos?
Piensa el caso de llegar como empleado nuevo a una empresa y solo se te asignen roles y un puesto de trabajo y no se piense en realizar una inducción. A pesar de que con el tiempo se van presentando procesos de adaptación, esto implica conocer fases, áreas y beneficios; Trabajo que costará tiempo y en algunos casos se pueden presentar dudas por desconocimiento. Lo mismo sucede con una aplicación que contiene múltiples funciones; el usuario logrará conocerlas en su totalidad en algún momento, para lo cual le ha tomado algún tiempo y posiblemente no haya podido implementar una de las mismas por desconocimiento, y en el peor de los casos presente su abandono a esta.
¿Cómo lo implementamos?
Principalmente es encontrar la fase o situación apropiada en la cual se le presentará la inducción al usuario; ya sea al inicio de la aplicación, cuando la descarga por primera vez o como en nuestro caso, luego de un registro (ver opción 1 de la siguiente imagen). Posteriormente se debe pensar en que sería agobiante que el usuario tenga que ver la inducción cada que ejecuta la aplicación, por lo que se deben buscar las estrategias para lograr atraparlo una sola vez durante su interacción con la aplicación.
A la vez, también se debe tener en cuenta las imágenes que se desean implementar (Lo recomendable es que sean gráficamente llamativas, de manera que el usuario quiera ver una por una hasta finalizar la inducción o presentación). Una vez listo esto, implementamos el paquete react-native-onboarding-swiper, (Esta es solo una opción, también se podrían implementar muchas otras).
Instalación
En este caso se implementa la librería React Native Onboarding Swiper ya que es la que mejor se adapta a las necesidades. (Existen tambíen varias opciones similares.)
Para la instalación implementamos los siguientes comandos:
Se crean las importaciones
Definimos las acciones de cada elemento como: siguiente, omitir y finalizar en este caso.
Luego de esto, procedemos a la creación de las páginas con sus propiedades (Color de fondo, imagen, título y subtítulo).
Para múltiples presentaciones separamos la matriz así:
Lo siguiente será ejecutar la aplicación, la cual se debería ver así:
¿Cómo controlar su ejecución?
Al ser una inducción, se debe pensar en su única ejecución por usuario; es decir, que cuando el usuario abra la aplicación por primera vez, esta le dé la bienvenida, le enseñe su flujo y él interactúe con ella. Luego de esto, el usuario tiene acceso al total de la aplicación y no vuelve a realizar el proceso guiado de inducción o bienvenida.
Para esto existen diversas soluciones que ayudan a controlar estos procedimientos, como: librerías, control con bases de datos y control por flujos (como se implementa en este caso).
Algunos ejemplos para esto son:
Librería: React Native AsyncStorage :
Esta ayuda a almacenar datos y los hace accesibles sin conexión; es decir que, se puede controlar el uso de Onboarding entre usuarios que navegan por primera vez y antiguos.
Bases de datos: Se crean tablas que no interfieran con el normal funcionamiento de la aplicación, controlando los usuarios con valores de verdad que permite saber a cual de ellos mostrar su inducción.
Otras opciones
Una de las principales ventajas de utilizar React Native para desarrollar aplicaciones es el acceso a un océano de librerías y plugins; Estas no defraudan a la hora de crear una inducción o introducción a las aplicaciones. Onboarding swiper es la librería elegida para realizar dicha inducción, pero ahora mismo existen muchas otras que nos ofrecen el mismo beneficio con carecteristicas similares o diferentes en cuanto a desarrollo de interfaz de usuario; entre ellas se destacan las siguientes:
React-Native-Onboarding-Animate
Conclusiones
Realizar inducciones guiadas, dinámicas y paso a paso, ayuda a los
usuarios a relacionarse y mantenerse en el tiempo con la aplicación,
aprovechándola y sacando así el mayor provecho de la misma. Como hemos
podido comprobar, Onboarding en React Native es una de las mejores
herramientas en cuanto experiencia al cliente, guía sobre uso o
información relevante de nuestro aplicativo; Además de contar con buena
documentación y diferentes librerías en las que se puede apoyar.