Para los que necesiten empezar a aprender, el documento que pasamos a continuación introduce algunos de los aspectos importantes. Pero empieza diciendo algo importante: sobre el tema de usabilidad es muy difícil hacer algo nuevo, por lo que es mejor que no pierdas el tiempo inventando, copia de los grandes, que gastan mucho dinero en hacer que sus sitios sean usables.

Entre los consejos que da, trata el tema de los breadcrumbs (barra de navegación), indicando que debe ser la misma que los menús, no debes inventarte una navegación nueva, y que la página actual no debe tener enlace.

Sobre las pestañas indica que debe haber solamente una fila, y en el caso de que haya dos, la segunda debe ser dependiente de la primera (tipo submenús) y quedar diferenciadas en el diseño (por ejemplo con distintos colores).

De los enlaces dice que lo mejor es seguir los estándares, que sean azules y subrayados y que los enlaces visitados también se diferencien. Aunque si no lo quieres hacer así (lo más normal), deben ser claramente diferenciables del texto normal y si se usan imágenes, que estas cambien al pasar el ratón sobre ellas.

De los servicios que acortan URLs no habla demasiado bien, pero yo creo que su uso es muy correcto en determinados escenarios, sobre todo si el enlace solo se usa para ir a un contenido que se ha descrito anteriormente.

En resumen, un documento muy interesante para ir empezando con la usabilidad.

Introduction to Good Usability

Vía / Css Globe

• Cuanta más interacción se necesite para realizar una tarea, más difícil se vuelve: cuando se necesite realizar una acción hay que evitar pedir todas las posibles características de la acción, simplemente pide lo estrictamente necesario. Por ejemplo, un buscador, puedes pedir que te ofrezcan la categoría, el número de resultados, el criterio de orden, ... o simplemente pedir la palabra a buscar y si se quiere ofrecer una búsqueda avanzada para quien quiera refinar la búsqueda.
• Cuanto mayor tiempo de concentración se necesite para realizar una tarea, menor es la usabilidad: intenta que la aplicación responda lo más rápido posible para que el usuario mantenga su atención.
• Cuanto más tenga que trabajar el usuario, menos efectiva es la interfaz: lo que nos lleva a otro punto, haz la interfaz intuitiva.
• No vayas en contra de lo que espera el usuario: el usuario está acostumbrado a una serie de herramientas: botón para volver, recargar, ... Diseña la aplicación teniendo en cuenta que el usuario está acostumbrado a algo y es lo que espera encontrar. El mal uso de Ajax a veces va en contra de esta premisa.
• Las páginas de error no gustan: nada es peor que mostrar uno o dos errores al usuario al mismo tiempo.
• Permite al usuario modificar la interfaz: a todo el mundo le gusta modificar los colores y el aspecto del entorno de trabajo. Que la gente se sienta cómodo con los colores es también algo a tener en cuenta.
• No esperes que los usuarios lean las instrucciones: debido a ello, la interfaz debe ser lo más parecido a lo que se está acostumbrado, para que cuando se encuentren con lo que tienen que hacer sea igual o muy parecido que lo de siempre.
• Mantén al usuario libre de errores: por ejemplo, una página 404 no dice nada, en vez de ello ofrece alternativas.

5 (+3) tips to increase web application usability

Vía / dzone

El objetivo del usuario cuando va al historial se podría resumir en algo como: "Yo vi algo en algún sitio hace poco y quiero volver ahí". Lo que normalmente hacemos para volver a encontrar esa información es ir al sitio donde lo vimos y recrear las acciones realizadas para volver a encontrar la información: esto suele ser más sencillo y rápido que usar el historial del navegador.

El problema es que el historial funciona mostrando una lista de titulos de páginas, además ordenados por orden alfabético y casi nadie se fija en el título de una página que, además, suele ser poco descriptivo.

Sin embargo hay elementos de la interacción con el navegador que son más fáciles de recordar:

• Acciones específicas que hizo: recordamos más facilmente lo que hemos hecho que dónde hemos estado. Por ejemplo: yo busqué tal palabra, guardé tal sitio en mis favoritos o ví el enlace en tal blog.
• El aspecto del sitio donde estuvimos: la ciencia cognitiva ha demostrado repetidamente que somos mucho mejores recordando imágenes que textos, especialmente en tareas de reconocimiento.
• Palabras o frases que leímos
• Cuándo hicimos algo: sabemos que hemos hecho algo hoy, ayer o hace varios días. No sabemos lo que hicimos hace exactamente 5 días o hace 7 días.

En base a estas premisas, algunas hipotéticas, pero muy lógicas, Faaborg hace una propuesta de rediseño del historial que se puede ver en este prototipo:

y que tendría estas características:

• Poder buscar sobre las búsquedas que has realizado
• Estaría organizado sobre segmentos de tiempo y acciones realizadas (buscar, abrir pestaña, pulsar link...). Cada segmento se agruparía sobre la acción que disparó la visualización de una serie concreta de páginas.
• Añadiría al título de la página una imagen en miniatura de la misma.

Una interesante propuesta que es posible que se convierta en una extensión para Firefox del laboratorio de Mozilla

Vía / Blog de Alex Faaborg

Un efecto parecido lo podemos encontrar en periódicos online para mostrar las diferentes secciones que se pueden visitar. Por ejemplo lo podemos ver en elmundo.es (en la cabecera) y en elpais.com (en el pie de página).

Se trata de que cuando se pasa el ratón sobre el link, se muestra un menú con las secciones del periódico (mapa del sitio en nuestro caso).

Como hemos explicado en otras ocasiones de cómo usar Ajax, esta vez vamos a utilizar la librería jQuery para facilitar la labor. El que sea un mapa del sitio es debido a que de cara a SEO los buscadores indexan más facilmente nuestro sitio.

También hemos pensado en la accesibilidad, para ello el enlace nos lleva a una página que muestra el mapa del sitio. Esta página que deberá ser dinámica, lo que hace es incluir en la parte del HTML donde se muestra la información principal (suponiendo que hay navegación y paneles laterales) el contenido de otro archivo, que es el que tiene el mapa del sitio. Este último archivo es el mismo que mediante Ajax se carga en la capa que se muestra en el mouseover del enlace.

Supongamos que tenemos dentro de nuestra página, el enlace en cuestión y una capa que estará oculta inicialmente mediante CSS:

<p><a href="paginasecciones.php" id="secciones">Secciones</a></p>
<div id="marco"></div>

También disponemos de dos páginas, una que muestra el mapa del sitio (secciones.html) y otra que incluye a la primera dentro de su contenido (paginasecciones.php), en cuyo código debería haber la siguiente función:

<?php require('secciones.html'); ?>

Ahora tan solo nos falta en el onload del window añadir la funcionalidad necesaria para ocultar la capa, y añadir al enlace el evento onmouseover para cargar el contenido de la capa y mostrarla cuando se pose el ratón en el enlace, y el evento onmouseout para ocultar la capa cuando salgamos del enlace.

window.onload = function() {
  var obj = $("div#marco");
  obj.hide();

  $("a#secciones").mouseover(
    function() { 
      var capa = $("div#marco");
      // Para evitar recargar la pagica cada vez que se muestra
      if (!capa.attr("cargado")) {
        capa.load("secciones.html");
        capa.attr({cargado: true});
      }
      capa.show().slideDown("slow");
    } );

  $("a#secciones").mouseout(
    function() { 
      var capa = $("div#marco");
      capa.slideUp("slow"); 
    } );
}

El código es muy sencillo, lo único necesario de explicar para entenderlo es lo siguiente:

• Cuando se carga el contenido de la capa, primero se comprueba si existe un atributo propio que hemos añadido a la capa, si no existe ese atributo entonces cargamos el contenido mediante Ajax y luego creamos ese atributo para así no tener que volver a cargar otra vez el contenido cuando pasemos el ratón sobre el enlace.
• La función $ nos permite obtener un elemento HTML, en el caso de $("div#marco") nos devuelve el elemento DIV cuyo id es "marco".
• hide() oculta un elemento HTML.
• show() muestra un elemento.mouseover(funcion) añade la ejecución de la función en el evento mouseover de un elemento.
• mouseout(funcion) añade la ejecución de la función en el evento mouseout de un elemento.
• attr(texto) consulta el valor del atributo pasado como parámetro de un elemento.
• attr(código) añade el atributos y valores a un elemento.
• slideDown despliega una capa hacia abajo.
• slideUp repliega una capa hacia arriba.

Código fuente

El sitio merece una exploración en profunidad pero un primer recorrido ya nos permite ver detalles alentadores:

• Explorador visual de los artículo con zoom
• Filtros de productos por marcas, color, tamaño o precio mediante AJAX (espectacular el de precios)
• Paginación AJAX

Una interfaz de usuario realmente lograda, ejemplo de lo que la web 2.0 está consiguiendo y posiblemente una referencia en patrones de diseño en comercio electrónico.

Una pequeña crítica: se echa de menos un poco de enfoque social; al menos comentarios sobre los productos.

La idea es buena, ya que un impedido visual tendría problemas para reconocer el texto deformado, que ya de por sí nos cuesta reconocer al resto. Pero le encuentro un problema, se supone que el CAPTCHA está hecho para que procesos OCR automáticos, pero o bien se tiene una lista de logotipos enorme, o se podría reconocer la imagen del logo con el nombre correspondiente.

Así, sin pensarlo mucho, se podría hacer la media de cada componente RGB de cada pixel de la imagen para asociarla a cada nombre, claro que si la imagen se cambiara de tamaño o se rotara se evitaría este "ataque", aunque sería ponerse a buscar otro algoritmo más eficiente, que seguro que se pueden encontrar por internet.

ModernCaptcha - when captcha meets usability

Vía / dzone

¿Cómo hacerlo? En Babblative nos enlazan algunos métodos para hacerlo:

Method 1 – Wordpress: Wordpress actually has this feature built-in. WP-List-Pages

Method 2 – PHP: Jem’s Trendy Active CSS Tabs or Matt’s Intelligent Menu’s. I’ve personally had middling success with PHP on a manually maintained site and little success with it on Textpattern.

Method 3 – Textpattern: You can either muck around with multiple templates, which is bloated and unnecessary, or you can use this method. If you choose to use the multiple templates then you’ll need to read how do I use a different page layout for each section?

Method 4 – Manually Maintained Sites: Use Hicksdesigns method to highlighting current page with CSS

Keep Reading: Keeping a ‘current state’ on navigation, Keeping Navigation Current With PHP, EasyNav, Setting the Current Menu State with CSS

Vía / Babblative

Se trata de algo muy vistoso y que cumple bien su objetivo, acceder a lo más importante de forma rápida. El problema está cuando queremos implementar nuestra propia tag cloud (claro, que nos podemos dejar de romper la cabeza y buscar alguien que ya lo haga). Por ejemplo, si la nube tiene scroll, ya sea por la cantidad de tags o por la ventana del usuario, la finalidad de que los más destacados sean los más visibles puede fallar si alguna etiqueta importante queda oculta por el scrolling.

Con este problema y muchos otros se ha encontrado Kevin Hoffman y por ello se ha creado un documento en el que explica cómo resolver esos problemas (o al menos intentarlo).

Whitepaper : In Search of the Perfect Tag Cloud

Via / dzone

En el ejemplo voy a seleccionar una tabla, y modificarla para admitir ordenación por columnas, filtrado mediante expresiones regulares y distinción de filas alternas. Además de incluir un icono en el filtro que indica el estado de filtrado.

Lo primero que debemos hacer es seleccionar la tabla en cuestión y tratarla, modificando la cabecera (th) incluyendo un enlace para poder ejecutar la acción de ordenar, un icono que indica qué columna está ordenada y en qué sentido y una caja de texto para indicar el filtrado.

La caja de texto tiene la particularidad de mostrar un icono que indica el estado del filtro, cuanto más lleno esté de "líquido", más mostrará. Para lo cual usamos una imagen como fondo de la caja de texto e iremos moviendo verticalmente para mostrar los distintos estados.

¿Google quiere dejar de ser feo?. No. Nunca ha sido feo, aunque le ataquen por ahí "pseudo-gurus insulsos" como apunta Armando Sosa. Google ha estado tradicionalmente mal maquetado y ahí Bowman con su experiencia en interfaces sociales, además del talento gráfico ¿por qué negarlo?, al servicio siempre de la "usabilidad Google" encajan a la perfección. Lástima que las tareas de Bowman no incluya la maquetación del buscador.

Siguiendo con la usabilidad...

Este artículo de Don Norman y el más reciente publicado por Derek Powazek en los que critican la usabilidad y el diseño de la home del buscador comparándola con MSN Search y Yahoo solo generan confusión. Joshua Porter repasa los dos textos y aporta opiniones muy interesantes:

The success of Google doesn't come from their sparse homepage, their goofy logo, or by "deception". It comes from the ability to consistently give relevant results to our queries... end of story.

For Google to change its design strategy to satisfy the whim of a few designers would be suicide. It would ignore their amazing success to date, erode the emotional attachment of the people who use it, and start them down the slippery slope of compromising a simple, easy-to-use search engine.

¿Rediseños de la home de Google como el que propuso Andy Rutledge pueden ser un suicidio?. Es más estético. Con niveles de información mejor jerarquizados, pero que a priori, a falta de análisis con usuarios, tendería a la distracción. Principalmente, con los azules de fondo y los contenidos de la parte inferior.

Volviendo al fichaje de Bowman. Una prueba más de que la vanguardia en la industria del diseño web se encuentra en la blogosfera y que las interfaces sociales, en las que por definición pasaremos mayor tiempo navegando, han de ser además de muy eficaces como todas, "enamorar" visualmente.

Dicho esto, sin contenidos no hay diseño pijo que te salve.

Austeridad al estilo Google en esta nueva fase bautizada como Gamma, pero se equivocan. En Flickr se navega interior y jerarquizadamente en el que referencias visuales, como pueden ser diferentes colores de fondo, son efectivas.

Entre las mejoras, ahí sí que han acertado:

• Más protagonismo del buscador y los feeds (grupos incluidos).
• Los sets lo sitúan ahora a la derecha que después de las conclusiones del Eyetrack III, el modelo de plantilla con lateral a la derecha es el que capta con mayor rapidez el contenido principal, en este caso las últimas fotos publicadas.
• Potenciación del Organizr.

Flickr Gamma en la blogosfera:

Más en: Technorati | Agregax

Desde entonces, nos preguntamos por qué los lectores RSS, sobre todo los on line, no incluyen unas líneas de CSS para respetar el posicionamiento de las fotos que incluimos en los posts. Requerería de una estandarización ya usada ampliamente por muchas css blogueras pero no en la de los lectores de feeds.

Con 3 clases sería más que suficiente:

/* --- Img's post -------------------- */

img.left, img.right, img.center {

border: 3px solid #d0dfc3;
padding: 3px
}
img.left { 

float: left; 
margin: 0.5em 1em 0.5em 0;
}
img.right { 

float: right;
margin: 0.5em 0 0.5em 1em;
}
img.center { 

margin: 0 auto 10px auto; 
display: block;
text-align: center
}

Que sepamos, solo Bloglines contempla img.left pero sin preocuparse excesivamente de darle un estilo cuidado.