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 |

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 |

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 |

Enlace permanente al post: Frase del Gurú: encontrar y utilizar | 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 |

Esta no es precisamente la idea que hay tras el ordenador corporal

En la búsqueda por las interfaces definitivas y la ubicuidad de los ordenadores, nos encontramos con el ordenador que podemos vestir. Es un concepto que va más allá de la movilidad, puesto que el paradigma de interacción no cambia con los móviles de última generación. En un ordenador corporal llevamos encima el ordenador, pero interactuamos con éste según el contexto. De la misma manera que llevamos un reloj, unas gafas o un vestido, y permitiendo que podamos concentrar toda nuestra atención en la tarea que estamos realizando en vez de en la utilización del propio sistema.

Esta no es precisamente la manera de interactuar de un ordenador corporal

La clave está en que el ordenador corporal se integre con la vestimenta y sus complementos. Hacerlo invisible a la vista. Pantallas en la cabeza incorporadas en gafas, sensores y dispositivos de entrada no obstrusivos en pendientes, collares o zapatos, etc. Esto abre una gran abanico de oportunidades para el campo del diseño de moda y la ropa inteligente. Siempre podremos vestir retro mientras la tecnología envuelva las fibras de la ropa.

¿Quién no ha experimentado con los ordenadores corporales en su juventud?

En el MIT Media Lab llevan investigando durante años con la tecnología que hace posibles los ordenadores ponibles. Trabajando sobre una primera aproximación con la que integrar los dispositivos en un chaleco, no se les ocurrió manera mas friki de llamar al proyecto que MIThril.

Actualmente, han desarrollado un ordenador corporal que convierte cualquier superficie en una pantalla interactiva [en]. Con ello recrean el concepto de un “sexto sentido” para los humanos. Usamos nuestros cinco sentidos para obtener información del entorno. Sin embargo, mucha de la información que nos ayuda a entender y responder al mundo no proviene de nuestros sentidos, sino de los ordenadores e Internet. Con esta interfaz se pretende que nos alimentemos de esa información de una forma orgánica, como con nuestros sentidos:

Las posibilidades y aplicaciones de los ordenadores corporales son infinitas menos uno. Sistemas corporales para el consumidor, en medicina, educación, salud, en el ejército, etc. Imaginémoslo como una extensión a nuestro cuerpo, con la que podremos realizar tareas extraordinarias. Casi superpoderes. Nos permitirán estar en más de un sitio a la vez o tener “super memoria” con el concepto de memoria aumentada [en]. Al entrar en una habitación, por ejemplo, el ordenador corporal reconocería a las personas allí presentes y nos recordaría nombres e historial o se nos susurraría al oído que se acerca la hora de alguna tarea programada o una importante reunión.

Es un paso evolutivo antes de que seamos ciborgs.

Enlace permanente al post: El ordenador corporal | Tweet |

La otra tira de Entrialgo sobre los diseñadores.

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

Apple rechaza 48 aplicaciones para el iPhone, entre las que se incluyen un pene que se mueve cuando se agita el teléfono y una camiseta que transparenta cuando se moja el iPhone.

Vale que la predicción no es exacta, pero no había contado con esto:

The iSnort, una aplicación para el iPhone / iPod Touch que simula, como máximo, medio gramo de cocaína. Virtualmente adictiva, aunque sin efectos secundarios psicológicamente graves, podría ser tan efectiva como masticar regaliz de palo para dejar de fumar.

Colaboro con el viral: la aplicación se puede descargar desde la web del dealer por 10 £. Apple, ¡legalización!

Enlace permanente al post: No puedo creer que no sea cocaína | 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 |