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.

Enlace permanente al post: Affordances percibidas | Tweet |

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.

Enlace permanente al post: Affordance para la web | Tweet |

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

   
   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:

   
   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):

   
   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:

   
   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:

   
   Visto también en Compradicción.

¿Qué otras intervenciones os vienen a la mente?

Enlace permanente al post: Intervenciones en objetos cotidianos | Tweet |

Estos envoltorios de plástico, en ocasiones más pesados que el propio producto que envuelven, están sellados de tal endemoniada manera que pueden poner en peligro la integridad de uno mismo. De poco he estado por seccionarme un dedo intentando abrir una memoria USB contenida en uno de estos envases. La razón de esta medida insana por envolver un producto de 10 € como si fuera una joya, es una exigencia de los vendedores por hacerlo resistente a los robos. El remedio es peor que la enfermedad: un envoltorio nada ecológico, caro, una pérdida de tiempo y frustrante para el consumidor. Tal es así que hay en el mercado abridores para estos envoltoriosque, como vienen empaquetados de esta manera, generan la paradójica cuestión de: ¿cómo se abre el envoltorio de plástico del abridor de envoltorios de plástico?

Continuando en general con el tema del empaquetado [en], ¿por qué no descubrimos, hasta que sacamos las cámaras digitales de su empaquetado, que vienen con una pegatina que indica el número de megapíxeles? Porque una de cada cien cajas se abre en la tienda para colocar la cámara en el escaparate, y de esta manera, las marcas se asegurarán que su cámara indicará claramente que la tienen más grande que ninguna otra.

No son más que medidas caras y nada amigables para el medio ambiente (últimamente nos estamos volviendo muy verdes). Volviendo al tema de las latas con abrefácil, una curiosidad más que me vino en mente referente a las latas de conserva, es que fueron inventadas como resultado de un premio ofrecido por Napoleón Bonaparte al que pudiera encontrar un método para mantener los alimentos en buen estado por un largo periodo de tiempo. Como era difícil hacer llegar víveres a sus tropas, ofreció 12.000 francos de los de 1795 por el invento. Se los llevó Nicolas Appert, inventor de las latas de conserva. Grandes avances siempre en los desgraciados tiempos de guerra.

Enlace permanente al post: Los malditos envoltorios de plástico | Tweet |

Un modelo mental es un concepto prestado de la psicología para sacar a la luz un mecanismo que la mente usa para explicar como funciona el mundo real. El concepto es muy simple: las personas nos hacemos una idea de como funcionan las cosas, nos montamos nuestra propia película y creamos nuestros propios modelos a pequeña escala de los objetos con los que interactuamos. Ésta última idea la popularizó Donald Norman en su conocido libro “Psicología de los objetos cotidianos”, del que ya algo hemos hablado por aquí. A pesar de que sigo creyendo que todo esto no es más que una reinterpretación de las ideas de Platón, la noción de modelo mental como una serie de creencias sobre como funciona un sistema es algo que repercute mucho en la usabilidad de éste, puesto que las personas interactuamos con estos sistemas basándonos en nuestras creencias sobre los mismos.

Ahora cobran más sentido frases del Gurú como “Para el usuario, la interfaz es el sistema” o
El primer nivel del usuario no es el primer nivel del sistema.

Lo interesante es que los modelos mentales sirven para predecir el futuro. Ríanse de las bolas de cristal y de las ecuaciones diferenciales. Si nuestro actual modelo mental es adecuado, seguramente podremos predecir como se comportará un sistema cuando interactuemos con él. Si a alguien que sabe como usar una máquina de escribir, pero nunca ha trabajado con un ordenador, lo plantamos delante de una pantalla con el Word™ y un teclado, algo productivo hará. A lo mejor se hace un lío con el salto de línea, pero al menos una frase llegará a escribir casi instintivamente.

La relación está clara. Si conocemos el modelo mental actual de las personas que usarán un determinado objeto, podremos hacerlo más fácil de usar. Sin embargo, esto ya se antoja más complicadillo, puesto que las propiedades de un modelo mental se las traen (imaginad los modelos mentales que tienen de un avión un piloto y un pasajero):

• Incompleto
• Inestable
• Incluye supersticiones
• Incluye creencias erróneas
• Contradictorio
• Variable en el tiempo

El trabajo de los diseñadores consistirá en ayudar a los usuarios a formar un acertado y útil modelo mental del sistema. Las metáforas pueden ayudar en esta labor, así como la consistencia y las convenciones de diseño. Éstas últimas son esenciales de una página web a otra (formularios, enlaces, botones, etc.), porque ayudan a acumular un modelo mental genérico de como deben funcionar las páginas web, en base a las experiencias en las otras páginas.

La meta es alcanzar un modelo mental cada vez más amplio, más completo, más exacto… Justamente lo que hizo Neo en Matrix (aunque eso se llama modelo conceptual y es una historia que debe ser contada en otra ocasión).

Enlace permanente al post: El modelo mental | Tweet |

¿A que personajes os recuerdan?

Actualización: Es un placer tener buenos comentarios en el blog. Fabio comenta que este efecto se llama Pareidolia y ocurre cuando percibimos erróneamente como formas reconocibles algunas señales o disposiciones vagas o aleatorias. Serviría para explicar también la aparición en la tostada anteriormente comentada.

Ya que estoy aquí, aproveché para tomar una foto a mi plancha, que la tengo completamente abandonada a la pobre:

Enlace permanente al post: En ocasiones veo caras… | Tweet |

Ya de pequeño aluciné con el juego de ajedrez estelar que se inventó el señor George Lucas hace ya más de treinta años para entretener a los pasajeros del Halcón Milenario. En la primera película de la saga, Star Wars IV: A new hope, R2-D2 juega una partida contra Chewbacca al Dejarik Holochess. Una especie de ajedrez galáctico con hologramas de criaturas donde éstas cobraban vida propia y se pegaban unos buenos mamporros.

Recogiendo un poco esta idea de videojuego holográfico, PlayStation3 ha creado un juego de cartas al estilo Magic donde utilizando su webcam Eyetoy, la consola reconoce unas cartas físicas que se colocan sobre un tablero y les da vida en tres dimensiones en la pantalla respondiendo a nuestros movimientos con la carta real. El juego se llama Eye of Judgement y podemos ver su funcionamiento en este vídeo:

De nuevo gracias a la ciencia ficción y a los estrenos de cine me volví a asombrar, esto no hace ya tanto, con el sistema que utilizaba Tom Cruise en la adaptación al cine de Minority Report del gran Philip K. Dick. Allí Cruise, haciendo de policía de la unidad Precrimen, utilizaba una gran interfaz que se cargaba en el aire y que le permitía ver los momentos anteriores al cometimiento de un crimen. Le servía para ordenar secuencias de imágenes, aumentarlas y eliminarlas para al final conseguir una imagen del criminal y de su ubicación. Todo esto de pie y con sus manos.

Pues bien, de llevar esto a nuestra realidad no estamos tan lejos. Ya se están realizando interfaces que nos permiten una libre interacción con los objetos proyectados.

Los japoneses de LM3Labs investigan y desarrollan soluciones de interacción que ellos llaman “transparentes”. Con productos como Catchyoo o el Ubiqwindow dan una grado sorprendente en la experiencia de usuario a las presentaciones de espacios o a los anuncios interactivos. Podéis ver una galería de vídeos de sus aplicaciones en esta página. Estos dos vídeos muestran lo que pueden hacer con la bola terráquea de Google Earth y con el catálogo de obras de arte de un museo:

Otros ejemplos. Una experiencia en el Cebit de este 2008:

O lo que hace Jeff Han de PerceptivePixel:

PD: Por cierto, ¿alguien se acuerda del duelo que mantienen James Bond y Maximilian Largo en Nunca digas nunca jamás? Se llamaba Domination y consistía en ir eliminando misiles nucleares lanzados por el contrincante sobre una proyección transparente en medio de una lujosa mesa. La interacción además incorporaba el factor del dolor, puesto que cada vez que se colaba un misil dentro de tu zona de seguridad recibías una descarga eléctrica y el primero en soltar los mandos perdía la partida. Como siempre el agente 007 suda un poco pero al final le levanta un millón de dólares y la chica al malo de turno. ¡Bien por James!

Enlace permanente al post: Interfaces etéreas | Tweet |

La confusión en este caso se produce como consecuencia de varios errores. Se pierde la consistencia entre botones e indicaciones, puesto que todo parece botón o todo parece indicación (la fila superior no corresponde a botones). Como resultado de lo anterior, la gente tiende a pulsar las etiquetas marcadas como U2 y U5, debido a que su affordance nos comunica una función que no tiene. Sin olvidar el hecho de que las personas tienen aprendido que dentro de un ascensor hay que apretar algún botón. ¿Por qué nos ponen tan difícil el saber cual?

Enlace permanente al post: Más problemas en botones de ascensor | Tweet |

Los estándares son una manera de asegurar la consistencia y, por tanto, la usabilidad de un objeto o sistema. En Exocert.com, además de resolvernos un misterioso código QR, nos hablaban de un error en la web de Nokia. Comparando las prestaciones de algunos teléfonos, los datos de duración de la batería no aparecían en las mismas unidades de tiempo, con lo que a simple vista no era fácil saber a que aparato le duraría más la batería.

Esto me ha hecho recordar un problema parecido de consistencia que encuentro muy a menudo. Normalmente, la mayoría de las instrucciones para calentar un plato precocinado en el microondas vienen en vatios. Del tipo “calentar en el microondas a 750 W durante 7 minutos”:

Pero, ¿qué ocurre cuando llegamos al microondas? Esto:

Las instrucciones para usar el microondas y el uso real del microondas no es consistente, no están en las mismas medidas. Así me salen los precocinados, que a veces me los como medio fríos o más secos que una mojama.

Actualización: Miguel me informa de que mi incompetencia calentando platos al microondas se debe a otros problemas de consistencia. Aprovecho para mostrar mi microondas preferido, propiedad de una espectacular mujer:

Enlace permanente al post: La consistencia de las instrucciones del microondas | Tweet |

Visto en I Believe In Adv.

Enlace permanente al post: Objetos imposibles de usar… y que manchan | Tweet |