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…)

RIA (Rich Internet Applications) usability heuristics

This time, the proposal is for a set of usability heuristics specifically compiled for rich internet applications (RIA), whose interfaces currently lack a standard set of principles or best practices.

RIA (Rich Internet Applications) technologiesRich Internet applications (RIA) (or ‘web applications’ as opposed to ‘web pages’) are very common nowadays; they may come from a standard web page that has been improved with extra functionalities, or from a desktop application that has been migrated towards a web platform. In any case, there are very few well-established standards for that kind of interfaces.

That’s why I have compiled a list of RIA-specific usability heuristics (or best practices) that may help when it comes time to develop or to evaluate a rich web application. They are not intended to fully cover all the aspects of the application, but to address issues specific of rich web interfaces; these heuristics should be a complement of more general ones.

As with the psychological usability heuristics, they are in the form of a Google Docs spreadsheet to make it easy to download or clone it for your own work.

RIA Usability Heuristics spreadsheet (Google Docs)

These are some of the sources I have used to compile the heuristics (thanks to them!):

What do you think of those heuristics? Do you know any other?

‘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…

Give me back my text labels, GMail!

The new GMail interface includes icons in action buttons instead of old text labels; not a good decision from a usability point of view.

A lot has been written about the new GMail interface; most of it is a matter of opinion, but I’m afraid Google has committed an obvious mistake: using icons (in buttons) that don’t have a clear single meaning.

Let’s take a look at two of the buttons; isn’t this your first guess when you see them?

Guess for two of the buttons in new Gmail interface: download? important? 

Wrong. The real functions of those buttons are:

Real meaning of the icons: archive and spam. 

Using fancy original self-designed icons is a common mistake made by novice interface designers; icons are hard to memorize, and users usually recognize just a few of the most common. Many times, the best way to describe a function is simply a text label.

I’m surprised Google has fallen into that error; maybe they have been paying too much attention to people complaining about their ugly interfaces. Anyway, Google, please, give me back my text labels for actions!

Sistemas de autenticación y autorización en Internet

Informe en el que se estudian y comparan los diferentes sistemas de autenticación y autorización existentes en Internet: OpenID, OAuth, etc.

Con la proliferación de servicios en Internet, especialmente los relacionados con redes sociales, el problema de la multitud de sistemas de autenticación de usuarios y de acceso a los recursos y datos personales se hace cada vez más importante. En este trabajo se describen y discuten los principales estándares y protocolos de autenticación y autorización en Internet utilizados en la actualidad, no tanto desde un punto de vista técnico de funcionamiento de los protocolos (su especificación y documentación relacionada está disponible en la red), sino desde la perspectiva de los usuarios finales de esos servicios.

Sistemas de Autenticación y Autorización en Internet (PDF; 1,30MB)

Este estudio fue realizado para el Máster en Interacción Persona-Ordenador de la Universitat de Lleida.

Para empezar, se distingue entre autenticación y autorización:

Autenticación: consiste en un sistema para certificar que el usuario es quien dice ser.

Autorización: consiste en dar acceso a una serie de recursos a un usuario o sistema […] la autorización que un usuario proporciona sobre sus recursos en un determinado sistema para que un tercer sistema tenga acceso a ellos.

(more…)

Research Without Walls

Members of the research community have now a way of pledging to assist only for congresses and journals that make their publications available on the web for free. Researches from institutions like Google, Microsoft and important universities have already subscribed.

‘Investigación sin paredes’, en español.

When you enter the academic world, you realize of one surprising thing: it’s a rather opaque world. In fact, many of the most prestigious journals make their publications only available to subscripters, so the only part that is available on the web for free are their abstracts.

So in the era of Internet and free access to information, scientific knowledge obtained through research (which should be the paradigm of free access to knowledge) depends mostly on an previous outlay.

At least until now. The Research Without Walls movement allows the research community to pledge to assist in the peer review process only for conferences and journals that make their accepted publications available to the public for free via the web.

Pledge form at 'Research Without Walls' 

Right now, the number of subscribers is not very large, but the list of institutions they belong to is pretty impressive: Google, Microsoft, Berkeley University, etc. And their prestige is important, since the reputation of conferences and journals is mostly determined by the researches that assist in them. The fact that they refuse to collaborate with closed-access publications may be a great boost to the free access to academic contents on the web.