Nos acostumbramos con relativa rapidez a cualquier nueva herramienta por influencia de aquellos cercanos a nosotros. Como ejemplo de esta paradoja de los grupos, tenemos a Sylvan Goldman, que inventó el carrito de la compra en 1937 tras notar que los clientes de su tienda dejaban de comprar cuando sus cestas empezaban a pesar demasiado. Sin embargo, nadie usó los carros de Goldman en un primer momento hasta que este contrató actores para que empujaran de ellos por la tienda. Los clientes vieron a estas personas, que consideraban estaban haciendo lo mismo que ellos, y el uso de los carritos despegó hasta convertirse en algo ubicuo en los supermercados.

Ahora, para que un objeto de la vida cotidiana (como me mola decir objetos de la vida cotidiana) evolucione en cierto grado, tiene que pasar por el aro de Internet. Desde hace escasos dos meses hago la compra online.

I’m sorry. Are you from the past?

A ver, que pulir Visa por Internet es algo que todos hacemos desde hace años. Yo hablo de abandonar el carrito de la compra. Ya tuve reparos cuando me compré unas botas de fútbol en Zalando. Algo que tienes que probarte, ver como te queda y eso antes de adquirirlas. Ese procedimiento se invierte en la compra online donde primero pagas y luego te devuelven el dinero o lo cambias si no estás contento. Comprar los brócolis y los yogures de cada semana ya es un paso más en fidelidad y confianza, pero la comodidad paga con creces. Mi herramienta fundamental del nuevo año.

Bueno, hasta aquí la introducción, que sirve para descolocar, pues el artículo va en verdad de ropa que, como elemento fundamental de nuestro día a día, desearía profundamente que evolucionara hacia la ropa que no se mancha, que no huele ni se contamina. Vamos, que no haya que lavarla, que es uno de los grandes desastres ecológicos de esta sociedad. Y serviría además, para deshacerse de unos de los mayores despropósitos creados en cuanto a iconografía y estandarización.

O dásela a tu madre. Ella sabe como hacerlo.

Las instrucciones de lavado de la ropa son como los términos y condiciones, nadie se los mira antes del uso. Y puede que la principal razón de ello sea que no se entienden, resultado de unos iconos difíciles de interpretar (¿qué relación tiene para un consumidor un triangulo equilatero y la lejía?). Joaquín Márquez lo detalla muy bien en un post viejuno. La consecuencia de esto es que las etiquetas de la ropa se acaban parodiando a sí mismas:

No le pegues a los pandas.

Estas camisetas se han probado en animales. No les quedaban bien.

Lávate siempre el trasero.

Dásela a tu mujer, que es su trabajo.

Lávala cuando esté sucia.

Durante el Renacimimento, algunas mujeres usaban el jugo de las bayas de la Atropa belladonna para dilatar sus pupilas, efecto conocido como midriasis, por motivos puramente estéticos. Un reinado o un papado más tarde seguramente se recordarían ridículas con esos ojos.

¿Cómo podía llevar semejante peinado en los 80? Bueno, a parte de que por entonces tenía pelo, porque es común que la mayoría de nosotros tengamos una opinión decente de como somos ahora. “Pero dentro de cuarenta años”, escribía Dale Carnegie en 1948, “puede que miremos atrás y nos riamos de la persona que somos hoy”. ¿Dentro de cuarenta años? Los hipsters no van a durar ni cinco. Con la celeridad de estos tiempos, pronto los lustros serán las unidades culturales mínimas.

Son necesarios muchos cambios para que una unidad de tiempo se considere significativa. Vivimos en una sociedad que ha conseguido añadir cuarenta años a la vida media de la especie humana en solo dos siglos. Desde el neolítico, tan solo se consiguió un aumento de veinte años en diez mil que pasaron. La consecuencia de ello es que los sucesos culturales de gran magnitud cada vez se dan en periodos más cortos. La sensación de ser parte del pasado se nos echa encima. Eramos trogloditas hace medio siglo.

¡Hace treinta años la gente iba fumando en los aviones!

De hecho, podría haber empezado por ahí, que es de lo que realmente trata esta entrada, pero me esfuerzo por poner en contexto el asunto y andarme un poco por las ramas. En Engineering Infrastructures For Humans explican por que los aviones tienen ceniceros en los lavabos.

El que menos haya viajado en avión sabe que no se puede fumar dentro de ellos. Queda permanentemente avisado en los luminosos interiores, en los múltiples adhesivos de las puertas y en los manuales de instrucciones. Incluso, y aquí viene lo curioso, hay un aviso de no fumar adherido al cenicero del lavabo.

Quieto, “parao”.

Si no se puede fumar en los aviones, parece completamente ilógico que haya ceniceros, con lo que esto tiene pinta más de un parche que de una solución. Debe ser que el coste de eliminar todos los ceniceros de las puertas de los lavabos se dispara en comparación con el coste de poner una pegatina de prohibición justo donde puedes apagar el cigarro. Si American Airlines ahorró cuarenta mil dólares eliminando una aceituna de cada ensalada, aquí también economizaremos.

Pues no.

Resulta que según el código de regulación, tener ceniceros en los lavabos de los aviones no es algo opcional. Un avión no puede abandonar el terminal si no dispone de ellos.

Es una decisión basada en una de las principales heurísticas de diseño centrado en el usuario. Los usuarios cometerán errores y probarán acciones no permitidas, y puede que no tenga nada que ver con maldad o estupidez. No asumas que tus usuarios nunca romperán las reglas y toma una medida de reducción de riesgos. Está prohibido fumar, pero si fumas, al menos, apaga el cigarro bien y no vaya a pasar como en 1973, cuando un accidente de avión atribuido a un cigarrillo mal apagado acabó con la vida de 123 personas.

Todo diseño centrado en el usuario es un diseño que tiene en cuenta el error humano. Por eso los cajeros devuelven la tarjeta antes de entregar el dinero o la pantalla del iPad se apaga a los cinco segundos si no se desbloquea.

Todo el mundo puede fallar. Menos Torres, este que no falle el sábado.

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.

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.

Cada año se inventan nuevas enfermedades. Las relacionadas con la mente y el sexo se llevan la palma. Medicalizan la timidez o bajan los niveles de algún factor de riesgo para vender más fármacos. Lo explica sin tapujos Joan-Ramon Laporte, jefe del servicio de farmacología en Valle Hebrón (Barcelona):

Cada vez que se reúne uno de los comités de hipertensión arterial (el estadounidense, el europeo o el de la OMS) bajan el nivel de presión arterial considerado normal, y lo mismo ocurre con el colesterol. En pocos años se ha disminuido de tal manera el límite de normalidad del colesterol que cada vez hay más población que debe tratarse. En EE.UU. ha aumentado de 3 millones de personas a 25 en 10 años.

Un asterisco rojo en un valor que antes era considerado normal. Así es como recuerdo que quedaban marcados los niveles de riesgo en los resultados de un análisis de sangre. Con 12 años la rodilla se me quedaba tiesa y, para encontrar un diagnostico, tenía que hacerme analíticas cada pocos meses. Luego disfrutaba interpretando la biometría hemática a razón de asteriscos rojos. Me encantaba pasarme de plaquetas. ¿Miles de millones de eritrocitos por microlitro? Poco debe ser cuando sale una estrellita roja al lado…

El tema es que todos esos datos tenían mucho potencial para ser visualizados de una forma más idónea. Por eso Wired Magazine lanzó esta propuesta sobre como podrían mostrarse los resultados de un análisis de sangre:

/modo crítico de la sociedad de consumo ON.
El eje de la economía moderna, el crecer por crecer y no para satisfacer necesidades, es insostenible en un planeta de recursos limitados. No es la primera vez que hablamos de esto. La posteridad no nos va a perdonar, se van a reiterar las crisis y recesiones si continuamos con el consumismo desenfrenado. Vamos a morir todos.
/modo crítico de la sociedad de consumo OFF.

El documental —que lo veas si no lo has visto ya— versa sobre cómo se reduce deliberadamente la vida de los productos para incrementar el consumo. Así ocurrió con las bombillas, limitadas a mil horas, las medias de nylon, forzadas a ser menos resistentes, la batería de los iPods, no reemplazables y, mi personal aporte, los estuches portalentillas, que han visto incrementado su volumen, resultando en un mayor consumo de líquido para limpiar las lentes de contacto.

Las primeras lentillas que se amoldaron a mis ojos duraban un par de años. Requerían diferentes clases de líquidos y unas pastillas semanales. Las limpié con precisión y mimo durante los primeros siete meses, hasta que un sábado noche me equivoqué de píldora. Yo no percibí mucho el cambio, pero las lentes acabaron rosas, así que decidí pasarme a las lentillas desechables de un mes de duración. Una sustancial mejora en comodidad y un único líquido para gobernarlas a todas. Llevo más de diez años comprando este tipo de soluciones, cuyos botes vienen acompañados siempre con un estuche portalentillas de regalo. No sé para que necesito tener más de cincuenta, si al final siempre uso el mismo, pero lo que he podido constatar es que el diseño de estos contenedores de lentillas ha cambiado ligeramente a lo largo de la década. Los portalentillas fueron resideñados para aumentar su capacidad de albergar líquido. El objetivo, incrementar la frecuencia de uso de solución y por ende su consumo. Y para acabar, aquí tienes un estudio empírico que afirma que los americanos gastan más de 1600 millones de dólares debido a esto [en].

Estás en una fiesta en una casa aburrido y piensas: “Esto ya no es para mí. Preferiría irme a cualquier otro sitio. Preferiría estar en casa durmiendo. La gente con la que quiero hablar ya no está aquí”. Lo que sea. La fiesta ya no tiene un mínimo de interés. Entonces sucede algo sorprendente: no te vas, a pesar de haber tomado la decisión de que esto no te gusta. Si estuvieras en una librería y te dijeras que ya has acabado, te irías. Si estuvieras en una cafetería y te dijeras “me aburro”, te irías, pero te encuentras sentado en una fiesta en la que has decidido que no te gusta y donde no quieres estar, y no te marchas.

A continuación ocurre de nuevo algo sorprendente. Veinte minutos más tarde, alguien se levanta y coge su abrigo. ¿Qué sucede entonces? De repente todo el mundo empieza a coger sus abrigos, todos a la misma vez. Esto significa que ya todos habían decidido que la fiesta no era para ellos, pero nadie había hecho nada el respecto hasta que finalmente este hecho actúa como disparador y todo el mundo manifiesta que es adecuado irse.

Así es como, en este caso, se alcanza el complejo instante en el que un grupo acaba uniéndose, donde las personas suficientes, por alguna razón, se ponen de acuerdo en que algo vale la pena que suceda y la decisión que toman en ese momento es: esto es bueno y debe ser protegido. Y en ese instante, aunque sea de manera inconsciente, se empiezan a recibir los efectos del grupo. Efectos que surgen una y otra vez en las comunidades online. Este efecto es tan constante que se conoce como la paradoja de los grupos. No hay grupos sin miembros, pero tampoco hay miembros sin un grupo. ¿De qué serían miembros sino?

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

Básicamente, un japonés no piensa en nombres para las calles, sino para los bloques construidos en ellas. A nosotros nos sorprende que los bloques tengan nombres, ya que son justamente lo que se edifica a los lados de las calles. Pero en Japón son las vías las que no tienen nombres, los bloques los tienen y las calles son el espacio que queda entre los bloques, que se numeran por orden en que son edificados:

Lo mejor es que Dereck realizó un didáctico vídeo explicando como funcionan las direcciones en Japón. Este vídeo forma parte de una charla titulada Direcciones japonesas: el opuesto también es verdad [en], para una TED Conference:

Entradas relacionadas:

• Más sobre la numeración de las calles en general.
• Otra TED Talk interesante de Derek Sivers (con subtítulos en español): Cómo empezar un movimiento.

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?

Me estoy refiriendo a ese mensaje que hace que en algún momento seamos conscientes de que no estamos utilizando un software meramente, sino que hay alguien humano detrás. Ese “Hooray, no spam here!“.

Esta informalidad crea conexión y de ella se sirven actualmente las empresas para conectar con la gente y humanizar la tecnología, tratando de ser amigables mediante el lenguaje usado. Aunque hay que andarse con cuidado de no ser demasiado coloquial, lo que a veces puede llevar a la confusión y al “hacer pensar“. En este ejemplo de un cajero pecan de demasiado amigables:

¿Te gustaría seguir la marcha? Claro! No, gracias. Es tan coloquial que te hace pensar que tienes que hacer. Claro. No, gracias. Sí, no. Continuar, cancelar.

Pues este ejemplo y otros de cómo pueden mostrar a la gente que las empresas son gente también, es en lo que se centra la presentación “Designing Humanity” (Diseñando Humanidad) [en] de Bill DeRouchey. En ella se discuten los efectos del lenguaje y el tono de voz en la web y su impacto en cómo y qué dicen las empresas en sus relaciones online con los consumidores. Bill DeRouchey, se esfuerza en hacer amenas sus presentaciones, a pesar de la poca gracia que destila el pobre. Sin embargo siempre tiene buenos ejemplos que mostrar, como por ejemplo el de Woot, en donde van un paso más allá en la comunicación con sus usuarios:

No te preocupes, esto no dolerá mucho…

El caso es que recordé esta presentación cuando hace escasos días nos topamos con este formulario de registro:

¿Combination? ¿Por qué romper con el estándar del password cuando ha costado tanto hacerlo comprender? Es tan paradójica la situación que en la pista sobre el campo (hint) acaban diciendo que es precisamente tu contraseña. Cuanto Cuando menos, ganas de confundir.

Pertenece al registro de Lockerz, un sitio web que tiene el objetivo de conectar a la gente a través del consumismo. Si son ustedes capaces de controlarse, parece un lugar atractivo y con potencial, que ahora mismo sólo está disponible por invitación. Tiene la particularidad de que permite acumular unos créditos llamados Pointz que luego podrán ser canjeados por regalos de todo tipo (desde ropa y accesorios hasta electrónica de consumo, juegos y descargas). Si alguien se quiere animar a probarlo tan sólo debe pedirnos una invitación. ¡No nos quedan muchas ya!