tentándote.com

Nota:

Si no te has leido el primer libro de la trilogía de Milleniun “Los hombres que no amaban a las mujeres” y tienes pensado hacerlo, cosa que te recomiendo, sáltate los párrafos entrecomillados que vienen a continuación y sigue leyendo más abajo ya que la cita es un pasaje importante del mismo:

–0–

“Kurt Nylund había hecho en total dieciocho fotografías desde la ventana de la segunda planta de Sundströms Herrmode. En diecisiete de ellas, se veía a Harriet Vanger.

Harriet y sus compañeras de clase llegaron a Järnvägsgatan justo en el mismo instante en que Kurt Nylund empezó a hacer fotografías. Maikel estimó que las fotos se hicieron en un lapso de unos cinco minutos. En la primera, Harriet y sus compañeras estaban bajando la calle en dirección al fotógrafo. En las fotos que iban de la dos a la siete se las veía de pie mirando el desfile. En otra, ya se habían desplazado unos seis metros más abajo. En la última, posiblemente sacada un poco más tarde, el grupo ya había desaparecido.

Mikael agrupó una serie de instantáneas en las que cortó a Harriet por la cintura y las manipuló hasta conseguir el mejor contraste posible. Las guardó en un archivo aparte, abrió el programa Graphic Converter y activó la función diaporama. El resultado fue similar a una película muda entrecortada, con saltos de fotogramas, donde cada imagen se mostraba durante dos segundos.

Harriet llega, imagen de perfil. Harriet se detiene y mira calle abajo. Harriet vuelve la vista hacia la calle. Harriet abre la boca para decirle algo a su amiga. Harriet se ríe. Harriet se toca la oreja con la mano izquierda. Harriet sonríe. De repente, Harriet, con la cara en un ángulo de unos veinte grados a la izquierda de la cámara parece asombrada. Harriet abre los ojos de par en par y ha dejado de sonreir. La boca de Harriet se convierte en una fina línea. Harriet fija la mirada. En su cara se puede leer… ¿qué? ¿Tristeza, conmoción, enfado? Harriet baja la mirada. Harriet ya no está.

Mikael volvió a pasar la secuencia una y otra vez…”

–0–

Una de las herramientas fundamentales que utilizamos hoy día cuando diseñamos una web o una aplicación web o móvil, son los prototipos.

En contraposición a ellos, uno de los documentos de trabajo más comunes que se han estado utilizando principalmente hasta hace muy poco tiempo para producirlas (y que se siguen utilizando y son necesario para muchas otras cosas) han sido los funcionales que describen textualmente de manera detallada las páginas, la estructura y funcionalidades, los casos de uso, así como los procesos de interacción que se dan cuando el usuario interactúa con determinadas partes de la interfaz mediante diagramas de flujo.

No obstante, aunque los funcionales son muy importantes de cara al desarrollo back, carecen de la fuerza descriptiva y aclaratoria de los prototipos desde un punto de vista de usabilidad, tanto para visualizar de forma óptima cómo ha de ser la interfaz, dónde tienen que ir exactamente sus elementos y cómo se interrelacionan, como para visualizar los procesos de interacción que se dan en la web o aplicación de una manera más satisfactoria.

No es lo mismo colocar un literal encima de un campo input de texto, que situarlo al lado. No es lo mismo tampoco ponerlo a la izquierda o a la derecha, o elegir uno u otro orden de aparición. No es lo mismo agruparlos visualmente mediante una “caja” o línea que los rodee, que dejarlos al “aire” en una región abierta por la que fluya la mirada sin barreras utilizando la mera alineación de los mismos a izquierda, derecha, arriba o abajo, para que queden relacionados mediante la aplicación de algunos de los principios básicos de la Gestalt.

Y tampoco es lo mismo leer una descripción textual de cómo funciona un elemento de una interfaz, que visualizarlo mediante prototipos en los que se ve de manera gráfica su comportamiento (por ejemplo, la secuencia de agregar un producto a un carrito de la compra en una tienda electrónica).

Esta es una de las razones por las que me gusta tanto Microsoft Visio para prototipar.

Porque entre otras cosas, permite simular una suerte de “animación de la interfaz” yendo más allá de la mera narrativa visual estática del espacio y del tiempo del papel que Tufte explica de manera brillante en su excepcional “Envisioning Information”.

En la novela de Millenium “Los hombres que no amaban a las mujeres”, uno de los personajes centrales, Mikael Blomkvist, ordena una serie de fotografías tomadas en breves intervalos durante un tiempo de cinco minutos y luego los reproduce en una secuencia animada con un programa informático en el ordenador con el fin de poder obtener una determinada historia o secuencia completa de acontecimientos que reflejan las fotografías.

De manera análoga y en lo que al diseño de interacción se refiere una de las claves para explicar interacción es la animación de la interfaz como si de una película se tratara. Con Visio se puede recrear esta animación creando “n” prototipos en los que en cada uno se presente un estado distinto de uno o varios componentes de la interfaz y visualizándolos sucesivamente hacia delante y hacia atrás mediante una función de Microsoft Visio que para mí me resulta imprescindible y que utilizó de manera habitual y automática cuando trabajo:

la tecla F5 de previsualización a pantalla completa de la página

En un archivo de Visio con, por ejemplo, 30 prototipos presionando F5 y utilizando las teclas de avanzar o retroceder podemos realizar una simulación virtual animada de un proceso  para mostrárselo al cliente o a los desarrolladores. Además, podemos exportar el archivo a un documento PDF para verlo con Acrobat Reader que permite hacer lo mismo.

Un ejemplo: la secuencia de imágenes de la interacción con un buscador de manera estática y lineal en las imágenes, a continuación, y de forma animada abriendo el PDF del enlace y usando las teclas de avanzar – retroceder página:

Aunque los prototipos nos cuentan una narrativa y dicha narrativa se puede apoyar (y se apoya cuando trabajamos) en descripciones textuales al margen y llamadas mediante círculos a las mismas, fijaros en la fuerza descriptiva que transmite un PDF en el que el cliente puede “animar” la interfaz:

Animar interfaces en Microsoft Visio (PDF)

Podéis abrir el archivo y utilizar las teclas de avanzar – retroceder para visualizar la interacción.

El siguiente vídeo es una propuesta de rediseño para las tabs de Firefox que presenté en su día a uno de los primeros Concept Series de Mozilla Labs (os recomiendo verlo a pantalla completa con resolución Full HD que es como mejor se aprecian los detalles). La captura la hice con Camtasia y es una sucesión de 120 prototipos previsualizados a pantalla completa:

En un trabajo normal no se debe llegar ni mucho menos a semejante grado de detalle porque los cambios que se quieran realizar son muy costosos en tiempo y esfuerzo. Para nuestro día a día, lo ideal es hacer un único prototipo para cada estado de interacción de un componente. En plan casero, con las teclas de avanzar retroceder página podemos controlar manualmente los tiempos para acelerar o retardar la animación y si deseamos algo más profesional, podemos editarlo posteriormente con un editor de vídeo:

El prototipado en papel está muy bien para simular los procesos interactivos y testear las cosas de manera rápida, a bajo coste y en un estado inicial, con el fin de comprobar si funcionan correctamente o si existe algún problema serio de usabilidad. Está metodología además, es muy útil y práctica para algo más formal y trabajado dado que, además de tener la posibilidad de animar la interfaz, podemos generar directamente un documento entregable en PDF.

Es fantástico poder enseñar directamente en pantalla y mostrar de forma animada a los compañeros de desarrollo y al cliente cómo van a funcionar las cosas.

El equipo de UX de Mozilla utiliza la comparación de múltiples pequeños usando imágenes estáticas. Ponen todos los estados de interacción de un componente en una misma y larga imagen. Al lado de cada uno de ellos se acompaña una descripción textual que lo explica.

El siguiente es un ejemplo del funcionamiento de Ubiquity en la barra de Firefox para un futuro comando “Shop for” al que se le aplican modificadores (por cierto, acabo de descubrir que Flickr permite descargarse la imagen en el formato original en que la subió la persona que creó el archivo y que en este caso se puede editar directamente en Fireworks :D

Ubiquity – Shop for comand + modifiers. Prototipo original de Aza Raskin

Si os animáis, me gustaría conocer vuestra opinión y vuestras metodologías de trabajo acerca de cómo hacéis para simular la cinestesia -la animación-, los movimientos y las transiciones- con las que tenemos que bregar cada vez más. Prototipos, tipología de notaciones para describir elementos y tiempos que uséis, cómo indicáis los estados de interacción etc.

A gallery for prototyping Android applications:

• Download Android UI gallery for Microsoft Visio (435.kb)

• Belén Pena & Susana Heredia: Download Android UI gallery for Omnigraffle (.gstencil 372 kb)

• Download Android UI gallery for Omnigraffle (.vdx 370 kb)

• Download PDF of Android UI gallery for paper prototyping (434 kb)

Enjoy!  ;-)

Estos días me ha tocado mirar un poco los portales de empleo para un rediseño que estaba haciendo, su modelo de interacción, sus microinteracciones y como resolvían determinadas cosas como la forma de registrarse y de obtener una contraseña, el proceso de recordatorio de la misma en caso de olvido, el  de logado, etc.

Y para ello, la World Wide Web es la mejor escuela para aprender si eres Diseñador de Interacción:

Navega, navega y navega. Y sobre todo navega con ojo crítico.

Es lo más importante y lo mejor que puedes hacer para aprender modelos de interacción y aplicarlos en tu trabajo cotidiano. Es difícil encontrar sitios con patrones de interacción novedosos y buenos pero es estimulante cuando encuentras alguno que merece la pena.

Viendo algunos de los portales de empleo en España me da la impresión de que no han evolucionado gran cosa en los últimos años. El diseño y las tecnologías de las que disponemos actualmente han avanzado mucho y va siendo hora de que hagan un rediseño profundo de sus interfaces y modelos de interacción. Con el actual contexto económico, si no está ya en camino no debería tardar mucho en llegar, pero tan sólo es una impresión.

Uno de los que he visto, que la verdad, desde la última vez que lo utilicé hace hace ya algunos años a ahora, ha cambiado mucho y para bien, es Monster.es.

En concreto el otro día me estaba fijando en el uso que hacen de los colores.

Ésta es una captura de parte de la pantalla del perfil de un candidato:

Por deformación profesional como Diseñador de Información tiendo a ser bastante Tufteano. Me gustan determinadas escuelas y determinados maestros. Y en la medida de lo posible tiendo más a borrar tinta que a utilizarla en exceso en los prototipos, aunque reconozco que todo ha de ser en su justa medida.

A veces es pertinente, útil, conveniente y necesario añadir tinta y, más concrectamente, elementos que actúen como agrupadores de contenidos.

En cuanto a ello, en Monster.es me gusta mucho el uso que hacen del color para modularizar los componentes de la página y particularmente, en el ejemplo de la captura, los correspondientes al del nombre del candidato y los de “Hechos destacados de tu carrera profesional”, “Habilidades”, “Afiliaciones profesionales”, “Méritos y premios” y el resto que están por debajo y que no aparecen aquí.

Tengo pendiente escribir un post en el que hable un poco más en profundidad sobre el color y los colores y de su importancia en cuanto a lo que a la usabilidad de las interfaces se refiere.

El tema es auténticamente fascinante y lejos de lo que pueda parecer, de todo menos fácil y baladí.

La verdad, por muchísimas razones es muy muy díficil hacer verdaderamente un uso 100% correcto de los colores. Incluso me planteo sí, desde un punto de vista del Diseño Emocional verdaderamente hay que ser un “talibán” en cuanto a la hora de aplicar dichas convenciones dado que, antes del nivel del procesamiento reflexivo (o racional) tenemos otros dos previos: el visceral, el más rápido a partir de las percepciones obtenidas por nuestros sentidos del entorno y los objetos con los que interactuamos, y el conductual que constituye el nivel intermedio entre el reflexivo y el visceral, y que es aquel en el que llevamos a cabo casi todo nuestro comportamiento.

Ambos también intervienen en el proceso de percepción y lo condicionan desde un punto de vista emocional por lo que las recomendaciones sobre uso del color pueden decir una cosa, pero el estómago puede decir otra.

Con independencia de esta reflexión, tener un mínimo de conocimiento sobre la teoría del color y la percepción visual humana es fundamental y hay un buen número de guías que se podrían aplicar para mejorar la usabilidad de las interfaces.

Centrándonos en Monster.es y en la citada página de “Mi Perfil” de un candidato, fijaros en el uso que hacen de los colores:

He conservado el tamaño original de la imagen porque se aprecia mucho mejor que reduciéndola y quería que se viera bien aunque desborde el tamaño de la maquetación del cuerpo central del blog.

Fijaros en los efectos que se consiguen con el tratamiento de los colores que ha hecho el diseñador de Monster.es.

• El gran módulo central parece flotar al estar rodeado de blanco. En la página completa de “Mi Perfil” en el portal, a la derecha límita con un módulo vertical de “Consejos rápidos” que en esta captura no aparece. A su vez, a la derecha de éste sólo hay espacio blanco hasta el ascensor del navegador y el borde de la pantalla. A la izquierda de este gran módulo central, igualmente, sólo hay espacio en blanco hasta el mismo borde de la pantalla.
• Los colores claros parecen acercarse, los oscuros alejarse. O dicho más correctamente. Los colores claros se perciben como más expansivos y crecen mientras que los oscuros parece que se contraen y provocan un efecto de inmersión. La pregunta buena y que muy poca gente de todo lo que he leído se hace es ¿por qué? Una posible respuesta en base a lo que entiendo (ya que no soy ni físico ni psicólogo) quizá llegue en ese post sobre los colores.
• Quedémonos con una idea:

Los colores nos permiten establecer capas de información.

Lo dice Tufte en su extraordinario “Envisioning Information”, lo explica bastante más científicamente Colin Ware en su obra “Information Visualization” y se infiere de un cuadro apasionante que se pinta leyendo acerca de la teoría del color.

En la captura de arriba podemos distinguir las siguientes capas de información:

• El color blanco del fondo y de los módulos de “Francisco Tosete Herranz” y del de “Hechos destacados de tu carrera profesional” conforma la capa de información que se percibe como más próxima o cercana.
• Las cabeceras verdes de ambos módulos constituyen otra capa de información que se sitúa ligeramente más atrás que la capa blanca. El hecho de que las cabeceras estén unidas al área blanca inferior mediante un borde de un píxel de grosor de color gris, y a la consistencia en el código de color de los módulos (mismos elementos constitutivos con los mismos códigos de color) hacen que los relacionemos semánticamente y que como tal, insconcientemente los percibamos.
• Los rótulos de color naranja se perciben a su vez como más cercanos que el verde del fondo de las cabeceras.
• El color negro del texto constituye la capa más lejana de información. Su uso contra el blanco (máximo contraste) hace que aparezca como si el texto estuviera troquelado en una hoja de papel y detrás viéramos una capa negra.
• El color morado que se utiliza de forma consistente para identificar los enlaces hipertextuales con excepción del rótulo del pequeño módulo de arriba a la derecha “Datos de contacto” conforma otra capa de información más lejana que la del fondo azul de todo el módulo central.
• En las pestañas se produce un curioso efecto psicológico:

• Literalmente se perciben como si fueran el bolsillo de un pantalón por la sombra que tiene detrás la pestaña activa y la línea que sirve de base para las inactivas. Esta sombra crea un fuerte efecto de oclusión en la primera pestaña haciendo que aparezca como más cercana respecto a las demás. Este efecto se refuerza por el color de relleno de azul más oscuro de las pestañas inactivas que hace que se perciban como situadas en un plano inferior. Es como si tuviéramos una hoja de papel metida en ese bolsilo, que sobresaliese ligeramente y en la que estuvieran pintadas las pestañas inactivas.
• Hay otro efecto curioso que realza la usabilidad de las pestañas. Mientras que el color de la pestaña activa es plano y no invita a hacer clic sobre ella, el degradado en las pestañas inactivas, más claro en la mitad superior y más oscuro en la mitad inferior hace que se perciban como botones ofreciendo una affordance o pista visual que nos invita a interactuar sobre las mismas. Por último, la sensación de “bolsillo del pantalón” se refuerza por el hecho de que la línea horizontal en torno a la que se alinean las pestañas no llega hasta los mismos bordes exteriores del componente marcando una separación de zonas. En su lugar dejan un espacio desde su inicio hasta su margen conectando las zonas de encima y de debajo de la línea, y permitiendo que el flujo visual fluya por todo el componente (mirar la captura superior para apreciarlo mejor). De esta forma, el color azul homogéneo de fondo y la ausencia de líneas de separación entre módulos funciona como agrupador de todos los componentes interiores.
• El efecto de aplicar una sombra detrás para crear el efecto de oclusión se utiliza de manera recursiva en otros componentes como el de “Datos de contacto”, el de logado de color negro: “Hola Francisco”, o el de “Consejos rápidos”:

• Eso sí, dicha sombra no se aplica de manera homogénea en ellos. En el de “Datos de contacto” aparece a ambos lados del mismo, la fuente de luz es cenital desde la parte inferior. En los módulos de “Hola Francisco” y el de “Consejos rápidos” la fuente de luz es cenital desde la parte superior lo que provoca que la sombra se vea en la parte inferior y ofrezca ese efecto cómo si estuviéramos tirando del componente hacia nosotros abombándolo. Por último, en el pequeño botón de ayuda de color azul de la cabecera del módulo inferior debajo de las pestañas, la sombra se proyecta sobre el lado inferior derecho del botón lo que implica que la fuente de luz se encuentra en la superior izquierda.

Como conclusión, lo dicho un poco más arriba: es muy muy difícil hacer un uso verdaderamente correcto de los colores aunque se deba tender a ello. El diseño gráfico es un aspecto fundamental y crítico que impacta en la usabilidad de las interfaces y es conveniente tener un mínimo conocimiento de la teoría del color. También es fundamental que pueda existir una comunicación fluida entre diseñadores de interacción y diseñadores gráficos.

En cuanto al uso de capas de información en los prototipos apuntar algo interesante:

Para crearlas y comunicarlas de manera efectiva a los diseñadores gráficos lo mejor es utilizar escalas monocromáticas (preferiblemente grises aunque también se puede utilizar cualquier otro color) y jugar con la luminancia -brillo-  estableciendo buenos contrastes entre la capa de información de fondo y la de primer plano, o entre las de los diferentes planos entre sí.

Por ejemplo, en los siguientes prototipos:

• El usuario hace clic (a) sobre el enlace de editar para corregir alguno de sus datos personales.
• Como resultado se entra en el modo de edición (b) y los campos se vuelven editables. El usuario tiene un triple feedback de que está editando por 3 outputs:
  • al lado del rótulo de cabecera “Registrarse en ACME Aerospace” el enlace de editar desaparece y cambia al rótulo “editando datos”,
  • los textos aparecen dentro de campos inputs lo que ya de por sí es un indicio suficientemente significativo de que se ha cambiado de modo no editable a editable y,
  • alineamos el enlace de “cancelar” y el botón de “Guardar cambios” a mano derecha, en línea con el borde derecho del último campo del formulario lo que es indicio suficiente para que, gracias a las Leyes de la Gestalt, percibamos que actúan sobre todo ese grupo de campos haciendo predecible saber qué sucederá al pulsar sobre el botón de guardar.
• Este sería un ejemplo de uso de mínimo de tinta bastante tufteano. Posibles variaciones implican, por ejemplo, que agreguemos una línea horizontal por encima del enlace de “Cancelar” y el botón de “Guardar cambios” de la misma longitud que el cuerpo de campos para reforzar que ambos elementos actúan sobre todo el grupo (c). Aunque no se aprecia en la imagen porque ha sido reducida, la línea no es sólida sino de puntos, lo que indica permeabilidad. Al permitir fluir la vista entre los puntos conecta de manera elegante lo situado por encima y debajo de la misma.
• Si deseamos hacer más explícita la agrupación de campos y el hecho de que el enlace de “cancelar” y el botón de “guardar cambios” actúan sobre todos los campos del componente podemos utilizar otro tipo de agrupador: un borde gris que los encierre a todos bajo los cuáles situemos el citado enlace y botón (d). Lo interesante es que aquí ya estamos estableciendo capas de información aunque en este caso tengan el mismo peso al tener igual color de fondo.
• Si queremos establecer una jerarquía de información más explícita y marcada entre ambas capas podemos aplicar a la del grupo de campos que se están editando un color de fondo gris más oscuro. Esto hace que todo el grupo aparezca como “hundido” y en un segundo plano respecto al primero, que es el de color blanco. Logramos así realzar el hecho que nos encontramos en otro modo distinto al de visualización inicial de los datos, el de edición, y conseguimos además acentuar la sensación de inmersión en los campos centrando mejor la atención (e).
• Por último, si añadimos un borde de color gris ligeramente más oscuro que el del fondo interior (f)  realzamos toda la forma respecto a la capa de información blanca envolvente. La pregunta que cabe hacerse otra vez es ¿por qué? y la respuesta, de nuevo, posiblemente llegue en ese post sobre los colores.

El uso de los colores es un componente fundamental de la usabilidad de las interfaces y no puede ni deber ser obviado. Hay que actuar sobre ellos.

En el caso de los prototipos, a la hora de establecer capas de información lo mejor es utilizar una escala de color monocromática, preferiblemente grises, ya que son los más adecuados para, desde un punto de vista del sistema visual humano, poder juzgar las diferencias en las variaciones de color que indican la jerarquía y la importancia de las distintas capas.

Fijaros en los siguientes ejemplos como se distinguen perfectamente las capas de información y su profundidad. La disonancia cognitiva que se introduce cuando el color más oscuro es el primero de la “escalera” de colores y el más claro el último, la sensación de movimiento hacia arriba o abajo en la escalera en función de donde esté situado el color más claro y el más oscuro (o la que se produciría de avanzar y retroceder si la escalera estuviera situada horizontalmente) y cómo cuando se introducen un borde de 1 pixel negro cuesta más apreciar la jerarquía de información correctamente aunque tiene el efecto de potenciar el color de relleno interno de cada cuadrado.

Todos estos efectos y muchos más son los que cotidiana e inconscientemente percibimos una y otra vez cuando nos encontramos delante de una interfaz. Es buena cosa saber algo de ello y de cómo funcionan los colores de cara a mejorar su usabilidad y de crear determinadas sensaciones, estados psicológicos o efectos (como por ejemplo, el citado estatismo o movimiento de la página).