Empieza con una descripción breve
Empieza con un usuario, una tarea y la pantalla donde comienza esa tarea. App Design muestra cómo convertir esa descripción breve en un plan práctico de diseño de aplicaciones antes de abrir un flujo de trabajo en el navegador.
Una descripción breve útil necesita menos detalles que una especificación, pero más orientación que el nombre de una aplicación.
Anota quiénes usarán la aplicación, qué acción deben completar y qué información debe mostrar. Después, elige un enfoque inicial que se ajuste al trabajo.
Necesitas explicar un concepto de reservas sin diseñar todas las pantallas de configuración y de cuenta.
Esboza primero los estados de búsqueda, selección y confirmación; evalúa el software de diseño de aplicaciones cuando el concepto necesite un sistema de pantallas más completo.
Quieres un proceso de inscripción a eventos que la gente pueda entender de un vistazo.
Enumera los campos obligatorios y el mensaje de confirmación; evalúa las plantillas gratuitas de diseño de aplicaciones móviles para encontrar un diseño inicial adecuado.
Una solicitud de funcionalidad dice que los usuarios deben poder guardar elementos, pero nunca describe qué sucede después.
Define los estados de los elementos guardados y no guardados antes de elegir un software de diseño de aplicaciones para trabajar el producto con más detalle.
Tienes una idea para una aplicación móvil de seguimiento de hábitos y necesitas una primera pantalla con un objetivo claro.
Define los estados del registro diario y de los días sin registrar; usa plantillas gratuitas de diseño de aplicaciones móviles como referencia para la disposición, no como sustituto de las decisiones.
Aquí tienes un ejemplo concreto de diseño de aplicaciones para una idea de reserva de citas, desde una solicitud inicial hasta un plan de pantallas que puedes revisar.
Escribe: Un paciente necesita encontrar una cita disponible y saber que ha quedado reservada. Anota la información mínima necesaria: servicio, fecha, hora y una forma de confirmar la elección. Deja las funciones administrativas fuera de esta primera versión.
Esboza una pantalla de selección del servicio, una de disponibilidad y una de confirmación. Para cada una, indica la acción principal y qué debería ver el usuario después. En la vista de disponibilidad, contempla el caso de una fecha sin horarios disponibles.
Revisa el recorrido desde la selección hasta la confirmación. Pregúntate si la hora elegida sigue siendo clara, si se explica por qué un horario no está disponible y si la confirmación identifica la cita. Revisa el documento de requisitos antes de perfeccionar los detalles visuales.
Una herramienta gratuita para crear diseños de aplicaciones es un punto de partida para tomar decisiones, no una prueba de que una interfaz funcione en producción.
Una disposición que parece adecuada no demuestra que los usuarios reales encuentren la siguiente acción o entiendan las etiquetas.
Qué hacer en su lugar
Muestra el flujo propuesto a alguien que no conozca la idea y pídele que explique qué tocaría.
Los botones, los datos de disponibilidad, la validación y los mensajes de confirmación aún requieren decisiones de producto e ingeniería.
Qué hacer en su lugar
Anota en cada estado importante qué lo desencadena, qué datos requiere y cuál es la respuesta esperada.
No dé por sentado que todas las herramientas basadas en navegador incluyen las mismas funciones o permiten obtener cualquier resultado sin condiciones.
Qué hacer en su lugar
Compruebe las condiciones actuales de acceso y exportación del sitio de destino antes de depender de un flujo de trabajo específico.
Para este ejemplo de reserva, compare dos maneras de iniciar el trabajo de diseño de aplicaciones. Son enfoques de planificación, no afirmaciones sobre las funciones del sitio enlazado.
| Enfoque desde cero | Enfoque basado en plantillas | |
|---|---|---|
| Mejor punto de partida | Una tarea del usuario y una breve lista de la información necesaria | Un patrón de pantalla pertinente junto con la misma descripción de la tarea |
| Primera decisión | Elegir la secuencia de pantallas | Decidir qué partes del patrón se ajustan a la tarea |
| Ejemplo de reserva | Colocar el servicio, la fecha y la hora en un orden deliberado | Comprobar si un diseño de reserva de ejemplo sigue ese orden |
| Principal ventaja | Libertad para estructurar un flujo poco conocido | Un diseño visible para evaluar y adaptar |
| Principal riesgo | Dedicar demasiado tiempo a organizar los elementos básicos | Conservar campos o pasos que los usuarios no necesitan |
| Siguiente revisión | Comprobar si cada pantalla tiene una siguiente acción clara | Comprueba si el patrón adaptado sigue respondiendo a los requisitos |
Un diseño visual pulido no sirve como plan de diseño de aplicaciones si oculta los resultados vacíos, las entradas no válidas o lo que ocurre después de tocar un elemento. Lleva tus requisitos al flujo de trabajo del navegador y compara la propuesta resultante con los estados y las decisiones enumerados arriba.
Prepara una frase que describa a quién va dirigida la aplicación y qué necesita lograr esa persona. Añade la información que debe mostrar la primera pantalla y una situación en la que la tarea podría fallar; así tendrás más elementos con los que trabajar que si solo pides un estilo visual.
El flujo de trabajo de esta página sirve para planificar pantallas y decisiones, no para prometer una aplicación funcional. Los datos, las interacciones, las pruebas y la implementación son trabajos aparte.
Empieza con una pantalla en blanco cuando la tarea o la secuencia sea poco habitual y necesites definir su estructura. Usa una plantilla cuando su patrón se ajuste bien a tu tarea, pero elimina los campos o pasos que no correspondan.
Sigue la tarea del usuario desde el punto de entrada hasta el resultado e identifica la acción en cada pantalla. Revisa al menos un estado vacío, de error o de no disponibilidad antes de considerar que el plan está listo para recibir comentarios.