Frase del Gurú: no hacemos arte

El minimalismo es un término relacionado con el arte que los diseñadores trataron de llevar a nuestro reino. Nosotros no hacemos arte. Ingeniamos soluciones, y si esa solución es algo más que “minimal”, normalmente significa que perdimos una batalla con el cliente.

Vía el diseñador web de Elezea.

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 informtico.

Soy el Product Manager de Reynholm Industries. Esto es, a pesar de tener un respetable conocimiento tcnico, 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 intil.

Volviendo a la gente con affairs, he descubierto que la mejor manera de obtener feedback sobre nuevos productos o interfaces no es preguntndoles que piensan de estos. En vez de ello, resulta ms provechoso explicarles muy brevemente lo que van a usar a continuacin 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 crtica 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 ms amigable:

Formulario de contacto para soporte
Una idea estupenda la de mapear la severidad del ticket con unas opciones ms humanas: “Con calma, solamente es una consulta”, “Un poco inquieto, ya que tomar una decisin 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.

10 aplicaciones web minimalistas

Esta no es una entrada ms con una seleccin de webs con un cuidado diseo minimalista. Ms all de un bonito y reducido espacio esttico, estos sitios webs no hacen nada ms que algo muy concreto. Slo satisfacen una funcin y, a parte de algo de publicidad, no aaden ningn elemento extra para cumplir su objetivo. A continuacin, 10 aplicaciones web minimalistas, que no necesariamente tiles. Las que encima lo sean, pues se merecen un “favoritos”, Delicious o donde quieras guardarlas:

  1. Goingtorain.com. No hay informe meteorolgico ms simple. Reducido a lo ms importante, va a llover?
  2. Printablechecklist.org. Tan slo permite generar una lista de tareas con sus respectivas casillas de verificacin (una llana to-do list). Cuando estemos listos con la lista, imprimimos desde el navegador.
  3. Nowdothis.com. El autor se refiere a esta herramienta ms como un jefe que como una to-do list. Sin embargo, no es ms que esto ltimo, pero que va pasando las tareas conforme las vas completando.
  4. Jacksonpollock.org. Expresionismo abstracto a clic de ratn. Mejor no pruebes este lienzo en Internet Explorer.
  5. Dummyimage.com. Crea contenedores para imagenes (normalmente tiles para uso en wireframes o prototipos HTML) con tan slo aadir el tamao de esta forma: http://dummyimage.com/640×480.

    A Dummy Image
  6. Isitsaturday.net. Es sbado? Y de los mismos creadores, es domingo?. La misma genial idea est disponible para los jueves y los viernes. Sin embargo, parece que el resto de das de la semana carecen de este inters.
  7. Quietwrite.com. Un procesador de texto online donde se ha eliminado prcticamente todo para que tan slo podamos concentrarnos en escribir. Muy al estilo del “Zen Mode” o pantalla completa en la edicin de entradas de las nuevas versiones de WordPress.
  8. E.ggtimer.com. No poda faltar en esta lista un temporizador. Especifica el tiempo aadindolo al final de la URL (por ejemplo: http://e.ggtimer.com/3hours14minutes15seconds). Del mismo estilo tenemos a CD y, ms visual, Timer Tab, que rene despertador, temporazidor y cronmetro.
  9. Donothingfor2minutes.com. Esta web nos invita a estar un par de minutos sin hacer nada. Meditando si queremos mientras escuchamos las olas que se reproducen. Si lo conseguimos, nos premian con ms indolentes paraderos.
  10. The Ultimate Productivity Blog. Por ltimo, incluiremos un blog en esta lista. Uno muy minimalista que trata de, como el nombre indica, la mejor manera de mejorar tu productividad.

Slo se muere una vez

For all my HTML nerd friends, this is in the cemetery behind my house“. Jake entonces publica en Facebook una foto que acaba de tomar en el cementerio que queda detrs de su morada en Berln:


R.I.P. Meta Linck

No me quiero poner trgico, pero todos vamos a morir algn da. Unos antes, otros despus, el resto en 2012. Las funerarias lo saben y, en ocasiones, se atreven a promocionarse a travs de anuncios tradicionales, lo que supone un autntico reto:


Slo se muere una vez. Promocin de los servicios de una funeraria de Bucarest, Rumana.


“No piense sobre el final al final” y otras perlas cmo “Si puede leer esto, no es demasiado tarde” o “Igual que en los mejores restaurantes. Tendra que hacer una reserva previa” en los carteles para el cementerio cristiano ortodoxo de Saint Michael en Sofa, Bulgaria.

Las funerarias son un negocio que ofrece unos servicios en los que la mayora de las personas prefiere no pensar. No queremos que nos recuerden sobre la muerte y tenderamos a ignorar sus promociones. Por eso, los anuncios tradicionales tal vez no sean la mejor tctica de marketing para promocionarlas. Probablemente, las bsquedas en Internet sean ms efectivas. Cuando llegue el momento de necesitarlas, funerarias en Barcelona, por ejemplo. Y hablando de pginas amarillas, hace unos aos lanzaron una campaa publicitaria llamativamente bien realizada y que expresa el mensaje de la forma ms simple posible:



El resto, rosas y verduras, en I Believe in Advertising.

De todos modos, a pesar de sus esfuerzos de marketing, supongo que los servicios de las funerarias no habrn experimentado una prdida de clientes debido a la crisis econmica. La gente sigue muriendo por sus servicios.

Entrada relacionada:

Una respuesta modifica tu comportamiento

El equipo de diseo de interaccin 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 travs 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 ms 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 botn, vuelves a presionarlo. Si tecleas una contrasea y no ves aparecer los asteriscos al ritmo de tecla, picas de nuevo. Si tras empujar una puerta sta no se abre rpidamente, vuelves a empujar. Tan pronto como se encienda una luz, aparezca un smbolo 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 bsicos de diseo y usabilidad: propocionar feedback a los usuarios sobre el estado del sistema. Tarea propia de gurs es la de consolidar trminos, pero la palabra retroalimentacin nunca acab de convencernos como traduccin 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 conexin, informa GMail.

Frmula para la duracin de proyectos

Cualquiera que haya tratado de calcular la duracin de un proyecto, es consciente de la dificultad que conlleva el apurar con una fecha concreta. Estimar la duracin de las tareas y prever posibles contratiempos, es algo que slo la experiencia puede ayudar a refinar. Sin embargo, tengo anotada desde hace tiempo una frmula para estimar la duracin de un proyecto que me result por su simplicidad:

Te=(To+4Tm+Tp)/6

Donde:

  • Te = Tiempo realista estimado;
  • To = Tiempo estimado siendo optimista (sin contratiempos);
  • Tp = Tiempo estimado siendo pesimista (con todos los contratiempos);
  • Tm = Tiempo estimado ms probable.

El crdito probablemente deba ir a Open Loops.

Concepto: Externalidades

Carga un impuesto de 33 cntimos por cada bolsa de plstico y de repente nadie vuelve a usar estas bolsas. En pocas semanas su uso cae un 94% y tras un ao, no slo nadie las usa, sino que se convierten en algo socialmente inaceptable. Esta es la razn por la que todo el mundo usa bolsas reutilizables de tela en los supermercados de Dubln [en] y esto es lo que un economista convendra en llamar “minimizar una externalidad del mercado“.

En teora econmica se definen las externalidades como los costes y beneficios de una actividad econmica que no quedan reflejados en los precios de mercado. Lo podemos entender mejor con el tpico ejemplo de la contaminacin del aire causada por la actividad de una empresa. sto ocasionar un coste en los residentes de la zona, pero como el aire limpio y fresco no figura en los costes de produccin que ha calculado la empresa, sta no tendr ningn inters en reducir su actividad contaminante. Es decir, podemos ver una externalidad en este caso como el coste que un tercero debe pagar debido a las acciones de otros.

Una externalidad bien conocida es la piratera. Digamos que surge de una confusin entre propiedad intelectual y sus externalidades (materiales). As, el “propietario” de la receta de “Pan de pltano y manzana con nueces” tiene la propiedad intelectual de su idea (e incluso un derecho a reconocimiento aunque no est protegida legalmente), pero no puede reclamar la soberana de los ingredientes que pertenecen a cualquier ama de casa. No existe por tanto ningn conflicto entre su propiedad intelectual y el uso que hagan las madres de su receta de “Pan de pltano y manzana con nueces”.

Hay quienes piensan que la propiedad intelectual no es una propiedad debido a su falta de escasez. Las ideas no son bienes escasos y el que alguien se sirva de la receta de “Pan de pltano y manzana con pasas” no impide que otros hagan lo mismo. Sin embargo, en el momento en el que una idea se descubre o reconoce por primera vez, es escasa. Es tan escasa que es nica y es la razn por la que es una externalidad.

Al final, lo que realmente cuenta en el mercado son las externalidades que se derivan de la propiedad intelectual y puesto que el problema fundamental de la economa es la escasez, de aqu que Chris Anderson defina las externalidades [en] como un “concepto que sostiene que el dinero no es el nico bien escaso en el mundo”:

Destacan entre otros tu tiempo y la consideracin que te tienen, dos factores de los que siempre hemos odo hablar pero que hasta hace poco no hemos podido medir de manera apropiada. La “economa de la atencin” y la “economa de la reputacin” son trminos demasiado vagos como para merecer un departamento acadmico, pero hay algo autntico en el corazn de ambos. Gracias a Google, ahora tenemos una forma prctica de convertir la reputacin (PageRank™) en atencin (trfico) y en dinero (anuncios) […] Es de suponer que en todo momento, en este mundo, hay una cantidad limitada de reputacin y atencin. Esos son los nuevos bienes escasos.

Siempre hay externalidades, efectos y consecuencias de un desarrollo o una produccin que no podemos prever. Sin embargo hay externalidades que si podemos salvar o favorecer, como la accesibilidad de una web, por ejemplo.

Entradas relacionadas: