Usabilidad en aplicaciones móviles y de escritorio

1. Diferencias entre el diseño de aplicaciones móviles y de escritorio

Cuando se trata de diseñar una aplicación móvil en comparación con una de ordenador de escritorio, hay algunas consideraciones importantes que debemos tener en cuenta. Aunque hay algunos principios de diseño generales que se aplican a ambos casos, encontramos algunas diferencias notables que requieren especial atención.

No se debe confundir el dispositivo de visualización, desde donde la persona usuaria accede e interactúa, con las funcionalidades exclusivas que permite el software del dispositivo. Mientras que una parte importante de las aplicaciones a las que nos referimos cuando hablamos de ordenadores de escritorio son web (se visualizan en un navegador), para dispositivos móviles pueden ser aplicaciones nativas del propio sistema operativo (instaladas directamente en el dispositivo móvil) además de ser web.

A los sitios web preparados para ser accesibles tanto desde escritorio como desde un móvil se les suele llamar "responsivos o adaptativos" porque se adaptan a las diferentes resoluciones de las pantallas de acceso que les permite el navegador.

Dentro de los sitios web "responsivos o adaptativos" (responsive), también es importante diferenciar el concepto de "Mobile First". Este calificativo se aplica a los sitios web que han sido diseñados pensando primero en su uso desde una pantalla pequeña y para ser interactuados principalmente con los dedos mediante "taps", en lugar de con el ratón mediante "clics".

Con todo este escenario y con el objetivo de proporcionar la mejor experiencia a todos las personas usuarias, al mismo tiempo que seguimos las mejores prácticas de inclusividad, al diseñar una aplicación es necesario aplicar los principios más restrictivos. Es decir, si es un sitio web al que se puede acceder tanto desde un ordenador de escritorio como desde un dispositivo móvil, aplicaremos las recomendaciones para dispositivos móviles, ya sea que hayamos decidido que nuestro sitio web sea Mobile First o no.

1.1. Tamaño y resolución de la pantalla. Espacio limitado

Las pantallas de los dispositivos móviles son considerablemente más pequeñas que las de los ordenadores de escritorio. Esto significa que debemos ser más selectivos con los elementos que incluimos en la interfaz móvil y asegurarnos de que cada elemento sea relevante y útil. La falta de espacio también implica que debemos utilizar diseños y tamaños de fuente adecuados para garantizar una experiencia de usuario legible y cómoda.

Para el texto normal y el cuerpo del texto, un tamaño de fuente de 16 puntos y un mínimo de 14 puntos (o SP en Android) proporcionan una buena legibilidad en dispositivos móviles. Para títulos o encabezados, se sugiere un tamaño de fuente de al menos 18 puntos (o SP).

1.2. Interacción táctil en dispositivos móviles

A diferencia de las aplicaciones de escritorio, las aplicaciones móviles se controlan principalmente a través de pantallas táctiles. Esto significa que debemos tener en cuenta los gestos táctiles y los controles intuitivos en el diseño de la aplicación móvil. Debemos garantizar que los elementos interactivos sean lo suficientemente grandes y estén espaciados para que las personas usuarias puedan tocarlos fácilmente con los dedos.

1.3. Contexto de uso

Las aplicaciones móviles suelen utilizarse en un contexto de movilidad y en situaciones ambientales muy diversas, lo que implica quelas personas usuarias pueden tener diferentes necesidades y objetivos en comparación con el uso de una aplicación de escritorio. Debemos comprender el contexto de uso móvil y adaptar el diseño para que se ajuste a las necesidades y limitaciones en movimiento.

Por este motivo, es fundamental realizar un diseño inclusivo y seguir las buenas prácticas de accesibilidad WCAG 2.0, como mínimo, en el nivel AA. En un contexto de uso específico con poca iluminación, exceso de ruido, realizando otra tarea simultáneamente, etc., todos podemos estar en una situación, temporal o permanentemente incapacitados para una determinada interacción. Se dice que "si resuelves una situación para una persona que no tiene brazo, estás al mismo tiempo resolviendo para una persona que se ha roto un brazo o para otra que lleva un bebé en brazos o la cesta de la compra".

1.4. Funcionalidades y restricciones

Puede ser que ciertas funcionalidades estén disponibles solo en una plataforma específica. Por ejemplo, algunas características pueden depender de los sensores y capacidades únicas de los dispositivos móviles, como la ubicación GPS, la cámara o los acelerómetros. También debemos tener en cuenta las restricciones técnicas y de rendimiento de los dispositivos móviles, como el tamaño del archivo de la aplicación y el consumo de energía.

En relación con el consumo de energía y para ciertos beneficios visuales en determinadas personas, es importante considerar el diseño del Modo Oscuro (Dark Mode) de la aplicación y asegurarse de que la calidad visual sea equivalente a la versión clara.

1.5. Elección entre aplicaciones nativas y aplicaciones web

Comparación entre las aplicaciones nativas y las aplicaciones web:

Aplicaciones nativas:

Ofrecen una interfaz centrada en la persona usuaria y una buena experiencia general. Proporcionan una sensación coherente con el resto de aplicaciones del dispositivo.
El proceso de desarrollo implica utilizar lenguajes de programación nativos y herramientas específicas de cada plataforma.
Rendimiento optimizado, más rápido y fluido.
Acceden a características de hardware y funciones nativas del dispositivo, como la cámara, el GPS, los sensores y las notificaciones push.
Uso offline. Permiten acceso a ciertas funciones sin tener una conexión a Internet activa. Útil en situaciones con conectividad limitada o intermitente.
Requieren que todas las personas usuarias descarguen actualizaciones y dependen de las tiendas de aplicaciones.
Pueden tener restricciones en la monetización debido a las políticas de los fabricantes de dispositivos.
Son más eficientes y rápidas, pero más costosas de desarrollar.

Aplicaciones web:

Pueden funcionar en diferentes dispositivos a través de un navegador web.
El proceso de desarrollo implica utilizar lenguajes web estándar y herramientas generales.
Tienen un acceso limitado a características nativas del dispositivo.
Las actualizaciones se realizan manualmente y no dependen de las tiendas de aplicaciones.
Pueden monetizarse a través de anuncios y otros medios.
Pueden tener mayores costos de mantenimiento a través de múltiples plataformas y carecen de una autoridad reguladora específica.

En conclusión, la elección entre aplicaciones nativas y aplicaciones web depende de factores como la experiencia de usuario deseada, el presupuesto, el acceso a características del dispositivo y la eficiencia requerida. También es posible desarrollar ambos tipos de aplicaciones para aprovechar sus respectivas ventajas.

2. Diseño de aplicaciones móviles Android vs iOS

En el diseño de aplicaciones móviles para Android e iOS, ambos sistemas tienen sus propias directrices de diseño de interfaz de usuario: las Directrices de Interfaz Humana para iOS y Material Design para Android. Estas directrices proporcionan recomendaciones detalladas sobre cómo abordar el diseño de la interfaz.

Existen diferencias nativas en el sistema operativo en aspectos como la tipografía, la navegación y las funciones de búsqueda, entre otras, que los diseñadores de aplicaciones móviles deben tener en cuenta al diseñar para cada plataforma. Para mejorar la usabilidad y la eficiencia en el desarrollo, siempre que sea posible, se recomienda seguir las recomendaciones nativas y los estándares de cada plataforma.

Al proporcionar los entregables a los desarrolladores, es importante tener en cuenta las diferencias en las resoluciones de los dispositivos y exportar los recursos de diseño en las resoluciones adecuadas.

2.1. Material Design de Android

El uso de Material Design de Android para diseñar una aplicación móvil tiene ventajas destacables.

2.1.1. Consistencia

Material Design proporciona directrices de diseño coherentes y un lenguaje visual unificado para las aplicaciones de Android. Esto significa que nuestra aplicación seguirá las convenciones de diseño establecidas por Google, ofreciendo una experiencia consistente a las personas usuarias de Android y ayudándoles a familiarizarse rápidamente con la aplicación.

2.1.2. Componentes y patrones de diseño predefinidos

Ofrece una amplia gama de componentes y patrones de diseño predefinidos, como botones, tarjetas, barras de herramientas y menús desplegables. Estos elementos predefinidos facilitan la creación de interfaces consistentes y funcionales, ahorrando tiempo y esfuerzo en el proceso de diseño.

2.1.3. Diseño responsivo y adaptativo

Material Design está diseñado para adaptarse a diferentes tamaños de pantalla y dispositivos, garantizando que nuestra aplicación tenga un buen aspecto y funcione correctamente en una variedad de dispositivos Android, desde teléfonos inteligentes hasta tabletas. Esto proporciona una experiencia de usuario fluida y consistente entre diferentes dispositivos.

2.1.4. Implementación fácil y documentación

Google proporciona una amplia documentación y recursos de diseño para ayudar a implementar Material Design en la aplicación. Esto incluye guías detalladas, ejemplos de código y bibliotecas de diseño que facilitan la adopción de los principios de Material Design en ella.

2.1.5. Compatibilidad con características de Android

Material Design se integra perfectamente con las características y funcionalidades de Android, como las notificaciones, las transiciones y las acciones táctiles. Esto nos permite aprovechar al máximo las capacidades de la plataforma Android y proporcionar una experiencia de uso, a la persona usuaria, coherente con otros aspectos del sistema operativo.

2.2. Directrices de interfaz humana para iOS

El uso de les directrices de interfaz humana para iOS para diseñar una aplicación móvil. En los puntos siguientes recogemos los beneficios.

2.2.1. Consistencia

Las directrices proporcionan orientaciones claras y coherentes sobre cómo debe ser el diseño de una aplicación para que sea consistente con el estilo y la experiencia de iOS. Esto ayuda a crear una experiencia familiar y cohesionada en todas las aplicaciones de iOS.

2.2.2. Usabilidad

Las directrices están diseñadas teniendo en cuenta las mejores prácticas de usabilidad y accesibilidad. Siguiendo estas directrices, se pueden crear interfaces fáciles de usar, intuitivas y accesibles, mejorando la experiencia y la interacción con la aplicación.

2.2.3. Estética

Las pautas de diseño de iOS ofrecen orientaciones detalladas sobre elementos visuales, como tipografía, iconografía y diseño de botones. Siguiendo estas directrices, se puede lograr una apariencia atractiva y profesional para la aplicación, lo cual contribuye a generar confianza y atractivo visual para las personas usuarias.

2.2.4. Actualizaciones y compatibilidad

Las instrucciones de interfaz humana se actualizan regularmente por parte de Apple para reflejar los cambios en las versiones de iOS. Siguiendo estas directrices, se asegura de que la aplicación esté actualizada y compatible con las versiones más recientes de iOS. Proporciona una experiencia más fluida para las personas usuarias y evita problemas de compatibilidad.

2.2.5. Aprobación de la App Store

Siguiendo las directrices de diseño de iOS, se aumenta la probabilidad de que la aplicación sea aprobada y aceptada en la app Store de Apple. Esto es importante para garantizar la disponibilidad y distribución de la aplicación a las personas usuarias de iOS.

3. Diseño y usabilidad en entornos móviles

Los principios de usabilidad y diseño para crear una aplicación móvil (Android e iOS) son una guía general y se pueden adaptar según las necesidades y características específicas de nuestra aplicación móvil. La usabilidad y el diseño efectivo son procesos iterativos, por lo que es importante recopilar los comentarios de las personas usuarias y realizar mejoras continuas a lo largo del tiempo.

3.1. Consistencia

La coherencia es un elemento esencial en una interfaz móvil de calidad. Es importante diseñar una experiencia intuitiva que sea fácil de entender y utilizar. Esto contribuye a crear una aplicación atractiva y agradable para las personas usuarias.

3.2. Priorizar el contenido

Debemos resaltar el contenido principal, utilizar menús desplegables y evitar elementos que distraigan. Menos es más en pantallas reducidas.

3.3. Diseño y navegación intuitivos (familiaridad)

El objetivo es simplificar el proceso y garantizar que sea fluido para la persona usuaria:

Evitar saltos innecesarios entre páginas o aplicaciones.
Poder navegar por la aplicación sin necesidad de explicaciones adicionales.
Seguir patrones de diseño reconocibles para una interacción rápida y familiar.
Utilizar una navegación clara de pocos niveles con iconos y etiquetas descriptivas, priorizando las opciones importantes al alcance del usuario.
Incorporar gestos táctiles comunes para mejorar la experiencia de navegación.

Algunos consejos:

Mantener la navegación visible en todo momento.
Utilizar componentes estándar.
Mantener la coherencia: seguir un único patrón de navegación en toda la aplicación.
Permitir que la persona usuaria sepa dónde se encuentra.

3.4. Tamaño adecuado

Los elementos que se pueden clicar deben tener un tamaño lo suficientemente grande para que las personas usuarias puedan tocarlos fácilmente con sus dedos sin dificultad. Se recomienda un tamaño mínimo de 44 x 44 píxeles como punto de referencia. Sin embargo, debemos tener en cuenta que esto puede variar según la densidad de píxeles de la pantalla y la audiencia objetivo. Para pantallas de mayor densidad, es posible que consideremos tamaños ligeramente más grandes.

3.5. Espaciado adecuado

Además del tamaño de los elementos, es importante tener en cuenta el espaciado entre ellos. Debemos dejar suficiente espacio entre los elementos clicables para evitar toques accidentales y para que las personas usuarias puedan seleccionar fácilmente el elemento deseado sin tocar otros por error.

3.6. Contenido de texto legible

La clave de una buena tipografía para dispositivos móviles es su legibilidad.

Tendremos en cuenta:

Elegir un tipo de letra familiar para los usuarios de la plataforma (por ejemplo, Roboto para Android o San Francisco para iOS).
Recomendar un tamaño de letra de 16 px, aunque esto puede variar según el tipo de letra.
Asegurar de que haya suficiente contraste entre la letra y el fondo para que el contenido sea legible, evitando combinaciones con poco contraste que dificulten la lectura, especialmente en dispositivos utilizados al aire libre.
Tener en cuenta el espaciado entre líneas, lo cual mejora la experiencia de lectura.

3.7. Objetivos fáciles de alcanzar

Colocaremos los elementos clicables en áreas de la pantalla que sean fáciles de alcanzar con el pulgar de la persona usuaria. Esto generalmente significa colocar los elementos cerca de la parte inferior de la pantalla, donde suelen estar los pulgares al sostener el dispositivo móvil.

3.8. Precisión en la detección táctil

Tendremos en cuenta que los dedos de una persona usuaria no son tan precisos como el puntero de un ratón. Nos aseguraremos de que los elementos clicables sean lo suficientemente grandes para que puedan tocarlos con precisión, incluso si no presionan exactamente en el centro del elemento.

3.9. Proporcionar control a la persona usuaria

La persona usuaria tiene que sentir que controla su experiencia con nuestra aplicación. Podemos darle la opción de poder controlar las notificaciones, cambiar la configuración, cancelar acciones, etc.

3.10. Simplicidad

Una aplicación móvil debe ser sencilla y fácil de utilizar. La personas usuarias deben poder comprender rápidamente cómo navegar por la interfaz y realizar las acciones deseadas sin confusiones.

3.11. Feedback visual

Proporcionar retroalimentación visual para las acciones de la persona usuaria. Por ejemplo, al tocar un botón, es útil que cambie de apariencia para mostrar que ha sido presionado. También es útil mostrar indicadores de carga, confirmaciones de éxito o mensajes de error para que las personas usuarias sepan qué está sucediendo en la aplicación.

3.12. Jerarquía visual

Utilizar una jerarquía visual clara para guiar a las personas usuarias a través de la aplicación y resaltar la información importante. Utilizar tamaños de letra, colores y espaciado para destacar elementos clave y asegurarse de que la información se presente en un orden lógico.