Una nueva portada y dos técnicas útiles: ‘responsive design’ y ‘unobtrusive JavaScript’

Para la nueva portada del sitio web he utilizado dos técnicas que deberían ser conocidas por cualquiera que se dedique al diseño de webs.

He dedicado los últimos días a crear una nueva home para este mi sitio web personal con el objetivo de simplificar un tanto su contenido y clasificar la información disponible en tres grandes grupos: quién soy, qué hago, y qué escribo. También quería que su diseño reflejara en cierto modo a lo que me dedico, dándole un aspecto parecido al de un boceto o prototipo.

Nuevo aspecto de la home de jordisan.net

Sin embargo, la parte más interesante del nuevo diseño ha sido la posibilidad de utilizardos técnicas que facilitan que la página sea usable y accesible para el máximo número posible de usuarios: ‘responsive design’ y ‘unobtrusive JavaScript’.

(more…)

Epicurious: evaluando una aplicación para smartphones

Las evaluaciones de usabilidad no son únicamente para páginas web; esta presentación es un ejemplo de una evaluación rápida realizada sobre una aplicación para smartphones.

La aplicación evaluada es Epicurious para Android, que permite acceder a una gran cantidad de recetas disponibles en su sitio web desde un dispositivo móvil.

Estas son las secciones de la presentación:

  • Introducción
  • Estructura y funcionalidades
  • Interacción
  • Puntos fuertes
  • Puntos débiles
  • Posibles mejoras
  • Líneas de trabajo propuestas
  • Conclusiones
  

Lo más interesante no es tanto la aplicación en sí, sino comprobar que una evaluación de usabilidad puede aplicarse perfectamente a cualquier interfaz, no solo a sitios web. Y que lo mismo ocurre con las técnicas de Diseño Centrado en el Usuario.

Usabilidad en formularios de contacto: el caso de Jazztel

El formulario de contacto de Jazztel sirve como ejemplo de los problemas de usabilidad que podemos encontrar en las páginas de ese tipo, por sencillas que parezcan.

El formulario de contacto de un sitio web tiene características que lo diferencian del resto de páginas. Para empezar, se exige un esfuerzo extra al usuario que debe rellenar los campos del formulario, un trabajo (tanto físico como mental) mucho mayor que una simple navegación; además, la actitud del usuario hacia el sistema en ese momento es, probablemente, lejos de ser neutra: puede tratarse de alguien enfadado queriendo notificar una queja, o alguien enviando una sugerencia para mejorar el funcionamiento del sitio web. En cualquier caso, es muy deseable poner los mínimos obstáculos posibles entre la intención inicial del usuario y el envío efectivo del formulario.

Con todo eso, ¿qué problemas puede tener el diseño de un formulario de contacto? Se incluyen los campos para la información que se desea, un botón de enviar, y ¡listos! ¿No es así? Desgraciadamente (o por fortuna), el diablo está en los detalles, algo que es muy cierto en el diseño de interfaces.

Como ejemplo, veamos el formulario de contacto (“hogar”) en la web de Jazztel:

Errores de usabilidad en el formulario de contacto de Jazztel

(more…)

‘El botón de los 300 millones de dólares’, en VLCTESTING

Resumen de la charla sobre usabilidad dentro de VLCTESTING 2011, un evento sobre calidad y testeo de software que ha tenido lugar en Valencia.

El pasado jueves, 10 de noviembre, tuve ocasión de dar una charla titulada ‘El botón de los 300 millones de dólares. Qué es la usabilidad, y por qué debo preocuparme por ella.‘ dentro de VLCTESTING 2011, una jornada sobre calidad y testeo de software organizada por el ITI en Valencia. En el enlace tenéis un resumen de lo tratado y las diapositivas (PDF) utilizadas para la presentación.

Imagen de VLCTESTINGLa charla toma el título de un artículo de Jared Spool en el que explica el caso de un pequeño rediseño en un formulario de pago (básicamente, modificando un botón) que supuso un beneficio extra de 300 millones de dólares anuales para la empresa. Tomando eso como referencia, la presentación empieza por una pequeña introducción a lo que es la usabilidad, para después mostrar algunas cifras y casos concretos que sirven de ejemplo de la rentabilidad de invertir en usabilidad, y dar un par de consejos sobre cómo conseguirla; se incluye también una pequeña referencia a la accesibilidad web y una breve reflexión final.

¿Estás seguro de que tu producto o sitio web no es como uno de estos malos ejemplos de usabilidad? 

Esta intervención contrastó en cierta medida con las del resto de la jornada, dedicada en su mayor parte a las técnicas de pruebas de software y a la gestión de ese tipo de tareas. Es curioso que todo el mundo de la usabilidad (y sus pruebas) sea tan ajeno e independiente al resto de pruebas de software, cuando tienen mucho más en común de lo que pudiera parecer en un principio, y podrían beneficiarse mutuamente si se gestionaran de manear conjunta. Espero escribir sobre eso en algún momento…

Heurísticas de usabilidad psicológicas (artículo en UX Magazine)

Sobre la publicación, en una conocida revista online, de un artículo proponiendo heurísticas de usabilidad basadas en la investigación psicológica.

La popular revista online UX Magazine ha publicado un artículo mío sobre heurísticas de usabilidad psicológicas. El artículo es una adaptación de una entrada reciente de este blog, y ha sido una alegría triple: por la publicación en sí, porque ha sido por iniciativa de la propia revista, y porque es señal de que puede merecer la pena el esfuerzo de escribir en inglés (cosa que empezaba a dudar).

Psychological Usability Heuristics (UX Magazine)

Publicación del artículo en UX Magazine 

Sobre el artículo

Para los que no hayan leído el artículo (o tengan alguna dificultad con el inglés), en él se propone tomar como referencia una lista de hallazgos psicológicos relacionados con el diseño de interfaces recopilados por Susan Weinschenk, y convertirlos en principios que pueden ser utilizados a la hora de realizar evaluaciones heurísticas de usabilidad. Se incluye también una hoja de cálculo que facilitaría su uso en evaluaciones reales.

En busca del Diseño Centrado en el Usuario

La revista NSU ha publicado un artículo sobre el Diseño Centrado en el Usuario que incluye tanto definiciones habituales de DCU como una propuesta para definir un conjunto básico de técnicas para llevarlo a la práctica.

Recién llegado de las vacaciones, he recibido la buena noticia de que la revista online No Solo Usabilidad ha publicado mi artículo titulado “En busca del Diseño Centrado en el Usuario (DCU): definiciones, técnicas y una propuesta”.

Portada de 'No Solo Usabilidad', con el artículo en portada. 

El artículo trata, básicamente, de exponer las definiciones más habituales de Diseño Centrado en el Usuario (DCU) para concluir que no existe un consenso sobre qué es exactamente el DCU (o, como ya escribía en este blog, ¿existe el DCU?). Habitualmente se considera el DCU, bien como una filosofía de diseño, bien como un conjunto de técnicas o herramientas; pero tampoco existe un acuerdo sobre cuáles son esas técnicas. Eso hace difícil aplicarlo en la realidad.

Si bien hemos visto que las definiciones de DCU son bastante diversas, puede decirse que son compatibles entre sí, y de ellas podemos extraer algunas características comunes que deberían formar parte de una definición canónica del DCU:

  • Está orientado a los usuarios del producto, que participan durante todo el proceso.
  • A pesar de denominarse “diseño”, en realidad se aplica durante todas las fases del desarrollo (planificación, diseño, desarrollo, evaluación), desde las primeras etapas.
  • Es iterativo.
  • Es multidisciplinar.
  • Su objetivo es obtener productos usables y satisfactorios para los usuarios.

(more…)

Pequeñas sugerencias de diseño para Softonic

Algunas pequeñas recomendaciones de rediseño para la popular página de descargas de software.

Softonic es el portal líder de descargas de software en Europa y uno de los más importantes en todo el mundo; con un volumen aproximado de un millón y medio de descargas diarias, no cabe duda de que el diseño de sus páginas cumple sus objetivos de manera correcta. Eso no quiere decir que no sea mejorable; de hecho, creo que hay algunos pequeños cambios que podrían hacer aún más eficiente la acción de descarga de software desde sus páginas.

Tomemos, por ejemplo, la página de descarga del antivirus avast!:

Página de descarga de Softonic (antivirus avast!)

La página cumple bien sus objetivos, destacando la opción más importante (“Descargar”) y ofreciendo información adicional que puede resultar útil al usuario interesado; sin embargo, estas son algunas posibles debilidades de la página:

(more…)

Recorridos cognitivos en vez de evaluaciones heurísticas

Como técnica de usabilidad, la evaluación heurística es más popular que alguna otra parecida como es el recorrido cognitivo; sin embargo, es posible que esta última técnica sea más beneficiosa y utilizada de lo que a priori pudiera parecer.

Hace algún tiempo que tenía previsto escribir sobre dos técnicas de evaluación de usabilidad: la “evaluación heurística” (heuristic evaluation) y el “recorrido cognitivo” (cognitive walkthrough). Sin embargo, Jeff Sauro se me ha adelantado y lo ha hecho en su muy recomendable artículo What’s the difference between a Heuristic Evaluation and a Cognitive Walkthrough?

Haciendo un resumen muy breve, ambos métodos son realizados por expertos, sin la intervención de usuarios, y están orientados a encontrar problemas de usabilidad; en la evaluación heurística el experto se basa en una serie de principios y buenas prácticas (las heurísticas) mientras que en el recorrido cognitivo el experto detecta los problemas a medida que hace una simulación de la ejecución de las tareas como si fuera un usuario.

En la práctica creo que el recorrido cognitivo tiene importantes ventajas:

  • está basado y obliga a definir las tareas más importantes de la aplicación;
  • la situación del experto suele ser similar a la del usuario enfrentándose a la interfaz.

Eso hace que los problemas detectados sean habitualmente problemas realmente relevantes. En cambio, en una evaluación heurística, al estar basada de hecho en un checklist, puede que no se siga el mismo flujo de interacción que el usuario (el comportamiento del experto es menos real), y se corre el riesgo de reportar problemas menores y pasar por alto los realmente importantes.

De manera similar a Jeff Sauro, creo que los principios heurísticos pueden complementar al recorrido cognitivo para detectar problemas adicionales después de haber realizado el recorrido, y también para clasificar los problemas detectados.

Evaluación heurística, ¿técnica objetiva?

¿Por qué entonces es mucho más popular la evaluación heurística que el recorrido cognitivo como técnica de usabilidad? Quizás porque está basada, al menos en teoría, en unos principios generales y objetivos, lo que debería reducir la subjetividad de la técnica. Sin embargo, en la práctica esos principios generales no suelen funcionar, y el resultado de cualquier técnica de revisión de usabilidad (incluida la evaluación heurística) va a depender en gran medida de la pericia y conocimientos del experto evaluador.

De hecho, tengo la impresión de que muchos expertos y empresas que, por costumbre o imitación, afirman realizar evaluaciones heurísticas, llevan a cabo realmente recorridos cognitivos. Quizás una de las primeras cosas que debiéramos hacer para mejorar la popularidad de los recorridos cognitivos como técnica de usabilidad debiera ser encontrarle un nombre que “venda más”.

Usabilidad y UX son lo mismo. O no.

Usabilidad y UX (User eXperience) son equivalentes o no según cuál sea la definición que elijamos. El debate sobre si son lo mismo o qué es más importante no lleva demasiado lejos.

Después de leer el enésimo artículo sobre la diferencia entre usabilidad y UX (User eXperience), definitivamente creo que estamos dedicando demasiadas energías a una discusión que, en la práctica, no aporta gran cosa a la materia (algo parecido a lo que ocurre con el debate usabilidad vs. accesibilidad).

Para empezar, son dos conceptos que no tienen una definición única; podemos empezar por la definición de “usabilidad” de ISO 9241:

Usability: the effectiveness, efficiency and satisfaction with which specified users achieve specified goals in particular environments. 

(las negritas son mías; luego veremos por qué). Por supuesto, hay muchas otras definiciones de usabilidad, pero probablemente esa es la más extendida.

Todavía menos clara está la definición de “user experience”; tomemos también la de ISO 9241:

User experience: a person’s perceptions and responses that result from the use or anticipated use of a product, system or service

Es un concepto difuso que hace referencia a la percepción del usuario del uso de un producto, sus emociones, sus sensaciones usándolo… Nadie puede discutir que eso es lo realmente importante, porque no solo queremos que nuestros productos sean efectivos y eficientes, sino también que nuestros usuarios los adoren. Pero, un momento… ¿no es eso prácticamente lo mismo que hablar de su satisfacción? ¿Precisamente esa satisfacción que ya está incluida en la definición de usabilidad?

Dos urinarios 'demasiado cerca'¿Poca usabilidad o mala UX? ¿Importa?

(more…)

Más allá del cuchillo de palo (artículo sobre DCU en Interacción 2010)

"En el presente trabajo constatamos la necesidad de disponer de herramientas que integren diferentes técnicas de ingeniería de usabilidad para mejorar su efectividad, y posteriormente presentamos un prototipo de un desarrollo en ese sentido que ha sido utilizado en proyectos reales y que representa un primer paso para la elaboración de herramientas más completas".

Aquí tenéis el contenido de la presentación y el artículo (escrito junto a dos profesoras de la UdL) sobre una herramienta para Diseño Centrado en el Usuario (DCU) con que participé en el pasado congreso Interacción 2010 en Valencia.

“Más allá del cuchillo de palo: hacia una herramienta integrada para un verdadero diseño centrado en el usuario”

artículo (PDF, 525 KB)

presentación (PDF, 845 KB)

(more…)