Pensar en pantallas pequeñas
Las mejores ideas de diseño de aplicaciones móviles comienzan con una persona que intenta hacer una cosa en una situación concreta. Elige un momento —consultar un tren, registrar una comida o compartir un recibo— y diseña el recorrido claro más corto para completar la tarea.
Un concepto útil deja claros la tarea principal, su contexto y sus límites. Estos límites evitan que una pantalla atractiva se confunda con una experiencia móvil funcional.
El concepto de una pantalla no permite saber si las personas entienden un gesto, detectan un error o pueden continuar después de una acción fallida.
Qué hacer en su lugar
Describe la tarea como una secuencia breve y luego pregunta a alguien que no conozca el concepto qué tocaría a continuación.
El diseño visual de aplicaciones no produce software instalado para Android o iOS, permisos del dispositivo ni notificaciones funcionales.
Qué hacer en su lugar
Documenta por separado el comportamiento previsto y revisa los requisitos de la plataforma antes del desarrollo.
Los nombres de ejemplo perfectos y las etiquetas breves pueden ocultar diseños demasiado ajustados, estados vacíos e información inusualmente larga.
Qué hacer en su lugar
Prueba con textos realistas, datos faltantes y un mensaje de error antes de decidir el diseño.
Pasa de una situación concreta a un pequeño conjunto de pantallas. Asegúrate de que cada paso tenga un motivo antes de añadir detalles visuales.
Describe a la persona usuaria, su objetivo y dónde se encuentra. Quien consulta una ruta con retraso durante un trayecto necesita una primera pantalla distinta de la de alguien que planifica un viaje en casa.
Enumera la primera pantalla, la decisión que permite tomar y la pantalla de resultado. Deja los ajustes opcionales y la información secundaria fuera de ese recorrido.
Comprueba si se pueden usar con una sola mano, si el texto es legible, cómo funcionan con conexiones lentas y qué ocurre cuando no hay resultados. Revisa el flujo antes de perfeccionar los colores o las ilustraciones.
Si tu concepto necesita un punto de partida más amplio, una estructura reutilizable o comprobaciones específicas de una plataforma, sigue la ruta que corresponda a tu próxima decisión.
Compara un primer boceto atractivo con un concepto listo para una revisión práctica. Cada fila te ofrece algo observable que comprobar.
| Primer boceto | Concepto listo para revisión | |
|---|---|---|
| Acción principal | Compite con varios botones igual de prominentes. | La siguiente acción para alcanzar el objetivo inmediato del usuario está clara. |
| Navegación | Todas las funciones aparecen en la primera pantalla. | La tarea principal permanece visible; las rutas secundarias tienen etiquetas predecibles. |
| Texto | Las etiquetas de relleno breves hacen que parezca que todo cabe. | Los nombres, importes e instrucciones realistas siguen siendo legibles. |
| Respuesta del sistema | Solo se muestra la pantalla de éxito ideal. | Los estados de carga, vacío, error y éxito explican lo que ocurrió. |
| Tacto | Los controles se ven precisos al tamaño de presentación. | Los controles importantes se pueden tocar cómodamente en un teléfono. |
| Contexto | Supone atención plena y una conexión confiable. | El flujo resiste las interrupciones y deja claros los datos inciertos. |
Estos ejemplos muestran dónde un concepto móvil prometedor suele necesitar una segunda revisión. Usa la ruta enlazada cuando ese tipo de reelaboración se convierta en tu principal objetivo.
Una pantalla de transporte muestra un mapa de rutas elegante, pero la próxima salida queda escondida debajo.
Coloca la hora de salida, el estado de las interrupciones y la siguiente acción útil encima del mapa. Mantén el mapa disponible para orientarse en lugar de convertirlo en la primera tarea.
Una lista de compras compartida se ve ordenada hasta que varias personas añaden nombres de artículos y notas largos.
Prueba filas saturadas, artículos completados y ediciones en conflicto. Haz que añadir y marcar artículos como completados sea más fácil que gestionar categorías.
Un concepto de registro de asistentes a un evento supone que todos tienen una señal potente y pueden leer un formulario denso al aire libre.
Haz que el estado del asistente sea legible de un vistazo y planifica qué debe decir la interfaz cuando no se pueda actualizar la información.
Un concepto de portafolio da prioridad a las animaciones, mientras que los visitantes principalmente quieren encontrar un proyecto y ponerse en contacto.
Da prioridad a explorar los proyectos y a una ruta de contacto clara. Deja que la expresión visual respalde el contenido en lugar de retrasarlo.
Elige una situación de los ejemplos o escribe una propia en una frase. App Design puede orientarte hacia un punto de partida en el navegador; comprueba las herramientas y condiciones disponibles en el sitio de destino antes de dar por hecho que ofrece una función o un resultado concretos.
Empieza por una situación recurrente, no por un estilo visual: ¿quién necesita hacer qué y con qué limitaciones? Esboza la primera acción y el resultado útil antes de elegir colores o reunir referencias.
Un teléfono suele usarse en sesiones breves e interrumpidas, con poco espacio para mostrar varias opciones a la vez. Un concepto móvil debe hacer que la tarea inmediata sea fácil de identificar y comprobar que los controles, el texto y los mensajes de respuesta funcionan bien en una pantalla de teléfono.
Incluye las pantallas suficientes para mostrar el inicio, una decisión importante y el resultado. Añade un estado vacío o de error si cambia lo que la persona debe hacer; una gran colección de pantallas es menos útil que un recorrido coherente.
Puede revelar etiquetas poco claras, pantallas recargadas y pasos que faltan, pero no puede demostrar la facilidad de uso ni implementar funciones nativas. Prueba la tarea con personas y revisa los requisitos técnicos y de la plataforma antes de considerar el concepto una aplicación terminada.