¿Cómo diseñar un software para aprendizajes desde el móvil?
El aprendizaje móvil es una tendencia muy popular y efectiva en el mundo del aprendizaje en línea. Debemos tener en cuenta el formato y diseño para el aprendizaje desde el móvil, es muy importante considerar muchos elementos que son necesarios para que el usuario tenga una experiencia única con nuestro software construido.
Estas no son las únicas estrategias a considerar para el diseño de tu aplicación, como dice la famosa frase, "cada cabeza es un mundo", y según mi punto de vista, estas solo son las más importantes y las que resultan con mayores resultados para el aprendizaje desde móvil:
1- Incluir solo la información que el usuario debe saber o el atajo para el mostrar contenido completo
Todos conocemos los límites de procesamiento que posee nuestro cerebro, y aquellos cursos que presentan extensos contenidos pueden abrumar a los estudiantes, y como resultado, posiblemente hará que se vayan del sistema elearning. En los equipos con pantallas grandes, este contenido podemos recorrerlo de forma rápida, a diferencia de los dispositivos con pequeñas pantallas, los diferentes elementos el documento web caen o se sitúan hacia abajo hasta que finalice de cargar el último elemento. De la misma forma sucede con las aplicaciones construidas para sistemas operativos Android y iOS.
¿Cómo presentar mucha información al estudiante?
En artículos anteriores estuvimos explicando la importancia de construir aplicaciones modulares, donde todo el contenido es separado hasta mostrar menos contenido por archivo.
Desde hace unos años los desarrolladores construyen los diferentes módulos del sistema con la famosa paginación, sin embargo, con las diferentes librerías disponibles para la comunicación con los datos del servidor y base de datos de forma sincrónica, tenemos otras formas de implementar el diseño modular, para que nuestros usuarios se sientan más cómodos al utilizar estos módulos desde sus celulares.
2- Agilice la experiencia móvil para la velocidad
El aprendizaje móvil se distingue considerablemente de las computadoras de escritorio y las computadoras portátiles. Los aprendices y expertos esperan que la respuesta sea inmediata cuando utilizan las aplicaciones desde sus teléfonos y que las peticiones al servidor les sean notificadas. Ejemplo: Cargando..., Por favor espere..., ícono png, etc.
En este segundo punto podemos incluir la modularidad del software para cargar menos contenido y responder a las solicitudes de forma más rápida. Además, el tiempo de las solicitudes puede verse afectado por lentitud en la conexión a Internet y se intensifica cuando el acceso del usuario tiene como procedencia el celular.
Es muy importante controlar el tamaño de los archivos y el dinamismo al presentarlos. Recortar los gráficos y comprimir el contenido también es una buena práctica para reducir el tamaño de la carga. Si las solicitudes traerán imágenes muy grandes es recomendable programar mapas de imágenes. Es muy común cargar dos imágenes por cada imagen cargada, una con un tamaño miniatura y la otra es la imagen real que será cargada cuando el usuario la seleccione.
3- Adaptarse al medio
El medio más utilizado por el usuario es el celular, y estos equipos tienen características que otros equipos no tienen, y a su vez, desfavorece el aprendizaje del alumno. Las tareas realizadas por el estudiante son efectuadas al conducir, al comer o realizando cualquier otra actividad fuera de la clase.
La distracción en los móviles también es mucho más frecuente que en las computadoras, reduciendo considerablemente el tiempo empleado al aprendizaje. Esta es otra razón para tener en cuenta la cantidad del contenido a mostrar y su velocidad de carga.
4- Diseño estratégico
Un estudio publicado por Search Engine Watch demuestra gran diferencia entre los dispositivos móviles y los computadores cuando se trata del tiempo empleado al aprendizaje. El estudio informa que el usuario de escritorio dura hasta tres veces más que los usuarios conectados desde un móvil. Añadimos en este mismo sentido que los usuarios de escritorio, en general, ven más páginas.
Los usuarios móviles prefieren las funciones más simples, debido a varios factores, principalmente el pequeño tamaño de estas pantallas. El sistema debe trabajar de forma fluida y dinámica, presentando una interfaz limpia y carga inmediata de los datos solicitados por el cliente.
Todos estos puntos son importantes para lograr implementar el diseño ideal para nuestro usuario, sin embargo, no podremos tener un diseño con buenos resultados si perdemos al usuario de la ubicación de las respuestas enviadas a las vistas de lugar de forma síncrona.
Ejemplo: El cliente solicita el balance de su deuda. Este dato o respuesta es solicitado y entregado sin recargar el navegador, luego termina ubicado en un lugar fuera de la pantalla que puede visualizar el usuario del documento web.
El usuario en estos momentos se está preguntando: ¿Qué pasa con la respuesta de mi solicitud?
Cuando enviamos desde el servidor la solicitud extraída de nuestra base de datos al documento web, es importante mostrar la respuesta en la pantalla del usuario o llevarlo hacia el contenedor identificado como el que recibe el mensaje.
Una de las formas que podemos implementar es la siguiente:
A) Identificador para nuestro contenedor (html):
<div id="resultado"></div>
B) Recibir la solicitud (jQuery, Ajax):
$("#resultado").html(data);
C) Luego redireccionar al contenedor con el identificador "resultado" (Javascript):
window.location.href = "#resultado";
En caso de que no estés utilizando un lenguaje del lado del cliente, puedes agregar el código anterior en la vista a cargar de la siguiente manera:
<div id="resultado">
<?php echo isset($data) ? $data : "No hay datos aquí."
</div>
<script>
window.location.href = "#resultado";
</script>
5- Probar aplicación antes del lanzamiento
Es importante probar en varios dispositivos para garantizar el correcto funcionamiento. Personalmente me gusta evaluar la plataforma con navegadores antiguos, así aumentamos el alcance a la mayor parte de los usuarios. Existen muchos programas para este tipo de análisis, sin embargo, prefiero instalar esas antiguas versiones.
Luego de que todo funcione como esperamos, podemos proseguir con las pruebas con distintos usuarios, nunca es recomendable utilizar uno solo. Con este punto debemos tener cuidado, busca usuarios de confianza para mantener tu nueva marca de forma anónima. El rango de estos usuarios no tiene muchos límites, ya que puedes incluir desde expertos en tecnología del software hasta los más novatos.
En este mismo aspecto, también es muy importante registrar todas nuestras pruebas y los resultados. Guardar esta información te ayudará a identificar los fallos repetidos y no tendrás que dedicar mucho tiempo a la búsqueda de las soluciones.
6) El diseño responsivo
Actualmente hay muchas propiedades de CSS3 que puedes aplicar, puedes ajustar las pantallas de forma responsiva con el uso de Media Queries para el desarrollo web responsivo. Aunque últimamente he reducido este tipo de implementación de estilos con el uso de Flexbox. Con este módulo de diseño puedes controlar los contenedores hijos, luego de que agregamos las propiedades a los contenedores padres. Puedes indagar más sobre las propiedades flexibles desde esta guía publicada por CSS-Tricks.
Estas no son las únicas estrategias a considerar para el diseño de tu aplicación, como dice la famosa frase, "cada cabeza es un mundo", y según mi punto de vista, estas solo son las más importantes y las que resultan con mayores resultados para el aprendizaje desde móvil:
1- Incluir solo la información que el usuario debe saber o el atajo para el mostrar contenido completo
Todos conocemos los límites de procesamiento que posee nuestro cerebro, y aquellos cursos que presentan extensos contenidos pueden abrumar a los estudiantes, y como resultado, posiblemente hará que se vayan del sistema elearning. En los equipos con pantallas grandes, este contenido podemos recorrerlo de forma rápida, a diferencia de los dispositivos con pequeñas pantallas, los diferentes elementos el documento web caen o se sitúan hacia abajo hasta que finalice de cargar el último elemento. De la misma forma sucede con las aplicaciones construidas para sistemas operativos Android y iOS.
¿Cómo presentar mucha información al estudiante?
En artículos anteriores estuvimos explicando la importancia de construir aplicaciones modulares, donde todo el contenido es separado hasta mostrar menos contenido por archivo.
Desde hace unos años los desarrolladores construyen los diferentes módulos del sistema con la famosa paginación, sin embargo, con las diferentes librerías disponibles para la comunicación con los datos del servidor y base de datos de forma sincrónica, tenemos otras formas de implementar el diseño modular, para que nuestros usuarios se sientan más cómodos al utilizar estos módulos desde sus celulares.
2- Agilice la experiencia móvil para la velocidad
El aprendizaje móvil se distingue considerablemente de las computadoras de escritorio y las computadoras portátiles. Los aprendices y expertos esperan que la respuesta sea inmediata cuando utilizan las aplicaciones desde sus teléfonos y que las peticiones al servidor les sean notificadas. Ejemplo: Cargando..., Por favor espere..., ícono png, etc.
En este segundo punto podemos incluir la modularidad del software para cargar menos contenido y responder a las solicitudes de forma más rápida. Además, el tiempo de las solicitudes puede verse afectado por lentitud en la conexión a Internet y se intensifica cuando el acceso del usuario tiene como procedencia el celular.
Es muy importante controlar el tamaño de los archivos y el dinamismo al presentarlos. Recortar los gráficos y comprimir el contenido también es una buena práctica para reducir el tamaño de la carga. Si las solicitudes traerán imágenes muy grandes es recomendable programar mapas de imágenes. Es muy común cargar dos imágenes por cada imagen cargada, una con un tamaño miniatura y la otra es la imagen real que será cargada cuando el usuario la seleccione.
3- Adaptarse al medio
El medio más utilizado por el usuario es el celular, y estos equipos tienen características que otros equipos no tienen, y a su vez, desfavorece el aprendizaje del alumno. Las tareas realizadas por el estudiante son efectuadas al conducir, al comer o realizando cualquier otra actividad fuera de la clase.
La distracción en los móviles también es mucho más frecuente que en las computadoras, reduciendo considerablemente el tiempo empleado al aprendizaje. Esta es otra razón para tener en cuenta la cantidad del contenido a mostrar y su velocidad de carga.
4- Diseño estratégico
Un estudio publicado por Search Engine Watch demuestra gran diferencia entre los dispositivos móviles y los computadores cuando se trata del tiempo empleado al aprendizaje. El estudio informa que el usuario de escritorio dura hasta tres veces más que los usuarios conectados desde un móvil. Añadimos en este mismo sentido que los usuarios de escritorio, en general, ven más páginas.
Los usuarios móviles prefieren las funciones más simples, debido a varios factores, principalmente el pequeño tamaño de estas pantallas. El sistema debe trabajar de forma fluida y dinámica, presentando una interfaz limpia y carga inmediata de los datos solicitados por el cliente.
Todos estos puntos son importantes para lograr implementar el diseño ideal para nuestro usuario, sin embargo, no podremos tener un diseño con buenos resultados si perdemos al usuario de la ubicación de las respuestas enviadas a las vistas de lugar de forma síncrona.
Ejemplo: El cliente solicita el balance de su deuda. Este dato o respuesta es solicitado y entregado sin recargar el navegador, luego termina ubicado en un lugar fuera de la pantalla que puede visualizar el usuario del documento web.
El usuario en estos momentos se está preguntando: ¿Qué pasa con la respuesta de mi solicitud?
Cuando enviamos desde el servidor la solicitud extraída de nuestra base de datos al documento web, es importante mostrar la respuesta en la pantalla del usuario o llevarlo hacia el contenedor identificado como el que recibe el mensaje.
Una de las formas que podemos implementar es la siguiente:
A) Identificador para nuestro contenedor (html):
<div id="resultado"></div>
B) Recibir la solicitud (jQuery, Ajax):
$("#resultado").html(data);
C) Luego redireccionar al contenedor con el identificador "resultado" (Javascript):
window.location.href = "#resultado";
En caso de que no estés utilizando un lenguaje del lado del cliente, puedes agregar el código anterior en la vista a cargar de la siguiente manera:
<div id="resultado">
<?php echo isset($data) ? $data : "No hay datos aquí."
</div>
<script>
window.location.href = "#resultado";
</script>
5- Probar aplicación antes del lanzamiento
Es importante probar en varios dispositivos para garantizar el correcto funcionamiento. Personalmente me gusta evaluar la plataforma con navegadores antiguos, así aumentamos el alcance a la mayor parte de los usuarios. Existen muchos programas para este tipo de análisis, sin embargo, prefiero instalar esas antiguas versiones.
Luego de que todo funcione como esperamos, podemos proseguir con las pruebas con distintos usuarios, nunca es recomendable utilizar uno solo. Con este punto debemos tener cuidado, busca usuarios de confianza para mantener tu nueva marca de forma anónima. El rango de estos usuarios no tiene muchos límites, ya que puedes incluir desde expertos en tecnología del software hasta los más novatos.
En este mismo aspecto, también es muy importante registrar todas nuestras pruebas y los resultados. Guardar esta información te ayudará a identificar los fallos repetidos y no tendrás que dedicar mucho tiempo a la búsqueda de las soluciones.
6) El diseño responsivo
Actualmente hay muchas propiedades de CSS3 que puedes aplicar, puedes ajustar las pantallas de forma responsiva con el uso de Media Queries para el desarrollo web responsivo. Aunque últimamente he reducido este tipo de implementación de estilos con el uso de Flexbox. Con este módulo de diseño puedes controlar los contenedores hijos, luego de que agregamos las propiedades a los contenedores padres. Puedes indagar más sobre las propiedades flexibles desde esta guía publicada por CSS-Tricks.
Comentarios
Publicar un comentario