El indicador de pasos debería tener una situación y aspecto secundario, como en el kiosco inferior.

Si se considera que es relevante debería, no obstante, separarse visualmente de la zona de contenido de la pantalla, como se hace, aunque no de manera suficiente, en la pantalla siguiente.

Como ya hemos comentado en alguna ocasión, uno de los principales problemas de las distribuciones de GNU/Linux ha sido siempre la poca usabilidad de sus aplicaciones y entornos de trabajo. En Ubuntu, sin embargo, ya desde sus inicios, han dado mucha importancia a que su sistema operativo fuera fácil para usuarios comunes, por lo que ya no nos sorprendemos cuando nos enteramos de su última iniciativa: "One hundred paper cuts".

Canonical, la empresa detrás de Ubuntu, pretende identificar mediante esta iniciativa 100 problemas de usabilidad de su sistema operativo y de las aplicaciones que lo acompañan. Pero no 100 problemas cualquiera, sino problemas que pese a impactar negativamente en la experiencia de usuario sean aparentemente fáciles de solucionar técnicamente.

Y es que a veces, para mejorar la usabilidad de una interfaz no es necesario tirarla a la basura y empezar de cero o gastar grandes presupuestos, sino que pequeños cambios con muy poco coste pueden tener un impacto colosal en la facilidad de uso (¡y en los beneficios!), como bien comentaba a principios de año Jared Spool en su famoso artículo "The $300 million button".

 Fuente de la imagen: janchipchase

¿Cuántas veces no hemos tenido problemas con el funcionamiento de pomos como el de la imagen? Cuando queremos cerrar la puerta con el pivote que tienen estos pomos, ¿hacia dónde lo giramos?, ¿en dirección hacia el marco de la puerta, como parece natural y se hace con los pestillos tradicionales o hacia la izquierda?

Si el diseño necesita descripciones o guías de cómo se utiliza un objeto es que el diseño no es suficientemente autoexplicativo, que no cumple una de las funciones principales de un diseño: comunicar cómo debe utilizarse,

Al visitar el sitio de la nueva T1 por primera vez te invade una sensación de tranquilidad al ver que la información es fácilmente localizable, el contenido parece bien organizado, de fácil lectura y la información acompañada de un diseño web nítido y bien jerarquizado visualmente. Así nuestra primera impresión es la de estar delante de un sitio web claro y de confianza.

El problema viene cuando echamos un vistazo a los contenidos concretos de esta página y nos interesamos por conocer “Cómo llegar” a la terminal, como la mayoría de usuarios buscamos algo en lo que poder hacer clic. En el margen derecho de la página, concretamente en el espacio de accesos directos a contenidos útiles, nos espera un enlace que coincide 100% con nuestra búsqueda, Cómo llegar. Al acceder nos encontramos con algunas cosas que nos desconciertan, como por ejemplo, haber llegado a una de las secciones web Salidas y Llegadas sin haberla solicitado conscientemente.

También nos sorprende el hecho de que pretenda informarnos a través de un vídeo y no nos dé alternativa a poder consumir la información textualmente. Entonces, miramos el menú lateral a ver si encontramos una opción que ofrezca la misma información en texto, pero los accesos que nos propone no acaban de coincidir con lo que buscamos y nos desconciertan las opciones repetidas, “Salidas- Salidas-Salidas” y “Llegadas-llegadas-llegadas”. Empezamos a probar con todas las opciones que nos presenta y a medida que vamos accediendo sólo vamos encontrando reproductores de vídeos.

Curiosamente, si existe una sección incluida en el menú principal que nos ofrece la información idónea sobre cómo llegar a la terminal, dependiendo del medio de transporte utilizado. Y, curiosamente también, la página Transportes y Accesos cuenta con una presentación y disposición de la información muy simple y comprensible. Entonces, ¿por qué no es este el contenido que se enlaza en el inicio?

De esta manera, comprobamos la separación abismal que existe entre las páginas de inicio y sus respectivas páginas interiores. Comprobamos la calidad de la página principal a partir de un diseño ligero que integra texto e imagen con calidad, el troceo de la información que hace que nos parezca sencillo leer cualquier contenido y que podemos movernos con facilidad, frente a una página interior que no nos ha ofrecido la información que esperábamos y no hemos visto alternativa clara para encontrar lo que buscábamos.

Y así, es como esta experiencia nos hace pensar que, en muchas ocasiones, los sitios web no están a la altura de las numerosas, y a veces injustificadas, expectativas que despiertan las páginas principales.

Herbert decide encargarle a Homer la ardua tarea de diseñar el coche ideal para el "norteamericano estándar", creyendo que no habrá nadie mejor que un obrero como su hermano para ese fin.

El resultado final no sólo acaba siendo desproporcionadamente caro, sino que tampoco parece que pueda tener mucho atractivo para ningún norteamericano.

Si bien podríamos afirmar que no existe un "norteamericano estándar", el principal error que comete Herbert es creer que Homer, un usuario, puede ejercer el trabajo de un diseñador.

Homer es perfectamente válido para identificar sus propios problemas y necesidades como conductor, pero las soluciones a estos problemas están fuera de su alcance. Del problema a la solución hay un camino de diseño que no es trivial ni inmediato. Recorrer este camino requiere un enfoque concreto, investigación, comprender ciertas restricciones (técnicas, sociales, contextuales, etc.), conocer varios principios, tener experiencia previa, etc. Intentar explorarlo sin ayuda o la formación necesaria no acostumbra a ser una buena idea.

Pero lo que realmente me llamó la atención de la página fue el tamaño del elemento de acción, del “go”. El usuario para poder realizar la búsqueda debe pulsarlo con auténtica precisión. El área que desencadena la acción es sumamente pequeña, sobre todo comparada con el texto del buscador. El cambio de escala de los dos elementos puede generar problemas a los usuarios.

Después de introducir el texto y verlo voluminoso, se esperará un tamaño proporcional del elemento de interacción. Pues, no. Debe afinar su puntería para acertar y continuar, lo que supone un serio problema para las personas con temblores o poca precisión en sus movimientos.

El área pulsable es reducida:

Pero este no es sólo un problema para las personas con dificultades motrices si no una dificultad general, una pérdida de la eficiencia, como estudió en profundidad Paul Fitts.

La ley de Fitts como explicaba Dani  en Los enlaces y la ley de Fitts  o se hace en Visualizing Fitts’s Law dice que el tiempo necesario para completar un movimiento rápido de un punto A a un punto objetivo B depende de la distancia y del tamaño del punto B. Cuanto más pequeño y distante sea el objetivo más tiempo tardará el usuario en desplazarse y pulsarlo.

En el caso en que el objetivo sea pequeño, esta tardanza se debe principalmente, más que al desplazamiento hacia él, al movimiento de ajuste sobre el botón, es decir, al esfuerzo de búsqueda y de control motor que hay que realizar para situarse sobre él. Este proceso de tanteo es el que hace que el tiempo sea mayor y, por lo tanto, la eficiencia menor.

El esfuerzo de ajuste entre la velocidad y la precisión, por otro lado, aumenta la probabilidad de que se comentan errores, que se pulse en zonas no pinchables (sobre todo si no se delimita el área pulsable, como en la página que mostramos).

Si el tamaño de los botones es demasiado pequeño no es sólo la lentitud y el número potencial de errores lo que está en juego, sino que además también exige un mayor esfuerzo de atención al usuario. Este debe prestar atención para atinar o acertar con el ratón en su objetivo, distrayéndolo de la tarea que está realizando.

Uno de los objetivos básicos de los buenos diseños es no hacer pensar a los usuarios en acciones secundarias, en los elementos de la interfaz. Deben concentrar su atención y esfuerzo en pensar en los contenidos o tareas que están realizando, convirtiendo estas acciones secundarias en movimientos casi automáticos, como pulsar el botón.

Uno de estos expertos comenta que ”el exceso de información genera en el automovilista un 'estrés perceptivo, que le aturde y le arrebata la atención debida a lo que ocurre a su alrededor'. Por eso, distintas investigaciones llevadas a cabo aconsejan no incluir en un mismo panel informativo más de cinco mensajes y evitar la concentración de señales en un único poste”.

El exceso de información o elementos también tiene consecuencias negativas en las interfaces de una web o aplicación. Las tiene tanto a nivel de presentación de la información como de interacción del usuario con ella. Veámoslo.

¿Cuántas líneas hay en esta imagen?

Una sola. ¿Y en esta otra?

¿Dos? En lugar de dos, aparece una nueva línea. Un tercer elemento emerge entre los dos. Como dice Edward Tufte, en su libro Envisioning Information, 1+1=3. El espacio en blanco entre los elementos se activa generando algo nuevo.

Cuando añadimos algún componente (una línea, una palabra, una imagen, etc.) en una página o pantalla, no se suma un solo elemento, si no que se multiplica. Por lo que, es necesario tener cuidado y pensárselo antes bien para no introducir ruido visual y hacer más difícil su visualización y comprensión.

Pero no es sólo la presentación la que se ve afectada por la complejidad, si no también la interacción.

Andrei Herasimchuk, en su artículo "Interface Design Issues #06: The complexity principle", en Design By Fire, ahora no disponible en la red, se pregunta cuánto más compleja es la segunda opción respecto de la primera, de las mostradas aquí.

Uno podría decir que es 3 veces más compleja. En el primer caso hay una opción y en el segundo 3. Sin embargo, es 4 veces más complicada.

¿Por qué? Según el autor la complejidad no aumenta sumativamente sino exponencialmente respecto al número de componentes que se ofrecen. Por ejemplo, en el primer caso el usuario tiene dos opciones: seleccionar chocolate o no chocolate. Es decir, que puede marcar la casilla de verificación (check box) o no marcarla. Por lo que hay 2 posibles estados. ¿Pero cuántos hay en el segundo caso? Hay 8 estados posibles, por lo que es 4 veces más compleja.

El esfuerzo cognitivo que tiene que hacer el usuario en su interacción es bastante mayor.

Cuando introducimos elementos, no estamos pues sumando si no multiplicándolos. Como comenta el autor, añadir un botón, un icono, un enlace, un texto o cualquier otro elemento no es sólo sumar esos elementos si no que el diseño se multiplica de forma exponencial. Lo sintetiza en la ecuación:

Scott Jenson, de Google, señala en su artículo Edward Tufte’s 1+1=3 otro aspecto de la complejidad en la interacción. Comenta lo que le ocurrió cuando estaba en un ascensor. Justo cuando la puerta comenzaba a cerrarse con él dentro, vio correr a una mujer hacia el ascensor. Él, con la intención de abrir la puerta para permitir la entrada de la mujer, intentó pulsar el botón de “abrir la puerta” con la mala fortuna de pulsar el de “cerrar la puerta”. La mujer vio cómo él pulsaba el botón, considerando que lo había hecho a propósito.

Pensando en ello vio la razón de su error en el diseño de los botones.

En una fracción de segundos tuvo no que pulsar un botón si no decidir entre dos botones similares, el de abrir y el de cerrar. Comenta el autor que si hubiera habido un solo botón, la selección hubiera sido clara. Pero al haber dos, a la manera del 1+1=3 de Tufte, emerge un tercer objeto: el esfuerzo cognitivo para captar visualmente, comprender y elegir el botón correcto.

Esta carga adicional es la que tendrá el usuario al ver una interfaz que tenga elementos complejos. Cuantos más componentes tenga, mayor análisis visual y esfuerzo cognitivo deberá realizar. Añadir objetos por que sí aumentará exponencialmente este esfuerzo y, en algunos casos, la posibilidad de cometer errores.

Hay que ser, pues, precavidos, porque la introducción de elementos gratuitos o decorativos, implicará un mayor esfuerzo de visualización de los usuarios y un aumento de su trabajo en la toma de decisiones. El espacio en blanco en una interfaz, el que muchos responsables de desarrollo o negocio ven como espacio desaprovechado, tiene una importante función. Su relleno porque sí tiene consecuencias negativas y un coste por que aumenta la complicación innecesaria.

Este debe buscar por la página y desplazarse a la parte superior derecha, si ya es socio, o si no pulsar en el botón también situado más arriba, con la consiguiente pérdida de tiempo y eficiencia.

¿Por qué pasa esto? ¿No es algo de sentido común?

Estos últimos días han sido noticia nuevas propuestas tecnológicas para dar solución a este problema, que se suman a los sistema de vibración o modelado tridemensional experimentales existentes.

En último CHI 2009 investigadores de la universidad Carnegie Mellon presentaron un sistema que permite simular botones en distintos estados (activo, pulsado, etc.). Para ello utilizan una capa de latex que es hinchada con aire comprimido que pasa a través de una plantilla con los botones recortados. Este concepto, relativamente barato comparado con otras propuestas, podría aplicarse en cajeros y kioscos que tengan un esquema de botones fijo e invariable entre pantallas.

La otra propuesta es de la empresa finlandesa Senseg, que nos trae una nueva tecnología, bautizada como E-Sense, que mediante pequeños estímulos eléctricos permite engañar a nuestros dedos y simular texturas y fricciones.

Es bueno ver cómo universidades y empresas privadas son conscientes que estos pequeños detalles son importantes desde un punto de vista comercial por la diferenciación que pueden proporcionar a un producto no sólo en usabilidad sino también en su capacidad de crear una experiencia de usuario y una interacción seductora y que enganche.

Algunos teléfonos móviles ya incorporan tecnologías similares para atraer a potenciales compradores y los últimos rumores apuntan a que Apple podría lanzar en breve una nueva versión de su teléfono iPhone con feedback táctil.

Responsabilidades:

• Diseñar las interfaces de usuario y de interacción de webs y de aplicaciones
• Crear diseños centrados en el usuario, teniendo en cuenta los requisitos de los clientes y la usabilidad
• Definir la línea gráfica de los proyectos en los que participe la empresa
• Desarrollar esquemas conceptuales (wireframes), maquetas visuales, y prototipos
• Presentar el diseño a nuestros clientes
• Contribuir a la formación de diseño gráfico del grupo

Requisitos:

• Experiencia mínima de 1 año dedicados en exclusiva a diseño gráfico de interfaces
• Pasión por la usabilidad y por el diseño.
• Conocimientos de arquitectura de la información, diseño centrado en usuarios y diseño de interacción.
• Participar de la filosofía del diseño de la sencillez o simplicidad
• Persona proactiva y dinámica, con ganas de aprender.

 Requisitos deseados:

• Conocimientos de las metodologías y técnicas habituales de análisis y evaluación de interfaces y de las herramientas de usabilidad.
• Conocer y tener sensibilidad por la accesibilidad
• Conocimientos de maquetación HTML / CSS.

 Condiciones:

• Jornada laboral completa
• Salario a negociar, según experiencia

Si estáis interesados, enviad vuestro currículum vitae, portfolio, sitios web, blog personal... a trabajo@usolab.com, indicando en el asunto "Diseñador de Interacción".

Si nos situamos en el contexto en el que se utiliza la pantalla de la imagen inferior, por ejemplo, un bar con la presión de los clientes, el hecho de que las opciones de menú estén juntas puede ser fuente de errores en muchas ocasiones.

Además, el diseño de la interfaz no facilita la localización de las opciones. No hay un layout o presentación clara de los botones que guíe al usuario en el escaneo. Por la forma apaisada de la pantalla y por la forma rectangular de los botones parece que se propone una lectura de izquierda a derecha y de arriba hacia abajo, pero el menor número de filas que de columnas puede llevar a intentar el escaneo en vertical.

El mismo diseño de los botones, más allá de su contenido, deber dirigir de forma más clara el fluir del ojo y la mirada del usuario, por ejemplo, aumentando la distancia entre los botones en vertical para crear columnas.

Tampoco parece haber un orden en el contenido de las opciones, lo que hace más lenta la localización de las opciones de menú, reduciendo la eficiencia en el trabajo del usuario. Incluir un orden, por ejemplo, el alfabético favorecería el escaneo y su localización.

Pantalla original:

Pantalla retocada, sin realizar muchos cambios:

Sobre estas cuestiones y otros temas hablaremos en nuestro curso de diseño de cajeros y kioscos interactivos.

Se trata de “SixthSense”, un dispositivo portátil que permite complementar con información digital el mundo físico que nos rodea mediante una interfaz gestual, usando gestos naturales para interactuar con dicha información.

El prototipo actual está compuesto por un proyector de bolsillo, un espejo y una cámara. Los componentes de hardware se acoplan en una cinta colgante similar a la que utilizan muchos usuarios con sus móviles. El dispositivo proyecta información visual en cualquier superficie que a su vez puede ser utilizada como una interfaz, utilizando técnicas basadas en la visión, la cámara reconoce tanto los gestos del usuario como los objetos físicos.

Actualmente se han implementado varias aplicaciones que demuestran la utilidad, viabilidad y flexibilidad del sistema:

• Un mapa que permite al usuario navegar por él en cualquier superficie mediante gestos.
• Dibujar con las manos en cualquier superficie.
• Hacer fotos mediante el típico gesto de "encuadre".
•  Lanzar instrucciones mediantes gestos: dibujar en el aire el símbolo de una lupa lanza la aplicación de mapa o una "@" permite al usuario comprobar su correo.
• El sistema también aumenta la información de objetos físicos, proyectando en ellos información complementaria. Por ejemplo, un periódico de papel puede mostrar videos en vivo de noticias o información dinámica.

Todo ello por un coste aproximado actual de 350 $.

No puedo evitar acordarme de  Léon Theremin y de la aportación de la ciencia ficción a las interfaces de usuario.

El ejemplo más claro, sería aquellas aplicaciones que sólo muestran el nombre en código del archivo y un icono de instalador estándar. ¿Os dan seguridad estos iconos?

Para mejorar la percepción de seguridad y confianza, es recomendable introducir el mayor número de metadatos posible en el archivo: nombre del producto, empresa desarrolladora, etc.

Algunos programas introducen un icono personalizado (normalmente el icono de lanzamiento del  programa), pero olvidan la introducción de metadados en el archivo.

Lo ideal es introducir ambos elementos (icono y metadatos).  Es recomendable además que el icono haga referencia al concepto de empaquetado o descarga, ya que es una metáfora que facilita al usuario la compresión del proceso o la acción que se desencadena al ejecutar el programa.  Si el icono de instalación es además consistente con la imagen corporativa de la aplicación, habremos rizado el rizo:

Si queréis leer más sobre el tema, en su día también comentamos brevemente la importancia de prestar atención al diseño de  los asistentes de instalación.

- Los clientes no entienden nuestra interfaz de usuario

- Deberían leer el manual.

- Nuestro manual es más confuso que nuestra interfaz de usuario.
- Pueden utilizar nuestra base de datos de soporte en línea.

- Es más confusa que nuestro manual.

- No tenemos dinero para solucionar nada de todo esto.

- En situaciones así, me gusta ir a mi lugar especial.

- Algún día espero tener un lugar especial que sea suficientemente grande para mi cuerpo entero.

- Problema solucionado.