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

Hoy en día las instituciones públicas nos ofrecen la posibilidad de realizar muchos trámites y gestiones a través de Internet.

Es algo que aún está inmaduro y tiene herencias del sistema tradicional, como los “horarios de conexión” para realizar ciertos trámites de la Generalitat de Catalunya o la obligación incluso de realizarlos en un día concreto, como es el caso de la renovación de la demanda de ocupación, más conocida por “sellar la tarjeta del paro”.

La renovación de la demanda de ocupación es un trámite que, a priori, se podría antojar sencillo. Únicamente es necesario introducir un número identificativo y una contraseña. ¿Qué puede ir mal?

Entrando en la página destinada a este fin nos asaltan multitud de dudas: ¿estamos realmente en el trámite que queríamos? ¿por qué no lo aclara un título? Dice “si dispone de la tarjeta”… y ¿si no dispongo de ella? ¿por qué las instrucciones de lo que tengo que hacer están por debajo del sitio donde debo hacerlo? ¿por qué no se muestra de forma más clara que me puedo identificar con certificado digital? etc.

Pero todo esto es el menor de los problemas de alguien que intente realizar este trámite ante la duda de ¿cómo escribo mi DNI en este campo?

Si alguno de los lectores dispone de un NIE (“número de identidad de extranjero”) del tipo
X1234567A quizá lo vea más claro y decida probar escribirlo de esta forma:

Pero se dará cuenta que al pulsar en “Aceptar” salta un error. Aunque quizá “salta” no es la expresión más adecuada, pues únicamente nos lo sugiere el color de la etiqueta (que ha cambiado a… verde) y unas minúsculas “x” en las dos cajas de texto (que han cambiado de formato y ahora tienen fondo gris).

No es necesario contar cómo a partir de este punto el usuario puede ir probando multitud de combinaciones sin éxito. El que tenga más paciencia puede, finalmente, darse cuenta que en la parte lateral izquierda de la pantalla hay una “sugerencia”.

La sugerencia, que no es tal, pues es de obligado cumplimiento, apenas es visible, pues está alejada del formulario y el texto es color pastel (muy fuera de los límites de contraste especificados en el nivel AA de las políticas de accesibilidad del W3C, que debería cumplir todo sitio web de una institución pública).

Según la ayuda, el usuario debe escribir su “DNI” o “NIE” en la segunda caja de texto e indicar en la primera qué tipo de documento ha escrito mediante una “D” o una “E”, respectivamente.

Dejando a un lado que el sistema pueda reconocer si se ha escrito un DNI o un NIE (y no tenga el usuario que indicarlo), tampoco hay ningún motivo para solicitar al usuario que escriba nada, cuando un formulario de este tipo se podría solucionar mediante un mero desplegable de selección:

Detectar este problema no es una cuestión de conocimientos de usabilidad, es una cuestión de enfoque: probar informalmente la página con únicamente dos usuarios sacaría a la luz ésta y otras dificultades de la interfaz.

Y la solución de “mínimos” que presentamos, diseñada bajo la suposición que será más común escribir un NIF que un NIE, tiene una implementación trivial: un minuto en XHTML.

Quizá si se dedicara más tiempo y recursos a mejorar las interfaces, no serían necesarios tantos anuncios en televisión para estimular a que la gente haga trámites por Internet.

Etiquetas: Administraciones públicas, trámites por Internet

3 comentarios, participa y escribe otro

Uno de los principales problemas que seguimos encontrando en muchas interfaces, especialmente en sitios web, es la total carencia de puntos focales, es decir, zonas que sugieran al usuario por dónde debe empezar.

Hablábamos ya del tema hace seis años, pero este concepto, que parece que aún no ha cuajado entre los responsables de sitios web, no es en absoluto nuevo: está consolidado, en algunos casos desde hace siglos, en multitud de disciplinas como la pintura, la fotografía, el cine o el arte oriental del bonsái.

En fotografía, por ejemplo, ningún aficionado pondrá en duda la importancia de que exista algo que visualmente capte la atención del ojo al ver una toma. Este “algo” es el punto dónde empezar a mirar y a partir del que arranca un camino, definido de forma más o menos explícita visualmente, para que el ojo recorra la foto.

A estas alturas puede parecer una perogrullada hablar de los principios de la Gestalt u otras teorías visuales, pero ¿cómo hacen los fotógrafos para definir estos puntos focales? Pues utilizando variables visuales que deberían ser conocidas por cualquier diseñador de interfaces, como la posición, el tamaño, el color o la forma, entre otras.

El uso correcto de estas variables permite jerarquizar visualmente la interfaz, destacando unos elementos por encima de otros, e incluso crear caminos visuales para acompañar al usuario a donde el responsable de la interfaz desea que vaya.

Las ventajas de tener un foco parecen claras, pero las desventajas de no tenerlo también son importantes, y es que no crear un punto de atención, o su extremo contrario, crear demasiados, es el primer paso para forjar una experiencia de uso confusa. Si nada más entrar, no sé por dónde empezar, ¿cómo va a ser el resto?

Etiquetas: foco, usabilidad web

No hay comentarios, sé el primero en escribir uno

Buscamos un consultor senior de usabilidad, arquitectura de información y/o HCI para trabajar en nuestras oficinas de Sant Cugat (Barcelona).


Su labor consistirá en:

• investigar necesidades de usuarios
• elaborar arquitecturas de información
• definir y establecer navegaciones e interacciones con el usuario
• definir estructuras y prototipos (alta y baja definición)
• realizar evaluaciones de usabilidad (evaluación heurística, test con usuarios…)

Requisitos:

• ser licenciado o ingeniero
• conocimientos de arquitectura de la información, diseño centrado en usuarios y diseño de interacción
• conocimientos de las metodologías y técnicas habituales de análisis y evaluación de interfaces y de las herramientas de usabilidad
• buena capacidad de comunicación oral y escrita
• persona con ganas de aprender
• pasión por la usabilidad y por el diseño

Requisitos deseados:

• conocimientos de herramientas de diseño
• participar de la filosofía del diseño de la sencillez o simplicidad
• conocer y tener sensibilidad por la accesibilidad

Experiencia:

Se requiere una experiencia mínima de 2 años dedicados en exclusiva en proyectos de usabilidad, HCI, experiencia de usuario, arquitectura de información y/o diseño de interacción.

Envía tu currículum vitae, a trabajo@usolab.com indicando en el asunto "Consultor usabilidad (Barcelona)"

Etiquetas: oferta laboral, trabajo usabilidad

No hay comentarios, sé el primero en escribir uno

A la hora de presentar información sobre productos, especialmente en las páginas de listado o de categorías en las que se ofrecen varias alternativas para que el usuario seleccione alguna de ellas, es conveniente hacerlo no sólo describiendo sus características, sino explicando también los beneficios que supondrán para sus usuarios.

En muchas ocasiones se muestran los productos presentando únicamente sus especificaciones técnicas, por ejemplo, adsl 25 Mb, 10 Mb, 6 Mb..., velocidad de subida 1 Mbps, 800 Kbps, 640 Kbps... Es lo que se hace en la página de ADSL de la recién rediseñada Movistar.

Esta información para muchos usuarios no significa nada, no saben cómo se traduce a su vida diaria, por lo que no le facilita ni ayuda en la toma de su decisión. Otro enfoque complementario es presentar la información en términos comprensibles para los que lo utilizarán, trasladándolos a los usos o beneficios que tendrán en su vida cotidiana.

Por ejemplo, en el sitio web de la imagen inferior, si se pulsa en el enlace “10GB usage allowance”, se superpone una capa en la que se explica lo que se puede hacer con 10 GB.

En las páginas mostradas a continuación, se muestra esta información directamente en la misma promoción, señalando qué ventajas tiene cada uno de los productos.

Esta información permite al usuario diferenciar de forma más clara las opciones y le facilita la decisión.

Etiquetas: escribir para la web

No hay comentarios, sé el primero en escribir uno

Dos de los principios clásicos en los análisis heurísticos de usabilidad son la visibilidad y la retroalimentación (a la que se denomina habitualmente con el término inglés feedback).

La visibilidad hace referencia a la necesidad de que los usuarios conozcan el estado del sistema. La retroalimentación consiste en proporcionar información útil y clara al usuario después de cada acción realizada.

Son principios nombrados ampliamente entre los diversos autores que recogían y publicaban reglas heurísticas a principios de la década de los 90, cuando todavía ni siquiera existía lo que actualmente conocemos como Internet.

Sin embargo, todavía hay interfaces que no cumplen estos principios, como ocurre en la imagen inferior.

Cuando un cliente entra a la web e intenta identificarse, se encuentra con la siguiente pantalla (con una resolución de 1024 x768 píxeles):

La acción del usuario al introducir su clave y contraseña desencadena dos cambios leves y difíciles de apreciar en la interfaz. Es decir, que el sistema carece de visibilidad y de retroalimentación. La pantalla queda como se muestra en la imagen:

Los cambios son tan poco apreciables que casi se podrían usar para una prueba del tipo “Encuentre las siete diferencias” (o awareness test, como el famoso vídeo para concienciar a los conductores de la presencia de los ciclistas).

Con la acción del usuario, desaparece el botón “Entrar” y aparece, en el extremo inferior izquierdo de la pantalla, un formulario para introducir una clave. Otro problema añadido, es la distancia entre este nuevo elemento y el lugar de introducción de la clave.

El hecho de que este formulario esté por debajo del pliegue de la pantalla (que como señaló Nielsen recientemente es necesario tenerlo en cuenta) agrava la situación.

Estos problemas provocan que los usuarios tengan muchas dificultades para continuar con el proceso que intentaban completar: identificarse para acceder a su sistema de banca online.

Etiquetas: feedback, retroalimentación, usabilidad en banca, visbilidad

No hay comentarios, sé el primero en escribir uno

La donación de órganos para trasplantes es muy diferente en los países europeos, según muestra el gráfico inferior (los países de la izquierda muestran porcentajes muy bajos de personas que han manifestado su disposición a donar sus órganos una vez muertos, comparados con los de la derecha, que están próximos al 100%).

Cuando se buscan las razones de este comportamiento, la primera reacción es pensar en motivos religiosos, culturales, etc. Aunque, como comenta Dan Ariely en Predictably Irrational: The Hidden Forces That Shape Our Decisions, países similares (como Dinamarca y Suecia, Holanda y Bélgica, Alemania y Austria), tienen un comportamiento muy diferente ante la donación.

¿Entonces, cuál es el motivo? El diseño. El diseño del formulario de donación de órganos.

En los países con una alta donación, la persona debe indicar expresamente en el formulario que no desea ser donante, que renuncia a serlo. Para ello tiene que marcar la casilla, el check box. Por defecto, si no indica lo contrario, la considera voluntaria a ceder sus órganos.

Por otro lado, en los formularios utilizados en los países de la izquierda del gráfico, con poca donación de órganos, el que lo cumplimenta debe indicar si desea donar los órganos. Por defecto, si no marca la casilla, no se le considera donante.

La mayoría de la gente no modifica la opción ofrecida por defecto en el formulario de consentimiento.

Creemos que tomamos las decisiones de forma racional y objetiva, pero la realidad es que, cuando nos enfrentamos a decisiones complejas o importantes, como la donación de órganos, los elementos no racionales juegan un papel fundamental, según comenta Dan Ariely. La forma en cómo se nos presenta una selección o pequeños detalles casi imperceptibles influyen de manera significativa en qué elegimos.

El diseño de una interfaz es una de las fuerzas y motivos escondidos o inconscientes que dan forma y afectan a nuestras decisiones. ¡Qué responsabilidad!

Etiquetas: Diseño, formularios, usabilidad

3 comentarios, participa y escribe otro

La red se va haciendo eco, poco a poco, de los resultados de las elecciones  colombianas de ayer domingo: más de un 10% de los votos fueron declarados nulos y parece ser que la usabilidad del sistema de votación tuvo mucho que ver.

En estas elecciones se realizaban tres votaciones y se podía participar opcionalmente en otras consultas. Los votantes debían utilizar varios tarjetones como el de la siguiente imagen, que publica el sitio web Colombia.com (los números y flechas no forman parte del tarjetón).

El tarjetón funciona de la siguiente forma: los votantes pueden utilizar la “Parte A” o la “Parte B”, según si desean votar la “circunscripción nacional” o la “especial para comunidades indígenas”.

Si votan la “Parte A”, deben marcar un partido en la parte superior y, en el caso que sea un partido con “voto preferente”, marcar un número en la parte central, que corresponde al candidato preferente de la lista elegida.

Existen multitud de problemas en este proceso que pueden desencadenar un voto nulo. Veamos los principales:

• No se sabe, a simple vista, la diferencia entre los bloques “Parte A” y “Parte B”. Los títulos de estos bloques están centrados, en mayúsculas y sin destacar palabras clave, afectando a su legibilidad y por ende a la comprensión de qué es cada uno. Si los ciudadanos votaban en ambos bloques, su voto era nulo.
• Aunque apenas se aprecia en la imagen, debajo de cada logo se indica si el voto es “preferente” o “no preferente”, es decir, si es necesario elegir un candidato de la lista del partido. Esta indicación sin duda es insuficiente, pudiendo pasar desapercibida. Parece ser que el problema que anuló más votos fue no marcar un candidato de preferencia.
• El uso de un tarjetón común para todos los partidos impide que los números de candidatos se puedan acompañar de su nombre y foto. Los números no son reconocibles, obligando a los votantes a recordar la relación que hay entre número y candidato o bien consultarlo en un documento en las urnas. Algunos usuarios, conscientes a priori de esta dificultad, parece ser que acababan olvidando  marcar el partido una vez resuelto el problema de conocer y marcar el candidato.
• A la hora de seleccionar los partidos y los candidatos no existe una zona o casilla dónde escribir. Los usuarios de este tarjetón no tienen ningún indicio visual de qué deben marcar y, además, no saben dónde ni cómo hacerlo: ¿se debe tachar el logo del partido? ¿hacer un círculo? Algunos votantes sin duda preferirán hacer una pequeña cruz al lado del logo de su partido, pero apenas hay espacio para ello y los votos se anulan cuando no se puede determinar de forma clara qué partido se ha votado.

No es la primera vez que escribimos sobre este tipo de problemas en unas elecciones. Hablábamos hace un tiempo de un caso parecido en Escocia y por todos son conocidos otros ejemplos sonados como el caso Bush vs Al Gore en Florida en el año 2000.

Sin duda, estos problemas de diseño influyen en “desdemocratizar” tristemente la democracia.

Actualización: Los lectores nos aclaran en los comentarios que algunos de estos problemas no dan lugar a voto nulo. Nos indican también otra cuestión que no habíamos comentado: la disposición de los números (12 por fila en lugar de 10) dificulta la localización del candidato preferente. Y nos plantean una pregunta: ¿hay números más “sexys” que otros?

Etiquetas: diseño elecciones, usabilidad

5 comentarios, participa y escribe otro

Buscamos un diseñador de interacción experto en diseño gráfico de interfaces que traslade diseños conceptuales a un lenguaje visual elegante e intuitivo, teniendo en cuenta criterios de usabilidad y diseño centrado en el usuario.

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: 

• Tener una filosofía de diseño de simplicidad
• 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.

Requisitos deseados:

• Conocimientos de maquetación HTML / CSS
• Conocer y tener sensibilidad por la accesibilidad

Condiciones:

• Trabajo presencial en nuestras oficinas de Sant Cugat del Vallès (Barcelona)
• Jornada laboral completa (ocho horas) o reducida (seis horas por la mañana)
• Salario a negociar, según experiencia

Si estás interesado, envía tu currículum vitae, portfolio, sitios web, blog personal... a trabajo@usolab.com, indicando en el asunto "Diseñador de Interacción".

Etiquetas: diseño, oferta empleo, usabilidad

4 comentarios, participa y escribe otro

Ayer leíamos en el País sobre una iniciativa española de microblogging que poco a poco va ganando usuarios. Su nombre es Picotea.com y tiene un funcionamiento muy parecido al de Twitter: los usuarios pueden escribir y compartir mensajes de un máximo de 160 caracteres. Sin embargo, visitando su página de inicio no dan ejemplo y utilizan más de 1.000 para contar lo que hacen.

Pese a la creencia común de considerar que los visitantes ya saben de qué va tu sitio web, nos parece imprescindible contar lo que haces (consideremos a Tuenti un caso a parte). El texto, sin embargo, no parece el recurso más adecuado para hacerlo, pues ya sabemos que la gente no lee. Entonces ¿qué alternativas hay?

Tenemos algunas ideas:

Mostrar los contenidos/productos

La forma más sencilla de mostrar qué ofreces o vendes es sacarlo del almacén y colocarlo en el escaparate. Por ejemplo, ¿a qué se dedica el sitio web japonés Orihime?

Sólo viendo su página de inicio el usuario ya se hace una idea: parece que venden bolsos/fundas de portátiles para chicas.

Enseñar fragmentos de la interfaz

En ocasiones el objetivo del sitio web no es ofrecer información o algo tangible susceptible de ser mostrado en la página de inicio. Si se trata de una aplicación o un servicio, presentar una o varias capturas de la propia interfaz puede contribuir a entender de qué se trata. Es el caso de UserHeat:

Mostrar la interfaz para comunicar los resultados de los análisis que realizan es su mejor herramienta de venta: de un vistazo el visitante entiende que UserHeat hace “mapas de calor” de sitios web. Sin entender el texto ya nos podemos hacer una idea de por dónde van los tiros.

Usar diagramas e ilustraciones

Si la interfaz no es suficiente y el producto no es tangible, a veces un diagrama o ilustración puede contribuir a entender un concepto. Otro ejemplo japonés: maysee.jp.

El logo del sitio web utiliza elementos culturales japoneses, como es la forma en que se entregan y sujetan las tarjetas de visita, para dar una primera pista. Una vez identificado el tema del sitio, las tarjetas, los diagramas cobran sentido: con maysee.jp el usuario pasará de tener sus tarjetas de visita amontonadas a tenerlas organizadas en una aplicación web.

Incluir vídeos

El vídeo permite integrar varios de los conceptos anteriores en un único elemento. ¿La contrapartida? El usuario debe querer invertir parte de su tiempo, por lo que es esencial que sean cortos e interesantes. Por ejemplo, al entrar en Cacoo no han sabido plasmar de forma estática qué hacen y sólo sabemos que tienen una aplicación, pero ¿de qué?

Con unos segundos de vídeo se ve la aplicación funcionando y se entiende que se trata de una herramienta de diagramación.

Escribir para la web

Y si todo lo anterior no funciona y se debe recurrir al texto, no todo está perdido, tenemos algunas otras ideas sobre cómo escribir para la web.

Etiquetas: escribir para la web, usabilidad web

3 comentarios, participa y escribe otro

He conocido muchos diseñadores a los que las restricciones propias de cualquier proyecto (tiempo, tecnología, presupuesto, objetivos de negocio, contexto de uso, etc.) les incomodaban o veían como amenaza o limitaciones a sus propuestas visuales, a su trabajo.

Nosotros, además, añadimos otros requerimientos menos habituales que tampoco suelen gustar a algunos diseñadores: pedimos que las interfaces sean “usables”, que respondan a las necesidades de los usuarios, que sigan las convenciones, a la vez que ser agradables, originales y creativas.

Pero son las restricciones, por ejemplo, las normas de sintaxis visual y las conveniciones establecidas las que permiten que el diseño sea comunicación, sea resolución de problemas. El diseño depende en gran medida de las limitaciones, de las convenciones asumidas e inconscientes. Además, venciendo las resistencias es como vamos construyendo las cosas, es como somos creativos.

Recuerda la famosa paloma de Kant:

“La ligera paloma, que siente la resistencia del aire que surca al volar libremente, podría imaginarse que volaría mucho mejor aún en un espacio vacío”.

Es precisamente el aire el que le permite a la paloma vencer esa resistencia y volar. Son las restricciones lo que favorece y posibilita la creación al diseñador.

Este puede soñar con la absoluta libertad, con un mundo sin limitaciones, pero eso, si fuera posible, sería arte, no diseño.

Las restricciones son un desafío que fuerza y estimula a crear, a generar propuestas que superen las limitaciones, a resolver y superar esos problemas.

Acepta los desafíos, supera las limitaciones (aunque sean de usabilidad), que diría Kant.

Etiquetas: diseño, usabilidad

10 comentarios, participa y escribe otro