Según como lo mires, pero dame una pista

Consideremos la ilusión óptica de los puntos cóncavos y convexos en estas dos imágenes:

Ilusión de puntos cóncavos y convexos
Los puntos cóncavos son aquellos que parecen escarbados en la superficie y los convexos son los curvados hacia el observador, los que invitan a ser pulsados.

Son dos copias de la misma imagen rotadas 180 grados una respecto de la otra, pero se crea esta ilusión debido a que nuestro cerebro genera inferencias inconscientes [en] sobre el significado de las sensaciones. Es decir, asumiendo un mundo tridimensional en el que hay una única fuente de luz que proviene de arriba, esta es la mejor apuesta que podemos hacer sobre la realidad. Una definición salerosa de lo que es nuestra percepción.

¿Por qué partimos de esas premisas? No está claro del todo, pero siempre podemos echar mano de la teoría que lo explica todo asumiendo casi nada: la evolución Darwiniana. Explicación: el sol y la luna como única fuente de luz durante un periodo geológico.

A la teoría de la evolución de Darwin algún día le llegará la hora, pero de momento nos saca de bastantes fregaos. Siempre hay una explicación darwiniana para disparidades como la moralidad, la cohesión social o las herramientas. ¿El iPad? Bueno, la manera de sobrevivir en un entorno hostil y ganar la competición frente al resto de especies.

Steve Jobs estaba convencido de que el hombre es un animal de herramientas, y así lo explicaba en esta historia, la de un estudio en el que se comparó el esfuerzo que necesitaban diferentes especies en recorrer una distancia determinada. El ganador resultaba ser el cóndor. El hombre quedaba en una modesta posición en el último tercio de la lista, hasta que decidieron montarlo en bicicleta. Midieron de nuevo los resultados y, en este caso, el hombre doblaba en eficiencia al cóndor.

Una herramienta nos pone a la vanguardia de todo el reino animal. El iPad no precisamente.

Mi duda existencial es si es un dispositivo para trabajar o para jugar. Desde que escribí ¿Pronto para una tablet? conseguí que Reynholm Industries me facilitara una sin tener que gastarme los más de 600 pavos que cuesta, una cantidad que visto el uso que le estoy dando me hubiera sentado como una patada en el hígado. Apple se ha especializado en que sus dispositivos móviles sean superiores en básicamente dos aplicaciones: fotos y música. El iPad para editar y trabajar con textos es como cuando te cuentan una mala noticia mientras estás comiendo, se te quitan las ganas.

Pantalla de login en la versión móvil de Twitter
Escribir en el teléfono es un coñazo, lo sabemos. De hecho, el tema de estos inicios de sesión en dispositivos móviles debería morir ya, puesto que es una experiencia tanto horrible, debido al tema de escribir adecuadamente, como insegura, debido a que se usa en espacios públicos donde cualquier puede estar mirando por encima tuyo.

No soy yo muy fan de imágenes bajo cristal como paradigma de interacción, donde no se permite la exploración acciones (hacer hovers, por ejemplo). Esto lleva a que en ocasiones no hay pistas de lo que se puede o no hacer y hay que tomar una acción para averiguar si hay efectivamente una acción. Por supuesto algunas cosas están muy bien diseñadas, pero hay dos factores que influyen en que parezca que la usabilidad en general sea mejor:

  • Todo es maravilloso, brillante y bonito.
  • Nos hemos gastado 600 pavos y vamos a acostumbrarnos y aprender a utilizarlo sí­ o sí.

Al final de los días, yo seguiré opinando que la madre del cordero de un buen diseño es una adecuada affordance.

Espero que los mayores se acuerden del skeumorphism (que no traduciré como “esqueumorfismo”). Aquella tendencia que Apple abanderó en el diseño de sus aplicaciones, en la que replicaba la forma y materiales de objetos reales con el objetivo de que lo nuevo resultara familiar y confortable. Valgan como ejemplo estas imágenes del pasado:

Antigua librería de la app iBooks para iPad
Extracto del e-book Winnie the Pooh para iPad
Estantería de madera de pino y libros con papel de eucalipto color crema, que al pasar página se animan como en el MundoReal™.

El skeumorphism se aprovecha de conceptos como las metáforas y los modelos mentales, así que basándose en el previo conocimiento del objeto que es replicado, pretende obtener una interfaz más intuitiva y usable. Muy buena intención, oye, pero llegó el día en el que el skeumorphism se pasó tres pueblos, con texturas de cuero y costuras en el fondo del calendario, y el mundo empezó a cogerle manía. Que si estas metáforas visuales están pasadas de moda (¿alguien se acuerda de lo que es un Rolodex?), que si es una manera de justificar decisiones de diseño poco elaboradas (esto es lo que es familiar para los usuarios y esto es lo que entienden), que si se concentra más en la forma que en la función (es como pintarle los labios a un cerdo), etc. El tema acabó ridiculizado incluso dentro de la misma Apple.

Así que, como es habitual tras un período rococó, se rompe con todos los esquemas y se vuelve a la armonía y la sencillez del neoclasicismo, que esta vez toma el nombre de flat design (que no traduciré como “diseño plano”). Doble tirabuzón carpado y nos situamos completamente al otro extremo, con una falta total de ornamentación y una estética que va más allá del minimalismo, donde el mantra “deshazte de todo lo que puedas” se sustituye por el nuevo “deshazte de todo”.

Interfaz de usuario de Windows Metro
Microsoft Metro se distanció del skeumorphism enfatizando una interfaz de usuario plana y atómicamente minimalista. ¿Vemos inmediatamente con que podemos interactuar? ¿Se puede hacer clic en los paneles? ¿Es eso una foto o una aplicación?

Se siguen manteniendo metáforas visuales, un sobre para el correo o una cámara para hacer fotos, pero los iconos que los representan están absentes de toda decoración. Ausencia de sombras, brillos, volúmenes. Tanta ausencia, que no tardaron en aparecer quejas sobre la falta de pistas para ayudarnos a utilizar la interfaz. Que si al deshacerse de todo, se pierde también aquello que asistía al usuario y por tanto la usabilidad se ve perjudicada (botones que no parecen que se puedan pulsar), que si ya jugamos con desventaja en pantallas táctiles donde se inhabilitan nuestros receptores del tacto (botones que no parece que se puedan pulsar), que si la transición ha sido demasiado rápida (y los botones no parece que se puedan pulsar), etc.

Con este paso estamos actuando en detrimento de nuestra percepción con la que guiamos nuestras decisiones interactivas (los puntos convexos que como ilusión invitan a ser pulsados), pero a medida que el mundo físico sea menos físico y haya menos cosas con botones en ellas, ¿qué será un botón entonces?

flat sink
Que moderna y minimalista es una pila lisa para el lavabo en vez de una cóncava.

En The Flat Sink se remarca porque las pilas de los lavabos son curvadas:

Curved Sink vs Flat Sink - Splash
Un lavabo plano hace que el agua salpique más.

Curved Sink vs Flat Sink - Drain
Un lavabo curvado permite drenar el agua más fácilmente.

Curved Sink vs Flat Sink -Pool
En un lavabo plano se requiere más agua para conseguir la misma profundidad.

Esto es un ejemplo claro que una excelente apariencia no es condición suficiente para un buen diseño. Las dos aproximaciones pueden ser estéticamente bellas, refrescantes o pasar por meras tendencias, pero no importa como de plano o profundo o minimal o esqueumórfico (lo hice) sea un diseño, o que texturas o sombras se utilicen, si no es capaz de transmitir como utilizarlo cuando lo miramos.

Todo lo que necesitamos es una invitación a la interacción, sea en forma de iconos, etiquetas, animaciones o evolución de Darwin, de manera que seamos capaces de adivinar como interactuar con la interfaz.

La cocina

Hace un par de semanas, la cajera del supermercado de enfrente de mi casa me dijo: “Esa es una firma muy práctica”. Luego, como experta grafóloga que estaba demostrando ser, la comparó con la firma de la parte trasera de la tarjeta de débito y, tras verificación, me la devolvió con una sonrisa. Así­ que cinco días más tarde me encontré a una risueña cajera expectante por verme refrendar. Estos momentos que se comparten con las cajeras pueden llegar a ser desmedidamente í­ntimos.

Si somos lo que comemos y comemos lo que compramos, somos lo que compramos. Tyler no está de acuerdo, pero la risueña cajera del súper orgánico chequea los dos boniatos, los cuatrocientos gramos de pollo y las dos cajas de huevos y ya sabe lo que soy. Al igual que mi firma, que es un garabato de un único trazo continuo, más bien una simple rúbrica, soy un psicópata.

Mido la comida y cuento las calorías cada vez que me nutro, que no son pocas veces al dí­a. Actualmente, como 240 gramos de proteína, 350 de carbohidratos y 50 gramos de grasa. Es la fuente de estos macronutrientes, sin embargo, lo que incorpora el comportamiento obsesivo-compulsivo al juego. Aunque el acto de medir la comida se queda corto en este set de desayuno del holandés Ivo Vos:


Una colección de prototipos para el desayuno con la intención de hacer que apreciemos la importancia de las actividades banales.


Para cortar el pan con precisión absoluta.


Básicos. Escala digital para calcular la cantidad de azúcar y medir la leche.


Tetera equipada con un sensor que calcula la distancia desde la que decantamos el té.


Una tostadora en la que es posible ajustar el angulo de eyección del pan y así­ conseguir que aterrice directamente en el plato.


Y la madre del cordero neurótico. La cuberterí­a estampada con un patrón gráfico uniforme, de manera que todas las piezas se pueden alinear perfectamente.

En los últimos años he pasado de utilizar la cocina como mero almacén de botellas de Jägermeister a considerarla un templo vital. En la cocina ahora reparo en la importancia de sus herramientas, el diseño de los materiales y la usabilidad de sus electrodomésticos. Quiero esta:

Locks Air Kitchen by deVOL
La “Locks Air Kitchen” de deVOL, que debe costar un pastizal.

Cuando me separé por primera vez de mi segunda mujer, me tocó afortunadamente en el reparto, la nevera Smeg que pueden ustedes ver en la foto. Acabé malvendiéndola debido a un feo rasponazo producido durante la mudanza, pero era un magnífico frigorífico, con ese inconfundible diseño que caracteriza la marca Smeg.

Una de sus líneas de encimeras a gas viene con mandos iluminados cuando los fogones están encendidos, que aunque parezca una nimiedad, contribuye no solo en seguridad, sino como parte de la solución a uno de los problemas fundamentales en diseño industrial, el de los interruptores.

Las dos dificultades a superar en el diseño de controles son la agrupación, como determinar que mando controla que función, y la topografí­a, como determinar que interruptor controla que luz, por ejemplo, cuando hay varias agrupadas. Si les parece simple, piensen en cuantas veces encienden la luz equivocada o el fogón equivocado debido a estos problemas.

Encimera a gas de Smeg (PGF96)
Esta es la organización habitual de mandos dispuestos en lí­nea y quemadores en forma rectangular. Al final todos sabemos que los diagramas que representan a los fogones se acaban borrando y es necesario aprender que mando corresponde a que quemador.

Un buen uso de la topografí­a natural no necesita letreros y resuelve este problema del tirón, simplemente disponiendo los mandos del mismo modo que los quemadores:

Encimera Smeg P755AN
La organización de los mandos contiene ahora toda la información necesaria para decidir que interruptor activa que quemador.

A parte de unos electrodomésticos con buena usabilidad, en mi cocina ideal (aquí­ hay más) no podrí­an faltar estas herramientas básicas: un buen cuchillo de chef, un par de tablas de cortar en diferentes materiales (plástico para la carne y madera para los vegetales), espátulas de silicona, fiambreras de plástico (tuppers), una batidora y mucho espacio libre.

Magic Bullet (el bueno), Tea Tube (el feo), sartén japonesa de Muji (el malo)
El bueno, el feo y el malo de mi cocina. Así quedó mi sartén nueva tras estrenarla.

  1. El bueno: Hará casi 2 años que tengo ya el Magic Bullet, que por menos de 50 € hace las veces de batidora, minipimer y licuadora. Lo utilizo hasta 2 o 3 veces al día. Batidos, zumos, salsas, aliños y tortillas.
  2. El feo: El Tea Tube, un tubo de aluminio para preparar infusiones, no es precisamente feo. De hecho, me embaucó su elegancia, pero, al igual que mi segunda mujer, me saca de quicio. Tratar de limpiar las hojas del té tras su uso es desesperante. Por esta razónhay versiones posteriores del mismo tubo con compartimento extraíble.
  3. El malo: No conozco a nadie que aprecie el diseño y reniegue de Muji, la tienda japonesa de la que reniego, pero es que no puedo evitarlo desde que me gasté casi 25 € en una sartén para hacer tortillas y que tuve que tirar tras destrozarla en el primer uso. Mi tortilla se quedó pegada de tal manera que se trajo consigo de cuajo el metal de la placa.

La semana pasada, cuando vi a la grafóloga risueña en la caja del supermercado, pensé en añadir un poco de drama al temita de la firma. Tal vez una pausa justo antes del acto y, en ese momento, mirada de complicidad a la cajera sonriente y expectante. Cual fue mi chasco al descubrir que han instalado maquinitas para las tarjetas y ahora con introducir el PIN basta. Se acabaron los autógrafos.

Grandes momentos de la usabilidad: Votaciones

Recuperemos otro suceso en el que un problema de usabilidad generó un incidente a gran escala: el famoso caso de las papeletas electorales que dieron la victoria a George W. Bush en la presidencia de los Estados Unidos.

– ¿Qué tan difícil es perforar un papel?
– Bastante si tienes ochenta y tantos, artritis y ceguera de murciélago.

De la película “El recuento” (2008), consecuencia del revuelo montado en aquellas elecciones.

Un pobre diseño en las papeletas electorales en Palm Beach, Florida, causó que mucha gente con la intención de votar a Gore, acabará dando su voto a otro candidato (Buchanan). Tras el recuento, y el Supremo de por medio, George W. Bush ganó las elecciones presidenciales de los Estados Unidos en 2000 por unos contadísimos 5 votos electorales frente a Al Gore. ¿Es necesario comentar algo sobre las funestas consecuencias de la elección de Bush?


Conocida como “butterfly ballot” (la papeleta mariposa), con nombres de los candidatos a ambos lados y una única columna en el medio con los agujeros a perforar, fue la papeleta utilizada en las elecciones presidenciales en Florida.

Más información sobre este error.

Otros grandes momentos de la usabilidad:

Affordances percibidas

Me acuerdo que antes no podía entrar en un ascensor sin criticar los botones. Estaba obsesionado por dar con affordances mal percibidas y me quejaba amargamente cuando empujaba una puerta de la que había que tirar. La manera de aliviar tal desazón fue este blog, del que hace ya cinco años.

Hace bien poco, en un podcast sobre affordances e interfaces adaptativas, descubrí gratamente, de parte de Justin Davis (web oficial | twitter), este gráfico clasificando las affordances:

Cada cuadrante está ocupado por un tipo de affordance. Cuando no se percibe ninguna acción posible en el objeto, debido precisamente a que no hay ninguna acción presente, se dice que estamos ante un correct rejection (rechazo correcto), como ocurre en el caso de un muro, que no parece que se pueda abrir por parte alguna y, efectivamente, no se puede, o con todo elemento en el que no se pueda hacer clic y tampoco de la sensación de poderse.

Si existe una acción que se pueda realizar, pero se carece de las pistas que nos indican como realizarla, estamos ante una hidden affordance (affordance oculta). Por ejemplo, ese enlace que nunca pensábamos que fuera en efecto un enlace. En el caso contrario, algo que parece un botón y al final no lo es, estaríamos ante una false affordance (affordance falsa), en la que parece que puedes tomar una acción, pero no puedes.

La manera correcta de hacer las cosas, y a lo que nos referimos al decir simplemente affordance, se corresponde con las affordances percibidas (perceived affordance).

Ya intento perder menos los nervios con los ascensores, pero intento no perder la pasión por mejorar las cosas.

Affordance para la web

La affordance es una característica de los objetos que siempre ha fascinado en este blog. Es uno de los conceptos tántricos en el diseño, prestado directamente del campo de la psicología. Definíamos la affordance como la irresistible seducción de un objeto para invitarnos a utilizarlo. Si está bien diseñado, ese objeto tendrá una serie de características que nos transmitirán instantáneamente cómo usarlo, alcanzaremos una comprensión intuitiva de su uso incluso antes de utilizarlo.

Disponen en este cuaderno de una categoría propia para repasar ejemplos en los que, por ejemplo, la affordance falló de alguna manera. Sin embargo, en esta ocasión vamos a ver cómo podemos aprovecharnos de este concepto cuando se elabora una interfaz web.

La affordance permite tomar decisiones.

El objetivo a cumplir es hacer que los distintos componentes que forman nuestra interfaz o sitio web sean reconocibles por los usuarios. Un vídeo embebido en una web deberá transmitir que puede ser reproducido. De nada servirá incluirlo si el usuario no intenta ejecutarlo porque desconoce que es un vídeo.

A priori, existen dos características básicas que tienen en la affordance el mayor impacto: la forma funcional y el contexto:

Una forma que siga a la función

Esta relación debe ser crítica para la comprensión intuitiva del objeto. Los botones son un buen ejemplo de esto. Sobresalen, de tal forma que da la sensación que tienen volumen sobre una superficie, tienen colores llamativos y son receptivos, generando un feedback visual al situarse sobre ellos (hover). Transmiten, de esta manera, la affordance percibida de “ser presionados”.



¿Las acciones deberían ser botones o enlaces? Depende de la acción, pero siempre cuida las etiquetas de dichos botones y da a entender al usuario qué es lo que se va a encontrar a continuación. Fuente: Affordances in Modern Web Design de Adrew Maier.

Lo mismo sucede con un campo de introducción de texto en un formulario (input). Estos elementos acostumbran a tener una sombra interior que les da profundidad, lo que transmite la idea de que pueden ser rellenados. Otro ejemplo es el punto de inserción (típicamente una línea vertical que parpadea en la pantalla), que transmite “empezar a escribir”. Un lista de enlaces, sea horizontal o vertical, tiene una mejor affordance percibida como menú de navegación que una cadena de caracteres en medio de un párrafo.

En la web acostumbramos a explorar las páginas buscando enlaces o áreas donde se pueda hacer clic. Una affordance de la clicabilidad (affordance of clickability) sería mejor cuando más reconocibles sean dichas áreas. Concretamente, el puntero del ratón cumple una de las funciones más importantes como indicador de interacción al cambiar de forma sobre diferentes elementos. Una buena manera de controlar la affordance del puntero del ratón es a través de la propiedad “cursor” de las CSS, con valores tales como “text” —para elpunto de inserción, “pointer” —que muestra la mano que indica que se puede hacer clic, “move” —útil para elementos que se pueden arrastrar y soltar (drag & drop) y otros.

Es un clásico recomendar que en orden a maximizar la affordance percibida de clicabilidad se dé color azul y subrayen los enlaces, aunque lo realmente importante es que estos se distingan del resto de los contenidos y sean visibles. Si no estamos seguros, ni podemos hacer tests con usuarios, mejor no reinventar la rueda.

En definitiva, será primordial minimizar el tiempo que tardarán los usuarios en darse cuenta de la función de cada elemento de la interfaz. Seguro que las nuevas características de CSS3 permitirán un abanico de nuevas posibilidades que ayudarán a que el usuario sepa que hacer con tan sólo mirar, sin generar nuevos problemas, como los relacionados con la legibilidad producidos por la propiedad “text-shadow”. No hay que olvidar que la función es más importante que la forma.

Affordance contextual

Este concepto hace referencia a la relación que existe entre el objeto y el observador, que dependiendo de sus características puede percibir una función u otra.


No sabemos lo que es obvio para todo el mundo.
Vela de un santo o juguete erótico?

Es por ello que se requiere estudiar a la audiencia. Hay que conocer lo que es evidente para ellos debido a su experiencia anterior y sus modelos mentales. Saber como el usuario percibe un objeto, mas que lo que actualmente es. La relación es tan importante que podríamos asimilar contexto y uso llegando a concluir que affordance y contexto son una misma y única cosa.

Esto aplicado al diseño de sitios web implica tener en cuenta las siguientes herramientas conceptuales:

  • Patrones de diseño en interfaces de usuario. Soluciones a problemas comunes de diseño que pueden reutilizarse ya que han demostrado ser efectivas. User Interface Design Patterns es una interesante colección de patrones para la web, así como Patternry o Welie.
  • Estándares. Siempre que sea posible, optar por un estándar reconocido. Bien sea una estructura con cabecera, barra lateral, contenido y pie, o el uso de un botón RSS.
  • Metáforas. Se valen de reconocer como modo de aprendizaje. Así el uso de una metáfora apropiada ayuda a transmitir el significado y propósito de un determinado elemento en el diseño. En esta web se utiliza una navegación horizontal como metáfora de un paseo por una galería de arte.
  • Modelos conceptuales coherentes. De esta forma el aprendizaje de un proceso concreto se puede aplicar a otras partes.
  • Simplicidad. Una manera de reducir la complejidad de la interacción es ocultándola o reduciendo el peso visual que tiene. Como ejemplo concreto tenemos la navegacion sensible al contexto, que varía dependiendo de la acción del usuario en la página. Ayudan básicamente a limpiar la interfaz y a permitir concentrarse en la tarea que recaba la atención del usuario. Un ejemplo notable es el de los vídeos, como en vimeo, que una vez que se ejecutan, ocultan los controles de navegación y vuelven a aparecer al posar el cursor sobre el vídeo.

El objetivo consiste en desarrollar affordances que ayuden al usuario a no cometer ese primer error, que mejorarán si recordamos que las características físicas de un diseño influyen en su función y, junto a una visibilidad y acción coherente, tomamos en cuenta la relatividad del observador, el contexto.

Su nombre es Paul Van

Mi trabajo de Clark Kent se desarrolla en una empresa de anuncios de contactos con lavabos unisex. Al igual que Reynholm Industries, está llena de gente atractiva, que no trabaja mucho y tiene affairs. Los desarrolladores son para echarles de comer aparte.


Identifica al informático.

Soy el Product Manager de Reynholm Industries. Esto es, a pesar de tener un respetable conocimiento técnico, soy un desarrollador fracasado, aunque con suficiente aptitud comercial como para entender que estamos en el negocio para ganar dinero. Soy mediocre en casi todo, pero al contrario que algunas personas en otras funciones, no hay un área en la que sea un completo inútil.

Volviendo a la gente con affairs, he descubierto que la mejor manera de obtener feedback sobre nuevos productos o interfaces no es preguntándoles que piensan de estos. En vez de ello, resulta más provechoso explicarles muy brevemente lo que van a usar a continuación y dejar que lo manejen, que exploren, pero permitiendo que hagan cualquier pregunta que les venga en mente. Si les preguntamos que piensan, entran en modo crítica y empiezan a buscar problemas, que no es justamente la actitud que toma un usuario real cuando interactua con un sistema.

Para recibir feedback de nuestros usuarios cuando tienen problemas de soporte, quiero proponer que el formulario de contacto de la empresa de anuncios de ídem sea más amigable:

Formulario de contacto para soporte
Una idea estupenda la de mapear la severidad del ticket con unas opciones más humanas: “Con calma, solamente es una consulta”, “Un poco inquieto, ya que tomaré una decisión basada en su respuesta”, “Nervioso, creo que puede que haya roto algo!” y “Socorro!”

Paul Van siempre agradece cualquier comentario que le puedan aportar sobre el blog. Pueden escribir para cualquier cosa (¡menos para preguntar donde comprar las sillas en miniatura!) . Siempre respondemos a su contacto.

Una respuesta modifica tu comportamiento

El equipo de diseño de interacción de Teague llevó a cabo recientemente un predecible experimento. Motivados por el problema de la escasez de agua en el mundo, decidieron desarrollar un dispositivo para medir el flujo de agua que sale de un grifo. Luego optaron por mostrar los resultados en tiempo real a través de un iPad™ colocado en la pila. Hubiera bastado una simple LCD, pero el caso es que la presencia de feedback en tiempo real tuvo un impacto inmediato en el uso del agua. Se redujo el gasto en más de 5 litros de media en una tarea como lavarse las manos.

Sirva este ejemplo para remarcar algo tan simple y poderoso como que una respuesta del sistema es capaz de modificar nuestro uso. El feedback modifica nuestro comportamiento. Es un cambio en las reglas del juego.

Si llamas al ascensor y no se ilumina el botón, vuelves a presionarlo. Si tecleas una contraseña y no ves aparecer los asteriscos al ritmo de tecla, picas de nuevo. Si tras empujar una puerta ésta no se abre rápidamente, vuelves a empujar. Tan pronto como se encienda una luz, aparezca un símbolo o se emita un sonido, tu forma de actuar será distinta.

Cuando recibes una respuesta, modificas tu comportamiento.


El feedback es como el karma, modifica tu comportamiento.

En esto se basa uno de los grandes principios básicos de diseño y usabilidad: propocionar feedback a los usuarios sobre el estado del sistema. Tarea propia de gurús es la de consolidar términos, pero la palabra retroalimentación nunca acabó de convencernos como traducción de feedback. Al fin y al cabo es una respuesta del sistema. Un sitio web debe proveer de un feedback a los usuarios, de manera que éstos siempre conozcan y comprendan lo que sucede en todos los pasos del proceso.


¿Qué está pasando? Se ha perdido la conexión, informa GMail.

Concepto: el Efecto Hawthorne

He recordado recientemente, a través del blog del momento, Per Ardua ad Astra, sobre el efecto Hawthorne. Su autor, el avión EC-JPR, lo redefine acertadamente como “el aliento en la nuca”, puesto que refleja la tendencia que tienen las personas a mejorar cuando están siendo observados.

El efecto Hawthorne sería como una tienda en la Alemania comunista de antes de la caída del muro. Una larga cola expectante fuera y cuatro plátanos dentro. Digamos que tal vez haya sido sobrevalorado y, aunque es ampliamente conocido, me gustaría añadir este efecto a la serie “conceptos” y que así tenga presencia en este blog. La historia es la siguiente:

A las afueras del Chicago de finales de los años veinte, se realizaron una serie de experimentos en la fábrica Hawthorne de la empresa Western Electric Company. El objetivo de éstos era analizar la relación entre la productividad de los trabajadores y sus condiciones de trabajo. Para tal fin fueron manipulando diferentes condiciones, tanto ambientales como psicológicas y, para sorpresa de todos, cada cambio dio lugar a un incremento en la productividad.

¿Cómo podía ser que cada cambio, tanto si se trataba de una modificación en los niveles de luz, como en los periodos de descanso o reestructuración de los espacios de trabajo, diera lugar a una mejora? Un estudio posterior concluyó que, en realidad, los trabajadores no estaban reaccionando ante los cambios introducidos, sino que reaccionaban ante el hecho de que se les estaba prestando atención. La atención, no el control, es el que genera el resultado. Los trabajadores se esforzaban por rendir mejor ya que estaban siendo estudiados.

El Efecto Hawthorne tiene asociados otros efectos y paradojas, como la Paradoja del método, que “afirma que cualquier método funciona si quienes lo siguen se consideran privilegiados por haber sido elegidos para seguir el método, o por haber elegido seguir el método”.

Todo esto es una fuente potencial de confusión en los tests de usabilidad con usuarios. Éstos posiblemente estarán esforzándose mucho más que el típico visitante del sitio y puede ser complicado inferir si un cambio representa una mejora o no.

¿Será que el rendimiento depende más de lo humano que de lo técnico?

El Gurú

Usa metáforas para explicar conceptos técnicos

Las metáforas son un recurso muy utilizado en las interfaces de usuario para facilitar el aprendizaje de éstas. Una metáfora acertada permite comprender el propósito de un nuevo sistema, gracias al conocimiento obtenido previamente con otro concepto ya conocido. Así es como intuimos el uso de la papelera en la metáfora de escritorio, las funciones de cortar y pegar o que botón pulsar en un reproductor multimedia para que comience la ejecución.

Todos estas aplicaciones provienen de conceptos bien conocidos del MundoReal™ que se adaptan a una interfaz para permitirnos una comprensión intuitiva de ésta. Aunque a veces se corre el peligro de crear una mayor confusión con una adaptación fallida, como el conocido caso de los sistemas Mac OS para expulsar un CD. El usuario no quiere tirarlo, pero sin embargo debe arrastrar el CD a la papelera de reciclaje para sacarlo.

Recientemente, en la entrada y comentarios de “How Do You Explain Computer Concepts to Non-Tech Types?“, se proponen explicaciones no técnicas de conceptos relacionados con los ordenadores utilizando metáforas. Por ejemplo, usando la analogía con una biblioteca:

El tamaño del disco duro se compararía con la cantidad de estanterías para los libros. La velocidad de la CPU es la rapidez con la que el bibliotecario te atendería (sería una biblioteca con servicio completo), y la RAM es el tamaño de la mesa en la que uno se sentaría. Cuanto más grande sea la mesa, más libros se podrían abrir de manera simultánea. Una vez la mesa este llena de libros, cada vez que se quiera abrir uno nuevo, deberíamos cerrar otro (el archivo de intercambio).

O la comparación con un malabarista:

El tamaño del disco duro se corresponde con el tamaño de una cesta llena de bolas al lado del malabarista, que nunca las podrá lanzar todas a la vez. La memoria del ordenador es el número de bolas que el malabarista puede tratar al mismo tiempo. La velocidad del artista haciendo juegos malabares se corresponde con la velocidad del procesador y la rapidez con la que cambie las bolas en la cesta sería la velocidad del bus de datos.

¿Se os ocurren analogías con camareros, empresas, cocineros, coches o el mismo cuerpo humano?

Sólo una más, muy adecuada para explicar un concepto más específico: como funciona el protocolo TCP/IP:

Supongamos que queremos enviar a un amigo un libro en formato digital, pero usando únicamente palomas mensajeras:

  1. Imprimimos el libro;
  2. Envíamos cada página usando una paloma mensajera;
  3. Nuestro amigo recibe las páginas una por una;
  4. Ordena todas las páginas recibidas;
  5. Envía algunas palomas de vuelta, para que le traigan algunas páginas que se han perdido por el camino (volviendo al punto 2 por cada pagina omitida);
  6. Nuestro amigo escanea las paginas;
  7. El libro ha sido transferido en formato digital.

Ahora imaginemos que no hay palomas mensajeras, sino pequeños paquetes de datos a través de un cable y ya tenemos el TCP/IP.

Para terminar esta entrada, como curiosidad he recogido algunas imágenes populares en la red de casos en los que ocurre una especie de devolución de la metáfora, como si estuviéramos en Matrix e intentáramos explicar la realidad con conceptos que existen únicamente en Matrix:

Photoshop en Mundo Real
Photoshop llevado al MundoReal™ como campaña publicitaria de Bates141 Jakarta.

Enlaces en el Mundo Real. Obra "Typographic Links" de Dan Collier
Enlaces en el MundoReal™ como parte del proyecto “Typographic Links” de Dan Collier.

Punto de libro con icono "guardar"
Un punto de libro con el icono “guardar” diluyendo y mezclando conceptos en Save Bookmark.

Entradas relacionadas:

Intervenciones en objetos cotidianos

Intervenciones en objetos de la vida cotidiana (como me mola decir objetos de la vida cotidiana), basados en situaciones familiares. Eso es lo que voy a exponer hoy. Sencillamente relaciones entre usos de objetos comunes en la vida diaria y creaciones basadas en este uso. Tengo 5 ejemplos preparados que darán a entender mejor el concepto:

  1. ¿Quién no se ha colgado una servilleta del cuello de la camisa alguna vez? Esta acción ha sido tuneada por Héctor Serrano en “vestido para la cena”.

    Servilleta "Dress for dinner" de  Héctor Serrano
    Visto en Inspire me, now!

  2. Hay botellas en las que las velas lucen muy bien y dan un toque más bohemio y romántico. Aunque la mayoría de las veces las hayamos usado por falta de candelabro, ya se han aprovechado de este uso:

    Velas para botellas de vino "Cork Candles"
    Visto en Monkeyzen.

  3. La basura o la papelera están a rebozar. ¿Qué hacemos? Ponerle la pierna encima y comprimir al máximo los papeles. Pues ya está aquí la papelera Amstrong (en relación con la pisada del primer hombre en la Luna):

    Papelera Amstrong comprimible
    Visto en paraNOIDS.

  4. ¿Quién no ha tenido que apuntar algo o escribir un teléfono en una sevilleta? Colin O’Dowd nos milimetra las servilletas:

    Servilleta milimetrada de Colin O'Dowd
    Visto en Compradicción.

  5. ¿Quien no se ha reclinado hacia atrás en una silla? ¿Y quién no se ha caído de espaldas? Para evitar este percance al hacer este uso habitual de las sillas, Deger Cengiz ha creado este engendro:

    Attitude Chair de Deger Cengiz, la silla de 6 patas para reclinarse
    Visto también en Compradicción.

¿Qué otras intervenciones os vienen a la mente?