¿Cómo debo crear prototipos de UI de LO-Fi (no interactivos)?
-
16-10-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianPregunta
Actualmente estoy trabajando en elaborar algunos prototipos básicos, en parte para reunir requisitos y en parte para diseñar la interfaz de usuario final.
Por el momento, intento 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 fácilmente, eliminar y agregar información. Pero estoy seguro de que hay métodos más eficientes por ahí.
¿Cuál es la forma recomendada para que los desarrolladores creen eficientemente prototipos de UI no interactivos?
¿Y por qué?
Probé algunas versiones de notas de pluma, papel y post-it y cayeron como un globo de plomo (probablemente mis habilidades de dibujo). Al final usé Balsamiq, que hasta ahora es del gusto por la mayoría de los usuarios y lo entienden es prototipo. Por desgracia, algunas personas todavía tienen problemas con la idea de que primero debería tener una idea de lo que la aplicación debería hacer a través de algunos prototipos de LO-Fi y realmente quieren "ver algo en la pantalla" antes de comprometerse con cualquier cosa.
Solución
Prefiero una pizarra.
Hace que sea fácil cambiar a medida que toma decisiones sin volver a dibujar todo. Es fácil compartir con otros desarrolladores (cercanos). Es fácil de anotar con notas pegajosas u otros colores.
Otros consejos
Las maquetas de Balsamiq suelen ser el primer puerto de llamada, casi tan rápido como usar un bolígrafo y papel y reutilizables.
Además, puede agregar cierto grado de interactividad si lo desea, vinculando páginas juntas, por ejemplo.
El proyecto de lápiz es una complemento de Firefox que hace maquetas agradables y simples.
Pencil proporciona varias colecciones de formas incorporadas para dibujar diferentes tipos de interfaz de usuario que van desde plataformas de escritorio hasta plataformas móviles. A partir de 2.0.2, el lápiz se envía con plantillas de UI de Android e iOS preinstaladas. Esto hace que sea aún más fácil comenzar a protestar aplicaciones con una instalación simple.
Las características de dibujo populares también se implementan en lápiz para simplificar las operaciones de dibujo ...
Utilizo una combinación de MS Paint y Visual Studio. Utilizo VS para arrastrar/soltar todos los controles que quiero en un formulario, luego capto en captura de pantalla en MS Paint para reorganizarlos hasta que me guste como se ve.
De esta manera, puedo usar herramientas simples, familiares, gratuitas y siempre accesibles (para mí) para burlarse de mi interfaz de usuario, y el cliente puede ver la interfaz de usuario, ya que 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 llevarme a Balsamiq, y esa es ahora mi herramienta principal de elección para las maquetas de interfaz de usuario que se presentan a otras personas.
Todavía saco mspaint o pluma/papel en ocasiones, pero eso generalmente es solo cuando estoy dibujando el diseño básico de la interfaz de usuario para mi propia referencia, o si quiero presentar al cliente dos opciones para una pantalla completa (ex. "¿Quieres los botones aquí o aquí?")
Parece que estás usando buenos métodos, pero te estás encontrando con resistencia haciendo que las personas acepten la utilidad de la prototipos rápidos. A todo el mundo le encanta codificar, pero si 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 iteración rápida.
Dicho esto, los diversos enfoques de baja fidelidad tienen diferentes fortalezas:
Prototipos de pizarra Es útil porque cualquiera puede participar y ayuda a moler las ideas, pero es solo una herramienta de discusión. Desea algo un paso más si va a iterar en un diseño, aunque solo sea porque es difícil borrar el viejo marcador. ;)
Prototipos de papel Es útil porque las personas entienden que es impermanente y abierta al cambio, 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 comprometen 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 de papel. Yo también lo uso durante Reuniones para ayudar a burlarse de las ideas tal como las tenemos, similares a la creación de prototipos de la 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, píjalo en un editor de imágenes y mezcle y combine con nuevos controles (de Balsamiq o en otros lugares). Una vez más, su objetivo es la rápida iteración del prototipo, no algo que se vea bien.
Nunca hago prototipos con los usuarios. Lo hago con el equipo de diseño, según los datos del 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 de jonrón. Reúna la entrada del usuario a su diseño y úsela 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 están clavados, 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 establecer las cosas de manera muy sana y termina. Un pequeño JS agregó a un control puede darle una apariencia de funcionalidad, y la gente parece "obtenerlo" mejor.
El único problema con esto es que probablemente soy el peor diseñador de UI viviente del mundo, y a veces tengo que recordar a las personas que solo estoy reuniendo requisitos, sin mostrarles cómo se verá la cosa completa. A menudo pongo el fondo en rosa o algo así, así que cada vez que alguien pregunta "¿Tiene que ser rosa?" Puedo contrarrestar con "esto es solo una maqueta, lo real se verá diferente" (o "Tendrás que discutir eso con el diseñador").
Primero uso la pluma y el papel, luego, después de dibujar la interfaz de usuario unos tiempos rápidos, 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 involuntarias (como generar contenido Y en función del cuadro de texto X cuando el usuario aún no ha visto X). Lo veo como una oportunidad para sacar los estúpidos de inmediato.
Pen 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 tomas de la interfaz de usuario existente (similar) que tenemos y cortamos y pegamos la nueva interfaz de usuario con un programa de pintura como Paint.net.
He hecho prototipos rápidos en Delphi varias veces. Hace que sea 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 conectar a correos electrónicos sin requerir ninguna dependencia. Como lo uso para prototipos de aplicaciones web, no hay peligro de que las personas confundan el prototipo con una versión a medio camino.
He tratado de hacer lo mismo con Sencha Ext Designer, pero el sistema de diseño de Ext JS es más difícil de usar, y se sintió más una carga que una conveniencia para iterar rápidamente las ideas.
No siempre uso el mismo enfoque. Algunas de las técnicas que uso son (en orden aproximado de frecuencia):
Pizarra (para crear prototipos interactivamente/discutir. ¡Tome una foto después!)
Diseñador de GUI de estilo RAD (Visual Studio, NetBeans, Delphi)
- Obtenga bueno en esto, y en realidad puede convertirse en una de las formas más rápidas de crear prototipos de una aplicación "Windows, Widgets y Forms". Bonificación: Los prototipos pueden terminar siendo realmente bastante profesionales, dependiendo de qué tan rápido lo juntes lo tambien. A veces incluso pueden servir como punto de lanzamiento para crear lo real, una vez que se aprueba un prototipo.
- Obtenga bueno en esto, y en realidad puede convertirse en una de las formas más rápidas de crear prototipos de una aplicación "Windows, Widgets y Forms". Bonificación: Los prototipos pueden terminar siendo realmente bastante profesionales, dependiendo de qué tan rápido lo juntes lo tambien. A veces incluso pueden servir como punto de lanzamiento para crear lo real, una vez que se aprueba un prototipo.
Papel y bolígrafo/lápiz (generalmente para hacer una lluvia de ideas para mí mismo)
Archivos HTML/CSS/JS estáticos en el disco
- Me imagino que una aplicación de diseño Wysiwyg no dolería aquí, pero generalmente solo pirateo el HTML en bruto. De todos modos, no hago mucho de esto.
- Me imagino que una aplicación de diseño Wysiwyg no dolería aquí, pero generalmente solo pirateo el HTML en bruto. De todos modos, no hago mucho de esto.
Herramientas de dibujo vectorial - Illustrator / Inkscape / Visio / PowerPoint / Impress
Herramientas gráficas de trama - Photoshop / GIMP
Arte ascii ;-)
