Tentándole (interacción)

Automatic translation of the text to english

Actualización 17 mar. 2009 (*)

La bola ha echado a rodar. Spotify ha abierto su registro de usuarios y la petición de invitaciones para disfrutarlo y la blogosfera y la Web están respondiendo. La explosión de su servicio se ha producido exactamente desde hace un mes, fecha en que abrió la solicitud de invitaciones gratuitas.

La enseñanza es clara, céntrate en desarrollar un producto excelente en cuanto a diseño de interacción se refiere y no te gastes dinero en publicitarlo. Si el producto es realmente bueno (algo muy fácil de decir pero complicado de lograr) tus usuarios lo harán por ti y mucho mejor de lo que tú puedas hacerlo. Es lo que tiene esto del marketing viral. Algunos buenos ejemplos, Apple, Panoramio o Firefox. Eso sí, no está de más dar un pequeño empujón inicial y mandar unos cuantos correos a tus amigos dando a conocer tu servicio, invitándoles a usarlo y a difundir el mail así como publicar la noticia de su lanzamiento, convocar algún concurso como gancho y postearlo en algún servicio social tipo Digg, Menéame o Wikio pidiendo a la gente que ayude para votar la noticia y promocionarla en portada.

La Economía de la Atención tiene sus propias reglas y una de ellas es detectar dónde se concentra la atención de los usuarios, promocionarse en dichos lugares y aprovechar las particulares posibilidades de interacción que ofrezca cada servicio.

¿Qué lugares son? Bueno, es fácil detectarlos, piensa en los servicios sociales que conoces y actúa en consecuencia para desarrollar una estrategia de marketing intensiva dentro y fuera de ellos.

Los servicios de noticias sociales como los citados son un ejemplo, otro, la blogosfera. ¿Y cómo se escucha a la blogosfera? Cualquiera como decía Nikesh Arora puede aportar ese necesario gramo de conocimiento brillante que puede cambiar tu servicio pero dado que el tiempo es uno de los bienes más preciados que tenemos y que la atención se concentra en pocos y escogidos lugares, un buen lugar para escuchar las voces de los internautas son las bitácoras de blogueros de prestigio. Una buena idea es hacer un poco de investigación periódica o tener a una persona específicamente trabajando (no sólo en esto, que un profesional cuesta mucho, sino en general en Investigación e Innovación) para ver qué posts se han publicado en los blogs más relevantes e influyentes de cada país sobre nuestro producto y leer con atención las respuestas de los usuarios a los mismos. Aunque uno siempre puede tener una idea brillante, normalmente es la conversación y la discusión lo que dinamiza y crea el contexto adecuado para que se produzca esa Alquimia de las Multitudes de la que informa y discute Pisani (un buen resumen se puede leer en Bibliotecarios 2.0), aunque en el caso de cualquier eminente bloguero y blog particular se produce algo muy curioso, nos movemos en otros parámetros que no suelen ser los usuales extraídos a partir de la minería de datos propia de mercados mundiales sino de una Alquimia de las Micromultitudes, campo que a mi entender, no se ha estudiado y debatido mucho todavía y que también tiene una extraordinaria importancia. El interés de estos blogs y posts en particular, es que en ellos suelen participar un elevado número de usuarios, pero no usuarios cualesquiera sino los conocidos como superusuarios o usuarios más activos. Lo que distingue a estos superusuarios de los demás es que suelen ser usuarios con perfiles profesionales muy especializados, con gran experiencia y proactividad, adoptadores tempranos y que pueden hablar con voz autorizada de lo que están diciendo, de ahí que sus valoraciones, juicios, recomendaciones, ideas y comentarios sean literalmente oro. Que se lo pregunten a Aza Raskin si no.

Sea con Spotify, sea con cualquier otro producto, escucha a tus usuarios. Suelen ser bastante inteligentes (ojo, y a veces no tanto, sus opiniones siempre tamizadas que para eso está nuestro juicio y terceras herramientas en las que apoyarnos como expertos de Experiencia de Usuario) y no hay nadie como ellos para contarte qué es lo que quieren ver y qué es lo que no quieren ver en tu producto. Puede parecer una obviedad pero es que no se escucha a los usuarios, no se les deja hablar y realmente se hace muy poco o nada de Diseño Centrado en el Usuario. Y no se les escucha entre otras cosas porque no se les da un altavoz que puede tener muchas formas: presencialmente desde los clásicos focus group, entrevistas, tormentas de ideas y en general dinámicas de grupos orientadas a pedir ideas creativas e incentivar la creatividad en torno a tu producto que se pueden realizar con grupos reducidos de gente en las propias oficinas, una técnica muy muy útil y poderosa y que tampoco se utiliza habitualmente cuando se pretende mejorar un sitio o producto web. Y online proporcionando un foro categorizado donde puedan quejarse, proponer y discutir los temas en los que estás evolucionando el producto y sugerir nuevas posibles formas de desarrollo o mediante plataformas de microescritura y votación tipo Menéame para que los usuarios sugieran y voten aquellas ideas que más les gusten. Intel tenía una iniciativa en este sentido aunque no soy capaz de encontrar el enlace, otra la web para realizar brainstorming en línea para captar propuestas de mejora de la usabilidad para Ubuntu. Los usuarios proponen, leen y filtran las más interesantes, luego no hay más que categorizarlas en cuanto a importancia y oportunidad de implementarlas y desarrollarlas si es oportuno. No está de más crear una base de conocimiento con todas ellas y revisarlas cada x tiempo.

(*) Otra compañía que promueve la participación de los usuarios y la generación de ideas para mejorar la compañía: Starbucks

Automatic translation of the text to english

Si una arquitectura no te entra en una página lo cual suele ser usual cuando hablamos de sitios grandes utiliza el cuadro de diálogo de Configurar Página de Microsoft Visio (Archivo > Configurar página…) para ajustar el contenido:

Arquitectura de Información realizada en una hoja de Excel con cerca de mil secciones/subsecciones. Aún con el máximo nivel de zoom no entra toda la arquitectura en una sola pantalla. Haciendo zoom menos se detectan ya patrones interesantes en base al código de colores utilizado para marcar los niveles jerárquicos viendo el balanceado del árbol de contenidos. La pena es que no entra en una sola pantalla con lo cual es imposible algo básico, realizar comparaciones entre todas las secciones

• En la pestaña de Configurar impresión, en el combo desplegable de “Papel de la impresora” selecciona el tipo de papel que desees, A3, A4…
• En la sección “Zoom para imprimir” elige el radio button de “Ajustar a:” y específica el número de hojas de ancho y de alto que necesites en los box correspondientes.
• En la pestaña tamaño de página selecciona las medidas con las que quieres trabajar (yo suelo utilizar puntos para tener una idea directa del tamaño real y el espacio aproximado que ocuparán los elementos al pintarlos en Visio, en el diseño final).

Acepta e imprime.

Las razones para invertir un poco de tiempo en “pintar” una arquitectura en papel son muchas y variadas. Por citar tan sólo algunas de las más importantes:

• Una arquitectura es literalmente un mapa, pero un mapa muy especial. Es un mapa de conocimiento que te permite abstraer los contenidos de un sitio, comprender su organización y montar la estructura hipertextual que enriquezca el espacio de información que se está diseñando.
• Una arquitectura pliega la información en un muy limitado espacio. Funcionan exactamente igual que los resúmenes, las síntesis, los apuntes que tomábamos en clase o las notas que tomamos en una reunión para levantar acta con posterioridad y que sirven como recuerdo de lo debatido/leído/analizado en un momento dado. Los rótulos asociados a cada sección representan idealmente el contenido de la misma y permiten crear un mapa jerárquico informativo del sitio.
• Cuando el sitio es muy grande se pierde la visión global de la estructura ya que no se puede visualizar entera la arquitectura al mismo tiempo en una hoja de cálculo como Excel (aproximadamente unas 40 ó 50 filas -secciones- a la vez en un monitor de 17 pulgadas y con una resolución de 1024x768 píxeles y con un nivel de zoom de 115-120%). Ello impide que podamos obtener una visión global de todo el sitio, hacernos una idea de cómo y por qué se ha estructurado, o de cómo y por qué se está estructurando, e impide asimismo identificar nuevas asociaciones u organizaciones informativas potenciales.
• Es fundamental y ayuda muchísimo a los encargados del desarrollo técnico.
• Es un entregable básico para el cliente que permite depurar en un momento temprano debatiendo con él, errores o incosistencias o subsanar carencias informativas del sitio.

Por experiencia personal, pinta la arquitectura e imprímetela en papel. Utiliza una, dos, o las hojas que necesites, tanto a lo ancho como a lo alto, y luego coge tijeras y celo y monta la composición de todas ellas. Pégala en una pared enfrente de tí, imprímela en PDF y mándasela al cliente y al resto del equipo de desarrollo.

Te harás un favor a tí mismo, al cliente, al equipo de diseño gráfico y a los desarrolladores y el resultado final se notará al permitirte crear a la postre una mejor arquitectura refinando la actual.

Una arquitectura de información en papel permite obtener una visión global del sitio algo imposible de lograr trabajando en un monitor.

Automatic translation of the text to english

Si tienes un equipo que se dedica a la Experiencia de Usuario: Diseño de Interacción, Diseño Gráfico, etc… y te preocupa realmente su comodidad y su productividad deberías facilitar a todos tus empleados dos monitores para trabajar. La diferencia en el rendimiento y en la facilidad y capacidad de trabajo es espectacular.

Dos monitores te permiten tener dos aplicaciones abiertas al mismo tiempo, ya sean dos ventanas del navegador con versiones diferentes de la misma página, dos ventanas de sitios diferentes para comparar características o una de un navegador y otra de PowerPoint para realizar cómodamente capturas de la Web y pegarlas en esa presentación que estás preparando para el cliente, una ventana de Photoshop con la maqueta que se ha hecho sobre tu último prototipo abierto en Visio en la otra ventana, un navegador con el sitio que estás rediseñando y una hoja Excel con la arquitectura del mismo…

Un monitor adicional supone multiplicar por dos el área de trabajo disponible y lo más importante, crear dos espacios separados de trabajo en los que puedes disponer de las aplicaciones según tus necesidades y que te van a permitir trabajar con dos documentos al mismo tiempo.

Trabajar con un sólo monitor supone que el modelo de interacción con el sistema operativo se basa en la sustitución de la ventana de la aplicación activa mediante ctrl+tab. O lo que es lo mismo, en el recuerdo frente al reconocimiento y por ende con un modelo de interacción mucho más pobre e ineficaz cognitivamente hablando.

En el recuerdo porque con un monitor trabajamos diviendo la tarea en microtiempos y con cinestesia (movimiento - sustitución de una ventana de aplicación por otra en un cortísimo período de tiempo) y recuerdo de lo inmediatamente observado. Esta tarea se repite quizá cientos de veces al día a lo largo de una jornada laboral, con el esfuerzo cognitivo y de concentración que ello supone. Vemos una interfaz o memorizamos las secciones principales de un sitio y cambiamos de aplicación para pintarla en Visio o plasmarla en la Excel de la arquitectura.

Con dos monitores el modelo de interacción cambia radicalmente, podemos mantener dos aplicaciones activas en el mismo momento facilitando la exploración de la interfaz y la comparación de elementos. El esfuerzo que se hace es mucho menor y se potencia la creatividad.

Trabajar con dos monitores supone una Experiencia de Usuario en la interacción con el ordenador radicalmente mejor frente al uso de un sólo monitor así que, si te preocupa tu equipo de diseño dótales de dos monitores a todos ellos y si no es posible, como mínimo, compra monitores panorámicos de 21 pulgadas que permiten mal que bien tener abiertas dos ventanas de dos aplicaciones distintas al mismo tiempo. El coste del equipamiento hardware es insignificante con la ganancia de productividad y la mejora de la interacción para tu gente.

Dos miembros del equipo de labs de Office (si hasta ahora no conocías estos labs no pueden faltar en tus feeds) acaban de publicar un software para realizar diagramas de afinidad y card-sorting. Creo que puede ser una herramienta útil y simple de utilizar, complementaria a otras para análisis posteriores de los datos:

La información de cómo se usa la puedes encontrar en las FAQ.

Aviso a navegantes: con Firefox, hoy, no había forma de entrar en la página de los labs porque daba error y se cerraba ¿cuestión de algun add-on que tenga instalado y que sea incompatible? posiblemente porque con la Nightly no me daba ese problema ¿?

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, bolígrafo y celo

Prototipo en papel

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.