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

O mejor, ¿qué no es? Veamos algunos tópicos y confusiones comunes…

Un test de usabilidad no es un focus group

El focus group (o grupo de discusión) es una técnica bastante popular en el mundo del marketing para conocer de primera mano opiniones e ideas de un grupo de personas sobre un producto, servicio o concepto.

El objetivo principal de un test de usabilidad no es conocer la opinión de los usuarios, sino descubrir en qué grado una interfaz cumple con un propósito determinado. Mientras el focus group consiste básicamente en una discusión moderada, el test de usabilidad es una observación de cómo interactúan los usuarios, preferentemente representativos, con la interfaz.

Ambas técnicas son útiles dependiendo del objetivo, pero si queremos conocer si existen problemas al usar un producto, el focus group no es la técnica adecuada.

Un test de usabilidad no es un control de calidad

Un control de calidad es una actividad que se realiza al final de un proceso para asegurar que lo producido cumple con una serie de requisitos. En cadenas de montaje su uso es habitual: al finalizar una etapa cada ítem es comprobado mediante varias pruebas y desechado si no las pasa.

Existe un tipo de test de usabilidad, el test de verificación, que se realiza en etapas finales del proceso de diseño y cuyo objetivo es principalmente tomar métricas para compararlas con datos anteriores. Sin embargo, el test más habitual y popular tiene por objetivo detectar dificultades de usabilidad, por lo que no se debe realizar al final del proceso, sino durante el mismo, facilitando así la corrección de problemas antes que sea demasiado costoso.

Un test de usabilidad no es mejor que una evaluación heurística

Ni peor.

Una evaluación heurística consiste en la inspección de una interfaz para determinar si ésta cumple o no con unos principios de usabilidad reconocidos y aceptados por la comunidad.

En una evaluación heurística no intervienen usuarios, por lo que a veces se considera un método “menor” de diseño centrando en el usuario comparado con el test de usabilidad.

Por nuestra experiencia, una evaluación heurística es una técnica barata, rápida y eficaz para detectar problemas. Puede ser válida por sí sola, pero es especialmente útil si se hace previamente a un test de usabilidad. Una vez conocidos los principales problemas, se pueden resolver (o reconducir el test) para evitar que los usuarios queden encallados en ellos y de esta forma obtener nuevos datos.

Un test de usabilidad no tiene por qué ser costoso

Siempre ha existido mucho debate sobre el “lujo” de hacer tests de usabilidad. Se habla de que son costosos en tiempo, en dinero, en recursos, etc.

Es cierto que el mero hecho de reclutar a participantes para un test siempre será más costoso que no hacerlo, pero los requisitos para hacer un buen test de usabilidad acostumbran a estar sobredimensionados.

Un test con nuestros vecinos, improvisado en unas horas y moderado y analizado por alguien con poca experiencia nunca detectará tantos problemas, ni recabará tanta información sobre los mismos, como un test más profesional; pero lo cierto es que, como diría Steve Krug, hacer un test de este tipo es mejor que no hacer ninguno.

Obviamente esto no descarta que la técnica se deba ejecutar correctamente para evitar sacar conclusiones erróneas, lo que requiere cierta preparación; pero esta mínima formación, accesible mediante cursos o libros, en ningún caso debería considerarse un lujo, sino una inversión de la que consideramos se sacará mucho partido.

Un test de usabilidad no es co-creación

La co-creación es un proceso de diseño que se basa en la estrecha colaboración entre diseñadores y usuarios para definir conjuntamente un producto o sistema.

El test de usabilidad es un método de investigación, no de diseño, por lo que los usuarios no intervienen directamente en el proceso creativo, que sigue quedando a manos del diseñador.

De nuevo, como en el caso del focus group, el proceso de co-creación y la técnica del test de usabilidad son compatibles, pero en ningún caso el objetivo de un test es que el usuario aporte soluciones de diseño.

Un test de usabilidad no sustituye al diseñador

Se puede hablar largo y tendido sobre qué es un diseñador, pero seguramente coincidiríamos al afirmar que uno de sus objetivos básicos es la resolución de problemas mediante la definición y creación de un objeto o sistema.

Un test de usabilidad es útil para detectar problemas, conocer cuándo y dónde suceden y aportar también información sobre el porqué ocurren. Por ejemplo, un test nos puede ayudar a descubrir que un usuario no sabe cómo llegar a una sección de un sitio web, e incluso darnos pistas sobre el motivo, sin embargo el test no aporta en sí mismo una solución, sólo el diseñador será capaz de resolver ese problema para que no vuelva a suceder.

Un test de usabilidad no es un freno a la innovación

En el caso que nos ocupa, la innovación consiste en introducir novedades en interfaces que, simplificando, básicamente pueden ser nuevos métodos de interacción o nuevas formas de presentar datos o estados del sistema.

Insistimos: el test de usabilidad no es una técnica de diseño, por lo que su única responsabilidad es probar si las novedades introducidas cumplen, o no, ciertos criterios de usabilidad y ayudarnos a detectar las razones de ello.

Es cierto que, por definición, un usuario nunca va a estar familiarizado con una novedad que se introduzca en una interfaz, por lo que habrá un proceso de aprendizaje y un test de usabilidad lo detectará; pero esto no significa que la novedad “no pase” el test. Quizás tiene un impacto negativo en el aprendizaje, pero hace más eficiente el uso continuado de una aplicación; o quizás el aprendizaje es lento y el uso menos eficaz, pero se consigue minimizar el número de errores.

En cualquier caso el test no es un juez, no dice “¡adelante!” o “¡alto!”: sólo aporta información sobre la usabilidad de la interfaz. Y la información nunca debería ser un freno.

Etiquetas: test de usabilidad, usabilidad

2 comentarios, participa y escribe otro

La invasión de pantallas táctiles está cambiando nuestras expectativas y cómo nos enfrentamos a las interfaces que nos encontramos en nuestro día a día.

En nuestros cursos solemos utilizar como ejemplo la interfaz de un kiosco de billetes de metro que vimos en Paris.

Preguntamos a los alumnos qué harían para sacar un billete y prácticamente todos los que no han usado el kiosco con anterioridad asumen que es táctil (aunque no lo es).

Creer que algo es táctil no es sólo cuestión de que en la pantalla aparezcan elementos con claro aspecto de botón, como en el siguiente cajero (que no es táctil):

El kiosco de Paris da varias pistas equivocadas que parecen indicar que es táctil: una de ellas, quizás la más importante, es que no haya botones mecánicos cerca de la pantalla, pero también el uso de formas cuadradas hace pueda despistar. Por este segundo motivo el siguiente cajero también puede parecer táctil (y tampoco lo es):

Parece que los usuarios pueden llegar a asumir que cualquier pantalla es táctil, pero ¿cómo podemos mitigar este problema e indicar lo contrario? Físicamente una pantalla táctil es indistinguible de una que no lo es y, en muchas ocasiones, la interfaz hardware nos viene dada y sólo podemos definir y diseñar la interfaz digital. Un par de ideas:

1. No utilizar elementos visuales que refuercen la idea de táctil: indicar que algo no es táctil de forma visual no es sencillo, pero si eliminamos las delimitaciones de las zona susceptibles de parecer pulsables, como las cajas blancas en la interfaz del cajero anterior, es más probable que el usuario se plantee otro uso: si no hay dónde pulsar... ¿cómo puede ser táctil?
2. Indicar cuál es el sistema hardware que opera la interfaz digital: si el cajero o kiosco utiliza botones mecánicos laterales podemos introducir flechas en la interfaz digital para señalarlos. Este recurso también puede contribuir a reforzar el mensaje que la pantalla del kiosco no es táctil, pero es importante evitar que la flecha parezca un elemento pulsable (como sucede en el cajero de la imagen anterior). Debemos eliminar decoración de cualquier tipo como cuadrados u otros elementos que puedan confundirse con un botón.

Aplicando estas dos ideas, podríamos obtener una interfaz parecida a la de la imagen siguiente:

Con esto podemos contribuir a disminuir la frustración inicial de uso de nuestro kiosco, no sea que al asumir que la pantalla táctil alguien crea que el kiosco no funciona o, lo que es peor… que tiene estropeado el dedo.

Etiquetas: usabilidad cajeros, usabilidad kioscos

2 comentarios, participa y escribe otro

La situación de los kioscos interactivos es uno de los factores decisivos para su uso y éxito. Parecería que lo ideal sería ubicarlos en una zona de mucho tráfico pero esto puede crear congestión y ser contraproducente. Pero tampoco puede estar tímidamente escondido, como los de la imagen inferior, en la terminal 2 del aeropuerto de Barcelona.

Ni ocultos por otro tipo de objetos, como vi con frecuencia en Inglaterra, para mi sorpresa.

Lo ideal es situarlos en una zona por la que pase la gente pero en la que pueda pararse y usarlos sin impedir el paso. Pero es importante colocarlos en la línea de visión de los usuarios, que los vea sin tener que buscarlos, como pasaba en la imagen inicial.

Lo decisivo es situarlos en el flujo de movimiento del usuario. Por ejemplo, al llegar a un aeropuerto, en muchas ocasiones con prisas y nervioso, su prioridad es facturar y buscará el mostrador. Ese es su objetivo, lo demás pasa a ser secundario. Hacia allí dirigirá su atención y sus movimientos. Es en este camino donde deberían situarse los kioscos de facturación si se quiere aumentar su uso, si se desea satisfacer las necesidades de los usuarios.

Durante un tiempo viajé con frecuencia a Dublín. Allí me sorprendió la colocación de los kioscos de autofacturación. Estaban situados entre la entrada y los mostradores, hacían pasar por en medio de los mismos, como se ve en esta imagen. 

En algunas compañías incluso se dificultaba llegar al mostrador para incentivar el uso del kiosco, como en esta otra imagen. 

Ya se sabe, si Mahoma no va a la montaña…

 

Etiquetas: usabilidad kioscos

El pasado viernes abrimos plazas para un nuevo curso online de diseño de interfaces de cajeros y kioscos interactivos.

Se trata de la versión online de un curso que llevamos tres ediciones haciendo de forma presencial y siempre ha recibido buenas críticas por parte de sus alumnos. En él se tratan desde aspectos de localización y señalización de los kioscos hasta el diseño de las interfaces, presentando guidelines y buenas prácticas con una amplia muestra de ejemplos reales.

El temario es:

• Introducción y principios básicos 
• Identificador externo, señalización en puertas y recinto 
• Señalética del frontal 
• Arquitectura de la información y navegación 
• Interfaces táctiles/no táctiles y botones 
• Tipos de pantallas: principal, formularios, fuera de servicio... 
• Mensajes de aviso: informativos y de errores 
• Flujo de operativas y encadenamiento 
• Innovación y personalización

Se profundiza además en varios temas que hemos tratado en el blog, como:

• Las tres zonas de acción: atracción, observación e interacción
• Cómo organizar funcionalidades y contenidos
• Detectar y respetar el flujo de interacción, tanto en el frontal como en la pantalla/software
• etc.

El curso se realizará en dos sesiones de unas 3 horas, los días 17 y 18 de julio, a las 17:00, hora española. Es por la tarde para adecuar fácilmente el horario a Latinoamérica. Algunos horarios equivalentes son, salvo error:

• Argentina 12:00
• Bolivia 11:00
• Chile 11:00
• Colombia 10:00
• Ecuador 10:00
• México 10:00
• Perú 10:00
• Puerto Rico 11:00
• Venezuela 10:30

Podéis consultas más equivalencias en el sitio web Time and Date.

El precio del curso es de 210€, pero si reserváis antes del día 30 de junio (hasta las 23:59 de este viernes) hacemos descuento y queda por 160€.

Más información y reservas.

 

Etiquetas: curso, usabilidad cajeros

Ojeando en una librería Envisioning Information, me detuve por casualidad en una página en la que Tufte comenta los problemas de visualización de un gráfico en el que se explican las señales que ayudan a las tripulaciones de los aviones en el aterrizaje.

Ver imagen

Comenta Tufte que la matriz, las cajas en las que están encajadas las figuras humanas se convierten en una “prisión de información”. El grosor y el color de las líneas de la matriz, de los barrotes, dificulta la visibilidad del contenido, formando como una barrera que entorpece pasar de una viñeta a otra, complicando el flujo de lectura. Además, el espacio blanco dejado en el medio de las cajas genera el efecto 1+1=3, aumentando de forma exponencial la complejidad del diseño, como comentamos aquí hace un tiempo.

La rejilla, la silueta y el texto, comenta el autor, compiten por nuestra atención, más allá de la relevancia que tengan en el mensaje a transmitir. Para resolver esto, Tufte propone un diseño alternativo.

Ver imagen

La casi desaparición de la prisión, reduciendo el grosor y el color de las líneas, libera al protagonista y sus movimientos. El borde pasa a un segundo término y permite concentrarse en lo importante.

Además, el autor introduce otros cambios:

• La silueta humana reduce su contraste con el fondo, pasa de negro a gris, lo que hace destacar más la paleta y su posición, mensaje importante y diferencial a comunicar.
• El color de la paleta o bastón luminoso, amarillo, la hace sobresalir, la separa de los otros elementos similares
• Se eliminan componentes, como los haces del bastón luminoso, para facilitar su comprensión y eliminar confusión
• Se utiliza otro color, muy vivo, el rojo, para indicar la dirección de los movimientos
• La tipografía usada es más legible, principalmente en el título, al aumentar el contraste con su fondo

Al ver esta imagen inferior recordé el diseño de unos iconos para un cajero que hicimos hace unos años.

Comenzamos definiendo los iconos teniendo en cuenta principios de economía, minimización y simplificación de las formas y de los elementos, unificando también los elementos (manos, cajas, flechas de dirección...) para mantener la coherencia.

Pero nos dimos cuenta que los elementos eran demasiado similares, que tenían igual peso visual incluso los elementos comunes a los iconos, como la ranura o la mano, que no aportaban casi información al significado del icono.

Reconsideramos el uso del color:

• Se utilizaron los colores para organizar los distintos tipos de datos, creando capas de los tres elementos mediante la repetición del mismo color: la mano, ejecutora de la acción, los objetos sobre los que actúa la mano (como sobre, tarjeta...) y la flecha indicadora de dirección.
• Elementos constantes y no diferenciales en los diferentes iconos, como las ranuras o las manos, pasaron a un segundo plano mediante la utilización del color gris.
• El color negro se empleó para enfatizar el elemento principal al que el usuario debía prestar atención en la interacción, es decir, el sobre, la tarjeta, etc.
• El uso del color de la flecha para dirigir la atención hacia el mensaje diferencial entre los iconos que utilizaban el mismo objeto de interacción, es decir, para destacar la dirección de la acción del usuario, introducir o extraer algo.

Se refinaron, pues, los colores y las líneas para centrar al usuario en los aspectos esenciales y crear jerarquías entre los elementos.

Como regla general definimos 3 niveles de jerarquía en cada uno de los iconos:

1. Ejecutor de la acción (mano) y escenario donde se realiza (ranura, lector…).
2. Objeto sobre el que se realiza la acción (sobre, billete, tarjeta…)
3. Indicador de acción o dirección (flecha).

Ni que decir tiene que acabé comprando el libro.

Etiquetas: usabilidad iconos

1. Los empleados tienen en su mesa de trabajo varias páginas de la Intranet impresas. Al preguntar por ellas afirman que “tenían miedo de no volver a encontrarlas”.
2. Según las estadísticas, lo más buscado en la Intranet es la letra “a”. Al investigar descubres que los usuarios teclean una “a” en el buscador, pulsan “Buscar” y ordenan los resultados por fecha para consultar las últimas novedades.
3. Al preguntar a un usuario sobre una gestión a través de la Intranet empieza su respuesta diciendo “nos obligan a…”.
4. En una entrevista un empleado comenta que él no puede entrar a la Intranet ya que usa Mac. Otro responde que sí entra, pero sólo una vez al mes para consultar el tablón de anuncios y ver qué vende la gente.
5. Los usuarios comentan que “no te puedes fiar” de la Intranet. “Nunca sabes cuando algo se actualizó por última vez”.
6. Preguntas a un usuario dónde buscaría un cierto contenido y responde: “ni idea, no sé qué departamento lo lleva”.
7. Al pedir a un empleado que busque un número en el listín de la Intranet, observas atónito cómo abre un cajón y te muestra el listado impreso de los teléfonos de la empresa. 

Basadas en hechos reales. Otro día más.

Etiquetas: usabilidad Intranets

2 comentarios, participa y escribe otro

La pirámide invertida es una forma de organizar información utilizada habitualmente en periodismo. Consiste en contar primero lo más importante e ir desarrollando los puntos secundarios a lo largo del texto. Se puede ver como la contrapartida de los escritos que empiezan con una introducción, describen unos métodos y técnicas, enumeran unos resultados y acaban con las conclusiones.

En interfaces web es importante empezar contando algo interesante, seducir al usuario, para que permanezca en la página y siga leyendo. Por eso es aconsejable aplicar la pirámide invertida.

Un ejemplo de utilización lo encontramos en la actual página de inicio del sitio web de la empresa Brainsins:

Brainsins comercializa un sistema que, entre otras cosas, se integra en sitios web de comercio electrónico permitiendo ofrecer recomendaciones personalizadas a los visitantes. En lugar de describirlo así, los responsables del sitio web han decidido empezar contando las consecuencias de la utilización de su producto: “Aumenta los beneficios de tu tienda online”. Esta frase puede captar la atención del usuario, invitándolo a que dedique parte de su tiempo a seguir leyendo e informarse más:

• "Incrementa tus ventas y conversiones".
• "Aumenta la fidelidad y satisfacción de tus clientes".
• "Conoce a tus usuarios y actúa según sus intereses". 

Estos textos entran en más detalle, pero siguen hablando de qué conseguirá el usuario, sin entrar aún en el cómo, la descripción propiamente dicha del producto, que queda relegada en la parte inferior de la página. Una vez los usuarios se han convencido que el producto les puede ser útil, les puede interesar conocer cómo funciona.

La pirámide invertida no sólo se puede aplicar verticalmente, a lo largo de distintas frases o párrafos de texto, sino también horizontalmente: en una misma frase podemos usarla para decir algo interesante al principio, llamando la atención y aumentando las probabilidades que el usuario siga leyendo la frase.

En el twitter de Usolab contábamos hace unos meses que James Kelway publicaba “Six Circles”, una colección de principios de diseño en un e-book gratuito. Podríamos haber dicho justamente esto:

Pero fijaos cómo el interés del tweet no llega hasta la mitad del mismo. La primera parte (“James Kelway publica Six Circles”) no nos dice mucho a no ser que conozcamos a James Kelway, e incluso así no sabemos exactamente qué está publicando.

Una mejora es decir antes lo que se publica y anunciar el autor al final, como en el siguiente ejemplo:

Pero seguimos con un problema parecido: “Six Circles”, el nombre del e-book, no nos dice nada. Parece adecuado intentar decir cuanto antes de qué estamos hablando:

Este es el tweet que finalmente publicamos. En él dejamos claro desde el principio que estamos hablando de un “e-book gratuito”. El contexto del twitter de Usolab nos permite asumir que los lectores ya sabrán que el e-book va a tratar de temas de usabilidad o diseño de interacción. Con esto intentamos despertar el interés hacia nuestro tweet entre docenas que estará viendo el usuario cada minuto.

Evidentemente si consideráramos interesante apelar aún más a la gratuidad del e-book podríamos haber publicado:

Lo importante es tener claro cuál es el mensaje más interesante (“e-book”, “gratis”, “James Kelway”, etc.) e intentar introducirlo lo antes posible en la frase.

Combinando la pirámide invertida vertical y horizontal podréis, como es fácil imaginar, construir textos atractivos y disminuir tasas de rebote de vuestros sitios web.

El lector atento habrá notado que este artículo no sigue del todo la pirámide invertida, pero como en Usolab nos gusta bastante el tema de escribir para la web, le dedicaremos una hora en nuestro próximo curso de usabilidad web y diseño de interacción. ¡Aún hay plazas!

Etiquetas: escribir para la web

Este junio vamos a hacer en Madrid y Barcelona un curso de un día sobre usabilidad web y diseño de interacción. Son unas 7 horas bastante intensivas, pero con un enfoque introductorio y práctico, con muchos ejemplos de buenas y malas prácticas.

El temario, fechas y más información están en la página del curso que hemos habilitado.

Si tienes cualquier pregunta no dudes en ponerte en contacto con nosotros.

Etiquetas: curso usabilidad

Estamos acostumbrados a ver interfaces de aplicaciones abarrotadas de funcionalidades, con docenas de opciones de menú, hileras interminables de iconos y barras de desplazamiento por doquier. Nos resulta normal ver imágenes decorativas, sombras, brillos, efectos 3D de todo tipo e incluso burdas imitaciones de la realidad, como fondos de madera o botones con tal relieve que parecen querer sacarnos un ojo.

Pero llega Microsoft con Metro, el lenguaje de diseño de interfaces presente ya en Windows Phone, parcialmente en Xbox 360 y próximamente en Windows 8, y parece que quiere acabar con todo esto. Dicen las guías de estilo:

• no abarrotes tu interfaz, utiliza la “reducción feroz” para minimizar funcionalidades, eliminar chrome y hacer que el contenido sea protagonista 
• no uses imágenes decorativas, utiliza la belleza de la tipografía
• no imites la realidad, huye de skeuomorfismos, efectos 3D y brillos: sé “auténticamente digital”

Algunos ejemplos de aplicaciones del propio Windows 8:

Microsoft lanzó a finales de 2012 un concurso de aplicaciones para Windows 8 Consumer Preview (una beta descargable gratuitamente). Estas son capturas de cuatro de las ocho aplicaciones declaradas ganadoras:

Es fácil ver que algunas de las interfaces de las aplicaciones que ha elegido la propia Microsoft están bastante alejadas del lenguaje visual Metro. Hay usos tipográficos discutibles, imágenes y fondos puramente decorativos, uso de relieves y brillos exagerados, pantallas de aspecto complejo, etc.

Microsoft se ha esforzado en reinventar, actualizar y mejorar el lenguaje de diseño de su sistema operativo, pero el éxito o fracaso de Metro está ahora en nuestras manos. ¿Estamos preparados?

De momento no queda nada claro.

Etiquetas: Metro, Windows, Windows 8

1 comentario, participa y escribe otro

Existe un conjunto de características visuales que son procesadas de forma muy rápida por nuestro sistema perceptivo. Se las acostumbra a llamar, más por razones históricas que cognitivas, propiedades visuales preatentivas.

Al diseñar una interfaz deben tenerse en cuenta ya que son especialmente importantes para ayudar a diferenciar o destacar elementos.

Por ejemplo los siguientes botones utilizan una variable visual preantentiva, el color, para destacar uno de ellos, el más importante. Así podemos identificar con rapidez la acción principal sin necesidad de leer e interpretar los textos.

 

El color es una arma preatentiva potente, pero de doble filo: nos permite distinguir fácilmente elementos, pero también los destaca por encima de los que carecen de color. Es quizás por ese motivo que cada vez es más habitual ver aplicaciones que utilizan iconos en blanco y negro, contribuyendo a evitar que, por ejemplo, las barras de herramientas roben protagonismo al lienzo o espacio principal de trabajo. Es el caso del siguiente grupo de iconos de Adobe Fireworks, donde, a parte de la posición, se utilizan básicamente variaciones de forma y textura para representar cada concepto.

Google, en el último rediseño de Gmail, Google Docs y compañía, fue más lejos y simplificó aún más la línea gráfica de sus iconos: prescindió del color para diferenciarlos, y prácticamente también de la luminosidad, textura, orientación, tamaño... Todo el peso comunicativo acabó reduciéndose a su forma exterior y alguna marca interior:

Parece poco controvertido afirmar que estos iconos, fuera de su contexto, son de difícil comprensión, pero ¿se pueden diferenciar fácil y rápidamente cuando estás trabajando con el correo?

Pues parece que muchos usuarios tienen problemas en hacerlo, y así se lo han hecho saber a Google, quien ha decidido finalmente incluir una opción para poder mostrar un texto en su lugar:

Si un icono no cumple su cometido sustituirlo por un texto parece más un parche que una solución… ¿Pero qué hacemos, entonces? ¿Debería usarse el color? ¿Deberían variar de forma más exagerada en intensidad o incluso tamaño? ¿Es un problema de formas demasiado parecidas?

No es algo sencillo de responder, pero debemos ir con cuidado... Por acabar con una cita:

«Todo debería hacerse tan simple como sea posible, pero no más que eso». Albert Einstein.

Etiquetas: iconos