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.
fuente
Respuestas:
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.
fuente
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/
fuente
The Pencil Project es un complemento de Firefox que realiza simulaciones agradables y simples.
fuente
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í? " )
fuente
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.
fuente
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").
fuente
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.
fuente
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.
fuente
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.
fuente
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)
Papel y bolígrafo / lápiz (generalmente para una lluvia de ideas)
Archivos estáticos HTML / CSS / JS en disco
Herramientas de dibujo vectorial: Illustrator / Inkscape / Visio / PowerPoint / Impress
Herramientas de gráficos de trama - Photoshop / Gimp
Arte ASCII ;-)
fuente