Tentándole (interacción)

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

histórico de posts

July 23, 2008

Mapas, crisis hipotecaria y Diseño de Información

El País ha publicado esta mañana un llamativo gráfico en la primera noticia de la sección de economía de la edición impresa en papel (página 20). En la versión digital de la misma desafortunadamente no aparece dicho gráfico que reproduzco más abajo.

El País - Noticia original crisis hipotecaria pagina 20, 23 de julio de 2008

Es curiosa la interpretación que se puede hacer del mismo (cuando tenga tiempo actualizo el post) pero pensad un poco cual es la lectura que se extrae del gráfico actual en cuanto a responsabilidad de la crisis hipotecaria en las dos partes del globo mundial se refiere -Norte - Sur - y dónde se encuentran situadas las gráficas desglosadas por parciales, los rótulos de las mismas y lo que implican - América - frente a - Europa y Asia - a qué altura se encuentra situada la gráfica de los totales y dónde se encuentra situada (en la zona inferior - Sur global) el desglose de la pérdidas de los bancos y de las ampliaciones de capital).

Como siempre estas cosas pueden deberse a la casualidad pero echad un vistazo a la imagen con el gráfico original y a la modificada inferior para que veáis las lecturas tan diferentes que se pueden sacar del tema en función de cómo se diseñe el gráfico.

Gráfico noticia original
El Pais. Mapa de la crisis hipotecaria original. Noticia de 23 de julio de 2008

Gráfico editado de la noticia
El Pais. Mapa editado de la crisis hipotecaria original. Noticia de 23 de julio de 2008

July 14, 2008

Dos sitios interesantes y un grupo de Flickr

El día a día me come y en estas fechas que se supone, deberían ser algo más relajadas, sucede todo lo contrario con el cierre de proyectos antes de vacaciones así que no hay mucho tiempo para postear. No obstante hay van tres enlaces interesantes:

  1. Minube.com: un site de búsqueda de viajes. Lo tengo que estudiar con más calma.
  2. Like.com: no conocía esta tienda virtual, me parece muy interesante el sistema que utilizan de búsquedas y la forma de facetarlas. Me gusta especialmente los filtros dinámicos que se pueden aplicar para acotar las marcas y por sitios y me parece muy interesante la potenciación visual de los productos y la utilización de dibujos para la caracterización de los productos en la acotación por estilo (ver imagen)
  3. DataVisualizations: Un grupo de Flickr dedicado a la recopilación de ejemplos de Visualización de datos e información.

Like.com. Facetas de búsqueda
Like.com. Facetas de búsqueda

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.

April 10, 2008

Facetas y findability en el blog Extend de Viget

Blog de Extend de Viget. Control con pestañas que dan acceso a búsqueda, organización de contenidos, cronológica y RSS

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.

March 9, 2008

Breve estudio de usabilidad sobre el botón de envío en el callejero de LaNetro

El botón de envío de una dirección particular en el callejero de LaNetro no es un botón de enviar. Mirando la imagen que sigue a continuación la pregunta que se plantea es:

¿Dónde tiene que hacer clic el usuario para mandar el mapa a un amigo?

Errores de usabilidad. Botón de envío de una dirección en el callejero de LaNetro

La respuesta por un proceso de eliminación lleva a centrar la atención en el icono del sobre como único elemento presente en el formulario que sugiere una llamada a la interacción. Echamos mano de nuestro conocimiento del mundo real para establecer la conexión lógica entre la metáfora que representa y la acción de envío. El sobre de mail es un patrón consolidado a lo largo de múltiples sitios (por ejemplo, en la web de Neurona, en la imagen de más abajo). El problema es que en el presente diseño el sobre de correo no se distingue claramente como tal ya que:

  • En relación a su altura es demasiado ancho. Aunque existen sobres de correo de estas características el tamaño normal tiene una proporción más armónica entre anchura y altura. Los sobres de correos de toda la vida no son tan anchos.
  • Tiene el mismo color de fondo que el del formulario con lo cual es francamente difícil distinguirlo visualmente de éste.
  • El icono no está bien diseñado y cuesta distinguirlo como lo que es, un sobre.

Neurona. Detalle del sobre de mail
El icono del sobre de correo de Neurona es más identificativo.

Por otro lado se encuentra en una posición inesperada para el usuario -alineado horizontalmente en la esquina superior derecha del formulario a la altura del espacio entre los campos de Nombre y Email-. En esta posición toma relevancia funcional:

  • Por encontrarse jerárquica y visualmente en un lugar de peso, en la parte superior del formulario en contraposición a la inferior.
  • Por estar rodeado de espacio negativo. No tiene ningún elemento próximo con lo cual se realza su importancia, crea un punto de tensión y centra la atención en el mismo.
  • Por estar alineado horizontalmente con el borde superior del box de entrada de texto del campo Email lo cual hace que visualmente parezca que se sitúe entre el espacio de separación de los campos Nombre y Email (ver flecha roja en la imagen de abajo). Asimismo, se encuentra alineado con el borde derecho del área inferior de texto “Mensaje que vas a enviar:”. Siguiendo el principio de la Gestalt del cierre esto hace que se perciba como uno de los elementos delimitadores de un hipotético “rectángulo de cierre” (ver rectángulo marcado por las líneas discontinuas en la imagen de abajo) que agruparía todos los elementos interiores del formulario. El hecho de que esté situado más abajo del punto de pivotaje que es la esquina superior derecha de dicho “rectángulo de cierre” (señalado por el cuadrado azul) hace que se acentúe su carácter de elemento generador de tensión visual lo cual ofrece una pista más al usuario para considerarlo como elemento de interacción.

Rectangulo de cierre de los elementos del formulario del callejero de LaNetro

A pesar de todo ello, su posición espacial rompe con el modelo predominante a lo largo de la Web según el cual los botones de interacción suelen encontrarse al final de los formularios. Su posición en el área superior significa que se encuentra posicionado fuera del flujo natural visual de lectura, al final del formulario. El usuario escanea de arriba a abajo los elementos del mismo y cuando termina debe volver a la parte superior derecha para iniciar la acción.

Esta posición es asumible cuando el cuadro de diálogo es perceptiblemente más ancho que alto predominando un sentido de lectura de izquierda a derecha, o cuando los botones de interacción se encuentran claramente diferenciados del resto de elementos del formulario situándose fuera y a la derecha de ese imaginario “rectángulo de cierre” tal y como sucede en algunos cuadros de diálogo de aplicaciones de Mac y Windows.

Cuadro de diálogo de Photoshop para crear una nueva capa
Cuadro de diálogo de Photoshop para crear una nueva capa

¿Cómo podemos mejorar en este caso concreto la usabilidad del botón de envío?

La primera medida que cabe tomar es acompañar el sobre de un rótulo “Enviar”. Explicitando el verbo de la acción al lado del icono, mejoramos notablemente la usabilidad, aunque puede seguir resultando extraño para el usuario ya que sigue sin tener mucha apariencia de enlace. Subrayando el rótulo logramos que se perciba mejor como un hipervínculo. No obstante al no seguir la codificación de colores estándar (azul para hipervínculos) con el fin de no romper la estética visual del formulario sigue resultando confuso.

Enviar callejero de LaNetro con texto al lado del sobre y subrayado para que se perciba como enlace
Enviar callejero de LaNetro con texto al lado del sobre y subrayado para que se perciba como enlace

Posicionando icono y rótulo al final del formulario mejoramos la usabilidad. El usuario termina de escanear los elementos y se encuentra con un punto de interacción.

Sobre y enlace de enviar abajo del formulario del callejero de LaNetro
Sobre y enlace de enviar abajo del formulario del callejero de LaNetro

Ahora bien ¿es lo mismo pulsar sobre el icono del sobre que sobre el enlace? ¿Se puede pulsar sobre el sobre? ¿Y en el área entre ambos? Con el fin de evitar estas dudas y ampliar el foco sobre el que el usuario puede hacer clic para ejecutar el envío agrupamos ambos elementos en uno sólo a través de un único botón. Hecho esto ya no tiene sentido mantener el subrayado del rótulo “Enviar”.

Con el fin de que se perciba como un botón, su color de fondo debe ser diferente del blanco de los campos y el área de entrada de texto. En la imagen tiene un color ligeramente más gris.

Botón de enviar abajo del formulario del callejero de LaNetro
Botón de enviar abajo del formulario del callejero de LaNetro

No obstante lo mejor es utilizar un botón estándar del sistema operativo con el rótulo “Enviar” suprimiendo además, el sobre de correo con el fin de reducir el ruido visual. El rótulo asociado es suficientemente explícito.

Ahora bien, ¿dónde deberá ir colocado?

Alinearlo a la parte izquierda no es lo más óptimo en este caso dada la existencia de sangrados e indentados de los elementos interiores respecto del margen izquierdo y a que predomina el ancho sobre el alto en el formulario lo que otorga un ligero ritmo de movimiento hacia la derecha.

Botón de enviar estándar alineado a la izquierda en el formulario del callejero de LaNetro
Botón de enviar estándar alineado a la izquierda en el formulario del callejero de LaNetro

Situarlo centrado respecto al “rectángulo de cierre” de los elementos interiores es otra posible opción aunque en este caso predominaría un sentido visual de lectura respecto al eje central del formulario.

Botón de enviar estándar alineado en el centro respecto a los box de entrada de texto (no al área de entrada de texto) en el formulario del callejero de LaNetro
Botón de enviar estándar alineado en el centro respecto a los box de entrada de texto (no al área de entrada de texto) en el formulario del callejero de LaNetro

Lo óptimo es posicionarlo en el extremo inferior derecho, debajo del último elemento interior del formulario. Es el punto donde finaliza el flujo visual de lectura y al no tener ningún otro botón en su proximidad como el de cancelar (la “x” de cierre del formulario) o el “Borrar formulario” no tiene ningún otro problema asociado de usabilidad.

Botón de enviar estándar alineado a la derecha en el formulario del callejero de LaNetro
Botón de enviar estándar alineado a la derecha en el formulario del callejero de LaNetro

« Artículos anteriores





















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