UX en aplicaciones móviles: guía de buenas (y no tan buenas) prácticas

En los últimos años se está escuchando cada vez más el término Experiencia de Usuario (UX). Este concepto tiene que ver con la necesidad de tener en cuenta a las personas en todo proceso de diseño, siendo la satisfacción del usuario el centro de las decisiones a tomar. 

Cuando hablamos del diseño de aplicaciones ya no basta con que funcionen, queremos que su uso resulte agradable, fácil y eficiente. Esto representa un reto en el que entran en juego muchísimas variables, pero existen algunos patrones generales que pueden aplicarse y que resultan determinantes. En este artículo vamos a contaros algunas de las buenas prácticas de diseño que aplicamos en nuestros proyectos y que creemos que son determinantes a la hora de diseñar apps útiles y usables, que hacen que el usuario se sienta feliz y satisfecho.

Ilustración sobre el proceso de diseño de una app

1. El tiempo de nuestro usuario es oro

Hay ciertos procesos en las aplicaciones que generan altos niveles de insatisfacción y elevadas tasas de desestimiento. Algunas de las causas más habituales son consumir mucho tiempo del usuario, pedir información personal que el usuario considera que no deberían pedirle (ya que no tiene que ver con el propósito de la aplicación), tener que recordar la m****** contraseña, etc.

En NTS sabemos que, en la mayoría de los casos, estos procesos son imprescindibles para la seguridad y el buen funcionamiento de las aplicaciones, por lo que, como no podemos eliminarlos, al menos sí aplicamos estrategias que minimizan las molestias al usuario:

  • Pedimos la información estrictamente imprescindible, y en el momento que es necesaria
  • Informamos de los motivos por los que se solicitan determinados datos personales
  • Procuramos que, al pedir algo, el usuario siempre obtenga algo a cambio
  • Facilitamos el proceso de registro al máximo, utilizando estrategias como el uso de proveedores externos para el proceso de registro y autenticación (Google, Facebook, Apple…)
  • Creamos formularios simples, fáciles de usar y con reporte de errores intuitivo
  • Ofrecemos facilidades para el recordatorio o reseteo de contraseñas, etc.
Ejemplo de login de Airbnb
El login de Airbnb permite el registro con diferentes proveedores.

2. Simplicidad o la Ley de Hick

El famoso “menos es más” también se puede aplicar a la creación de apps. La Ley de Hick dice que el tiempo que hay que invertir para tomar una decisión se incrementa con el número de opciones y complejidad existentes. 

En NTS trabajamos este punto pensando en la necesidad de concretar acciones, e intentamos ofrecer las menos opciones posibles al esperar una acción del usuario. De este modo no damos lugar a la duda y generamos interfaces autoexplicativas.

3. Uso intuitivo y basado en convenciones

Una convención es una norma o práctica aceptada socialmente por un acuerdo general o por la costumbre. A la hora de diseñar nuestra app debemos procurar seguir convenciones o estilos lógicos que determinan, de manera intuitiva, qué uso o acciones se consiguen con cada elemento

Por ejemplo, en NTS intentamos adaptar nuestras aplicaciones al Sistema Operativo para el que están destinadas. Si el usuario utiliza un iPhone, está acostumbrado a que todas las aplicaciones funcionen bajo un sistema de interacción y navegación concreto, si creamos una aplicación que no lo sigue, estaremos generando una dificultad añadida.

También los estilos de botones o enlaces deben mantener los estilos convencionales, si un botón no puede ser pulsado en un momento determinado, deberemos ocultarlo o mostrarlo con la apariencia de deshabilitado, o si un texto es un vínculo deberemos mostrarlo con el estilo subrayado.

En definitiva, intentar no dar pistas erróneas, que no haya comportamientos inesperados y favorecer las convenciones de uso ayuda a tener una buena experiencia.

4. Considerar el manejo 

Según un estudio hecho por el experto en UX Steven Hoober, más del 75% de los usuarios usa el móvil con una mano, es decir, usando sólo el dedo pulgar. 

Aplicando esta información al diseño, concluimos que, para que una aplicación sea cómoda de usar, debemos procurar que las interacciones principales y más usadas, queden al alcance de este dedo pulgar. Así, por ejemplo, colocaremos siempre el botón de acción principal, en la parte inferior de la pantalla, que es una de las zonas más accesibles cuando usamos el móvil con una mano y evitaremos ponerlo en la esquina superior izquierda.

Ilustración sobre zonas de la pantalla con mayor y menor uso
Fuente: uxmatters

También es importante diseñar elementos pensando en que se van a usar con los dedos (en su mayoría el pulgar), teniendo en cuenta que hacer controles demasiado pequeños invalidaremos o dificultaremos mucho el uso.

Ley de Fitts

La Ley de Fitts la creó el psicólogo Paul Fits en 1954, el resumen rápido aplicable de esta ley al diseño de interfaces es que un elemento será más fácil de seleccionar si es grande y no requiere mucho desplazamiento del dedo por la pantalla.

Así, intentaremos posicionar los botones de acción cerca de un extremo de la pantalla, para facilitar el uso y que se pueda hacer clic en el menor tiempo posible. 

También se puede usar esta ley en el sentido contrario. Si mostramos un pop-up con una información relevante y situamos el botón de cierre en la esquina superior (parte menos accesible), estaremos favoreciendo que el usuario esté más tiempo en esa sección, y tendrá más tiempo para leer ese contenido.

Anticipación y errores 

Intentamos siempre conseguir que el usuario se sienta seguro, para lo que diseñamos objetos que no le despistan ni le resultan ajenos. Un buen ejemplo de esto son los botones toggle. Su forma y color nos indican que son un botón, y el texto ON/OFF, ayuda a comprender lo que va a pasar al pulsarlo.

Ejemplo de botones tipo toogle

También transmitimos tranquilidad y confianza si informamos en todo momento qué está pasando en la app. Esto tiene que ver con los tiempos de espera y los errores. 

Respecto a los errores, tenemos que anticiparnos a ellos, explicar qué es lo que ha pasado y proponer soluciones para arreglarlos. Un ejemplo de esto serían las ayudas en los campos de un formulario:

Formulario para crear una cuenta en Amazon
Errores y ayudas al crear una cuenta en Amazon

Respecto a los tiempos de espera, debemos informar de lo que está haciendo la app y el tiempo aproximado restante o porcentaje que se ha completado

Otra buena práctica en este sentido son los indicadores de progreso, migas de pan o breadcrums, elementos que sitúan al usuario en la aplicación y le indican qué fases están completas y cuántas quedan por completar.

Ejemplo de camino de migas
Pasos a la hora de realizar una compra en Lookfantastic

La importancia del espacio en blanco 

Habitualmente el espacio en blanco es uno de los grandes olvidados en cuanto a diseño se refiere. Tendemos a tener miedo a dejar espacios, queremos rellenar todo con información que consideramos importante y que queremos que se vea con un primer golpe de vista, sin embargo,  al hacer esto, estamos consiguiendo confundir a nuestro usuario.

Los espacios en blanco sirven para priorizar elementos de diseño y orientar a los usuarios en la app. También ayudan a la lectura y a la comprensión, más aún cuando sabemos que los usuarios no leen el contenido de las aplicaciones, sino que las “escanean”.

Esto se explica muy bien con el diseño de los botones “Call to action”. Ya podemos poner el botón más grande y con el color más llamativo que se nos ocurra, que si no dejamos espacios en blanco a su alrededor que permita diferenciarlo del resto de elementos de la app, pasará desapercibido.

A veces, también pasa lo contrario y se peca de demasiado espacio en blanco sin justificación lo que da al usuario una sensación de vacío y de que la app no está terminada o, en el caso de las webs, que no se ha tenido en cuenta el diseño en pantallas de gran tamaño, quedando márgenes demasiado grandes que no favorece una buena Experiencia de Usuario.

Ejemplo sobre la importancia del buen uso del espacio en blanco en los textos
Fuente: Silocreativo

Animaciones y microinteracciones

Las animaciones o microinteracciones en las apps captan la atención del usuario, las hacen más “vivas” y hacen al usuario partícipe, a la vez que llaman su atención. 

Deslizar hacia arriba para actualizar los datos, darle me gusta al contenido o cambiar una configuración son ejemplos de microinteracciones. Como dijo el arquitecto y diseñador Charles Eames: “Los detalles no son detalles. Ellos hacen el diseño”

Ejemplo de animación en un botón de una app
Fuente: codemyui

Os hemos contado algunas de las buenas prácticas que utilizamos en nuestro día a día para confeccionar aplicaciones de movilidad para banca, retail, servicios, industria y resto de sectores y verticales, aunque el tema daría para escribir un libro y hay muchas más. Al final, lo que resume todo este proceso es ponernos en la piel de nuestros usuarios y diseñar apps que a nosotros mismos nos encantaría usar.

Y tú, ¿qué opinas? ¿Qué otras buenas prácticas crees que es importante aplicar? 

Relacionado: ¿Cómo asegurar una buena UX en nuestra Progressive Web App?