Diseño de apps: por qué el UX/UI decide si una app se usa o se borra

Una app no se usa una vez. Se abre cientos de veces durante meses o años, y cualquier paso de más se repite en cada uso. Por eso, en el diseño de apps, el UX/UI pesa más que en una web que se visita de vez en cuando.

Segundos que acaban siendo horas

Un menú confuso o una pantalla de más cuestan dos o tres segundos cada vez. Multiplicado por cientos de usos al año, son horas que el usuario nota aunque no sepa decir por qué la app le resulta pesada.

Cuando hablamos de UX/UI hablamos sobre todo de eso: de que lo que el usuario viene a hacer se haga rápido. Que además quede bonita viene después.

Navegación: que no haya que pensar dónde tocar

Cada vez que alguien se para a buscar dónde está una opción, pierde tiempo y un poco de confianza en la app. Una buena navegación evita esa pausa.

• Lo que se usa a menudo, a un toque.
• Los patrones que el usuario ya conoce de su móvil: pestañas, gestos, botón de volver.
• Los mínimos pasos posibles para cada tarea.
• Respuesta inmediata al tocar, para que se sepa que el toque ha funcionado.

Diseñar para el pulgar

El móvil se usa muchas veces con una mano y en ratos cortos: esperando el autobús, andando, entre una cosa y otra. Por eso las acciones frecuentes van en la parte de abajo de la pantalla, donde el pulgar llega sin estirarse.

Coherencia entre pantallas

Si un gesto hace una cosa en una pantalla y otra distinta en la siguiente, el usuario tiene que volver a pensar en cada una. Cuando toda la app funciona igual, se aprende una vez y ya está.

La pantalla de inicio: lo que importa, a la vista

La pantalla que más se ve de una app es la primera. Si al abrirla el usuario tiene que ir a buscar lo que viene a mirar, ese paso de más se repite cada día. Por eso decidimos qué va en ella antes que nada, preguntando qué hace el usuario nada más abrir la app y qué necesita ver para seguir usándola.

En la app de entrenamiento que hicimos para los clientes de Óscar Soto, la pantalla de inicio reúne la carga semanal, las clases hechas en la semana, el peso y la racha activa. Las rachas y el objetivo de clases por semana salen del propio encargo: que quien entrena no pierda el hábito, que es lo que de verdad cuesta. Las decisiones de diseño, contadas en app para entrenador personal.

Primero un prototipo, después el código

Antes de programar diseñamos la app como un prototipo navegable: las pantallas de verdad, enlazadas entre sí, que se abren en el móvil y se recorren tocando como si la app ya existiera. Lo pruebas con tu equipo y con algún cliente, y lo corregimos mientras cambiar cosas todavía es barato. Mover un botón en un prototipo es cuestión de minutos; en una app ya programada puede arrastrar cambios en varias pantallas y en el servidor.

Un prototipo enseña cosas que en una reunión no salen: la persona que no encuentra dónde reservar, el paso que nadie entiende para qué está, la pantalla que sobra. Es la parte del desarrollo de apps iOS y Android en Vigo que más dinero ahorra después.

Accesibilidad: que la pueda usar todo el mundo

Una app bien diseñada también la usa quien ve peor, quien tiene el texto del móvil en grande o quien maneja el teléfono con el lector de pantalla. No hace falta una app distinta, sino cuidar algunas cosas desde el diseño:

• Zonas táctiles de al menos 44 × 44 puntos en iPhone y 48 × 48 dp en Android, que es lo que recomiendan Apple y Google.
• Texto que crece cuando el usuario agranda la letra en los ajustes del móvil, sin que la pantalla se rompa.
• Contraste suficiente entre el texto y el fondo, también al sol.
• Botones e imágenes con nombre para VoiceOver y TalkBack, los lectores de pantalla de iPhone y Android.

Casi todo eso mejora la app para todos: un botón grande se acierta mejor andando y un texto con buen contraste se lee mejor en la calle.

Qué pedir a quien vaya a diseñar tu app

• Un prototipo navegable que puedas abrir en tu móvil antes de que empiece la programación.
• Pruebas con personas que se parezcan a tus usuarios, no solo con quien encarga la app.
• Pantallas pensadas para el móvil de verdad: con una mano, con prisa y con la letra grande.
• Que quien diseña y quien programa trabajen juntos, para que lo aprobado en el prototipo sea lo que se publica.

Si el diseño llega como un PDF con pantallas sueltas que no se pueden tocar, falta la parte que más errores evita.

En Action, antes de discutir colores o tipografía, medimos cuántos pasos y cuánto tiempo cuesta cada acción. Y la app la diseña y la programa el mismo equipo senior, de principio a fin y sin subcontratas.