Cómo mejorar la interfaz y la experiencia de usuario de tu aplicación

1 Resumen

El reto

Según el informe de comScore 2016 U.S. Mobile App Report (13 de septiembre del 2016), los usuarios de dispositivos móviles pasan nueve de cada diez minutos usando exclusivamente sus cinco aplicaciones preferidas.1 Todas las empresas luchan por hacerse con un codiciado hueco en esta breve lista, así que ofrecer una aplicación atractiva ya no es un propósito: es un requisito.

En este panorama, en el que tanto se juega cada empresa, las que están creciendo no solo tienen que desarrollar aplicaciones de alto rendimiento; también tienen que introducir variaciones para mejorar la experiencia en móviles, establecer un vínculo con los usuarios y retenerlos.

El objetivo

Descubrir cómo puedes mejorar la experiencia de usuario (UX) y la interfaz de usuario (UI) de tu aplicación para aumentar la implicación en nuevos mercados.

La estrategia

Las expectativas de los usuarios de aplicaciones móviles son muy altas: hay que tener en cuenta el tiempo de carga, la facilidad de uso y conseguir que a los usuarios les resulte agradable la interacción. En muchas aplicaciones ya se está convirtiendo en norma adaptar la interfaz al contexto de uso y reducir al mínimo el nivel de interacción, es decir, limitar la cantidad de acciones requeridas para completar una tarea. Tendrás que plantearte, por tanto, qué hace que la experiencia sea buena y cómo conseguir que la interfaz de usuario de tu aplicación sea sumamente práctica si quieres venderla en nuevos mercados. En esta guía te proponemos una serie de prácticas recomendadas que podrás aplicar independientemente del mercado al que quieras llegar.

2 Cómo interactúan los usuarios con tu aplicación

Consigue que a los usuarios les resulte fácil entender la aplicación e interactuar con ella. Cuanto más simple y menos confusa les parezca la interacción (por ejemplo la carga cognitiva), más posible será que mantengan la aplicación instalada. A continuación, te ofrecemos algunos consejos para conseguirlo.

Optimiza el flujo del usuario

Conocer cómo interactúan los usuarios con una aplicación es fundamental para optimizarla. Tanto diseñadores como desarrolladores deberíamos comprender qué objetivos se plantea el usuario dentro del flujo global del uso de la aplicación. Esta información nos ayudará a identificar los puntos de fricción más habituales a la hora de completar una tarea.

Estas son algunas formas comunes de optimizar el flujo del usuario:

  • Fraccionar las tareas más largas. Si una tarea requiere que los usuarios realicen muchos pasos o acciones, es mejor dividirla en una serie de subtareas. Un buen ejemplo de ello es el flujo progresivo que suele tener la tramitación de compra en las aplicaciones de comercio electrónico. Puedes separar un proceso de compra en tantos pasos como acciones tengan que realizar los usuarios.

  • Aprovecha la información que ya tienes acerca de tus usuarios. Seguramente ya tengas mucha información sobre ellos; solo hay que darle el uso adecuado. Tomemos el ejemplo de Uber: la aplicación no pregunta al usuario cuál es su ubicación, sino que la detecta automáticamente basándose en datos geográficos. A partir de ahí, lo único que tiene hacer el usuario es seleccionar el lugar de recogida específico.

  • Haz que el paso siguiente sea una continuación lógica. Cuando los usuarios tengan que realizar una serie de pasos para completar una tarea, muestra claramente qué viene a continuación para mantener su interés.

  • Prioriza en cada pantalla una sola acción principal. Con esta simple regla harás que sea más fácil familiarizarse con la interfaz y utilizarla. Da prioridad a los elementos importantes con un mayor peso a nivel visual (por ejemplo, con un botón de llamada a la acción en un color que contraste).

No sobrecargues la pantalla

Una interfaz bien diseñada proporciona toda la información relevante (lo que constituye la señal) y evita la irrelevante (el ruido).

Si sobrecargas la interfaz, la información que reciben los usuarios será excesiva: cada botón, imagen o icono que añadas hará que la pantalla se complique. Esta sobrecarga da muy mala impresión en ordenadores, pero es aún peor en dispositivos móviles, donde no tenemos en la pantalla mucho espacio libre con el que jugar.

Truco

Si quieres despejar una pantalla que forme parte del flujo que sigue el usuario, muestra en ella únicamente lo necesario para completar ese paso. Por ejemplo, si el objetivo es que el usuario escoja una opción, debes mostrar información suficiente para que pueda decidir y dejar los detalles para la pantalla o las pantallas siguientes.

Diseña un sistema de navegación intuitivo

De poco valdrán las funciones más novedosas y el contenido más atractivo si los usuarios no pueden encontrarlos. Aquí te ofrecemos algunas reglas para diseñar la navegación:

  • No la ocultes. No ocultes los elementos de navegación; por ejemplo, no utilices funciones de navegación gestual, ya que a la mayoría de los usuarios les costará averiguarlos. Mantén la coherencia: muchos desarrolladores de aplicaciones móviles ocultan los menús en páginas concretas, pero es mejor no hacerlo porque podría confundir o desorientar a los usuarios.
  • Indica a los usuarios dónde se encuentran. Un problema común en muchas aplicaciones móviles es que no indican la posición actual de los usuarios que se preguntan "¿Dónde estoy?". Responder a esta pregunta es fundamental para que la navegación sea un éxito.

Truco

Es mejor utilizar patrones de navegación convencionales, como la barra de aplicaciones (en iOS) o el menú lateral (en Android). La mayoría de los usuarios ya conoce estos dos patrones de navegación, así que no hay por qué romperse la cabeza si ya hay una solución que funciona.

Adapta las interacciones al medio

Un teléfono móvil no es una versión más pequeña de un ordenador: cada dispositivo tiene sus propios matices y limitaciones, y deberás plantearte qué suponen para la interacción con los usuarios.

3 Qué efecto tiene el diseño para los usuarios

El aspecto de los elementos del diseño debe corresponderse con su función

La interfaz de una aplicación móvil debe transmitir claramente qué elementos son interactivos y cuáles no.

A diferencia de un ordenador, donde el usuario puede colocar el cursor sobre un elemento para saberlo, en un móvil solo puede comprobarlo tocando el elemento. Los usuarios deben poder predecir el comportamiento de un elemento de la interfaz con solo verlo.

Diseña zonas táctiles cómodas

A la hora de diseñar los elementos interactivos de interfaces para móviles, es fundamental que el tamaño de su zona activa permita tocarlos fácilmente. Como regla general, los controles deben tener una zona táctil de unos 7–10 mm para que puedan tocarse de forma precisa con un dedo. En este tipo de zonas táctiles, los bordes suelen hacerse visibles cuando los usuarios las tocan, lo que les permite saber si están tocando dentro de la zona activa.

Comprueba también que los elementos no queden demasiado juntos: debe haber suficiente distancia entre las zona táctiles para que no se pueda tocar una distinta por error.

Acuérdate del pulgar

Diseñar para los pulgares no consiste solamente en crear zonas activas amplias, sino en tener en cuenta cómo solemos sujetar el dispositivo.

En la mayoría de los dispositivos móviles podemos deslizar el pulgar por casi toda la pantalla, pero en realidad solo lo haremos sin esfuerzo en un tercio de ella. Esta parte es la que se conoce como zona natural del pulgar. Para llegar a las demás zonas hay que estirar los dedos o incluso coger el dispositivo de otra forma. En la siguiente imagen podemos ver representada en verde la forma que adopta la zona natural en un dispositivo móvil actual dependiendo de cómo lo sujetemos, con la mano izquierda, con la derecha o con ambas.

Zona natural del pulgar

Cuanto más grande es la pantalla, más superficie queda poco accesible.

Zonas del pulgar en iPhone

  • Al diseñar para móviles, ten en cuenta las distintas zonas:
  • La zona verde es el mejor lugar para colocar opciones de navegación o acciones interactivas frecuentes, como botones de llamada a la acción.
  • La zona roja es idónea para situar opciones que puedan suponer un riesgo, como Eliminar o Borrar, ya que es menos probable que los usuarios las activen por error.

Diseña pensando en interrupciones

Vivimos en un mundo de interrupciones constantes. Siempre hay algo que trata de distraernos o llamar nuestra atención hacia otro lugar.

Por ejemplo, los usuarios pueden querer usar tu aplicación mientras llega el tren, así que es crucial diseñarlas pensando en un mundo móvil. Debes asegurarte de que, cuando los usuarios que han dejado de utilizar tu aplicación vuelvan a interactuar con ella después de una interrupción, puedan hacerlo con facilidad.

Twitter es un buen ejemplo de diseño pensado para que las interrupciones tengan el menor impacto en los usuarios. La pantalla de notificaciones de la aplicación muestra todas las notificaciones recientes. Mientras el usuario sigue en esa pantalla, la aplicación no actualiza la lista automáticamente, sino que solo muestra el estado "X nuevos tweets" en la parte superior. De esta forma, el usuario no se pierde de su posición actual cuando vuelve a usar la aplicación un rato después.

4 Cómo crear una experiencia de usuario óptima

Intenta crear una experiencia multicanal

Las aplicaciones móviles no son un universo aislado.

Por ejemplo, a menudo los usuarios de dispositivos móviles visitan un sitio web de comercio electrónico desde el móvil y luego cambian al ordenador para hacer una compra. Esa transición debe ser imperceptible.

Gestos intuitivos

Utiliza únicamente gestos que resulten completamente naturales en una aplicación como la tuya.

¿El motivo? Porque los gestos son al fin y al cabo controles ocultos.

Como señala Thomas Joos en su artículo "Beyond The Button: Embracing The Gesture-Driven Interface"2, una de las mayores desventajas de emplear gestos en una interfaz de usuario es la curva de aprendizaje. Cada vez que cambiamos un control visible por un gesto, estamos alargando la curva de aprendizaje de la aplicación. Esto se debe a que los gestos tardan más en descubrirse: siempre están ocultos y hay que saber identificar primero las opciones correspondientes. Por eso la clave está en utilizar únicamente gestos ya muy extendidos (aquellos que los usuarios esperen encontrar en una aplicación como la tuya).

Un buen ejemplo de gesto adecuado a la categoría de una aplicación es el de deslizar hacia abajo para actualizar en aplicaciones de tipo feed.

Transmite una sensación de rapidez con "skeleton screens"

Tu aplicación debe ser rápida y adaptable. Sin embargo, habrá ocasiones en las que no sea posible conseguirlo.

Por ejemplo, en momentos en que la conexión a Internet sea muy lenta. Si no puedes agilizarla, trata al menos de hacer la espera más agradable. Estas situaciones pueden ser la ocasión perfecta para utilizar una "skeleton screen", una pantalla esquemática también llamada "contenedor temporal de información".

Una "skeleton screen" es una versión vacía de una página en la que se va cargando la información de manera gradual. A diferencia de los típicos círculos giratorios animados, que dirigen la atención del usuario al hecho de que los datos aún se están cargando, las "skeleton screens" la centran en el avance en vez de en el tiempo de espera.

Piensa en la primera impresión

Al igual que con una persona, no hay segundas oportunidades para que tu aplicación móvil dé una buena primera impresión. Si no lo consigue, la certeza de que ese usuario no volverá es del 80 %.3

Da a los usuarios una calurosa bienvenida

Quizá la regla más importante para dar la bienvenida a los usuarios es no hacerlo de forma genérica sino útil.

Los diseñadores deberían considerar la bienvenida a la aplicación como una oportunidad para ponérselo fácil a los nuevos usuarios a la hora de empezar a utilizarla. Por otro lado, solo debe usarse si realmente es imprescindible para usar la aplicación por primera vez.

Diseña un estado inicial

Un estado vacío o inicial es aquel en el que aún no ha pasado nada. No debe ser un lienzo en blanco (o un callejón sin salida, como lo llaman muchos diseñadores), sino un elemento orientativo que también sirva de guía a los usuarios para dominar rápidamente la aplicación.

Emplea la animación con un enfoque funcional para mejorar la interacción y las transiciones en la navegación

La animación solventa muchos problemas funcionales de una interfaz y le da a la vez un aspecto vivo y adaptable.

También es la mejor manera de representar transiciones entre estados. Ayuda a los usuarios a entender los cambios en el diseño de las páginas, qué los ha provocado y cómo volver a hacerlos si lo necesitan.

Muestra el estado del sistema

Cuando la aplicación esté ocupada haciendo algo, debes indicarle al usuario que no se ha quedado colgada: muestra en pantalla el estado del sistema. Los indicadores visuales de progreso dan a los usuarios la sensación de controlar la aplicación.

Respuesta visual

En el mundo físico, los objetos responden cuando interactuamos con ellos, así que los usuarios esperan una respuesta similar de los controles de una interfaz digital.

Una buena respuesta visual hace que la interacción les resulte más cómoda. Todos los elementos interactivos, tales como botones, deben mostrar una respuesta visual perfecta.

Personaliza la experiencia digital para humanizarla

La personalización es hoy en día uno de los aspectos más importantes de las aplicaciones móviles. Supone una oportunidad de conectar con los usuarios y darles la información que necesitan de una manera auténtica.

Starbucks es un buen ejemplo de ello: su aplicación emplea la información que proporcionan los usuarios (como el tipo de café que suelen pedir) para crear ofertas especiales.

Añade valor

El motivo más habitual para desinstalar una aplicación móvil, mencionado por un 71 % de los encuestados, son las notificaciones molestas. (Fuente: estudio de Appiterate)

No envíes notificaciones push porque sí; cada notificación debe tener su sentido y su momento. Aquí te explicamos un par de aspectos que debes tener en cuenta al diseñar este tipo de notificaciones:

  • No envíes muchas en poco tiempo.

Si lo haces, puedes crear un exceso de información que el usuario no podrá procesar y, simplemente, acabará ignorándola. Intenta combinar distintos mensajes en uno solo para limitar el número total de notificaciones.

  • Planifica el momento de enviarlas.

No solo es importante lo que quieres decir, sino también cuándo decirlo. No envíes notificaciones push a deshoras, como por ejemplo en mitad de la noche. El mejor intervalo para enviarlas es en las horas de más uso de los dispositivos móviles: de las 6 a las 22 horas.

  • Piensa en otros canales con los que hacer llegar tu mensaje.

Las notificaciones push no son la única forma de comunicar algo a los usuarios. En función de la urgencia y el tipo de contenido que quieras enviar, puedes utilizar el correo electrónico, las notificaciones en la aplicación y los mensajes en feed de noticias para avisar de eventos importantes a los usuarios.

Conclusión

Los diseñadores suelen decir que el mejor diseño es el que no se ve: quienes lo usan se centran en sus propias metas y no en la interfaz. Haz que sea invisible: no solo responderás a las necesidades de los usuarios, sino que ofrecerás una interfaz y una experiencia de usuario magníficas. Este concepto se puede aplicar independientemente del idioma o la ubicación, así que es importante hacerlo bien sin importar el mercado al que te dirijas.

5 Fuentes