Tentándole (interacción)

francisco tosete | arquitectura de información, interacción y diseño

histórico de posts

April 27, 2008

Técnicas y herramientas para prototipado hiperrápido

Hace ya tiempo surgió un hilo en Cadius sobre qué herramientas existían para realizar prototipos. Además de Visio, entre otras se citaron:

  1. Jumpchart
  2. Simunication
  3. TaskSketch
  4. CanonSketch
  5. Axure
  6. iRise
  7. OpenOffice
  8. GUI Design Studio
  9. Prototype Composer

Frente a la utilización de cualquier aplicación de dibujo vectorial mi equipo de prototipado hiperrápido está compuesto por:

  1. Un boli bic clásico azul que apareció un día por mi mesa
  2. Hojas de papel reciclado de la impresora
  3. Celo/clips
  4. Mi teléfono móvil Nokia N73

Prototipo en papel, boligrafo y celo
Prototipo en papel, bolígrafo y celo

Prototipo en papel
Prototipo en papel

Detalle del prototipo
Detalle del prototipo

Prototipar en papel es la forma más rápida, barata y fácil de plasmar las ideas que te vienen a la mente en un momento dado cuando quieres comenzar a desarrollar un proyecto o cuando estás revisando el vídeo o vídeos informales que has grabado (previo permiso) con tu teléfono móvil en la charla o charlas de la toma de requerimientos con el cliente acerca de un determinado aspecto o aspectos siguiendo un pequeño script elaborado previamente.

La vista es el canal que tenemos con mayor ancho de banda para captar información. Pensamos en visual (para más adelante una breve reflexión sobre Visualización de Información al hilo de lo que me estoy leyendo del libro de Information Visualization de Colin Ware, una pequeña maravilla) por lo que no existe nada más rápido que el papel ni más explicativo para obtener un rápido feedback e iniciar una pronta discusión con el cliente acerca de los pros y contras del diseño/rediseño de una arquitectura, de una interfaz o para transmitirle las ideas que te rondan por la cabeza tras una conversación con él y ver si son factibles y viables desde el punto de vista:

  • de negocio
  • tecnológico
  • temporal (desarrollo)
  • económico

El papel tiene importantes limitaciones, entre otras:

  • todo lo que no sea lápiz no se borra
  • si borras no borras del todo
  • si usas otra cosa que no sea un lápiz no se borra en absoluto
  • es 100% opaco, no puedes jugar con efectos de relleno superponiendo capas (a menos que utilices papel cebolla) y éste desde luego no es algo que tengamos a mano en cualquier momento en la oficina, ni propia, ni del cliente
  • el color, aún de forma limitada como el que se utiliza en un prototipo por ejemplo de Visio, tiene y transmite su propio valor semántico. Los colores tampoco se borran del papel.
  • no es interactivo, lo tocas, presionas el dibujo de un link y no pasa nada. Tiene más bien poco de hipertextual

pero…

este post no lleva el título de “prototipado en ordenador“, lleva el título de prototipado hiperrápido. O lo que es lo mismo, de cómo podemos plasmar una idea sin perder ni un minuto en alinear cajas y poner flechas, en ocuparnos de colores (que aún en los prototipos aunque mínimos y parcos cumplen su función semántica o de orientación y sugerencia para el diseñador gráfico) ni en dar anchos de línea, ni en ajustar proporciones, ni en documentar funcionalidades.

Según como se mire puede que no sean limitaciones las del papel sino ventajas. Coger una hoja en blanco y bocetar en el momento permite:

  • que no se nos vaya de la cabeza esa idea genial
  • centrarnos en la interfaz y concretamente en el layout, en la construcción de una buena jerarquía de los contenidos en el equilibrio de la distribución de las zonas espaciales de la pantalla
  • desechar cualquier consideración estética más allá de las citadas en el punto anterior
  • forzarnos a pensar un minuto o dos las cosas antes de hacer un trazo ya que el “borrar” es más bien complicado y el llenar la interfaz blanca de tachones poco útil. El espacio es el que es y como la interfaz no es dúctil (o más bien poco dúctil) ni los atomos maleables, espacio que ocupamos con un trazo, espacio que “no” podemos recuperar (las comillas vienen porque eso no es cierto del todo)

Aunque el papel no es interactivo si nos auxiliamos de otras herramientas de trabajo como el celo o los clips, es bastante más flexible y funcional para simular y prototipar un proceso de interacción en dos minutos y medio delante del cliente que cualquier otra cosa, algo ideal para el primer estadio del diseño y desarrollo y para discutir con él pros y contras de la implementación de un determinado proceso.

El celo nos permite superponer un control sobre otro o desplegar un menú dibujado. Lo pintamos en un trozo de papel y lo pegamos en donde deseemos. Como no es material que vayamos a entregar al cliente y dado que el objetivo es fijar ideas y tener algo en el mínimo tiempo posible, lo mejor es no perder tiempo con las tijeras. Recortamos el papel con los dedos o con cuatro pliegues y el borde de una mesa si somos más perfeccionistas, o con un doblez y una regla. Y si no nos gustan los bordes irregulares los doblamos un poco para que no parezcan tan feos.

Por otro lado podemos alargar o ensanchar el lienzo a placer. Si necesitamos más superficie para hacer una página larga, pegamos otra de hoja de papel a continuación o si es oportuno, al lado. La principal ventaja es que podemos tener toda la interfaz diseñada y desplegada ante nuestros ojos lo que posibilita detectar errores de diseño o de equilibrio de contenidos y tener una visión global de conjunto de la página, algo que simplemente no podemos hacer en el monitor del ordenador ya que la superficie de visualización es la que es y nos tenemos que servir de técnicas de escalado y zoom, de scroll vertical u horizontal, de trocear, o de hipertexto, para presentar de manera progresiva la información.

Desventajas tiene, pero importantes ventajas también. La gente de Dynamic Diagrams imprimía en papel sus maravillosos diagramas de interacción y mapas web y los ponía a lo largo de toda una pared o en el suelo para obtener esa visión global de conjunto. Técnica que podemos utilizar igualmente cuando estamos trabajando con el cliente y queremos examinar en su globalidad lo diseñado. Desplegamos en el suelo en hojas DIN A4 los prototipos realizados y los agrupamos para ver el diseño de la interacción de un proceso en su conjunto.

En cuanto al último elemento del equipo de prototipado hiperrápido, hace falta un móvil con una buena cámara y posiblidad de insertarle una tarjeta de memoria, en mi caso un Nokia N73. Me gusta este teléfono porque cubre mis necesidades más importantes de comunicación y multimedia agrupadas en un sólo dispositivo que llevo siempre en mi bolsillo:

  • Hablar por teléfono
  • Mandar mensajes
  • Hacer fotografías con la suficiente calidad como para poder trabajar con ellas
  • Grabar vídeos

El hecho de que se puedan insertar tarjetas MicroSD que ofrecen una buena capacidad de almacenamiento lo convierte en una herramienta de trabajo productiva para hacer usabilidad de guerrilla y no sólo en un teléfono móvil .

Al tener óptica de 3.2 megapixels las fotografías tienen la suficiente calidad como para trabajar con ellas y para grabar vídeos y entrevistas realizadas al cliente.

El teléfono se entrega con un cable además de tener conexión bluetooth lo que permite sincronizarlo con el equipo de sobremesa o el portátil del trabajo y descargarse las imágenes. Lo único que me falta es la llegada del HSUPA y el establecimiento de tarifas planas para subir las fotos directamente a Flickr y tenerlas disponibles en cualquier momento y lugar cuando necesite (Trabajo ubicuo, Trabajo 2.0) algo que echo de menos continuamente.

Ya en Flickr podemos añadir notas sobre una porción a las imágenes subidas y comentarios si es oportuno.

Para terminar y como conclusión, si necesitas plasmar una idea rápido y no perder toda una mañana, usa el papel. Luego ya habrá tiempo de coger Visio y poner las cosas presentables para el cliente o de corregir errores, pero la primera idea, con un mínimo boceto, te permitirá capturar la esencia del diseño del proyecto en ese momento de inspiración y sobre todo lo más importante, que el cliente lo vea aunque sea en un estadio totalmente inicial.

Pd. Eso sí, aunque me encantan esas cosas del N73, cada vez que cuelgo una llamada por error por lo extraordinariamente pequeños que son y lo mal que están diseñados los botones de colgar y descolgar, me acuerdo de los diseñadores que lo hicieron. Si alguna vez te cuelgo vuelve a llamarme, que lo mismo ha sido por “estos peculiares” botones. “Benditos” diseñadores que no sufren sus productos.

October 5, 2007

Accenture, “Experiencia de Marca” y Web Evaluator

Según noticia que leo en “El Economista” y en la web de la propia Accenture postbúsqueda en Google, de acuerdo a un benchmarking llamado “Web Evaluator” desarrollado por la Consultora para medir:

“las cinco webs que mejor “venden” su imagen de marca online, captando y reteniendo la atención del usuario…”

el top five de la “experiencia de marca” lo conforman las webs de:

  1. Nike
  2. Google
  3. Ford
  4. Microsoft
  5. Adidas

Siempre se aprenden cosas mirando a los demás. Por cierto, hablamos de marketing y “experiencia de marca”.

Por otro lado me llama la atención en las webs el tratamiento del color:

  • Ford y Microsoft azul, mucho azul. Yahoo también y Amazon, Expedia y cualquier buena compañía de negocios tendrán mucho azul. Es lo que tiene esto de tener el cielo sobre nuestras cabezas o de nuestro planeta azul.
  • Nike y Adidas, público joven, dinamismo, con toda la vida por delante (lo opuesto a la muerte, la vejez y el luto) negras, muy negras.
  • Google blanco, muy blanco. Igual que los productos de Apple y su IPod.

La RAE y el azul, el blanco y el negro.

June 6, 2007

Usabilidad y look and feel

En un diseño la usabilidad es crítica, pero el diseño gráfico y el look and feel también. No tiene sentido disgregarlos y el proceso de consultoría/trabajo tiene que ofrecer ambos. De lo contrario se corre el serio riesgo de obtener un resultado muy lejos de lo deseado y de tirar por la borda el proyecto entero.

Desafortunadamente, por muchas y diversas razones, esto no siempre sucede lo cual, por otro lado, explica muchas cosas en algunos rediseños que se ven por ahí.

September 29, 2006

Visualizando retículas de diseño

Con la rueda del ratón y Firefox podemos ver rápidamente la cuadrícula subyacente de cualquier diseño eliminando el texto de las páginas. Tan sólo tenemos que hacer zoom hasta que desaparezca para poner de relieve la retícula de diseño de la composición y la distribución de los elementos de la interfaz. Útil para determinar la jerarquía visual de la página y comenzar a identificar elementos gráficos que actúan como puntos focales de atención e inferir posibles flujos visuales de lectura de la interfaz concreta.

Home del diario El Mundo






















Get free blog up and running in minutes with Blogsome
Theme designed by Hadley Wickham