La página actual de error muestra un campo de búsqueda que contiene las palabras ingresadas en la URL después del dominio principal y un enlace a la página principal del blog.

Un detalle de usabilidad que muestra que Blogger quiere empezar a cambiar varias cosas que no funcionan desde hace tiempo.

Una forma sencilla de solucionarlo y mejorar con ello la experiencia del usuario es con jQuery:

Solución sencilla

En el header de la página se agrega el script que hará el efecto:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js" type="text/javascript"></script>

<script type="text/javascript">
$(document).ready(function() {
	$('#arriba').click(function(){ //Id del elemento cliqueable
		$('html, body').animate({scrollTop:0}, 'slow');
		return false;
	});
});
</script>

Y el enlace que envía al usuario arriba es:

<a href='#' id='arriba'>Volver arriba &uarr;</a>

Solución completa

Una solución más completa y personalizada se consigue con plugins como:

• Smooth-scroll.
• ScrollTo.
• jQuery.ScrollTo.

Los plugins son más robustos, así que valen la pena solo si hace mucho uso de anclas en una página y estas son claves en la navegación. Recordar que usar estas soluciones con jQuey se justifican si la librería se usa en la solución de otros problemas, de otro modo, una solución basada en javascript "puro" sería más viable.

Personalmente, creo que hay que anteponer la usabilidad al atractivo. Un diseño atractivo que sacrifica la usabilidad impacta mucho en un primer momento, pero luego la dificultad para moverse por el sitio es muy posible que haga “salir por piernas” a tus visitantes. Si hay que sacrificar algo, que sea el diseño. Claro que lo ideal es equilibrar ambas cosas.

Uno de los elementos que más quebraderos de cabeza puede traer es el de la letra: su tipo y su tamaño es muy determinante tanto para el diseño como para la usabilidad. Rastreando entre los posts que voy almacenando en FeedDemon, doy con este de Cosas Sencillas que enlaza a otro de AprendiendoWeb: Relativa facilidad de lectura, por qué usar un font-size de 16px. A su vez, éste proviene de otro de Information Architects: The 100% Easy-2-Read Standard.

Lo que se propone en todos estos posts es el uso de un tamaño de 16px para la letra de los blogs. Una de las razones que se exponen es la de la equivalencia de los 16px en pantalla a una letra de 11 pt. en impreso. Más allá de que esta equivalencia sea así (en los tres blogs se muestra una imagen comparando ambas cosas), lo cierto es que una letra de tamaño grande hace, sin ninguna duda, más fácil de leer el contenido de un post… y más difícil de diseñar el continente.

Échale un vistazo a los posts. Las consideraciones y consejos que manejan son muy dignos de tomarse en cuenta. Sin embargo, lo más importante es considerar el contenido mayoritario que piensas publicar. Si te vas a enfocar más en la imagen (fotos, dibujos, vídeos), mejor será usar un tamaño de letra mediano tirando a pequeño. Sin embargo, si te vas a enfocar en contenidos de texto, el tamaño grande (aunque en CSS 16px equivale a “medium”) puede resultar mucho más cómodo para tus lectores. En caso de que desees probar diferentes tamaños, no te olvides que las dimensiones absolutas (en pixeles, por ejemplo) se ven de otra manera en resoluciones diferentes.

Como en muchos casos dentro del diseño web, estamos ante un asunto que genera opiniones contrapuestas, bien argumentadas en algunas ocasiones. ¿Cuál es la tuya? ¿Qué tamaño prefieres para tu blog o para aquellos que lees?

Foto: _Nec

• Revisión del código XHTML (eXtensible Hypertext Markup Language)
• Revisión de estilos y CSS (Cascading Style Sheets)
• Revisión de imágenes
• Revisión de idioma
• Revisión de color
• Revisión automática con TAW (Test de accesibilidad web)
• Revisión en distintos navegadores, resoluciones y dispositivos
• Revisión de abreviaturas y acrónimos
• Revisión de la navegación semántica
• Revisión de los scripts

Puedes leer la revisión en su artículo Más accesible a pesar de Blogger (I).

Hace ya un buen tiempo les comentamos les hablamos sobre la Guía de desarrollo web del Gobierno Chileno, una guía muy completa sobre como iniciar, estandarizar y mejorar un sitio web. Esta enfocado a los sitios web oficiales del gobierno de Chile, pero sin ningún problema podemos aplicarla a nuestros sitios. El contenido de la guía se divide en los siguientes capítulos:

1. Introducción.
2. Normas que rigen los Sitios Web.
3. Aplicación de Estándares.
4. Diseño de Interfaces e Interacción.
5. Cómo se llega al Sitio Web.
6. De la Usabilidad a la Utilidad.

Esta obra se distribuye bajo licencia Creative Commons y podemos descargarla en PDF (4.5 MB) o consultar la versión HTML desde el sitio oficial.

Sitio: guiaweb.gob.cl

Aquí trasnscribimos 8 de ellas, que atendiéndolas pueden darle un empujón a la atención que los visitantes prestan a lo que ofreces en tu blog.

1. Los usuarios se fijan en la parte superior izquierda de la pantalla y posteriormente en la zona superior de la misma, para después fijar su atención progresivamente hacia abajo y hacia la derecha.
2. Los usuarios se fijan más en los números escritos con números que con texto
3. El tamaño del texto influye en la conducta de los usuarios, de tal forma que el texto grande invita a escanear la página y el texto pequeño invita a leerlo.
4. Los párrafos cortos son más adecuados que los largos.
5. La publicidad situada en la parte superior izquierda es la que recibe mayor atención visual.
6. Las imágenes con caras son las que atraen más fijación de la mirada.
7. Los listados aumentan la atención visual del usuario.
8. El espacio en blanco es nuestro amigo.

Y para apuntalar el artículo incluimos un video que en 55 segundos nos muestra el seguimiento que hace la vista sobre diversas imágenes presentadas en la pantalla, prueba realizada por el Laboratorio Aragonés de Usabilidad.