La gente decide si una app se siente bien en los primeros toques. Casi toda esa sensación sale de detalles pequeños que se comportan igual cada vez, y muy poco de las animaciones grandes.
Esto es lo que cuidamos al diseñar una app, con ejemplos de Lyapp, la app para registrar el sueño de los bebés que lanzamos este año.
Objetivos grandes para una mano
Apple recomienda áreas táctiles de al menos 44 por 44 puntos y Material Design usa 48 por 48 dp. El tamaño es solo la mitad: la ubicación también importa. La mayoría sostiene el teléfono con una mano, así que las acciones principales van donde el pulgar llega sin estirarse.
- Fácil: acciones principales
- Estiramiento: acciones secundarias
- Difícil: ajustes, acciones raras
En Lyapp la acción principal, iniciar el temporizador de sueño, es un botón ancho en la zona fácil, porque el otro brazo suele estar sosteniendo al bebé.
Respuesta en una décima de segundo
Un toque debería cambiar algo en pantalla de inmediato. Cerca de 0,1 segundos se siente instantáneo, así que el estado presionado, un resaltado o una vibración leve deberían aparecer en ese tiempo, aunque el trabajo real tarde más. Si tarda más de un segundo, muestra el progreso.
Un estado que te acompaña
Un temporizador en marcha no debería desaparecer al cerrar la app. Lyapp lo mantiene en la pantalla de bloqueo y en la Dynamic Island con Live Activities, así se puede revisar sin abrir la app. Inicia el temporizador y bloquea el teléfono:
Pantallas vacías que ayudan
La primera vez que alguien abre una app, casi todas las pantallas están vacías. Una lista sin nada parece rota. Una frase corta que explique qué va a aparecer ahí y un botón para agregar lo primero convierten ese momento en un punto de partida.
Consistencia antes que adorno
Cuando el botón de inicio se ve y responde igual cada vez, la gente deja de pensar en él. Usa una sola curva de animación y pocas duraciones en toda la app, mantén los íconos en un mismo estilo y guarda los movimientos grandes para lo que vale la pena celebrar, como terminar la configuración.
