it-swarm-es.com

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

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

En este momento estoy intentando construir la pantalla usando notas Post-it, con notas amarillas para información y rosas para acciones (botones o menús). La idea es que pueda 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 prototipos de IU no interactivos de manera eficiente?

¿Y por qué?


Probé algunas versiones de lápiz, papel y notas adhesivas y se cayeron como un globo de plomo (probablemente mis habilidades de dibujo). Al final usé 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 con algo.

10
mlk

Prefiero una pizarra.

Facilita el cambio a medida que toma decisiones sin volver a dibujarlo todo. Es fácil de compartir con otros desarrolladores (cercanos). Es fácil realizar anotaciones con notas adhesivas u otros colores.

14
Fishtoaster

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

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

http://balsamiq.com/

7
Toby

Utilizo una combinación de MS Paint y Visual Studio. Utilizo VS para arrastrar/soltar todos los controles que quiero en un formulario, luego hacer una captura de pantalla en MS Paint para reorganizarlos hasta que me guste su apariencia.

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 como probablemente se verá una vez que la aplicación esté terminada. Además, a menudo VS termina conteniendo el comienzo de mi proyecto para mí.

Editar: Respuesta de Toby llévame a Balsamiq , y esa es ahora mi herramienta principal de elección para que las maquetas de la interfaz de usuario se presenten a otras personas.

Todavía saco MSPaint o bolígrafo/papel en ocasiones, pero eso suele ser solo cuando estoy dibujando un diseño de interfaz de usuario básico para mi propia referencia, o si quiero presentarle al cliente dos opciones para una pantalla completa (p. Ej. "¿Quieres los botones aquí o aquí?")

5
Rachel

The Pencil Project es un complemento de Firefox que hace maquetas simples y agradables.

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

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

5
Andrew Lewis

Parece que está utilizando buenos métodos, pero se encuentra con la resistencia de que la gente acepte la utilidad de la creación rápida de prototipos. A todo el mundo le encanta codificar, pero si transcurre media hora, todavía están luchando con JScrollBars y ha generado 12 maquetas, es posible que entiendan que la fuerza de estas herramientas está en iteración rápida .

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

  • Creación de prototipos de pizarra es útil porque cualquiera puede participar y ayuda a fundamentar ideas, pero es solo una herramienta de discusión. Desea algo un paso más allá si va a iterar en un diseño, aunque solo sea porque se vuelve difícil borrar el marcador antiguo. ;)

  • Creación de prototipos en papel es útil porque la gente entiende que es impermanente y está abierto al cambio, y puede iterar rápidamente, y aún así puede obtener muy buenos resultados. Realice una prueba de usabilidad con algunos usuarios en un prototipo en papel y podrá obtener excelentes comentarios sobre un diseño muy rápidamente, a un costo bastante bajo. Las personas se involucran mucho 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 de papel. También lo uso durante reuniones para ayudar a simular ideas tal como las tenemos, similar a la creación de prototipos de pizarra. También he usado Visio y OmniGraffle para esto.

  • Cortar y pegar prototipos son buenos para iterar en un diseño existente: tome una captura de pantalla, córtela en un editor de imágenes y mezcle y combine con nuevos controles (de Balsamiq o de cualquier otro lugar). 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 aguada, café amargo (gracias Malcolm Gladwell) y el auto de Homer. Reúna los comentarios de los usuarios para su diseño y utilícelos para refinar el diseño con el equipo de diseño.

2
Alex Feinman

Mis primeras maquetas son siempre lápiz y papel o pizarra, pero una vez que los conceptos básicos están clavados, generalmente paso a HTML. Tengo un montón de imágenes de marcadores de posición que simplemente dicen "Encabezado", "Banner", "Imagen", "Gráfico" y similares. Un poco de CSS simple para diseñar las cosas de forma un tanto sensata y listo. Un poco de JS agregado a un control puede darle una apariencia de funcionalidad, y la gente simplemente parece "entenderlo" mejor.

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

2
TMN

He realizado prototipos rápidos en Delphi varias veces. Facilita la creación de un diseño de pantalla muy rápidamente, mucho más rápido que en PowerPoint o visio. El archivo ejecutable 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 la gente confunda 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.

1
Joeri Sebrechts

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

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

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

    • Sea bueno en esto, y puede convertirse en una de las formas más rápidas de crear prototipos de una aplicación de "ventanas, widgets y formularios". Bono: los prototipos pueden terminar pareciendo realmente bastante profesionales, dependiendo de qué tan rápido los juntes. A veces, incluso pueden servir como punto de partida para crear algo real, una vez que se aprueba un prototipo.

  • Papel y bolígrafo/lápiz (normalmente para intercambiar ideas)

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

    • Me imagino que una aplicación de diseño WYSIWYG no estaría de más aquí, pero por lo general solo pirateo el HTML sin formato. De todos modos, no hago muchos de estos.

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

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

  • Arte ASCII ;-)

1
Mike Clark

Primero uso lápiz y papel, luego, después de dibujar la interfaz de usuario unas cuantas 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 IU que no funcionan (como generar contenido Y basado en el cuadro de texto X cuando el usuario ni siquiera ha visto X todavía). Lo veo como una oportunidad para sacar a los estúpidos de inmediato.

1
Morgan Herlocker

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 corto y pego la nueva interfaz de usuario usando un programa de Paint como Paint.NET.

1
JohnL