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.

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.

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:

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.

¿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 diseñador de interfaces de usuario, dejó su trabajo en Apple debido a su nulo interés por ayudar a la gente a mirar fotos y escuchar música, a través de lo que él ha bautizado como “imágenes bajo cristal” (Pictures Under Glass).

A raíz de un popular vídeo de Microsoft sobre una visión tecnológica del futuro, Bret escribió recientemente una crítica con la que simpatizo totalmente. En A Brief Rant on The Future of Interaction Design se queja de que la visión mostrada, desde la perspectiva de la interacción de usuario, no es para nada visionaria, sino más bien un tímido incremento del actual status quo. Es una lectura rápida e interesantísima, con el plato fuerte de las manos como protagonistas.

Alegar que “imágenes bajo cristal” es el futuro de la interacción es como reivindicar que el blanco y negro es el futuro de la fotografía. Es obvio que es una tecnología de transición. Y cuanto antes hagamos esa transición, mejor.

Esta no es una entrada más con una selección de webs con un cuidado diseño minimalista. Más allá de un bonito y reducido espacio estético, estos sitios webs no hacen nada más que algo muy concreto. Sólo satisfacen una función y, a parte de algo de publicidad, no añaden ningún elemento extra para cumplir su objetivo. A continuación, 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 meteorológico más simple. Reducido a lo más importante, ¿va a llover?
   
2. Printablechecklist.org. Tan sólo permite generar una lista de tareas con sus respectivas casillas de verificación (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 más como un jefe que como una to-do list. Sin embargo, no es más que esto último, pero que va pasando las tareas conforme las vas completando.
   
4. Jacksonpollock.org. Expresionismo abstracto a clic de ratón. 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 sólo añadir el tamaño de esta forma: http://dummyimage.com/640×480.
   
   
6. Isitsaturday.net. ¿Es sábado? 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 días de la semana carecen de este interés.
   
7. Quietwrite.com. Un procesador de texto online donde se ha eliminado prácticamente todo para que tan sólo podamos concentrarnos en escribir. Muy al estilo del “Zen Mode” o pantalla completa en la edición de entradas de las nuevas versiones de WordPress.
   
8. E.ggtimer.com. No podía faltar en esta lista un temporizador. Especifica el tiempo añadiéndolo al final de la URL (por ejemplo: http://e.ggtimer.com/3hours14minutes15seconds). Del mismo estilo tenemos a CD y, más visual, Timer Tab, que reúne despertador, temporazidor y cronómetro.
   
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 más 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.

“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 detrás de su morada en Berlín:

R.I.P. Meta Linck

No me quiero poner trágico, pero todos vamos a morir algún día. Unos antes, otros después, el resto en 2012. Las funerarias lo saben y, en ocasiones, se atreven a promocionarse a través de anuncios tradicionales, lo que supone un auténtico reto:

Sólo se muere una vez. Promoción de los servicios de una funeraria de Bucarest, Rumanía.

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

Las funerarias son un negocio que ofrece unos servicios en los que la mayoría de las personas prefiere no pensar. No queremos que nos recuerden sobre la muerte y tenderíamos a ignorar sus promociones. Por eso, los anuncios tradicionales tal vez no sean la mejor táctica de marketing para promocionarlas. Probablemente, las búsquedas en Internet sean más efectivas. Cuando llegue el momento de necesitarlas, funerarias en Barcelona, por ejemplo. Y hablando de páginas amarillas, hace unos años lanzaron una campaña publicitaria llamativamente bien realizada y que expresa el mensaje de la forma más 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 habrán experimentado una pérdida de clientes debido a la crisis económica. La gente sigue muriendo por sus servicios.

Entrada relacionada:

• Una comida por la que morir recoge fotografía de las últimas cenas de los condenados a muerte.

Dentro de una tienda Ikea no puedes evitar entrar en un estado de perpetua complejidad: estantes repletos de cajas aplanadas marrones etiquetadas con nombres y códigos aleatorios, una linea amarilla que te lleva inexplicablemente por habitaciones cuando lo único que querías comprar eran unos utensilios de cocina. Luego, sólo cuando tu temperatura emocional se ha visto incrementada y puedes sentir un picor de pánico alrededor de tus oídos, te enfrentas a la versión Ikea de atención al cliente: un adolescente mal pagado, entrenado para la desconexión psíquica, que te dirá que se les ha agotado el producto. La próxima entrega no llegará hasta dentro de 2 semanas. No, no puedes realizar el pedido, tendrás que volver a la tienda. ¿Esa otra pregunta? Bueno, tendrás que hacérsela a alguien que esta en los lavabos… eso está a cinco metros siguiendo la linea amarilla y la cola está a tu izquierda.

Es una cita extraída de un antiguo artículo de Guardian [en]. Del orden del 60% de las compras que se llevan a cabo en Ikea no son cosas por las que la gente fue allí a propósito, no estaban en su lista de la compra. ¿Cual es entonces el secreto del gigante sueco?

Resulta que todo se basa en la propiedad de privar de autonomía a los visitantes de la sala de exposición. Lo explica en una charla el profesor Alan Penn, donde describe como los arquitectos utilizan el espacio para vender cosas, de manera que crean patrones de movimiento para llevar a la gente hacia los productos.

Uno de los casos que expone es el de Harrods, los grandes almacenes londinenses. Estaban convencidos de que debían tener algún tipo de problema, pues cada sábado doblaban el número de visitantes, pero las expectativas de ventas no eran las esperadas. El equipo del profesor Penn estudió la relación entre la estructura espacial del local y el flujo de gente moviéndose por éste. Resultó ser que no es que la congestión de personas estaba obligando a la gente a no poder avanzar, sino que las inhibía de echar un vistazo. ¡Realmente les paraba de parar! La gente tenía que seguir moviéndose porque había demasiada presión de la masa que estaba detrás.

Basándose en estudios sobre la estructura espacial concluyeron que uno de los factores que afectan directamente en las ventas es la inteligibilidad. La correlación entre lo local y global. Entre lo que puedo ver ahora mismo y mi posición relativa al gran almacén. Si no sabes donde estás, ¿cómo vas a saber a donde quieres ir?

Sin embargo, cuando llegaron al caso Ikea, se quedaron sorprendidos de que no seguía los patrones que habían encontrado previamente. Tras analizar como el flujo de gente se movía por el local, vieron que el showrooom de Ikea es similar a un sistema urbano. De hecho, lo que haces si vas a Ikea es seguir a la gente alrededor de la tienda. Raramente encuentras gente yendo en sentido contrario, y si lo hacen tienen pinta de estar agobiados. Lo que hacen es crear un entorno completamente desorientativo, pero que aun así tiene una ruta a seguir. Los diseñadores del espacio tratan deliberadamente de confundir al visitante, llevándole a comprar cosas que no están en su lista de la compra. Eliminan su autonomía, la habilidad de actuar con intención.

La ininteligibilidad y la desorientación eliminan tu autonomía. Han ampliado el límite al comienzo de la tienda hacía la sala de exposición y lo han utilizado para eliminar tu reconocimiento de saber donde estás. Tienes que rendirte. Sólo puedes ceder y seguir la ruta que te han propuesto, porque hacer cualquier otra cosa es realmente difícil. De hecho, hay atajos en Ikea. Si quieres puedes ir arriba a la sala de exposición, girar a la izquierda y bajar de inmediato por las escaleras hacia el mercado y empezar a comprar. Los compradores expertos de IKEA lo saben. Parte de la razón por la que disfrutan es porque consideran que tienen experiencia sobre cómo comprar allí.

Te diré el truco. Si quieres saber dónde está el atajo —da la vuelta, está justo detrás tuya. Literalmente.

The Phraseology Project. La idea es simple: les envías una letra, palabra o frase y ellos se encargan de aplicarle una tipografía para que quede bonita.

También hemos visto una camiseta, un fondo de escritorio y un póster del Principio KISS.

Y ya que estoy aquí, voy a probar un efecto de relieve de texto usando CSS3. Evidentemente, si estás navegando con Internet Explorer (aunque sea la última versión -IE9-) no apreciarás el efecto, puesto que no soporta la propiedad text-shadow.

En MakeMeMinimal, a parte de mediocres, somos “kissianos“: seguidores muy fans del Principio KISS, que no besucones. Ya sabemos que el “Mantenlo Simple, Sandio” tiene muchas interpretaciones, pero esta camiseta le da una vuelta más al asunto:

Keep It Stupid, Simple. Simplemente la quiero.

Más artículos del Principio KISS:

• Fondo de escritorio.
• Póster serigrafiado.

Posiblemente, el teléfono móvil sea uno de los dispositivos mas rediseñados del mundo, pero aún así, todavía sigue resultando poco satisfactorio. Durante los primeros años siempre usé Nokia. Me daba pánico cambiar de marca, no sólo porque resultaban óptimos como linterna, sino por el esfuerzo de aprender una nueva interfaz nada intuitiva y el coste del cambio.

Mobile Evolution es un proyecto del diseñador británico Kyle Bean. Muestra una colección de móviles de 1985 hasta 2009 al estilo matrioska (muñecas rusas).

Estos contratiempos desaparecían con los smartphones, así que hace un par de años me pasé a un HTC Hero. La experiencia de usuario no es sólo un atractivo diseño y una grácil interfaz háptica, sino lo que hace trascender el material. Con el paso del tiempo, esta experiencia acabó decepcionando. De hecho, hubiera revoleado el móvil unas pocas veces ya. Un día bajé del avión y no conseguí poder llamar hasta pasada una hora y media porque tuve que lidiar con la memoria, las aplicaciones, los procesos del sistema, reinicios, etc.

Por supuesto que no daría un paso atrás para volver a los antiguos teléfonos, pero pagué 400 € por él y ahora, tal como está el precio de las tablets, no hace que me aventure a dar ningún paso con ellas. La rápida sustitución que hicieron de los netbooks, me hace pensar que son más una necesidad creada que real. Las tablets son muy atractivas, objetos de puro deseo con interfaces muy juguetonas, pero no estoy convencido de que sean algo robusto y estándar por lo que merezca ahora dejarse un pastón.

Ai buu ken!

Me da la sensación que se produce muy a la ligera, que todo está muy verde aún. No quiero ser un early adopter. Creo que tengo bastante paciencia y me sobra mucho mes al final del sueldo.

Estoy plenamente convencido de que los derechos de autor, por ejemplo, ya no existirán dentro de diez años, y la autoría y la propiedad intelectual van por el camino. La música en sí misma será como el agua corriente o la electricidad.
Lo dijo David Bowie en 2002.