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 prctica”. Luego, como experta grafloga que estaba demostrando ser, la compar con la firma de la parte trasera de la tarjeta de dbito y, tras verificacin, me la devolvi con una sonrisa. As que cinco das ms 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 risuea cajera del sper orgnico 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, ms bien una simple rbrica, soy un psicpata.

Mido la comida y cuento las caloras cada vez que me nutro, que no son pocas veces al da. Actualmente, como 240 gramos de protena, 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 holands Ivo Vos:


Una coleccin de prototipos para el desayuno con la intencin de hacer que apreciemos la importancia de las actividades banales.


Para cortar el pan con precisin absoluta.


Bsicos. Escala digital para calcular la cantidad de azcar 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 eyeccin del pan y as conseguir que aterrice directamente en el plato.


Y la madre del cordero neurtico. La cubertera estampada con un patrn grfico uniforme, de manera que todas las piezas se pueden alinear perfectamente.

En los ltimos aos he pasado de utilizar la cocina como mero almacn de botellas de Jgermeister a considerarla un templo vital. En la cocina ahora reparo en la importancia de sus herramientas, el diseo de los materiales y la usabilidad de sus electrodomsticos. 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 malvendindola debido a un feo rasponazo producido durante la mudanza, pero era un magnfico frigorfico, con ese inconfundible diseo que caracteriza la marca Smeg.

Una de sus lneas de encimeras a gas viene con mandos iluminados cuando los fogones estn encendidos, que aunque parezca una nimiedad, contribuye no solo en seguridad, sino como parte de la solucin a uno de los problemas fundamentales en diseo industrial, el de los interruptores.

Las dos dificultades a superar en el diseo de controles son la agrupacin, como determinar que mando controla que funcin, y la topografa, 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 fogn equivocado debido a estos problemas.

Encimera a gas de Smeg (PGF96)
Esta es la organizacin habitual de mandos dispuestos en lnea 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 topografa natural no necesita letreros y resuelve este problema del tirn, simplemente disponiendo los mandos del mismo modo que los quemadores:

Encimera Smeg P755AN
La organizacin de los mandos contiene ahora toda la informacin necesaria para decidir que interruptor activa que quemador.

A parte de unos electrodomsticos con buena usabilidad, en mi cocina ideal (aqu hay ms) no podran faltar estas herramientas bsicas: un buen cuchillo de chef, un par de tablas de cortar en diferentes materiales (plstico para la carne y madera para los vegetales), esptulas de silicona, fiambreras de plstico (tuppers), una batidora y mucho espacio libre.

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

  1. El bueno: Har casi 2 aos 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 da. Batidos, zumos, salsas, alios 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 raznhay versiones posteriores del mismo tubo con compartimento extrable.
  3. El malo: No conozco a nadie que aprecie el diseo 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 sartn 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 grafloga risueña en la caja del supermercado, pens en aadir 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 autgrafos.

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.

Frase del Gur: imgenes bajo cristal

Por qu no habr conocido a Bret Victor (web oficial | twitter) antes? Me hubiera, al menos, ahorrado este post sobre las tablets. Bret Victor, un apasionado y admirable diseador de interfaces de usuario, dej su trabajo en Apple debido a su nulo inters por ayudar a la gente a mirar fotos y escuchar msica, a travs de lo que l ha bautizado como “imgenes bajo cristal” (Pictures Under Glass).

A raz de un popular vdeo de Microsoft sobre una visin tecnolgica del futuro, Bret escribi recientemente una crtica con la que simpatizo totalmente. En A Brief Rant on The Future of Interaction Design se queja de que la visin mostrada, desde la perspectiva de la interaccin de usuario, no es para nada visionaria, sino ms bien un tmido incremento del actual status quo. Es una lectura rpida e interesantsima, con el plato fuerte de las manos como protagonistas.

Alegar que “imgenes bajo cristal” es el futuro de la interaccin es como reivindicar que el blanco y negro es el futuro de la fotografa. Es obvio que es una tecnologa de transicin. Y cuanto antes hagamos esa transicin, mejor.

De arroz, atn y tempura

Es bastante conocida nuestra aficin por los manuales de instrucciones y los infogrficos animados para explicar ideas y procesos. Pues bien, al visitar la imprescindible Information Aesthetics [en], nos encontramos con un vdeo realizado con ilustraciones sencillas, encargado por el Ministerio de Agricultura, Bosques y Pesca de Japn, para concienciar a sus ciudadanos de la necesidad de un regreso a la alimentacin tradicional basada en los productos autctonos del pas: arroz, pescado y vegetales, y asegurar as un mejor estado de salud ayudando a alcanzar un desarrollo sostenible.

Si buscamos un poco en el imaginario colectivo vemos que ya hace por lo menos 80 aos que se utilizan la animacin, los grficos y los medios de comunicacin de masas para ensearnos las bondades de una dieta y unos hbitos saludables. Estos son algunos ejemplos:

Good eating habits. Estados Unidos, 1951

Propaganda de la revolucin. Dziga Vertov, Unin sovitica, 1924

Como debe comportarse un buen camarada.

A is for Atom. Estados unidos, 1952

Aunque no relacionado con la alimentacin, este corto de animacin nos introduce en nuestros hogares a un nuevo amigo, el tomo. De las grandezas de la energa nuclear en plena guerra fra.