user interface - interfaz - Creación de prototipos de una GUI con un cliente
como hacer un prototipo de software (12)
Hay un libro llamado Prototipos de papel que detalla el dibujo en lápiz y papel y lo que puede obtener de él. Creo que tiene muchos beneficios, sobre todo que puede, muy pronto (y fácilmente), modificar el resultado final sin mucho esfuerzo, y luego comenzar con el pie derecho.
Al crear un prototipo de la funcionalidad inicial de la GUI con un cliente, ¿es mejor utilizar un dibujo con bolígrafo / papel o simular algo con una herramienta y mostrarle eso?
El argumento en contra de un diseño generado por herramienta es que el cliente a veces puede enfocarse en los detalles de bajo nivel de la maqueta en lugar de tomar una vista funcional de nivel superior de la GUI en general.
Para el primer borrador, prefiero usar papel cuadriculado (el material con una cuadrícula impresa) y un lápiz. El papel cuadriculado es ideal para ayudar a mantener proporciones. Una vez que el cliente y yo hemos llegado a una conclusión, generalmente rellenaré el dibujo con un bolígrafo ya que el lápiz tiende a desaparecer.
Cuando realmente logre construir el prototipo digital, escanearé en el dibujado a mano y lo usaré como plantilla de fondo. Parece funcionar bastante bien para mí.
Siempre comience con papel o maquetas de papel primero. No querrá caer en la trampa de dar la impresión de estar completo cuando el back-end esté completamente vacío.
Un prototipo pulido o un ejemplo de píxel perfecto pone demasiado énfasis en el diseño. Con un boceto obvio, tiene una oportunidad mejor de discutir la funcionalidad y el contenido deseado en lugar de colores, fotos y otros asuntos de estilo. Habrá tiempo para esa discusión más adelante en el proyecto.
Jeff discute prototipos de papel en su artículo Coding Horror UI-First Software Development
Haga clic en "Ver un video". enlace en twitter.com para ver una idea interesante de Common Craft .
Una versión básica en papel es el camino a seguir para una maqueta inicial. Según mi experiencia, si haces una maqueta "real", incluso si le explicas al cliente que se trata de una maqueta no funcional, se confunden cuando las cosas no funcionan.
En pocas palabras: mantenlo lo más simple posible. Si está en papel, no hay manera de que el cliente lo confunda con un producto que funcione.
Recientemente he usado una aplicación de Windows para crear prototipos de una aplicación para un cliente (la interfaz final debe integrarse en un sitio web).
Al principio la gente pensó que sería la última versión y empezaron a criticar mucho la forma en que se mostraban los controles a las palabras que yo había usado (terminología y demás) y el tiempo de reunión terminó antes de que pudiéramos siquiera discutir la funcionalidad en sí.
Esa discusión se prolongó durante días y días hasta que les dije que, al ser un simulacro (y no una aplicación final), todos los comentarios eran bienvenidos, pero primero teníamos que centrarnos en las funcionalidades y luego podíamos pasar a ver y sentir tan bien como problemas de terminología.
Desde esa reunión, siempre me aterran los prototipos y las maquetas ... Tal vez debería haberles dado algo hecho en visio.
Le sugiero que se siente con su cliente y utilice una herramienta como Mockupscreens y desarrolle la interfaz de usuario de forma interactiva. Un beneficio que tiene sobre Napkin LAF es que no requiere codificación, o incluso herramientas de desarrollo de ningún tipo.
Echa un vistazo a Balsamiq
Hace la vista de la servilleta "THIS IS NOT A FUNCTIONAL APP" muy bien y es fácil de usar.
Tiene una demostración con todas las funciones que puede probar en línea y, como bonificación adicional, puede enviar su XML a su cliente por correo electrónico y pueden modificarlo, jugar con él y enviársela por correo electrónico sin tener que tener una licencia.
Para una herramienta que no esté basada en el navegador, puede probar draft-it
Es gratis, y si tienes una cuenta de Gmail, no es necesario registrarse.
Hace prototipos interactivos / Step by Step o Slide Show. Puede compartir su prototipo con cualquier persona que elija con solo enviar un enlace.
Funciona para nosotros ...
WireframeSketcher es una herramienta que ayuda a crear rápidamente wireframes, maquetas y prototipos para aplicaciones de escritorio, web y móviles. Viene tanto como una versión independiente y como un complemento para Eclipse IDEs. Tiene algunas características distintivas como storyboards, componentes, enlaces y exportación de PDF a vectores. Entre los IDEs soportados se encuentran Aptana, Flash Builder, Zend Studio y Rational Application Developer.
Ejemplo de maqueta de WireframeSketcher http://wireframesketcher.com/samples/Website.png
El "Napkin Look & Feel" para Java es realmente genial para la creación de prototipos. Una aplicación real, activa y en la que se puede hacer clic que parece dibujada en una servilleta. Mira esta captura de pantalla:
En serio, ¿qué tan genial es eso?
Creo que es mejor comenzar con papel / pizarras / paredes blancas.
Una vez que tenga la estructura básica, puede moverla a Visio con las plantillas de estructura alámbrica.
O puede usar Denim ( una herramienta informal para el sitio web de Early Stage y el diseño de UI ) con una tableta o tabletas Wacom para diseñar la GUI y ejecutarla como sitio web HTML.