moodle

Diseño y experiencia de usuario en Moodle. Las claves.

A la hora de instalar un nuevo Moodle o actualizar el aspecto de uno existente, surge la necesidad de partir de un diseño o tema que sirva de base y cumpla los requisitos que se busquen en cada caso. Encontrar el diseño correcto puede convertirse en un proceso tedioso, en el que no siempre se tienen claros los criterios más importantes.
A continuación desarrollamos los aspectos clave que permitirán elegir correctamente el diseño ideal para nuestro Moodle.

Comprobar si el diseño Moodle es responsive

A día de hoy este es con diferencia el aspecto más importante cuando se trata de elegir un buen diseño para Moodle.

Para verificar que el diseño elegido es responsive, será necesario probarlo en distintos dispositivos. Esto no implica contar físicamente con ellos, sino que puede utilizarse cualquiera de las herramientas online desarrolladas para este fin, como Responsive Design Checker o Screenfly, con las que podremos comprobar si:

  • El diseño cuenta con una navegación más sencilla en el dispositivo móvil.
  • Las imágenes y el texto se redimensionan y visualizan correctamente sin perder calidad.
  • Los botones y elementos de navegación tienen el tamaño y función correctos cuando se muestran en un dispositivo móvil.

En caso de ser responsive, el diseño se ajustará automáticamente tanto a las dimensiones del navegador y dispositivo en el que está siendo visualizado como a la orientación de la pantalla, además de permitir ver e interactuar con el contenido usando el mínimo encuadre, zoom y desplazamiento.

Es determinante que un diseño de Moodle sea responsive por diversas razones:

  • El número de usuarios que acceden a Internet desde dispositivos móviles aumenta cada día, lo que ha hecho que Google esté potenciando el ranking de sitios web optimizados para móviles, penalizando a aquellos que no lo están.
  • Así mismo, cada vez son más usuarios quienes usan estos dispositivos para acceder a contenidos e-learning. Esto hace que se estén desarrollando nuevos contenidos en HTML5, lo que evita incompatibilidades entre tecnologías. Esto exige a su vez que los LMS desde los que se lanzan dichos contenidos sean también responsive.

Medir los tiempos de carga de Moodle, antes y después de aplicar el diseño

Imaginemos que hemos aplicado en nuestro Moodle un estilo muy atractivo pero que tarda 6 segundos en cargar, resulta ilógico ¿no?
Seis segundos pueden no parecer mucho, pero en Internet se cuenta con menos de 3 para captar la atención de un visitante a una web. Imaginemos lo que puede afectar algo así a la experiencia de usuario cuando se trata de las páginas de un curso en un LMS

“El 40% de los usuarios abandonan una página web que tarda más de tres segundos en cargar. Un segundo más de respuesta en una página puede transformarse en un 7% menos de conversiones”
– Kissmetrics

 

Aunque un diseño pueda resultar atractivo en un primer vistazo, merece la pena adentrarse en sus tripas para comprobar si incluye demasiados CSS, archivos JS o imágenes de gran tamaño, lo que puede hacer que resulte muy pesado y lento.

Como ya hemos visto, una web lenta afecta tanto a la experiencia de uso como a su posicionamiento en buscadores. En cualquier caso, hay que profundizar bien en este análisis, porque muchas veces encontramos diseños para Moodle (incluso de pago) cuya demo o site-demo está optimizado, pero no así el diseño definitivo que aplicaríamos en nuestro Moodle. Para poder identificar estos casos, se pueden usar herramientas como GTmetrix y testear en ellas diferentes páginas del site-demo comprobando sus velocidades de carga.

Buscar la uniformidad en el diseño

El tema estándar de Moodle ha sido históricamente bastante simplista. Por un lado consigue que el entorno de aprendizaje esté libre de distracciones, pero al mismo tiempo resulta poco atractivo y menos intuitivo.

Por supuesto siempre se puede editar el diseño base o elegir otro que aporte más color, pero es importante asegurarse de que el aprendizaje del usuario no se vea afectado.
Los colores demasiado brillantes o que se usan en exceso pueden originar distracciones y dificultar la atención. Si hay cambios drásticos de diseño entre una pantalla y otra, el tiempo de adaptación a esos cambios afectará también al trabajo en el curso.

Es importante comprobar que el esquema de colores utilizado, así como las fuentes y los encabezados, sean uniformes a lo largo de todo el entorno de formación. Se trata de conseguir una interfaz de usuario simple pero actual y atractiva.

Buscar una arquitectura de información útil

Muchas veces se piensa que el diseño se encarga únicamente de definir los colores y fuentes de un sitio web, pero no es así. El diseño también define la estructuración del contenido, la navegación, el encabezado y pie de página, además de otros elementos de la interfaz de usuario; en resumen, la arquitectura de información de nuestro Moodle. La arquitectura de la información afecta directamente a la experiencia de uso, por lo que en este sentido, a la hora de elegir diseño para Moodle, debe tenerse en cuenta si:

  • ¿Simplifica o complica la navegación?
  • En caso de que el diseño incluya widgets, ¿son sencillos de usar?
  • La forma de mostrar la información ¿es homogénea a lo largo de las diferentes páginas?

Compatibilidad con los navegadores más utilizados

Chrome y Firefox son los navegadores más utilizados, por lo que resulta obligatorio testear en ellos el diseño elegido.
De todos modos, para hacerse una idea más completa en cuanto al rendimiento, es recomendable probar el estilo visual sobre varios navegadores, incluyendo Internet Explorer, e incluso sobre versiones más antiguas de ellos. A veces el desarrollador especifica las compatibilidades de su diseño con los navegadores, pero siempre podemos usar servicios como BrowserStack para realizar estos tests de forma más rápida y fiable.

¿El diseño cuenta con opciones de personalización?

Aunque no siempre hace falta editar el estilo para personalizarlo, la mayoría de veces es necesario aplicar personalizaciones menores. Lo más habitual es cambiar el esquema de color para adecuarlo a la marca, añadir un logo, un nombre para el entorno de formación, etc.Si el estilo elegido no cuenta con opciones que permitan hacer estos pequeños cambios, el hecho de poder aplicarlos en mayor o menor medida dependerá de la habilidad que se tenga a la hora de tocar su código.

Algunos estilos de Moodle ya incluyen opciones de personalización para por ejemplo:

  • Subir un logo y añadir el nombre de la empresa/organización
  • Cambiar el color de botones, enlaces y zonas a resaltar
  • Editar plantillas de páginas (añadir un scrollbar, mostrar en pantalla completa,…)
     

Comparte esta noticia