Algunas personas coleccionan estampillas, otras divisan trenes; Me he obsesionado con el software wireframing.

He probado y me he enamorado de innumerables aplicaciones, desde Balsamiq a sinsonte a FlairBuilder . Aunque cada uno se ha sentido como el verdadero amor, con el tiempo mi mirada se ha extraviado, y me encuentro coqueteando con otra herramienta.

Todos se ven tan atractivos, pero con el tiempo veo sus defectos. Quizás soy demasiado exigente. Quizás mis necesidades son demasiado inusuales. Lo que realmente quiero es una herramienta que se ajuste a la forma en que hago las cosas, en lugar de tener que encajar en la herramienta.

¿Tienes una herramienta favorita de wireframing tuya? ¿Ves la necesidad de uno? Si es así, ¿prefieres todas las opciones o solo una solución rápida y sucia?

FlairBuilder
Aplicaciones como FlairBuilder son cada vez más poderosos, pero a veces demasiado complejos.

¿Por qué colaborar en wireframing con clientes?

Para mí, wireframing es una experiencia de colaboración. No es algo que hago solo en una habitación oscura. Por el contrario, comparto el proceso con mis clientes.

Creo en sentarse alrededor de una mesa con el cliente y manipular las páginas clave en formato de malla. Esto tiene cuatro beneficios:

  1. Involucra al cliente
    Al enmarcar con el cliente, se sienten parte del proceso y esto ayuda a construir una relación de trabajo sólida.
  2. Asegura el impulso
    Al encuadrar juntos, evitas revisiones interminables. Establecer una dirección sólida para las páginas clave ocurre en cuestión de horas.
  3. Compromete al cliente
    Si el cliente está involucrado en la creación de los wireframes, sienten un sentido de propiedad sobre ellos y el sitio web. La solución se convierte tanto en su idea como la tuya. En consecuencia, es menos probable que rechacen el diseño más tarde.
  4. Sirve como referencia común
    Crear wireframes colaborativamente asegura que todos los entiendan. Los wireframes sirven como un marco de referencia común para todos a lo largo del proyecto.
wireframing con el cliente
El wireframing con el cliente tiene numerosas ventajas.

Sin embargo, el proceso no está exento de desafíos.

Buscando una solución rápida y sucia

En muchos sentidos, el wireframing por usted mismo es mucho más fácil. Tienes tiempo para pensar, ajustar y refinar. Esto es difícil de hacer con un cliente en la sala. El wireframing colaborativo consiste en burlarse rápidamente de las ideas y debatirlas. Entonces, necesitas una herramienta que facilite ese objetivo.

Su herramienta de wireframing debe ser:

  • Rápido de usar
    No hay nada peor que un cliente sentado mientras lucha desesperadamente con una herramienta de wireframing para demostrar una idea.
  • Fácil de revisar
    En un proceso de colaboración, la discusión lo llevará a probar montones de enfoques sutilmente diferentes. Tendrás que poder alterar el wireframe rápidamente.
  • Fácil de comprender
    Los wireframes deben ser claros y descriptivos. Los clientes no tienen el beneficio de nuestra experiencia trabajando con wireframes, por lo que pueden confundirse fácilmente.
  • De aspecto profesional
    Una idea puede ser abaratada por la presentación. Ayuda si la herramienta puede producir una estructura metálica que se vea como una solución bien considerada y de alta calidad.
Ejemplo Keynote Wireframe
La herramienta wireframing debe parecer profesional y, sin embargo, ser lo suficientemente flexible como para permitir una iteración rápida.

Tradicionalmente, las sesiones colaborativas de wireframing se han hecho con lápiz y papel, pero esta no siempre es la mejor solución.

¿Por qué no lápiz y papel?

No me malinterpretes El bolígrafo y el papel ofrecen una serie de ventajas para el wireframing colaborativo, y siempre tendrá un lugar. De hecho, iría tan lejos como para decir que la mayoría de las sesiones colaborativas de wireframing deberían comenzar con lápiz y papel.

Lo mejor de la pluma y el papel es que es inclusivo y rápido. Cualquiera puede tomar un bolígrafo y comenzar a garabatear; no requiere habilidad especial. Y toda la sala puede comenzar a dibujar al mismo tiempo; no hay una sola persona con su mano en el mouse.

La pluma y el papel también se sienten desechables. Atornillar un trozo de papel y tirarlo a la basura es fácil y no tiene gran pérdida. Esto es crucial en las primeras etapas del proceso de wireframing.

Sin embargo, el wireframing en bolígrafo y papel tiene algunos inconvenientes:

  • No es fácil de revisar
    Cuando las ideas vuelan y garabatea un elemento tras otro, los bastidores de papel y pluma se pueden ensuciar rápidamente. A menudo se ve obligado a volver a dibujar una página desde cero, lo que ralentiza el proceso.
  • No siempre claro
    Con tantas revisiones y garabatos, los wireframes a menudo se vuelven confusos. También tienden a carecer de los detalles de los wireframes generados por software, dejando muchas preguntas sin respuesta.
  • No se ve profesional
    A menos que seas un gran artista, la mayoría de tus wireframes se parecerán a los desvaríos de un psicópata trastornado (¿o solo soy yo?). Esto puede abaratar el valor de las ideas subyacentes.
Alambre y papel wireframe
Los wireframes de pluma y papel pueden parecer desordenados y confusos para el cliente sin educación.

En mi experiencia, una buena sesión colaborativa de wireframing contiene una mezcla de wireframes en papel y basados ​​en software.

Entonces, con muchas soluciones de software que son demasiado lentas y fallas de papel en otros aspectos, ¿cuál es la solución?

Keynote al rescate

Después de mucha experimentación, me he decidido por Keynote como mi herramienta preferida. Sospecho que PowerPoint es igual de bueno, pero como usuario de Mac, mi elección es Keynote.

Keynote es fácil de usar y muchas personas ya están familiarizadas con él. Lo mejor de todo, la gran mayoría de nosotros ya lo posee, lo que ahorra algo de dinero en efectivo.

Me encanta porque hace que sea fácil tirar wireframes juntos y luego revisarlos rápidamente a medida que cambia la dirección del pensamiento.

Lo mejor de todo es que los wireframes de Keynote pueden verse muy profesionales y proporcionar una gran cantidad de claridad.

Para lograr esto, necesita una gran plantilla maestra, una que contenga todos los elementos que normalmente aparecen en un sitio web (texto, imágenes, cuadro de búsqueda, etc.). Es simplemente una cuestión de copiar y pegar estos en sus páginas.

Algunos excelentes videos allí le muestran cómo crear sus propios elementos personalizados. Sin embargo, si eres flojo como yo, varias personas han hecho el trabajo duro por ti. Por una tarifa nominal, puede comprar plantillas de Keynote y PowerPoint que contengan todos los elementos web que probablemente incluya en una estructura alámbrica.

Keynotopia
Keynotopia

Keynote UX
Keynote UX

Keynote Kung-Fu
Keynote Kung-Fu

Pero los beneficios no se detienen allí.

Un bono

La forma en que presenta wireframes es crucial. Incluso si trabaja en colaboración, lo más probable es que no todos los interesados ​​estén en la sala.

Muchas aplicaciones de wireframing requieren que los usuarios descarguen un programa o instalen un complemento antes de que puedan ver el archivo. No es así con Keynote.

Keynote ya es una aplicación común, pero también tiene algunas excelentes opciones de exportación. Puede guardar wireframes en HTML y PDF. Ambas opciones mantienen los enlaces entre las páginas, por lo que el usuario puede hacer clic en el "sitio web".

Aún mejor, Keynote te permite grabar una voz en off y guardarla como un video QuickTime. Esto le permite hablar con las partes interesadas a través del wireframe y explicar su enfoque, asegurándose de que comprendan el pensamiento que entró en el wireframe final.

Opciones de exportación de Keynote
Keynote le permite exportar el wireframe en PDF y HTML e incluso como una película con narración de voz.

Por supuesto, ninguna solución es perfecta. Keynote no es la bala de plata del wireframing.

Limitaciones

En mi experiencia, Keynote sufre de dos problemas como herramienta de wireframing.

El primero es el tamaño de página. Mientras que otras herramientas de wireframing le permiten cambiar el tamaño de página sobre la marcha, Keynote no (al menos no sin distorsionar los elementos). Además, las dimensiones tienen que ser las mismas en todas las páginas. Esto puede ser frustrante si no planifica con anticipación. Soluciono este problema haciendo que todas las páginas sean enormes; pero esta solución no es perfecta y crea problemas al exportar.

El segundo problema es que Keynote no permite una interacción compleja, a pesar de la vinculación entre páginas. No puede mostrar la funcionalidad guiada por JavaScript, tan común en los sitios web de hoy. Por supuesto, tampoco lo hace lápiz y papel. Y en una sesión colaborativa de wireframing, normalmente no necesitaría demostrar este nivel de detalle interactivo. Si lo hace, entonces probablemente sería mejor con una herramienta de prototipos más compleja.