Tutorial de interfaces
Una forma práctica de aprender a diseñar la interfaz de usuario de una aplicación
Empieza con una tarea del usuario y conviértela en un pequeño conjunto de pantallas conectadas. Este tutorial de diseño de aplicaciones te ofrece una secuencia que puedes seguir en un navegador, además de comprobaciones importantes antes de compartir un borrador.
requisitos previos
Elige un público, un dispositivo y una tarea concretos antes de dibujar las pantallas. Anota qué necesita lograr el usuario, qué información necesita y cómo reconocerás que ha completado la tarea con éxito.
- diseño de aplicaciones frente a diseño de interfaces de usuario Aclara qué decisiones corresponden a la interfaz y cuáles a la experiencia más amplia del producto.
- plantillas gratuitas de diseño de aplicaciones móviles Usa una plantilla para móviles como referencia inicial y comprueba si su distribución se adapta a tu tarea.
- software de diseño de aplicaciones Compara las funciones que conviene buscar al elegir una herramienta para desarrollar borradores de pantallas.
pasos numerados
Avanza del comportamiento a la estructura y, después, a los detalles visuales. Puedes repetir estos pasos cada vez que una prueba revele una decisión confusa.
-
1
Define el recorrido principal
Elige un objetivo, como registrar un gasto o encontrar un artículo guardado. Enumera el punto de partida del usuario, la acción que realiza y la confirmación que espera. Identifica la información necesaria y deja las funciones secundarias fuera del primer recorrido. Así mantendrás el diseño de aplicaciones centrado en el objetivo: si una pantalla no ayuda a alguien a alcanzarlo, quizá no deba estar en este borrador.
-
2
Traza las pantallas y las decisiones
Esboza el conjunto mínimo de pantallas que cubra el recorrido. Dibuja flechas para indicar la navegación, incluida una ruta de regreso y una forma de corregir un error. Señala los puntos de decisión, como elegir una categoría o aprobar un cambio. Antes de pulir la interfaz de usuario, sigue tú mismo las flechas: ¿se puede alcanzar el objetivo sin tener que adivinar dónde tocar después?
-
3
Crea una distribución de baja fidelidad
Sitúa los encabezados, controles, contenidos y elementos de navegación en bloques aproximados. Mantén la acción principal en una posición coherente y dale una etiqueta clara; agrupa los campos relacionados y coloca la ayuda cerca de la opción que explica. Diseña el borrador para el tamaño del dispositivo que elegiste, pero examina también las pantallas con mucho contenido. En diseño de aplicaciones, una pantalla vacía y ordenada es menos útil que una distribución que siga funcionando con contenido realista.
-
4
Aplica un sistema visual
Elige un pequeño conjunto de tamaños de letra, intervalos de espaciado y colores con funciones diferenciadas. Da el mismo tratamiento a las acciones y los estados que se repiten para que los usuarios reconozcan patrones entre pantallas. Comprueba el contraste, la legibilidad del texto, el espacio entre zonas táctiles y si el significado se mantiene sin depender solo del color. La coherencia visual facilita explorar la interfaz de usuario, pero no puede arreglar un recorrido poco claro.
-
5
Evalúa el diseño con una tarea
Muestra el borrador con las pantallas conectadas a alguien que no conozca tu plan. Pídele que complete la tarea original sin darle indicaciones y observa dónde se detiene, toma un camino equivocado o no percibe una respuesta de la interfaz. Revisa las etiquetas o el flujo que causaron el problema y vuelve a probar la tarea. Trata cada evaluación como información para la siguiente decisión de diseño de aplicaciones, no como una votación sobre los colores.
errores comunes y soluciones
Una pantalla puede parecer terminada aunque queden aspectos esenciales de su funcionamiento por resolver. Estas comprobaciones revelan las carencias antes de que inviertas más tiempo en pulir el aspecto visual.
Diseñar solo el recorrido ideal
Una maqueta cuidada no muestra qué ocurre cuando un campo está vacío, una búsqueda no arroja resultados o una solicitud falla. Sin esos estados, el recorrido previsto puede interrumpirse ante el primer contratiempo.
Qué hacer en su lugar
Añade estados de vacío, error y éxito para la tarea principal. Define la siguiente acción que ofrece cada estado y traza una ruta para volver a la tarea.
Dar por hecho que el diseño funcionará en todas partes
Un borrador en el navegador no permite determinar cómo se verá y funcionará en cada dispositivo, orientación, teclado o tecnología de asistencia. El texto puede distribuirse en líneas de otra manera, y los controles que parecen estar suficientemente separados pueden resultar difíciles de usar.
Qué hacer en su lugar
Revisa los diseños estrechos y anchos con texto realista. Comprueba el orden del foco, las etiquetas y la interacción en las plataformas que piensas admitir.
Confundir un borrador con un producto funcional
Las pantallas comunican el funcionamiento previsto; no implementan el almacenamiento de datos, la autenticación, las notificaciones ni las interacciones específicas de cada plataforma. El diseño de aplicaciones por sí solo no puede confirmar que un requisito técnico sea viable.
Qué hacer en su lugar
Anota los supuestos junto a las pantallas afectadas y revísalos con un ingeniero antes de considerar el recorrido como un plan de implementación.
Evaluar las preferencias visuales en lugar de la facilidad de uso
Preguntar a las personas si les gusta la interfaz rara vez revela por qué no pueden completar una tarea. La familiaridad y las preferencias de color pueden desviar la atención de una etiqueta ausente o de un paso de navegación inesperado.
Qué hacer en su lugar
Da a quienes revisen el diseño un objetivo, observa qué hacen y registra dónde surge la confusión antes de pedirles su opinión. Cambia un problema a la vez y vuelve a probar.
consejos avanzados
Una vez que funcione el recorrido principal, revísalo pensando en textos más largos, tareas interrumpidas y usuarios que regresan. Comprueba si una misma acción tiene el mismo nombre en todas las pantallas, si una persona puede deshacer una decisión importante y si la confirmación explica lo ocurrido. Mantén un breve registro de las decisiones y los supuestos pendientes junto con tu trabajo de diseño de aplicaciones. App Design enlaza a un flujo de trabajo en el navegador donde puedes explorar la siguiente etapa; comprueba allí las herramientas disponibles y las condiciones de acceso antes de depender de una función concreta.
Lleva tu borrador de pantallas a un flujo de trabajo en el navegador
- Traslada una tarea de usuario claramente definida al siguiente borrador.
- Comprueba los estados alternativos antes de añadir más pantallas.
- Valida el funcionamiento en el dispositivo previsto.
Preguntas frecuentes del tutorial
Elige un público y una tarea, y luego define las pantallas necesarias para completarla. Empieza con bocetos generales en lugar de colores definitivos. Comprueba que el recorrido por esas pantallas tenga sentido antes de perfeccionar el aspecto visual.
Define primero el flujo para que cada pantalla tenga una razón de ser. Un esquema sencillo del punto de partida, las decisiones y el resultado te ayudará a detectar pasos que faltan. Después podrás organizar el contenido y los controles de cada etapa del flujo.
Un proceso basado en el navegador puede servir para planificar, crear borradores y revisar una interfaz sin que instalar un programa de escritorio sea un requisito inicial. Consulta las capacidades concretas de cualquier producto enlazado en su propio sitio web. Aun así, tendrás que validar la interfaz resultante en los dispositivos y plataformas que piensas admitir.
Incluye suficientes pantallas para mostrar la tarea principal desde el inicio hasta la confirmación, además de cualquier paso esencial de decisión o recuperación. No hay un número universal de pantallas: la tarea determina cuáles son necesarias. Evita añadir pantallas solo para que el diseño de aplicaciones parezca más completo.
Pide a alguien que no conozca el borrador que complete una tarea concreta sin indicarle dónde pulsar. Observa las pausas, los desvíos y los mensajes de respuesta que pase por alto; después, corrige la causa de cada problema. Un buen borrador visual debe dejar clara la siguiente acción, no solo tener un aspecto coherente.