Vía el diseñador web de Elezea.

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.

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.

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.

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.

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.

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.

Donde:

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

El crédito probablemente deba ir a Open Loops.

En teoría económica se definen las externalidades como los costes y beneficios de una actividad económica que no quedan reflejados en los precios de mercado. Lo podemos entender mejor con el típico ejemplo de la contaminación 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 producción que ha calculado la empresa, ésta no tendrá ningún interés 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 piratería. Digamos que surge de una confusión entre propiedad intelectual y sus externalidades (materiales). Así, el “propietario” de la receta de “Pan de plátano 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 soberanía de los ingredientes que pertenecen a cualquier ama de casa. No existe por tanto ningún conflicto entre su propiedad intelectual y el uso que hagan las madres de su receta de “Pan de plátano 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 plátano 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 razón 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 economía 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 consideración que te tienen, dos factores de los que siempre hemos oído hablar pero que hasta hace poco no hemos podido medir de manera apropiada. La “economía de la atención” y la “economía de la reputación” son términos demasiado vagos como para merecer un departamento académico, pero hay algo auténtico en el corazón de ambos. Gracias a Google, ahora tenemos una forma práctica de convertir la reputación (PageRank™) en atención (tráfico) y en dinero (anuncios) […] Es de suponer que en todo momento, en este mundo, hay una cantidad limitada de reputación y atención. Esos son los nuevos bienes escasos.

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

Entradas relacionadas:

• Concepto: Efecto Zeigarnik.
• Concepto: Paralisis por decisión.
• Concepto: Proximidad al daño.