Cómo encontrar inspiración para interfaces móviles y convertirla en un documento de diseño

1. Comience con una pregunta de diseño

Antes de navegar, escribe una frase sobre la persona y el momento para el que estás diseñando. Por ejemplo: "Un cocinero casero por primera vez debe elegir una receta para la noche entre semana y saber qué hacer a continuación". Luego, nombre la incertidumbre: ¿la parte difícil es analizar opciones, confiar en una recomendación o comenzar una receta de varios pasos?

Esa pregunta da los límites de la búsqueda. Decida qué plataforma, área de producto y tarea importan. Si está explorando una experiencia de primer uso, busque ejemplos de primeros pasos; si el problema es la selección del plan, mire las pantallas de suscripción; para la entrada de datos, compare patrones de formulario. ScreenKits te permite explorar pantallas de aplicaciones reales por categoría. Guarde aplicaciones útiles como favoritos del navegador para que pueda volver a sus pantallas durante la síntesis.

• ¿Quién es la persona prevista y qué intenta lograr?
• ¿Qué elección de diseño es incierta: jerarquía, secuencia, navegación, contenido o retroalimentación?
• ¿Qué limitaciones importan, como la plataforma, la accesibilidad, el tamaño del dispositivo o las reglas comerciales?

2. Reúna un conjunto de referencia pequeño y útil

Reúna algunos ejemplos que aborden la misma tarea o una estrechamente relacionada. Incluya más de un enfoque: una ruta directa, una ruta guiada, tal vez una versión que maneje un error o un estado vacío. Para cada candidato, guarde la aplicación y anote la pantalla o el momento que desea volver a visitar. Un conjunto compacto hace que la comparación sea más fácil que un tablero de inspiración sin filtrar.

Mire entre categorías cuando se comparte el problema subyacente. Es posible que tanto una aplicación de programación como una aplicación de comestibles necesiten ayudar a alguien a elegir una fecha y confirmar un cambio. La conexión útil es la estructura de decisión, no el tema superficial. Evite tratar a una audiencia o industria similar como prueba de que su interfaz resuelve su problema específico.

• Elija referencias por un motivo que pueda indicar, como "muestra cómo una opción seleccionada cambia el resumen".
• Incluya diferentes soluciones para que el primer ejemplo pulido no se convierta en la respuesta predeterminada.
• Utilice los marcadores del navegador para mantener las aplicaciones seleccionadas disponibles para compararlas mientras escribe el informe.

3. Examina el flujo, no solo una captura

Una pantalla aislada muestra disposición, color, texto y controles al mismo tiempo. No revela qué condujo allí, qué sucede después de un toque o si una tarea tiene éxito. Pase por cada pantalla relevante en orden. Tenga en cuenta el punto de entrada, la decisión, la acción, la retroalimentación y el siguiente estado. Incluya alternativas como errores de validación, despidos y volver a editar una elección cuando esos estados afecten la tarea.

Separe la observación de la interpretación. “La acción principal permanece cerca del final en tres pasos” es una observación; "Esto debe ser más fácil de usar" es una afirmación que usted no ha establecido. Una captura de pantalla puede inspirar una hipótesis, pero no es una prueba de usabilidad. NN/g describe la creación de prototipos y las pruebas de usuario como formas de identificar posibles problemas de usabilidad y aprender cómo las personas interactúan con una interfaz propuesta.

4. Convierte las observaciones en un documento de diseño propio

La síntesis es donde las referencias se vuelven útiles. Saque un principio que pueda aplicarse, como "hacer visible la consecuencia de una selección antes de la confirmación". Luego decida cómo debería funcionar ese principio en su producto, en función de su tarea, contenido y limitaciones. No copie una ilustración de marca, un texto exacto o un diseño distintivo sólo porque aparece en un ejemplo convincente.

En el ejemplo de una receta, las referencias pueden sugerir mostrar las opciones con antelación y ofrecer una vista previa de los cambios al seleccionar un filtro. El documento de diseño puede especificar una ruta breve para la planificación de la cena, una restricción de tiempo visible, estados de filtro claros y un paso de revisión antes de guardar. Esas decisiones responden al objetivo del producto; no recrean la pantalla de otra aplicación.

• Audiencia y contexto: ¿quién lo necesita y dónde o cuándo lo utilizarán?
• Objetivo y éxito del usuario: ¿qué deberían poder terminar o comprender?
• Flujo: ¿cuáles son los principales pasos, decisiones y estados alternativos importantes?
• Principios de diseño: ¿qué debería hacer la interfaz clara o sencilla?
• Limitaciones y preguntas abiertas: ¿qué debe ser verdad y qué necesita investigación?
• Plan de evaluación: ¿qué tarea le darás a alguien que utilice el prototipo y qué observarás?

5. Crea un prototipo, comprueba la accesibilidad y perfecciona

Convierta el informe en un flujo de alambre aproximado antes de pulir el estilo visual. Haga un prototipo de la decisión clave y su retroalimentación, luego pida a alguien representativo de la audiencia prevista que complete una tarea realista. Esté atento a las vacilaciones, las decisiones inesperadas y los errores. Revisar el flujo y repetir; La guía de investigación de NN/g trata el diseño iterativo y la evaluación de prototipos como parte del aprendizaje, en lugar de asumir que un primer borrador está resuelto.

Realice una revisión de accesibilidad junto con ese trabajo. Las Directrices de interfaz humana de Apple enfatizan las interacciones perceptibles y adaptables y la consideración de diferentes métodos de entrada. Verifique el cambio de tamaño del texto, el contraste, controle el tamaño y el espaciado, borre las etiquetas y si el significado depende únicamente del color. Compruebe también que el flujo se adapte a textos más largos y pueda entenderse con tecnologías de asistencia. La guía de accesibilidad de Material Design es un complemento útil cuando su producto sigue las convenciones de Android.

• Ofrezca una indicación de tarea, no un recorrido por la interfaz, y observe si las personas pueden continuar.
• Pruebe una versión inicial con pocos detalles mientras los cambios estructurales aún sean fáciles.
• Revise la guía de la plataforma relevante para el dispositivo y el sistema de diseño que admite.
• Regrese a las referencias sólo para investigar una pregunta; no permita que el parecido visual sustituya a la evidencia.

Lista para pasar de referencias a un documento de diseño

Antes de entregar el informe, asegúrese de que describa una decisión sobre el producto en lugar de un panel de estado de ánimo. Alguien que no haya recopilado las referencias debería poder comprender la tarea prevista, el flujo propuesto, las opciones aún sin resolver y cómo el equipo planea saber si el diseño funciona.

• El usuario y la tarea originales son explícitos.
• Cada referencia tiene una nota que explica qué pregunta o patrón ayuda a explorar.
• Las observaciones están separadas de las suposiciones y afirmaciones de usabilidad.
• El informe describe un flujo original y una justificación específica del producto.
• Se incluyen accesibilidad, comportamiento de la plataforma y estados alternativos importantes.
• Se definen una tarea prototipo y un plan de revisión basado en observaciones.