¿Cómo debo crear prototipos de interfaz de usuario de baja fidelidad (no interactivos)?

Actualmente estoy trabajando en reunir algunos prototipos básicos, en parte para reunir los requisitos y en parte para diseñar la interfaz de usuario final.

En este momento estoy tratando de construir la pantalla usando notas Post-it, con notas amarillas para información y rosa para acciones (botones o menús). La idea es que puede mover, eliminar y agregar información fácilmente. Pero estoy seguro de que existen métodos más eficientes.

¿Cuál es la forma recomendada para que los desarrolladores creen eficientemente prototipos de interfaz de usuario no interactivos?

¿Y por qué?

Probé algunas versiones de bolígrafo, papel y notas adhesivas y cayeron como un globo de plomo (probablemente mis habilidades de dibujo). Al final utilicé Balsamiq , que hasta ahora es del agrado de la mayoría de los usuarios y lo obtienen como prototipo. Por desgracia, algunas personas todavía tienen problemas con la idea de que primero uno debe tener una idea de lo que debe hacer la aplicación a través de algunos prototipos de baja fidelidad y realmente quiere "ver algo en la pantalla" antes de comprometerse a nada.

Prefiero una pizarra blanca.

Facilita el cambio a medida que toma decisiones sin volver a dibujar todo. Es fácil compartir con otros desarrolladores (cercanos). Es fácil anotar usando notas adhesivas u otros colores.

Las maquetas de Balsamiq suelen ser el primer puerto de escala, casi tan rápido como usar un bolígrafo y papel y son reutilizables.

Además, puede agregar cierto grado de interactividad si lo desea, enlazando páginas, por ejemplo.

http://balsamiq.com/

The Pencil Project es un complemento de Firefox que realiza simulaciones agradables y simples.

Pencil proporciona varias colecciones de formas integradas para dibujar diferentes tipos de interfaz de usuario, desde plataformas de escritorio hasta móviles. A partir de 2.0.2, Pencil se entrega con plantillas de IU para Android e iOS preinstaladas. Esto hace que sea aún más fácil comenzar a crear prototipos de aplicaciones con una instalación simple.

Las características de dibujo populares también se implementan en Pencil para simplificar las operaciones de dibujo ...

Yo uso una combinación de MS Paint y Visual Studio. Utilizo VS para arrastrar / soltar todos los controles que quiero en un formulario, luego capturarlos en MS Paint para reorganizarlos hasta que me guste la forma en que se ve.

De esta manera, puedo usar herramientas simples, familiares, gratuitas y siempre accesibles (para mí) para simular mi interfaz de usuario, y el cliente puede ver la interfaz de usuario tal como se verá una vez que la aplicación haya finalizado. Además, a menudo VS termina conteniendo el comienzo de mi proyecto para mí.

Editar: la respuesta de Toby me llevó a Balsamiq , y esa es ahora mi principal herramienta de elección para que las maquetas de UI se presenten a otras personas.

Todavía saco MSPaint o lápiz / papel en alguna ocasión, pero eso es por lo general sólo cuando estoy dibujando diseño básico de interfaz de usuario para mi propia referencia, o si quiero presentar al cliente dos opciones para una pantalla completa (Ex. "¿Tiene usted ¿Quieres los botones Aquí o Aquí? " )

Parece que está utilizando buenos métodos, pero se encuentra con resistencia al hacer que la gente acepte la utilidad de la creación rápida de prototipos. A todo el mundo le encanta codificar, pero si pasan media hora, todavía están peleando con JScrollBars y has generado 12 maquetas, podrían entender que la fuerza de estas herramientas está en una iteración rápida .

Dicho esto, los diversos enfoques de baja fidelidad tienen diferentes puntos fuertes:

• La creación de prototipos de pizarra es útil porque cualquiera puede participar y ayuda a desarrollar ideas, pero es solo una herramienta de discusión. Desea algo un paso más allá si va a repetir un diseño, aunque solo sea porque es difícil borrar el marcador anterior. ;)

• La creación de prototipos en papel es útil porque las personas entienden que es impermanente y está abierta a cambios, y puede iterar rápidamente y aún puede obtener muy buenos resultados. Haga una prueba de usabilidad con algunos usuarios en un prototipo en papel y puede obtener excelentes comentarios sobre un diseño muy rápidamente, a un costo bastante bajo. Las personas se involucran realmente cuando pueden ver y sentir la interfaz en papel.

• Balsamiq es un atajo para hacer rápidamente prototipos de papel que son reutilizables. Imprimo capturas de pantalla y las uso como prototipos en papel. También lo uso durante las reuniones para ayudar a simular ideas como las tenemos, similar a la creación de prototipos de pizarra. También he usado Visio y OmniGraffle para esto.

• Los prototipos de cortar y pegar son buenos para iterar en un diseño existente: tome una captura de pantalla, córtelo en un editor de imágenes y mezcle y combine con nuevos controles (de Balsamiq o de otros lugares). Una vez más, su objetivo es la iteración rápida del prototipo, no algo que se vea bien.

Nunca hago prototipos con los usuarios. Lo hago con el equipo de diseño, en base a los datos de usuario que tenemos. Los usuarios no son diseñadores ; si los tratas como diseñadores, terminas con salsa de tomate acuosa, café amargo (gracias Malcolm Gladwell) y el auto The Homer. Reúna las aportaciones de los usuarios a su diseño y utilícelas para refinar el diseño con el equipo de diseño.

Mis primeras maquetas son siempre lápiz y papel o pizarra, pero una vez que los conceptos básicos se aclaran, generalmente me muevo a HTML. Tengo un montón de imágenes de marcador de posición que simplemente dicen "Encabezado", "Banner", "Imagen", "Gráfico" y similares. Algunos CSS simples para exponer las cosas de manera sensata y ya he terminado. Un pequeño JS agregado a un control puede darle una apariencia de funcionalidad, y las personas simplemente parecen "entenderlo" mejor.

El único problema con esto es que probablemente soy el peor diseñador de interfaz de usuario vivo del mundo, y a veces tengo que recordarle a la gente que solo estoy reuniendo requisitos, no mostrándoles cómo se verá la cosa completa. A menudo pongo el fondo en rosa o algo así, cuando alguien pregunta "¿Tiene que ser rosa?" Puedo responder con "Esto es solo una maqueta, la cosa real se verá diferente" (o "Tendrás que discutir eso con el diseñador").

Primero uso lápiz y papel, luego, después de dibujar la interfaz de usuario varias veces, trato de hacerlo en PowerPoint 2 o 3 veces. Tener 5 o 6 iteraciones antes de ingresar al editor real me ayuda a reducir las UI inviables (como generar contenido Y basado en el cuadro de texto X cuando el usuario aún no ha visto X). Lo veo como una oportunidad para sacar a los estúpidos de inmediato.

Lápiz y papel / pizarra, y también puede usar Visio o algo similar (Visio viene con plantillas de interfaz de usuario para controles comunes). A veces tomo fotos de la interfaz de usuario existente (similar) que tenemos y corté y pegué la nueva interfaz de usuario usando un programa de pintura como Paint.NET.

He hecho prototipos rápidos en Delphi varias veces. Hace que sea muy fácil juntar rápidamente un diseño de pantalla, mucho más rápido que en PowerPoint o Visio. El exe resultante se puede adjuntar a correos electrónicos sin requerir ninguna dependencia. Como lo uso para crear prototipos de aplicaciones web, no hay peligro de que las personas confundan el prototipo con una versión a medio terminar.

Intenté hacer lo mismo con Sencha Ext Designer, pero el sistema de diseño de Ext JS es más difícil de usar, y me pareció más una carga que una conveniencia iterar ideas rápidamente.

No siempre uso el mismo enfoque. Algunas de las técnicas que uso son (en orden aproximado de frecuencia):

• Pizarra (para crear prototipos de forma interactiva / debatir. ¡Tome una foto después!)

• Diseñador de GUI estilo RAD (Visual Studio, NetBeans, Delphi)

  • Sea bueno en esto, y en realidad puede convertirse en una de las formas más rápidas de crear prototipos de una aplicación de "ventanas, widgets y formularios". Bonificación: los prototipos pueden terminar viéndose realmente muy profesionales, dependiendo de lo rápido que los unan. A veces, incluso pueden servir como punto de partida para crear lo real, una vez que se aprueba un prototipo.
    
    

• Papel y bolígrafo / lápiz (generalmente para una lluvia de ideas)

• Archivos estáticos HTML / CSS / JS en disco

  • Me imagino que una aplicación de diseño WYSIWYG no haría daño aquí, pero generalmente solo pirateo el HTML sin formato. No hago muchos de estos, de todos modos.
    
    

• Herramientas de dibujo vectorial: Illustrator / Inkscape / Visio / PowerPoint / Impress

• Herramientas de gráficos de trama - Photoshop / Gimp

• Arte ASCII ;-)