Problema

Se necesita un sistema que permita orientar al usuario sobre la ubicación de la página que está leyendo en un sitio web, respecto a la estructura de contenidos global. Esta información debe estar disponible en el contexto de la propia página, por lo que el mapa del sitio no soluciona el problema.

Por qué

Normalmente la estructura de navegación de un sitio no otorga información suficiente que permita ubicar precisamente una página dentro del contexto global de los contenidos de un sitio. Cuando el sitio tiene una estructura de contenidos compuesta de múltiples niveles resulta difícil reconocer la ubicación de las páginas interiores respecto a la arquitectura de información del sitio. Este problema se hace más evidente cuando un usuario ingresa al sitio desde páginas interiores, por ejemplo mediante un vínculo en una página de resultados en un buscador, pero es igualmente relevante para los usuarios que navegan el sitio de modo convencional.

Cuándo

Cuando la estructura de contenidos de un sitio presenta una profundidad mayor a dos niveles y resulta necesario entregar un refuerzo sobre la ubicación de la página respecto a la estructura de contenidos del sitio.

Solución

Proveer un sistema jerarquizado de vínculos a las secciones o páginas padre desde la página actual hasta la portada. El sistema debe:

• Representar claramente la jerarquía descendente hasta la página
• Utilizar un elemento separador que refuerce esa jerarquía entre cada vínculo
• Estar orientado de izquierda a derecha y en la parte superior de la página, normalmente bajo el encabezado de la página y sobre los contenidos.

Ocasionalmente se observa el uso de textos como Usted está en: para reforzar la funcionalidad ubicación de este elemento.

Ejemplos

Observaciones

Es preciso hacer notar que el nombre en inglés, breadcrumbs así como la traducción de menú de rastros resulta confuso, dado que el objetivo de este patrón no es informar sobre la ruta de navegación que ha seguido el usuario para llegar a la página en cuestión, sino que informar sobre la ubicación de la página en el contexto de la estructura de contenidos del sitio.

Esto último incluso nos lleva un poco más lejos: en un sitio con una cantidad importante de contenidos, la arquitectura de información no necesariamente reflejará la estructura de navegación. La clasificación de los contenidos puede generar una estructura que no se refleje fielmente en el menú de navegación, por cuanto éste estará compuesto por categorías de navegación que idealmente contendrá accesos directo a zonas de interés específico en el sitio. La decisión entonces es ¿usar categorías de navegación o la clasificación de los contenidos del sitio? Creo que se debería utilizar la clasificación de contenidos del sitio, así como en el mapa del sitio.

Cabe también citar el ejemplo que presenta Jesús Carreras del uso para representar navegación en Tipos de Breadcrumbs, o cómo orientar al usuario, aunque personalmente no estoy consciente de haber encontrado otros ejemplos similares.

Referencias

• http://www.welie.com/patterns/showPattern.php?patternID=crumbs
• http://www.visiblearea.com/cgi-bin/twiki/view/Patterns/Homeward_path
• Tipos de Breadcrumbs, o cómo orientar al usuario

Los logos y marcas que aparecen en esta página son propiedad de sus respectivos dueños. Las capturas de pantalla de sitios de terceros se presentan para efectos ilustrativos y no representan vinculación, aprobación ni otro tipo de relación.

En un Alertbox reciente, Nielsen evidencia la importancia de los estándares en el diseño web:

Users expect 77% of the simpler Web design elements to behave in a certain way. Unfortunately, confusion reigns for many higher-level design issues.

Los estándares se refieren a elementos o funcionalidades comunes utilizados frecuentemente y que por la exposición, uso y finalmente acostumbramiento, los usuarios terminan identificando y utilizando de modo espontáneo, asumiendo naturalmente sus características. Por el contrario, cuando un usuario espera que algo opere de un modo específico y esto no ocurre, se genera confusión y pérdida de confianza.

Estos estándares y convenciones constituyen patrones de diseño, que contribuyen a la generación de modelos mentales respecto a elementos específicos o incluso a tipos de sitios en general. La importancia de los patrones radica en la automatización del uso de las interfaces e interacciones, lo que simplica la realización de tareas y permite que el usuario se concentre en los aspectos más importantes, más que en resolver cómo resolver los problemas más básicos, como lograr completar correctamente una tarea específica.

Como indica Nielsen en el artículo antes citado, el uso de estándares o patrones garantiza que los usuarios se sentirán en control, sabrán qué esperar de una tarea particular, se sentirán cómodos y utilizarán de un modo más apropiado un sitio web.

La lógica detrás de un patrón de interacción está dada por la construcción de modelos mentales, que nos permiten identificar y reconocer fácilmente aquellos elementos que hemos aprendido y asociado a través de la experiencia. En la medida que este proceso se concreta, se eliminan una serie de factores innecesarios, asociados a procesos congnitivos que se traducen en que nos enfrentamos a esquemas similares, conocidos, de resolver un problema. Este proceso nos permite pasar de un mecanismo que podría tomas algunos segundos, a un reconocimiento que ocurre en fracciones de segundos. Esto no es irrelevente si pensamos en que estos segundos de diferencia, y la calidad de la experiencia que ellos constituyen, tienen una relación directa con el éxito de una venta en linea, el envío correcto de un mensaje de contacto para un potencial negocio, la venta de una suscripción para un medio de noticias, etc.

Los patrones en el diseño web son precisamente uno de los aspectos que me interesa cubrir y explorar en EFH. Si el tiempo me acompaña, espero pronto comenzar a publicar temas relacionados con estos patrones. Mientran eso ocurre, los dejo con un conjunto interesante de sitios dedicados a la exploración de patrones en el web:

• Web Design patterns, colección de patrones de Martijn van Welie.
• the Diemen Repository of Interaction Design Patterns, Wiki sobre patrones de interacción.
• UI Patterns and Techniques, colección de patrones de Jenifer Tidwell.
• Widgetopia, proyecto de Christina Wodtke, que aunque no está orientado específicamente a patrones, ofrece interesantes muestras de uso de elementos de interfaz.

Uno de los aspectos más importantes de la separación de contenido y presentación mediante el uso correcto de HTML, es la descripción semántica del contenido mediante elementos con valor propio. De este modo el contenido gana una nueva dimensión.

El uso apropiado de HTML para marcar los contenidos nos permite asignarle un valor especial a cada elemento, que lo contextualiza, le asigna jerarquía y lo describe. Un ejemplo típico es el de los títulos: el apropiado uso de h1 nos indica explícitamente que lo que está contenido en este elemento es un título de primer nivel, que la página trata sobre este tema. Luego, un h2 nos dirá que este contenido es importante, aunque no tanto como el h1. Así, prácticamente todos los elementos presentes ya en XHTML tienen un valor semántico específico.

En este contexto, CSS nos permite modificar la apariencia de cada elemento, sin necesidad de contaminar el contenido con elementos presentacionales. Esto lo hacemos mediante una serie de recursos, aunque los más comunes por el soporte existente actualmente son los siguientes:

• Selectores de elementos
• Selectores contextuales
• Selectores de ID
• Selectores de clases

La forma más pura de modificar la presentación sin alterar en lo más mínimo el HTML es a través de los selectores de elementos. Para especificar reglas para el cuerpo del documento, por ejemplo los márgenes, usaremos body { margin: 10px; }.

Los selectores contextuales nos permitirán referirnos a elementos según su ubicación o contexto. Por ejemplo, para modificar el color a los vínculos que se encuentren exclusivamente dentro de un párrafo, usaremos:p a { color: #0000FF; }

Un elemento que declare el atributo id podrá ser referenciado mediante el valor de éste. Por ejemplo, un div id="menu" será afectado por una regla como #menu { display: block; }.

Es común que utilicemos el atributo id para identificar de modo único a un elemento dentro de un documento y esto es totalmente legítimo. Pero cuando comenzamos a hablar del último recurso que mencionamos antes, el atributo class, nos acercamos a tres de los problemas más comunes al trabajar con CSS. Me refiero primero a su uso para reemplazar la función de elementos legítimos de HTML. Un ejemplo clásico es usar engendros como <p class="titulo">. Esto es un error serio porque al reemplazar la función de un elemento perfectamente legítimo, como h1, por p class="titulo", estamos perdiendo la calidad semántica inherente al elemento h1: p class="titulo" no significa nada más que esto es un párrafo, no se entiende de ningún modo que tratamos de crear un título, en consecuencia, esto afectará a los robots y a los indexadores de los buscadores como Google que no podrán comprender la supuesta estructura que acabamos de crear. Esto finalmente nos creará problemas de indexación y malos resultados en los buscadores.

El segundo problema común que se comete al usar CSS es usar clases con un valor descriptivo visual específico, como class="izquierda", class="verde" o class="grande". El error aquí se produce porque aún no se logra generar la separación mental entre contenido y presentación. Las clases deberían llamarse según la función o contenido que describen. Si por class="izquierda" nos referimos a un grupo de vínculos que mostraremos como una columna a la izquierda, como un menú de navegación contextual o secundario, entonces usemos class="menu-navegacion". El problema práctico fundamental que ocurre en estos casos es que cuando nos enfrentemos a un rediseño de la presentación del sitio, es muy posible que el elemento con class="izquierda" termine arriba, abajo o a la derecha y la clase no tenga ninguna relación con el nuevo diseño.

Finalmente, el otro problema común es la clasitis, o la utilización en exceso de clases. En muchos casos se recurre a un uso exagerado de clases cuando es perfectamente posible utilizar selectores contextuales, de elementos o una combinación de selectores que no alteren el HTML. Nuevamente es necesario recordar que CSS debería utilizarse para separar la presentación del contenido. Con el soporte actual de selectores en los browsers más utilizados (si aún no queda claro, me refiero a IE), tarde o temprano recurriremos al uso de alguna clase que con un soporte completo de CSS sería innecesario usar. Pero la idea es reducir al mínimo la intervención del HTML. Para esto, una buena planificación de la estructura de nuestros documentos es esencial.

Hemos cubierto algunos de los problemas más comunes en el uso de CSS que de un modo u otro afectan al HTML de un documento y con esto al valor semántico de sus elementos. Para quienes ya han dado el paso de asumir el uso de estándares con la combinación de HTML y CSS, espero que estos detalles contribuyan a mejorar la estructuración de los documentos con todos los beneficios que esto conlleva. Para quienes están comenzando el camino, bienvenidos, espero que esto les ayude a evitar algunos de los problemas más frecuentes.