Blog de Usolab
Blog de usabilidad, diseño y experiencia de usuario

Uno de los principios del diseño es orientar a los usuarios mientras utilizan una aplicación, un móvil, un sitio web o un cajero. Esto se suele hacer mediante instrucciones, títulos claros, menús visibles, enlaces descriptivos, indicadores de situación y de progreso, etc.

Por las características de los cajeros y de los kioscos transaccionales, donde los usuarios suelen realizar una única tarea, como sacar dinero o imprimir una foto, y se van, no es tan importante orientar a los usuarios sobre dónde están dentro de la estructura o navegación global, como ocurre en un sitio web. Dado que la utilización de los cajeros es secuencial, una sucesión de pantallas y pasos, lo principal es guiar a los usuarios en este proceso. Esto se puede hacer a través de títulos, instrucciones, etc. En algunos casos también se incluyen indicadores de pasos.

En nuestro Curso de diseño de cajeros y kioscos interactivos hubo discusión sobre la importancia que deben tener los indicadores de pasos. Según algunos esta debe ser importante, según otros no tanto.

La relevancia visual del indicador de pasos, un elemento de apoyo, no debe ser mucha. En algunos casos toma excesivo protagonismo, como en el diseño de la nueva interfaz del cajero de Caja Madrid (aunque aquí cumple además la función de resumen acumulativo de los datos introducidos por el usuario para su comprobación, otro aspecto también discutible tal como se hace actualmente en muchos cajeros). Ocupa una parte importante del espacio de la pantalla, su diseño distrae la mirada del cliente, no está separado del contenido principal de la interfaz… El elemento principal y objetivo de la pantalla, que en este caso es la introducción del importe, no tiene la preferencia que debería tener.

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.

Etiquetas: diseño cajeros, pasos, usabilidad cajeros

Hay 5 comentarios a esta entrada, participa y escribe uno

Ubuntu, para quien no lo conozca, es una distribución (o paquete) del sistema operativo GNU/Linux cuyo eslogan, "Linux for human beings" ("Linux para seres humanos"), deja claro su enfoque.

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".

Etiquetas: GNU/Linux, Iniciativas

No hay comentarios, se el primero en escribir uno

Como comentamos en Post-diseño en cajeros y kioscos interactivos, las explicaciones en un diseño delatan, en muchas ocasiones, su mala calidad.

 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,

Etiquetas: post-diseño

Hay 1 comentario a esta entrada, participa y escribe uno

Hoy, 17 de junio de 2009, Barcelona ha estrenado su nueva terminal 1 en el aeropuerto de El Prat y junto a ella una nueva web corporativa de presentación de la terminal. Al acceder nos hace reflexionar sobre el impacto que ejercen las páginas principales de cualquier sitio web en la experiencia de nuestros usuarios.

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.

Hay 5 comentarios a esta entrada, participa y escribe uno

En un capítulo de la serie Los Simpson, Homer Simpson descubre que tiene un hermano secreto, Herbert Powell, propietario de Powell Motors, una compañía de coches en Detroit.

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.

Etiquetas: diseño centrado en el usuario

Hay 5 comentarios a esta entrada, participa y escribe uno

Uno de los aportes al diseño visual de la web 2.0 ha sido la frecuente utilización de textos y botones grandes en las interfaces, en comparación con los sitios web tradicionales. Su mayor volumen facilita la lectura y la visibilidad, pero en algunas ocasiones se hace de forma meramente decorativa, sin tener en cuenta que el tamaño sirve para indicar jerarquía, para comunicar que algo más grande es más importante que algo más pequeño. Olvidar esto es despreciar uno de los recursos más útiles del diseño y, lo que es peor, crear desorientación en quien lee los textos.

Seguir las modas por que sí, no suele ser una buena práctica. En la imagen siguiente el tamaño del texto que se introduce en el buscador es desproporcionadamente más grande que el resto de los textos, incluso que las opciones del menú principal situadas a su izquierda, que por jerarquía deberían ser obviamente más grandes. No aporta nada el uso de ese tamaño en el buscador. Parece que no se ha tenido en cuenta otro criterio que no sea el puramente estético, que sólo se ha utilizado por que es “más 2.0”. O quizás respondiendo a la petición del cliente de “ponme algo de 2.0”.

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.

Etiquetas: botones, diseño de formularios, usabilidad web

No hay comentarios, se el primero en escribir uno

Microsoft presentó ayer en la feria E3 su “Project Natal” con el que otorgará a sus videoconsolas Xbox 360 de la capacidad de reconocer movimientos de todo el cuerpo del jugador, expresiones faciales y voz. El usuario va a poder jugar y navegar por los menús de la consola sin necesidad de utilizar ningún mando ni dispositivo físico.

¿Os suena? Es lo que hemos visto varias veces en ciencia ficción, por ejemplo en la película Minority Report; se trata de una aproximación a la interfaz intangible. Mejor verlo que explicarlo:



Se debe admitir que no se trata de algo totalmente nuevo en el mundo del entretenimiento doméstico, ya que desde hace tiempo existen juegos con reconocimiento de voz o que utilizan cámaras para detectar movimientos, como es el caso de la EyeToy de Sony. La tecnología de Microsoft es distinta a la vista hasta ahora, principalmente por incorporar un sensor de profundidad que le da capacidad de registrar los movimientos de forma tridimensional. Esto, junto al software que integrará la consola, permitirá realizar tareas complejas como reconocimientos gestuales hasta ahora impensables con otros sistemas.

Los inconvenientes de este tipo de interfaces son ya conocidos: cansancio ante un uso prolongado, problemas de accesibilidad, pérdida de precisión al utilizar nuestro “torpe” cuerpo en lugar de dispositivos intermediarios, etc. Pero las ventajas, al igual que con las pantallas táctiles, se resumen en la naturalidad de uso y la facilidad de aprendizaje del sistema.

Sin embargo, encontramos una diferencia conceptual importante entre una pantalla táctil y una interfaz intangible. El gesto que realizamos sobre una pantalla táctil se trata de una manipulación de un objeto, haciendo analogía con la manipulación directa que hacemos día a día con cualquier objeto físico real. Una interfaz intangible, sin embargo, tiene un ligero componente de “maestro-esclavo”: ya no estamos ante una manipulación análoga a algo que hacemos en la vida real, pues por el momento no somos capaces de mover objetos con la mente, sino ante órdenes que damos gestualmente a una máquina.

La incapacidad, por ejemplo, de transmitir perceived affordance a algo que puede ser movido a distancia, hará mella en este tipo de interfaces, dejando quizá en entredicho su naturalidad. Faltará ver también si la sensación placentera de control que tenemos al utilizar pantallas táctiles se mantiene en este tipo de interfaces o, incluso, si preferimos jugar al tenis, por decir algo, sin ningún objeto en la mano o preferimos coger un palo (de forma análoga a lo que hace Wii).

En cualquier caso, este sistema de interacción trasciende los videojuegos, ya que la consola Xbox 360 permite alquilar películas, realizar chats de voz y vídeo y próximamente integrará prestaciones de Facebook, Twitter o Last.fm. Todas estas funcionalidades se podrán utilizar sin ningún mando ni dispositivo, únicamente mediante gestos, por lo que quizá estamos hablando de una total revolución en el mundo del diseño de interacción en general.

Ahora toca ser paciente, frenar la emoción y esperar a las aplicaciones prácticas de esta tecnología. Por el momento os dejamos con el video del primer juego real que utilizará el sistema, Milo, presentado por Peter Molyneux.

Etiquetas: diseño de interacción, Interacción natural, interfaz intangible, usabilidad Xbox 360, videojuegos

No hay comentarios, se el primero en escribir uno

Las deficiencias de la señalización en las carreteras son la causa de entre un 5 y un 10% de los accidentes según el artículo Cuando las señales nos traicionan, de El País del sábado pasado. Comenta que los expertos recomiendan espaciar las indicaciones para dar tiempo al conductor a asimilar los mensajes, para que no ocurra lo de la imagen siguiente.

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.

Etiquetas: complejidad visual, Tufte

Hay 6 comentarios a esta entrada, participa y escribe uno

“La secuencia de elementos en una interfaz debe estar determinada por la manera en la que los usuarios realizan las tareas, teniendo en cuenta que en Occidente leemos de izquierda a derecha y de arriba hacia abajo. Para no obligar a los usuarios a subir y bajar de forma gratuita”. Esto decía la semana pasada en un curso de formación interna que realizamos en una entidad bancaria sobre usabilidad y diseño centrado en el usuario. Al decirlo no dejé de tener la sensación de expresar una obviedad, algo ya sabido.

Sin embargo, nos seguimos encontrando con frecuencia interfaces que lo ignoran. Esta semana al hacer un análisis comparativo de sitios web para un proyecto para una universidad, de nuevo he visto el mismo problema.

Por ejemplo, si deseo inscribirme en una entidad para asistir a una actividad, me encuentro con esta página.



Luego introduzco los datos que me solicita.



Una vez introducidos, ¿qué hago?, ¿cuál es el siguiente paso? No se ofrece ni facilita lo que debe hacer a continuación el usuario.

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?

Etiquetas: diseño de formularios, errores, flujo de interfaz

Hay 2 comentarios a esta entrada, participa y escribe uno

En nuestro último curso de diseño de kioscos y cajeros interactivos, y ya varias veces en este blog, hemos comentado que uno de los problemas de las pantallas táctiles en cualquier tipo de interfaz (cajeros, dispositivos móviles, etc.) es la falta de feedback háptico o táctil.

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.

Etiquetas: pantallas táctiles, usabilidad iPhone