Tentándole (interacción)

INTRODUCIENDO CONCEPTOS

Si el año pasado alguien le hubiera dicho a la dirección de Asus que para finales de 2008 pueden llegar a vender 5 millones de ordenadores de su pequeño portátil o netbook (1) Asus Eee PC (2), pocos directivos habrían apostado por ello (3). Y a tenor de la demanda, 2 millones vendidos hasta la fecha en todo el mundo, en sus siete primeros meses de existencia, de un aparato que en principio se pensó para los países en vías de desarrollo, el objetivo no parece inalcanzable.

Aunque el éxito ha sido totalmente inesperado para Asus no por ello deja de ser menos lógico y lo que es más importante, MENOS PREDECIBLE.

Un libro, el papel, el lápiz, el bolígrafo, la goma de borrar… todos ellos son ARTEFACTOS -instrumentos o herramientas- que aumentan nuestra capacidad cognitiva e intelectual (facultad que tenemos de interpretar y procesar la información a partir de la percepción, del conocimiento propio y de otros elementos subjetivos que nos permiten evaluarla y discriminarla) (4).

Gracias a ellos podemos obtener, fijar, reconocer, comprender, organizar y recordar la información recibida a través de los sentidos generando conocimiento y en última instancia sabiduría, en formas mucho más eficientes e inexploradas que las de la actualidad. O lo que es lo mismo, potenciar nuestra memoria.

EL PODER DE LA VISUALIZACIÓN DE INFORMACIÓN Y DE LAS SUPERFICIES INTERACTIVAS

“La Visualización tiene un pequeño pero creciente y crucial papel en los sistemas cognitivos. Los monitores proporcionan el canal de mayor ancho de banda del ordenador al hombre. Adquirimos más información a través de la visión que a través de todos los otros sentidos combinados. Los 20 millones de neuronas del cerebro dedicadas a analizar la información visual proporcionan un mecanismo de búsqueda de patrones que es un componente fundamental en la mayor parte de nuestra actividad cognitiva. Mejorar los sistemas cognitivos a menudo significa reforzar la relación entre la persona, las herramientas del ordenador y otras personas. Por una parte, tenemos el sistema visual humano, un buscador flexible de patrones, junto a un mecanismo adaptable de toma de decisiones. Por otra parte, está el poder de la informática y de los vastos recursos de información del ordenador y de la World Wide Web. Las visualizaciones interactivas incrementan la interfaz entre los dos. Mejorando estas interfaces podemos mejorar substancialmente el rendimiento del sistema entero”. (5)

“Visualizations have a small but crucial and expanding role in cognitive systems. Visual displays provide the highest bandwidth channel from the computer to the human. We acquire more information through vision than through all of the of the other senses combined. The 20 billion or so neurons of the brain devoted to analyzing visual information provide a pattern-finding mechanism that is a fundamental component in much of our cognitive activity. Improving cognitive systems often means tightening the loop between a person, computer-based tools, and other individuals. On the one hand, we have the human visual system, a flexible pattern finder, coupled with an adaptive decision-making mechanism. On the other hand are the computational power and vast information resources of the computer and the World Wide Web. Interactive visualizations are increasingly the interface between the two. Improving these interfaces can substantially improve the performance of the entire system.” (5)

Pero la clave de la supremacia de los ordenadores como artefactos aumentadores de nuestras habilidades cognitivas e intelectuales no sólo se reduce a su virtualmente ilimitada capacidad para servir como instrumentos a través de los que se pueden desarrollar, explicitar y formalizar interfaces visuales u otros artefactos que faciliten la representación visual y el procesamiento a gran escala o a microescala de la información (un procesador de textos, una hoja de cálculo), se debe además al hecho de que podemos interactuar con ellos de una forma que no es posible utilizando otro artefacto físico cuya interfaz no permita la alteración dinámica de la información de su superficie (por ejemplo, la apariencia de una hoja de papel no puede variar una vez que se ha escrito sobre ella con tinta).

Los periféricos de entrada de un ordenador como el teclado, el ratón o el touchpad de un portátil son instrumentos más eficaces para determinadas tareas de entrada, gestión y manipulación de la información que un lápiz, una goma de borrar, el celo, un clip, un bolígrafo o un pincel.

La característica de las superficies de volverse más interactivas unida a la capacidad de acceso a la Web desde cualquier lugar (6) pone en nuestras manos herramientas de aprendizaje y producción de la información extraordinarias a un coste que cae rápidamente, y que en un futuro próximo pueden ser lo suficientemente asequibles como para permitir un cambio en las condiciones sociales y de vida de los más desfavorecidos.

ORDENADORES ULTRAPORTABLES (NETBOOKS) PARA UN ECOSISTEMA INFORMATIVO DIGITAL FRENTE AL PAPEL

Y de estas dos condiciones deriva el triunfo del Asus Eee PC, un artefacto que permite en palabras de Ware, mejorar exponencialmente “el rendimiento del sistema entero” portable con una mano, con unos periféricos de entrada que potencian las funciones de los clásicos utilizados en las escuelas (papel, lápiz, rotuladores, gomas de borrar, libros y bolígrafos) y ubicuo.

No tiene ni disco duro, ni unidad (obsoleta) de DVD. Pero tampoco los necesita habida cuenta de que se pueden aumentar sus prestaciones a demanda del usuario para ajustarse a sus necesidades, y que permiten conectarse vía Wi-fi a la Web.

El coste es asumible a gran escala para una buena parte de la población mundial aunque todavía tanto en los países desarrollados, como en vías de desarrollo y por descontado en el Tercer Mundo, tiene que bajar aun más. De ahí la importancia de iniciativas como la de Nicholas Negroponte de conseguir producir portátiles para los niños a un precio no superior a los 100 euros y que en gran medida ha sido el detonante de los importantísimos desarrollos tecnológicos que son estos aparatos y resto de gagdets móviles.

En buena parte del mundo puede ser hoy día más fácil y eficiente introducir dispositivos digitales que cumplan y aumenten las funciones del lápiz y del papel, siempre que energéticamente hablando sean ecológicamente sostenibles y respetuosos con el medioambiente, que mantener un ecosistema informativo basado en el papel.

En los países desarrollados estamos ante una particular y poderosa transformación que comenzó en la década de los años 80 con la llegada del ordenador personal (Personal Computer) se aceleró en los 90 con la aparición de la Web y que está experimentando una nueva inflexión en la actualidad con los dispositivos portables, la Web ubicua y el abaratamiento radical de la informática. Al tiempo que la potencia de los ordenadores aumenta exponecialmente, el coste de producción y difusión de la información tiende a cero gracias a una economía basada en las redes sociales y el freemiun (7).

Estamos anclados por nuestra economía papel.

LA GRAN OPORTUNIDAD

Cuando compañías como Microsoft, Google y Amazon (con su limitado libro electrónico que es el Kindle) tomen plena conciencia del potencial que encierra y de los retornos económicos que puede producir el desarrollo de un artefacto usable que:

- tenga una superficie interactiva y la capacidad de proceso de un ordenador,
- sea portable con una mano y manejable con dos. Sea tan o más ergonómico que un libro o un cuaderno de papel y
- se produzca a un coste que democratice el acceso a la información y que garantice la inclusión informativa de las sociedades en la actual Sociedad de la Información,

nos brindarán un dispositivo tecnológicamente superior al Asuss Eee Pc que pueda reemplazar a los medios de comunicación de masas como los libros, la prensa, la radio o la televisión. Un artefacto que podamos llevar encima con comodidad, que aumente espectacularmente nuestras capacidades cognitivas e intelectuales y que permita romper la brecha digital en el Mundo.

El Asus Eee PC triunfa. Amazon tiene un cuerpo de ventaja, ¿Quién será el siguiente en mover ficha?

Está en juego el mercado mundial de la información. Tenemos que superar de una vez por todas las tremendas limitaciones de las interfaces no dinámicas. El papel es el pasado. Los nuevos artefactos del conocimiento son digitales, ergonómicos, portables, geolocalizables y ubicuos. Y la clave de su correcto uso pasa por el diseño de interacción y la investigación en Experiencia de Usuario. Las maravillas están por llegar en forma de hoja de papel digital plegable, interactivo y con conexión a la Web.

La idea está en el aire, sólo hay que llevarla a cabo, algo que será cuestión de desarrollo tecnológico y de oportunidad y madurez del mercado para lanzarlo a nivel mundial:

“…Steve [Ballmer] se sentía como Houdini y en un momento cogió una servilleta de color amarillo y la sacudió delante de nuestras narices. «¿Ven esto? Así será el dispositivo del futuro, una mezcla de pantalla de ordenador y de televisor. Será tan flexible que lo plegaremos y lo arrugaremos para meterlo en el bolsillo». Ballmer anunció que ese dispositivo, sea lo que sea, nos permitirá leer periódicos en el futuro, buscar teléfonos, mirar documentos, en fin, de todo” (8).

No obstante, quizá Negroponte de momento, vuelva a adelantarse a todos con su nueva generación de ultraportables, el XO2. Textualmente: un libro electrónico (9).

–0–

ANEJO:

HOJAS DE CÁLCULO, SUPERFICIES INTERACTIVAS Y VISUALIZACIÓN DE INFORMACIÓN

Las hojas de cálculo son una de las herramientas más poderosas que puede tener un Arquitecto de Información.

Frente a una hoja de papel, una hoja de cálculo como Excel es un espacio informativo multidimensional en el que podemos:

- manejar n-variables que pueden adquirir n-estados.
- realizar operaciones matemáticas o estadísticas, agrupar y operar sobre conjuntos de datos, etc.

Cada celda de la hoja es una superficie interactiva susceptible de ser formateada de una u otra forma de acuerdo al valor u operación que se aplique sobre su contenido. Por ejemplo, podemos cambiar el color de las celdas conforme a su valor mediante la opción de Formato condicional (menú Formato > Formato condicional).

El papel no permite cambiar la apariencia gráfica de todo o una parte de su superficie, ni calcular dinámicamente la variación del resultado de un conjunto de números, no permite agrupar datos a través de diferentes hojas, ni crear relaciones hipertextuales entre celdas, de hecho, en una hoja de papel, obviamente, no existe el concepto de celda.

Un ejemplo:

Si cogemos una hoja de cálculo, en el eje horizontal (primera fila) podemos explicitar n sitios (o n inputs) que deseemos investigar. En el eje vertical (primera columna) definimos las variables a evaluar de los mismos. Para cada variable y para cada celda asignamos una escala de valores (del 1 al 3). Por último para cada celda asignamos un color (rojo, amarillo y azul) con la citada opción de formato.

Cuando la hoja esté completamente rellena además de poder realizar las operaciones estadísticas y matemáticas que nos interesen sobre los datos, obtendremos un mapa visual muy básico de color que nos permitirá detectar de manera rápida y con tan sólo un vistazo patrones ocultos. El uso de colores es un recurso muy útil y potente cuando se está trabajando con arquitectura de sites, inventarios de contenido, etc.

Algo tan fácil como el proceso descrito hecho con una herramienta de trabajo ofimática de uso cotidiano multiplica exponecialmente nuestra capacidad de análisis, absorción y gestión de la información facilitando la toma de decisiones.

En función del nivel de zoom que apliquemos sobre la hoja obtenemos distintas perspectivas informativas sobre determinados conjuntos de datos. Con niveles de zoom grandes nos centramos en áreas muy específicas mientras que si disminuimos el zoom y ampliamos la perspectiva detectaremos más fácilmente patrones informativos en todo el universo de datos analizado.

Si pudieramos aplicar otras técnicas de Visualización de Información como la rotación en tres dimensiones de la hoja y generar alturas (montañas y valles) en función de la predominancia de un valor en un área espacial aplicando además efectos de sombreado y luminancia (en la última imagen no se han aplicado superficies en la forma poligonal que debería abarcar todo el área roja y que debería ser de bordes rectos, es tan sólo un ejemplo rápido para hacerse una idea de cómo podría quedar), tendríamos una extraordinaria herramienta de conocimiento en nuestras manos.

Realizar algo similar con una hoja de papel es simple y sencillamente imposible.

–0–

Francisco Tosete
Miembro de ThinkEPI: ThinkTank de Análisis sobre estrategia y prospectiva de la Información

BIBLIOGRAFÍA:

1. Asus Eee PC
2. Las fábricas de Asus echan humo y doblan la producción del Eee PC [en línea]. “ADN” <http://www.adn.es/tecnologia/20080430/NWS-1358-PC-Asus-Eee-produccion-fabricas.html > [Consulta: 20 may. 2008]
   FERGUSON, Scott. IDC Predicts $3B Market for Low-Cost PCs [en línea]. “EWeek.com”. 8 may. 2008 [Consulta: 20 may. 2008] <http://www.eweek.com/c/a/Desktops-and-Notebooks/IDC-Predicts-a-3-Billion-Market-for-LowCost-PCs/ >
3. Netbook [en línea]. En “Wikipedia” <http://en.wikipedia.org/wiki/Netbook> [Consulta: 20 may. 2008]
4. Cognición[en línea]. “Wikipedia” [Consulta: 20 may. 2008] < http://es.wikipedia.org/wiki/Cognici%C3%B3n>

   WARE, Colin. Information Visualization: Perception for design. 2nd ed. Amsterdan : Elsevier, 2007, p. 2.

5. WARE, Colin. Information Visualization: Perception for design. 2nd ed. Amsterdan : Elsevier, 2007, p. 2.
6. HERNÁNDEZ, Bernardo. ¿Qué es el Cloud Computing [en línea]. “Cinco Días”. 4 ene. 2008,
   <http://www.cincodias.com/articulo/empresas/cloud/computing/cdscdi/20080104cdscdiemp_21/Tes/> [Consulta: 20 may. 2008]

   ESPEJO, Antonio. Microsoft promueve una tecnología para la interconexión de todo [en línea]. “El País”. 1 may. 2008
   <http://www.elpais.com/articulo/red/Microsoft/promueve/tecnologia/interconexion/todo/elpeputeccib/20080501elpcibenr_2/Tes> [Consulta: 20 may. 2008]

7. ANDERSON, Chris. Free! Why $0.00 Is the Future of Business [en línea] “Wired”. 26 may. 2008 < http://www.wired.com/techbiz/it/magazine/16-03/ff_free?currentPage=all> [Consulta: 20 may. 2008]
8. SALAS, Carlos. Los inventos del futuro son naturales [en línea] “Suplemento de Mercados de El Mundo” 4 may. 2008 < http://www.elmundo.es/papel/2008/05/04/mercados/2384533.html> [Consulta: 20 may. 2008]
9. DERNDORFER, Christoph. XOXO: OLPC announces details about the XO-2, G1G1 comeback in summer [en línea. “One Laptop Per Child News”. 26 may. 2008 <http://www.olpcnews.com/laptops/xo2/> [Consulta: 20 may. 2008]

Me encanta este tipo de interacción, me encanta. Aunque creo que ya lo he dicho en algún otro post:

Primer vídeo:

Segundo vídeo:

Vía Small Surfaces

Es todo un reto: Cinestesía visualización en 2.5D, pequeñas pantallas, plegado de información… Según qué tipo de interacción creo que efectos como estos son lo más difícil tanto de crear y visualizar mentalmente (ya que no estamos acostumbrados a pensar o “ver” “movimiento”) como de modelizar (y no hablemos ya de transmitir a los clientes). Algunas técnicas como la observación contextual se me antojan claves para ello.

Es ahora cuando se está comenzando a realizar un uso mayor de estos recursos para crear experiencias de usuario impactantes. En cuanto a la Web se refiere, con la tecnología existente y con los sistemas operativos actuales (veremos los futuros) no es precisamente el entorno que más se adecue para implementar este tipo de cosas.

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.

Búsqueda, Sindicación de contenidos, organización temática y organización cronólogica. Todo junto agrupado en un mismo elemento, bajo pestañas. Tiene el inconveniente de que:

1. Hay que hacer clic para acceder a cada opción
2. La información está plegada –> limitación cognitiva, permanece oculta y se despliega a demanda del usuario.
3. Se pierde el box de búsqueda, no es persistente cuando es una característica importante.

Y la ventaja del plegado de información: más información en menos espacio. Visto en el blog de Extend de Viget.

El caso es que me ha llamado la atención. Curioso componente.

Apple acaba de publicar la actualización de sus directrices para el desarrollo de aplicaciones web para el IPhone.

Merece la pena echar un par de horas leyéndolas.