Césped de diseño móvil
El diseño de UX móvil se está volviendo cada vez más maduro. Una forma de medirlo es observar las herramientas a nuestra disposición. Utilizamos herramientas de creación de prototipos (como Balsamiq, Axure, Fireworks) para crear estructuras alámbricas y hacer clic en muñecos que nos ayuden a explicar una UX específica. Los marcos para varios navegadores (como PhoneGap, Zurb Foundation, jQuery Mobile) nos ayudan a crear un prototipo utilizando el lenguaje natural de la Web (como HTML, CSS, JavaScript).
Parece que pronto alcanzaremos nuevas alturas en el diseño de grandes experiencias. Sin embargo, estas herramientas tienen un costo oculto: nos tientan a saltarnos la clave para crear un producto bien diseñado, lo que requiere mucho tiempo para comprender el problema que tenemos.
Es por eso que te recomiendo que primero esboces el problema, luego te preocupes por tus herramientas favoritas y luego propongas el concepto.
Ahora, quizás estés pensando en uno de los siguientes escenarios:
No sólo he escuchado estas objeciones muchas veces, sino que también me las he dicho a mí mismo muchas veces.
Dibujar nos da espacio para explorar problemas mientras construimos soluciones. Desarrolla nuestra comprensión del problema y nos ayuda a encontrar posibles soluciones.
A medida que dibujamos nuestras ideas, surge nueva inspiración. Los bocetos vagos y descuidados pueden generar inspiración. Aquí, la ambigüedad es algo bueno porque llenamos todos los vacíos de nuestra mente. ¿A esto se le llama suplementación cerebral? ). Este es el “poder generativo” del boceto: captura nuestras ideas existentes e inspira otras nuevas. Como dice Bill Buxton en Mapping the User Experience:
Al esbozar soluciones, podemos explorarlas sin entregarlas. Esto nos da una nueva perspectiva y plantea nuevas preguntas. Dibujar es esencialmente un ejercicio de lluvia de ideas.
La forma más rápida de olvidar algo es coger papel y lápiz y dibujarlo rápidamente. Hacer lo mismo en una herramienta de creación de prototipos llevaría más tiempo: primero, crear un nuevo proyecto, luego elegir la biblioteca adecuada; dibujar rectángulos en el lienzo y luego dibujar flechas para conectar estos rectángulos y ajustar todo para que se vean mejor; y luego... luego pasaron 30 minutos o incluso más.
Si no te gusta lo que dibujaste en el papel, puedes tirarlo a la basura y dibujar otro. Con las herramientas de creación de prototipos, todo se vuelve difícil debido al tiempo y el esfuerzo invertidos en ello, incluso si no es una buena inspiración. Empezar de nuevo es aún más difícil. Por el contrario, los bocetos en papel son más baratos y rápidos.
El boceto es una herramienta poderosa para involucrar a las partes interesadas en el proceso de diseño. La siguiente pregunta del “huevo y la gallina” es clásica: las partes interesadas no pueden planificar un requisito completo hasta que vean un ejemplo visual de la solución. Pero los diseñadores no quieren empezar a trabajar en una solución antes de que se hayan definido los requisitos: intentamos evitar modificaciones que provocarían trabajo adicional.
La forma de salir de este dilema es esbozar posibles soluciones en un estudio colaborativo, como un estudio de diseño (consulte el artículo de Will Evans "Introducción a la metodología del estudio de diseño" para obtener más detalles). Podemos trabajar paso a paso a través de nuestros conceptos (incluidas las alternativas) con las partes interesadas, explicándoles las implicaciones de diseño de sus requisitos.
El umbral de entrada para dibujar es bajo y se permite participar a personas que no sean diseñadores. La distribución de bolígrafos a las partes interesadas es una cuestión de gusto personal y controversia. Deberías ordenar tus pensamientos. )
Debido a que el boceto es tosco e inacabado, la retroalimentación es relativamente fácil. Algunas personas se abstienen hasta ver una versión hermosa y muy terminada porque piensan que hay que hacer todo el trabajo. Las imágenes de alta fidelidad distraen a las personas: valoran más el diseño visual o los detalles. Dibujar les permite centrarse en conceptos básicos.
Lo que debes superar es que no quieres mostrar a los demás un trabajo duro.
La gente generalmente no entiende que los bocetos deben verse bien, pero el diseño de interacción no es una clase de arte. No es necesario que tus bocetos se vean bien; solo deben transmitir tus pensamientos.
Deben estimular el debate y generar ideas; es poco probable que se enmarquen y se cuelguen en la pared. Con que puedas dibujar rectángulos, flechas, círculos y dibujos sencillos, es suficiente. Como dice Joshua Brewer en Sketch, Sketch, Sketch:
Aprender a dibujar está más allá del alcance de este artículo, pero los siguientes programas, artículos y libros son bastante básicos:
Creo que dibujar se ha convertido en parte de tu flujo de trabajo. Hablemos de cómo delinear un proyecto de telefonía móvil.
Al principio, es posible que recopile diferentes ideas para una aplicación móvil (o un sitio web). Comience a dibujar varias versiones de una página (o sección) de una aplicación. Tienes dos objetivos: generar muchas ideas y explorarlas y evaluarlas simultáneamente. Cuantas más ideas tengas, más opciones tendrás. Este proceso a menudo se denomina boceto divergente.
Para este tipo de bocetos existe una herramienta muy útil llamada plantilla multipágina. Proporciona suficiente espacio para dibujar seis versiones en la misma página y también proporciona orientación en la pantalla. Al mostrar diferentes ideas, facilita la comparación y discusión posterior.
Hay muchas plantillas listas para usar en Internet (normalmente uso la de Erik Loehfelm). Simplemente elige lo que quieras.
La captura de pantalla anterior muestra seis ideas para el menú principal de la aplicación (prueba vívida de que mis bocetos no son bonitos). No suelo presentar seis versiones, pero sí al menos tres. Dado que se trata de una sesión de lluvia de ideas y desea más opciones, lo que desea es cantidad.
Si simplemente te falta creatividad, puedes explorar algunas galerías de UI móviles para encontrar inspiración (como Inspiration UI, PTT RNS, Cute UI, UIParade). Muestran soluciones por título y función, como menús principales y cuadros de diálogo. Absorbe lo que te gusta e intégralo en tus propios pensamientos.
Acostúmbrate a poner subtítulos a tus bocetos. Este producto le permite distinguirlos mejor y encontrarlos nuevamente. Agregaré notas para explicar el boceto y el proceso de pensamiento detrás de él (ventajas, desventajas, compensaciones con otros conceptos, problemas, nuevas características, etc.). ). También son habituales las etiquetas y horarios.
Cuando tengas muchas versiones diferentes de un boceto, elige la mejor. Desafortunadamente, un simple boceto difícilmente puede representar todas las situaciones. La mayoría de las veces, es necesario combinar una idea o una colección de ideas para crear un concepto ganador. Necesita explorar más agregando más detalles. Por favor deje un mensaje en el espacio en blanco. Anote todas las preguntas, ideas, puntos importantes y poco claros, todos los temas a discutir. Esto permitirá que otros comprendan mejor su proceso de pensamiento. Este paso a menudo se denomina "dibujo de convergencia".
Para obtener más información sobre bocetos divergentes y convergentes, consulte la presentación de Leah Buley "Good Design Faster" en Failcon 2010 y el artículo de Brandon Shauer "Sketchboard: Discovering Better, Faster UX Solutions".
Después de haber resumido sus ideas en un conjunto de interfaces clave, el siguiente paso es explorar cómo se relacionan. Genere algunos flujos de interfaz de usuario (es decir, una serie de fotogramas clave) para mostrar cómo los usuarios completan las tareas utilizando su solución. Un diagrama de flujo de la interfaz de usuario identifica qué elementos de la interfaz se utilizan (como en qué botón se hizo clic, qué gesto se utilizó) y comentarios del sistema (como animaciones, transiciones, cuadros de diálogo emergentes o nuevas interfaces). Al mismo tiempo, también muestra los diferentes estados de las interfaces clave (por ejemplo, al principio estaba en blanco y luego lleno de contenido).
Sin utilizar un diagrama de flujo de la interfaz de usuario, puedes imaginar diferentes resultados (por ejemplo, una lista de resultados de búsqueda y una lista vacía). Su diagrama de flujo ya no es lineal; diferentes ramas tendrán resultados diferentes. Pero trate de limitar el número de ramas en el diagrama de flujo. Cada rama añade complejidad, pero su diagrama de flujo es más difícil de entender. También es más difícil explicarlos.
No es necesario redactar todos los casos de uso; simplemente seleccione los importantes. La ley de Pareto propone un buen método: dibujar una función de 20 para manejar el caso de 80.
Normalmente empiezo con un caso de uso clave e intento encontrar una solución para él.
Identificaré las interacciones en la interfaz y las conectaré con flechas. Explico cada paso y etiqueta y suelo comentar como loco.
Después de leer el siguiente artículo, tendrá una impresión más profunda sobre cómo delinear interfaces móviles y diagramas de flujo de UI. el artículo de Gisele Muller "Inspiring UI Wireframe Sketches"; moobileframes: un blog que muestra bocetos de wireframes móviles en el sitio web de Jacob Linowski. También puede utilizar la "Notación de boceto interactiva" (PDF) de Jakub en sus diagramas de flujo.
Existen algunos escenarios que le mostrarán cómo se relacionan entre sí los tres pasos anteriores. Estos son algunos pasos típicos para dibujar:
Puedes ver que hay muchas preguntas del tipo "¿Por qué?". Esto se debe a que dibujar es un intento de comprender un problema y al mismo tiempo resolverlo. Escriba los problemas que encontró con estos bocetos junto a ellos para guiarlo y obtener los conceptos correctos esta vez.
Después de trazar las interfaces clave y los principales casos de uso, es posible que desees aplicar tus conceptos a tu teléfono. Aplicaciones como Pop y Protosketch te permiten importar bocetos y luego crear prototipos. Esta es una forma rápida, económica y real de experimentar intuitivamente toda la interacción del concepto, lo que hará que la interacción del prototipo sea más realista.
O importe su interfaz a una herramienta con más funciones (como Axure) y cree un prototipo allí.
No importa el método que utilices. Su objetivo es probar rápidamente sus conceptos y efectos en un teléfono real.
Dibujar te ayuda a comprender mejor el problema que intentas resolver y te permite imaginar posibles soluciones. Es una forma rápida y económica de intercambiar ideas y probar muchas ideas de interfaz de usuario antes de enviarlas. Sketch acelera la generación de conceptos, itera la interfaz, agiliza la retroalimentación y facilita los cambios.
En tu próximo boceto, ten en cuenta los siguientes principios. Te mantendrán encaminado:
¡Disfruta la obra!