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 |

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.

Enlace permanente al post: ¿Pronto para una tablet? | Tweet |

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:

Enlace permanente al post: El análisis de sangre rediseñado | Tweet |

/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].

Enlace permanente al post: Estuches portalentillas que te hacen consumir más líquido | Tweet |

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.

Enlace permanente al post: Concepto: la Paradoja de los grupos | Tweet |

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.

Enlace permanente al post: Cómo funcionan las direcciones en Japón | 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 |

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!

Enlace permanente al post: Relájate. Sé humano | Tweet |

Así de claro lo deja el siempre genial Hernán Casciari aludiendo a la música o el cine y prediciendo un posible mismo futuro para los libros:

El hábito digital hace que cada vez nos resulte más complicado leer a la antigua usanza. Sobre todo, cuando el material de lectura tiene ramificaciones. Nos hemos acostumbrado al salto, al hipertexto, al procrastineo, a manejar tres o cinco ideas al mismo tiempo. Regresar al libro plano, unidireccional, es como volver a encender el fuego con una piedra y un palito.

Al final, el artículo de Casciari no es más que un elogio al placer de leer un libro. El leer en silencio, el pasar las hojas, el perderse en una librería… Yo comparto parte de ese compromiso con el papel, pero me parece ingenuo cuando alguien dice que puede bajar música y películas de Internet, pero que los libros son otra cosa. Lo mismo dirían de los vinilos sus coleccionistas y míralos, dando sus últimos coletazos.

Llevo esperando más de 5 años la aparición de la tinta electrónica, esa que hace que el ojo humano no distinga entre leer en papel y leer en pantalla, y parece que los dispositivos que la soportan están empezando a dar mucho que hablar. Una vez leí que tu casa está donde están tus libros, pero amante como soy de tener menos, para disfrutar más, y de salir por patas con la casa a cuestas en cualquier momento, estoy loco por conseguir uno de éstos. ¿Cuál sería el más aconsejable? ¿El Papyre, el Kindle, el Sony© Reader o el iLiad? Este último, a pesar de ser el más caro (ronda los 650 €), me puso palote con el siguiente vídeo:

Ni el cine mató al teatro, ni la fotografía a la pintura, ni el Kindle será homicida de los libros, pero su uso habitual cambiará. Seguro que estamos en uno de los momentos de la humanidad donde hay más gente leyendo y, aunque la sensación de leer un libro en papel no se compare con la de leer en pantalla o papel electrónico, diariamente me relaciono con mis amigos por mensajería instantánea y/o correo electrónico, pero evidentemente no se puede comparar con el estar una velada juntos, contarnos las batallitas y tomarnos unas bebidas isotónicas. No por ello el Messenger mató las charlas en las casapuertas…

De todos modos, por mucho placer que de el mojarse el dedo y pasar la página, El Manuscrito Carmesí de Antonio Gala es infumable y predecir la muerte del papel se me antoja facilón. Así que prefiero anteceder la muerte del papel higiénico. ¡Por un papel electrónico higiénico!

Enlace permanente al post: Papel (electrónico) mojado | Tweet |

1. Etapa de introducción en el armario. Tanto si el mensaje me cautivó como si fue el color o me gustaba como se ceñía a mi incipiente barriga, mi flamante camiseta pasa a formar parte de las elegidas para los momentos especiales. Sea la próxima fiesta, una cita o una boda (sí, voy con camisetas a las bodas) echaré mano al montoncito de las camisetas preferidas.

2. Etapa de rodaje. Ahora bien, las camisetas especiales no son especiales eternamente (los que están casados lo entenderán mejor). De este desengaño se encarga el desgaste de los lavados, el uso intensivo que suponen los momentos especiales o el darse cuenta de que tus amigos lucen mejores camisetas. Además, se puede dar el caso de que, justo después de estrenarla, encuentras que todo el mundo lleva la misma. Sales y te encuentras al mismo tipo llevando tu camiseta. Pues le coges manía e involuciona hacia una nueva fase: la pila de las camisetas para el día a día. Para ir al trabajo, al supermercado, a tomar un café…

3. Etapa de madurez. Aceptémoslo, llegará un momento en el que las camisetas dejarán de ser atractivas hasta para ir al super. Ha llegado la hora de salir a correr con ellas, de ponértelas para una mudanza, para la limpieza del baño, para bajar a tirar a la basura. Ha llegado la hora de sudarlas, llevarlas al límite, hacia una última etapa.

4. Etapa de decadencia. El nivel de estar por casa. Da igual si la camiseta te queda corta o tiene un agujero, mientras esté limpia te puedes acostar con ella. Se perdió el encanto.

Como última apreciación, comentaré que no todas las camisetas cumplen el ciclo de vida completo. Algunas entran directamente en la etapa de madurez (como las de propaganda) y otras se quedan por el camino (las uso de trapo). ¿Tus camisetas pasan por un ciclo de vida?

Enlace permanente al post: ¿Cuál es el ciclo de vida de tus camisetas? | Tweet |