Visto en las calles de Ponte A Poppi en Casentino, Italia.

Prefiero verlo como la capacidad de añadir el factor emocional a un diseño técnico. Con más o menos gracia o más o menos acierto, personalizar el mobiliario callejero no solo ha sido aprovechado por campañas publicitarias, sino que ha hecho a artistas urbanos alcanzar el nivel de celebridad.

Ojalá fuera yo Banksy.

Aunque el llamado arte urbano está, a veces, más a camino entre la gamberrada, el ingenio o el meme en el MundoReal™. Más del rollo “guarro limpia el coche”, que de pieza reivindicativa, pero de todas formas, el ingenio utilizado en algunos casos, especialmente en el de las señales, es digno de compartir:

De Respuestas sarcásticas a señales con una completa buena intención.

Valga esta entrada para felicitaros a todos el nuevo año!

Actualización: Un enlace con las 100 mejores obras de arte urbano de 2011.

Entradas relacionadas:

• Más modificaciones en semáforos, edificios y señales de tráfico.
• Otro especial Navidad.

Enlace permanente al post: Arte callejero para despedir el año | 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 |

A raíz de un popular vídeo de Microsoft sobre una visión tecnológica del futuro, Bret escribió recientemente una crítica con la que simpatizo totalmente. En A Brief Rant on The Future of Interaction Design se queja de que la visión mostrada, desde la perspectiva de la interacción de usuario, no es para nada visionaria, sino más bien un tímido incremento del actual status quo. Es una lectura rápida e interesantísima, con el plato fuerte de las manos como protagonistas.

Alegar que “imágenes bajo cristal” es el futuro de la interacción es como reivindicar que el blanco y negro es el futuro de la fotografía. Es obvio que es una tecnología de transición. Y cuanto antes hagamos esa transición, mejor.

Enlace permanente al post: Frase del Gurú: imágenes bajo cristal | Tweet |

Dentro de una tienda Ikea no puedes evitar entrar en un estado de perpetua complejidad: estantes repletos de cajas aplanadas marrones etiquetadas con nombres y códigos aleatorios, una linea amarilla que te lleva inexplicablemente por habitaciones cuando lo único que querías comprar eran unos utensilios de cocina. Luego, sólo cuando tu temperatura emocional se ha visto incrementada y puedes sentir un picor de pánico alrededor de tus oídos, te enfrentas a la versión Ikea de atención al cliente: un adolescente mal pagado, entrenado para la desconexión psíquica, que te dirá que se les ha agotado el producto. La próxima entrega no llegará hasta dentro de 2 semanas. No, no puedes realizar el pedido, tendrás que volver a la tienda. ¿Esa otra pregunta? Bueno, tendrás que hacérsela a alguien que esta en los lavabos… eso está a cinco metros siguiendo la linea amarilla y la cola está a tu izquierda.

Es una cita extraída de un antiguo artículo de Guardian [en]. Del orden del 60% de las compras que se llevan a cabo en Ikea no son cosas por las que la gente fue allí a propósito, no estaban en su lista de la compra. ¿Cual es entonces el secreto del gigante sueco?

Resulta que todo se basa en la propiedad de privar de autonomía a los visitantes de la sala de exposición. Lo explica en una charla el profesor Alan Penn, donde describe como los arquitectos utilizan el espacio para vender cosas, de manera que crean patrones de movimiento para llevar a la gente hacia los productos.

Uno de los casos que expone es el de Harrods, los grandes almacenes londinenses. Estaban convencidos de que debían tener algún tipo de problema, pues cada sábado doblaban el número de visitantes, pero las expectativas de ventas no eran las esperadas. El equipo del profesor Penn estudió la relación entre la estructura espacial del local y el flujo de gente moviéndose por éste. Resultó ser que no es que la congestión de personas estaba obligando a la gente a no poder avanzar, sino que las inhibía de echar un vistazo. ¡Realmente les paraba de parar! La gente tenía que seguir moviéndose porque había demasiada presión de la masa que estaba detrás.

Basándose en estudios sobre la estructura espacial concluyeron que uno de los factores que afectan directamente en las ventas es la inteligibilidad. La correlación entre lo local y global. Entre lo que puedo ver ahora mismo y mi posición relativa al gran almacén. Si no sabes donde estás, ¿cómo vas a saber a donde quieres ir?

Sin embargo, cuando llegaron al caso Ikea, se quedaron sorprendidos de que no seguía los patrones que habían encontrado previamente. Tras analizar como el flujo de gente se movía por el local, vieron que el showrooom de Ikea es similar a un sistema urbano. De hecho, lo que haces si vas a Ikea es seguir a la gente alrededor de la tienda. Raramente encuentras gente yendo en sentido contrario, y si lo hacen tienen pinta de estar agobiados. Lo que hacen es crear un entrono completamente desorientativo, pero que aun así tiene una ruta a seguir. Los diseñadores del espacio tratan deliberadamente de confundir al visitante, llevándole a comprar cosas que no están en su lista de la compra. Eliminan su autonomía, la habilidad de actuar con intención.

La ininteligibilidad y la desorientación eliminan tu autonomía. Han ampliado el límite al comienzo de la tienda hacía la sala de exposición y lo han utilizado para eliminar tu reconocimiento de saber donde estás. Tienes que rendirte. Sólo puedes ceder y seguir la ruta que te han propuesto, porque hacer cualquier otra cosa es realmente difícil. De hecho, hay atajos en Ikea. Si quieres puedes ir arriba a la sala de exposición, girar a la izquierda y bajar de inmediato por las escaleras hacia el mercado y empezar a comprar. Los compradores expertos de IKEA lo saben. Parte de la razón por la que disfrutan es porque consideran que tienen experiencia sobre cómo comprar allí.

Te diré el truco. Si quieres saber dónde está el atajo —da la vuelta, está justo detrás tuya. Literalmente.

Enlace permanente al post: ¿Por qué en Ikea siempre acabamos comprando de más? | Tweet |

Esa es precisamente la actitud y el mensaje que llevamos pregonando por estos lares desde hace ya un tiempo. La cita es de Philippe Starck, en referencia a su colaboración con Emeco, una empresa americana fundada hace más de 50 años con el objetivo de suministrar al ejercito de mobiliario fabricado en acero y aluminio. Destaca en su colección la silla Emeco 1006, que se ha convertido en un icono con el paso del tiempo, tanto por su robustez como por el atractivo de una linea americana clásica que se remonta a la era del optimismo Post Segunda Guerra Mundial.

Sobre la silla Emeco 1006, también conocida como silla Navy (armada o marina), ronda una leyenda que cuenta que el reposadero es un molde del culito de Betty Grable.

“Es una silla que nunca llegas a poseer del todo, simplemente la usas por un tiempo hasta que le llega el turno a la siguiente persona. Una gran silla nunca debería tener que reciclarse. Esto es algo muy considerado con la naturaleza y la humanidad”, sentencia Starck. En la planta de Emeco trabajan 35 personas que fabrican 1000 de estas sillas al mes. Cada una requiere 8 horas de trabajo y 77 meticulosos pasos durante los que se ensamblan las 12 distintas secciones, generando un producto casi indestructible y hecho para durar 150 años.

Ésta en concreto, o cualquiera de las sillas de aluminio de Emeco, la hemos visto en multitud de ocasiones por todos lados, pero ahora entra en acción posiblemente una de las sillas más ubicuas que existen: la silla blanca de plástico. Un omnipresente objeto de la vida cotidiana (como me mola decir objeto de la vida cotidiana) del que hay páginas web y grupos en Flickr con fotos tomadas por todas partes del mundo.

La silla en concreto es una Monobloc (monobloque), llamada así porque consiste en una única pieza de polipropileno calentado a 220 grados y moldeado para producir una silla cada 70 segundos. Se producen por todo el mundo y cuestan aproximadamente 3 € la pieza (en comparación, la silla Emeco no baja de los 300 €). Un mobiliario anónimo, económico, liviano, fácil de limpiar y apilable.

Posiblemente, la Monobloc sea la silla más famosa. Esta en concreto es la silla Pals de Resol.

Se puede considerar que las dos sillas tienen un alto nivel de perfección en su diseño, con características muy distintas, pero que han alcanzado la celebridad global. Aunque esto pueda hacerlas independientes del contexto, en el sentido de que no dan información local o temporal de donde se encuentran, no caben en el mismo contexto simplemente por su ubicuidad. Mr. Anderson y el Agente Smith no están sentados en sendas Monobloc durante el interrogatorio estilo Gestapo de Matrix, sino en unas brillantes Emeco 1006.

Fuentes: The Emeco 1006 chair y Those White Plastic Chairs – The Monobloc and the Context-Free Object.

Entradas relacionadas:

• Colección de sillas en miniatura, que incluye la S Chair de Panton o la Barcelona Chair de van der Rohe, entre otras.
• Las sillas de Eero Aarnio en detalle.

Enlace permanente al post: Las omnipresentes sillas blancas de plástico y la Emeco 1006 | 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 |

Corre por ahí una ingeniosa publicidad del servicio de montaje de Ikea, que no está protagonizada por Billy desgraciadamente, pero que una vez más muestra la desesperación a la que puede llegar uno con el mobiliario sueco.

Ahí no acaba la cosa, porque esto me ha recordado inmediatamente a SET26, una colección de muebles de diseño que conforman las letras del alfabeto. Cada armario está hecho a mano por una empresa suiza que les da un acabado perfecto y los vende al precio aproximado de (sic) 1.500 € cada uno.

Aquí es cuando me pregunto de nuevo por que no tendrá Ikea algo parecido por 300 €, ni que sea una sencilla “I” que por algo se empieza. Os dejo para acabar con un generador de nombres para muebles suecos. Cualquier parecido con Ikea es pura coincidencia. Al menos a mi me sale el que es sin duda mi mueble favorito, la cama:

Enlace permanente al post: Muebles con las letras del alfabeto | Tweet |

Cómo hacerse el nudo de la corbata: a la española, a la inglesa, a la americana, a la italiana o hazte un lazo. Clic en la imagen para ampliar.

La ilustración es de Francesc Punsola para la revista Men’s Health.

Enlace permanente al post: Instrucciones para hacer el nudo de la corbata | 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 |

Chorizo y paella para la bandera española

Albahaca, espaguetis y tomates para la italiana, que pinta muy saludable

La japonesa siempre encantadoramente minimalista con el sashimi de atún

Puede que esta sea la menos conseguida (por la falta de azul), a no ser que sea la naval de Australia, claro.

Me he entretenido adivinando el resto de banderas (después del salto), pero antes de jurarlas y ya que estamos en el tema, un par de imágenes más relacionadas:

Visto otra vez en ibelieveinadv.

Enlace permanente al post: ¿Con la comida no se juega? | Tweet |