it-swarm-es.com

¿Cómo define las interacciones en una maqueta?

Soy programador y diseñador de UX/UI. Cuando diseño cosas, generalmente hago imágenes estáticas de cómo se verá la interfaz. El problema es que la mayoría de las IU no son estáticas; cambian y cambian de tamaño desde la entrada del usuario. Por supuesto, sé exactamente cómo debe responder la interfaz a dicha entrada, pero para proyectos grandes, el cliente y otros programadores deben poder tomar mis maquetas y comprender las interacciones. Entonces, ¿cómo muestra en una maqueta cómo su diseño interactúa y responde al usuario?

17
Jonathan Dumaine

La mejor manera de describir la interacción es modelarla con un prototipo interactivo.

Hay varias herramientas de creación de prototipos como Axure o la que estamos desarrollando, Handcraft . Cualquiera que use, el punto es que le permiten mostrar a su cliente, compañeros, etc., lo que sucede cuando interactúa con elementos en la maqueta. Sin embargo, obtendrá resultados mucho mejores utilizando un prototipo para mostrar interactividad que con una maqueta en la que se puede hacer clic. Es posible mostrar cambios de estado básicos con maquetas, y hay una fase en el proceso de diseño donde esto puede ser útil, pero hay algunas cosas que son difíciles de describir con imágenes estáticas, como animaciones (vitales en ciertas situaciones), capacidad de respuesta ( un elemento clave de la interactividad) y, en el caso de aplicaciones nativas o web, la "sensación" de usar esa plataforma en particular.

7signals habla mucho sobre cómo se saltan los wireframes y van directamente a HTML. Escribí na publicación de blog hace unos meses sobre una charla que dieron en la que describieron su proceso.

Sin embargo, si desea enriquecer las maquetas estáticas, la notación de bocetos interactivos de Jakub Linowski es un buen punto de partida para una forma similar a UML de describir la interacción:

interactive sketching notation

Ver Pros/contras de PSD vs maquetas HTML para una discusión similar:

Si está creando un sitio web o una aplicación, las maquetas HTML son muy superiores porque está diseñando la maqueta en el formato lo más cercano posible al producto final. Esto le permite establecer expectativas mucho más fácilmente, lo limita a lo que es posible en el producto final y le brinda una flexibilidad mucho mayor.

25
Rahul

Cuando una maqueta interactiva no es una opción, prueba con texto. Puede agregar números que apuntan a partes de la imagen estática o estructura alámbrica, y luego proporcionar notas de interacción para cada número.

alt text

Arriba: un ejemplo de un número señalador.

5
JeromeR

Si no tiene la opción de algo como Axure (u otra herramienta interactiva de creación de prototipos o incluso HTML o Flash), creo que su mejor opción es trazar la vista "estándar" o "predeterminada" y luego mostrar en cables adicionales la estados alternos de módulos particulares.

En mi experiencia, confiar en las anotaciones basadas en texto para transmitir los cambios suele ser insuficiente: he realizado demasiados proyectos en los que los wireframes perfectamente anotados se malinterpretaron o se construyeron incorrectamente porque los clientes/desarrolladores/etc. se perdió detalles textuales importantes que se habrían capturado mejor visualmente.

2
Michael Histen

Sé que este tiene medio año, pero como nadie lo ha mencionado todavía, haré lo siguiente:

Bill Buxton ha escrito un libro llamado "Sketching User Experiences" que trata el problema del "bosquejo" del diseño de interacción: ¿cómo podemos transmitir conceptos y patrones de interacción de manera exploratoria, es decir, de forma rápida y de bajo costo, pero no demasiado abstracto?

2
Jan