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 |

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.

Enlace permanente al post: Su nombre es Paul Van | Tweet |

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.

Enlace permanente al post: Una respuesta modifica tu comportamiento | Tweet |

El Efecto Hawthorne sería como una tienda en la Alemania comunista de antes de la caída del muro. Una larga cola expectante fuera y cuatro plátanos dentro. Digamos que tal vez haya sido sobrevalorado y, aunque es ampliamente conocido, me gustaría añadir este efecto a la serie “conceptos” y que así tenga presencia en este blog. La historia es la siguiente:

A las afueras del Chicago de finales de los años veinte, se realizaron una serie de experimentos en la fábrica Hawthorne de la empresa Western Electric Company. El objetivo de éstos era analizar la relación entre la productividad de los trabajadores y sus condiciones de trabajo. Para tal fin fueron manipulando diferentes condiciones, tanto ambientales como psicológicas y, para sorpresa de todos, cada cambio dio lugar a un incremento en la productividad.

¿Cómo podía ser que cada cambio, tanto si se trataba de una modificación en los niveles de luz, como en los periodos de descanso o reestructuración de los espacios de trabajo, diera lugar a una mejora? Un estudio posterior concluyó que, en realidad, los trabajadores no estaban reaccionando ante los cambios introducidos, sino que reaccionaban ante el hecho de que se les estaba prestando atención. La atención, no el control, es el que genera el resultado. Los trabajadores se esforzaban por rendir mejor ya que estaban siendo estudiados.

El Efecto Hawthorne tiene asociados otros efectos y paradojas, como la Paradoja del método, que “afirma que cualquier método funciona si quienes lo siguen se consideran privilegiados por haber sido elegidos para seguir el método, o por haber elegido seguir el método”.

Todo esto es una fuente potencial de confusión en los tests de usabilidad con usuarios. Éstos posiblemente estarán esforzándose mucho más que el típico visitante del sitio y puede ser complicado inferir si un cambio representa una mejora o no.

¿Será que el rendimiento depende más de lo humano que de lo técnico?

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

Enlace permanente al post: Concepto: El efecto Hawthorne | Tweet |

Todos estas aplicaciones provienen de conceptos bien conocidos del MundoReal™ que se adaptan a una interfaz para permitirnos una comprensión intuitiva de ésta. Aunque a veces se corre el peligro de crear una mayor confusión con una adaptación fallida, como el conocido caso de los sistemas Mac OS para expulsar un CD. El usuario no quiere tirarlo, pero sin embargo debe arrastrar el CD a la papelera de reciclaje para sacarlo.

Recientemente, en la entrada y comentarios de “How Do You Explain Computer Concepts to Non-Tech Types?“, se proponen explicaciones no técnicas de conceptos relacionados con los ordenadores utilizando metáforas. Por ejemplo, usando la analogía con una biblioteca:

El tamaño del disco duro se compararía con la cantidad de estanterías para los libros. La velocidad de la CPU es la rapidez con la que el bibliotecario te atendería (sería una biblioteca con servicio completo), y la RAM es el tamaño de la mesa en la que uno se sentaría. Cuanto más grande sea la mesa, más libros se podrían abrir de manera simultánea. Una vez la mesa este llena de libros, cada vez que se quiera abrir uno nuevo, deberíamos cerrar otro (el archivo de intercambio).

O la comparación con un malabarista:

El tamaño del disco duro se corresponde con el tamaño de una cesta llena de bolas al lado del malabarista, que nunca las podrá lanzar todas a la vez. La memoria del ordenador es el número de bolas que el malabarista puede tratar al mismo tiempo. La velocidad del artista haciendo juegos malabares se corresponde con la velocidad del procesador y la rapidez con la que cambie las bolas en la cesta sería la velocidad del bus de datos.

¿Se os ocurren analogías con camareros, empresas, cocineros, coches o el mismo cuerpo humano?

Sólo una más, muy adecuada para explicar un concepto más específico: como funciona el protocolo TCP/IP:

Supongamos que queremos enviar a un amigo un libro en formato digital, pero usando únicamente palomas mensajeras:

1. Imprimimos el libro;
2. Envíamos cada página usando una paloma mensajera;
3. Nuestro amigo recibe las páginas una por una;
4. Ordena todas las páginas recibidas;
5. Envía algunas palomas de vuelta, para que le traigan algunas páginas que se han perdido por el camino (volviendo al punto 2 por cada pagina omitida);
6. Nuestro amigo escanea las paginas;
7. El libro ha sido transferido en formato digital.

Ahora imaginemos que no hay palomas mensajeras, sino pequeños paquetes de datos a través de un cable y ya tenemos el TCP/IP.

Para terminar esta entrada, como curiosidad he recogido algunas imágenes populares en la red de casos en los que ocurre una especie de devolución de la metáfora, como si estuviéramos en Matrix e intentáramos explicar la realidad con conceptos que existen únicamente en Matrix:

Photoshop llevado al MundoReal™ como campaña publicitaria de Bates141 Jakarta.

Enlaces en el MundoReal™ como parte del proyecto “Typographic Links” de Dan Collier.

Un punto de libro con el icono “guardar” diluyendo y mezclando conceptos en Save Bookmark.

Entradas relacionadas:

• La metáfora del escritorio ayuda a elaborar el correcto modelo mental.
• La metáfora del icono guardar convertida en memoria histórica.
• ¿Por qué el botón de grabar es rojo?

Enlace permanente al post: Usa metáforas para explicar conceptos técnicos | 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 |

La otra tira de Entrialgo sobre los diseñadores.

Enlace permanente al post: Tira cómica: aparatos | Tweet |

La noticia no es nueva, pero hasta hoy no han incorporando en Google Maps el último de los cuadros, la Artemisa de Rembrandt. Todos ellos en Gigapixel, es decir, con una nitidez 1.400 veces mayor que la que se obtendría con una cámara digital de 10 Megapíxeles. La interfaz de Google Maps está siendo cada vez más explotada (ya la vimos para “leer” revistas impresas) y me parece que, con el auge de las pantallas táctiles, cada vez lo será más.

Me vienen a la memoria unas jornadas de Usabilidad del 2005 en la que uno de los ponentes sentenció desde el inicio que “los ordenadores no son la mejor manera de ver un cuadro“. Esta visto que uno no puede abrir la boca sin que Google le deje en evidencia.

Enlace permanente al post: La mejor manera de ver un cuadro | Tweet |

A aquellos que no sepan de que va el asunto, les recomiendo que antes de leer nada, vean el vídeo [en]:

El efecto túnel o visión de túnel es aquel momento en el cual la atención de una persona se centra en un sólo foco. No es la primera vez que vemos este recurso siendo explotado para, justamente, esconder algo al usuario.

Spoiler: ¡La asesina es la propia mujer del muerto! Ya que todo el mundo sabe que no se plantan Petunias hasta Mayo.

Enlace permanente al post: Prueba tu capacidad de atención (II) | Tweet |

Este concepto organizativo del cerebro define su tendencia a recordar lo incompleto. Se denomina Efecto Zeigarnik, en honor a la psicóloga rusa Bluma Zeigarnik [en] que descubrió que las personas tendemos a recordar mejor las tareas incompletas, o interrumpidas, que las ya terminadas.

Es propio de la naturaleza humana querer completar las tareas o escuchar el final de la historia, y cuando no podemos se genera una tensión psicológica, una preocupación basada en la motivación por terminar. El recurso “continuará…” de las series de televisión es una aplicación de este efecto, así del porqué la multitarea nos puede mantenernos más despiertos que cuando estamos centrados en una única labor.

Este efecto tiene una interesante doble aplicación en el desarrollo web. Cuando involucramos a un usuario en una tarea larga, es recomendable crear una secuencia de tareas simples (con una barra de progreso o pasos numerados que indican donde nos encontramos en el proceso, por ejemplo) para atraparlos y dirigirlos por la aplicación. Claro que cuanto más compleja y larga sea la tarea es muy posible que el usuario tenga que ser interrumpido por otras menores o mas rápidas de hacer. Una manera de combatir el Efecto Zeigarnik en este caso, es haciendo difícil, sino imposible, divergir del flujo de páginas. Usando cuadros de diálogo modales que interactúen con el servidor (AJAX), se pueden añadir subtareas dentro del mismo flujo.

Mi última recomendación para combatir el Efecto Zeigarnik es dejar de preocuparse por lo que hay que hacer, algo que provoca un estado de alerta en nuestro cerebro y puede conducir hacia males mayores. No hagan el esfuerzo por retener lo que está por hacer, utilicen las herramientas adecuadas para ello.

Entradas relacionadas:

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

Enlace permanente al post: Concepto: el Efecto Zeigarnik | Tweet |