Exemple de maquetació

Aplicación de criterios de usabilidad en sitios web: consejos y pautas para una correcta interpretación

David Maniega Legarda (dmaniega@uoc.edu)
Técnico webmaster de la Biblioteca Virtual de la UOC
biblioteca@uoc.edu


Índice del documento


Resumen

Ante el gran alud de contenidos que se le ofrecen al usuario en los sitios web, hay que velar cada vez más por el binomio inmediatez-utilidad para poder ser más efectivos y provocar en aquél una satisfacción doble, la práctica por la fácil consecución de sus objetivos y la emocional, siendo esta totalmente subjetiva ya que está íntimamente ligada con la percepción durante el proceso de interacción con el sitio web.

Construir y diseñar un sitio web es una tarea que requiere de una serie de cuidados específicos, a nivel formal, organizativo, visual , de contenidos, etc., y para ello hay que observar una serie de normas básicas enfocadas a la consecución exitosa del mismo. En este artículo abordamos esos cuidados en forma de pautas o criterios que no debemos dejar de lado para ofrecer entornos fáciles de utilizar, prácticos y, sobre todo, pensados para cumplir con las necesidades y expectativas de los usuarios.

Palabras clave

Usabilidad, facilidad de uso, diseño centrado en el usuario (DCU), sitio web, percepción visual, arquitectura de la información, interfaz, contenidos.

volver a inicio


Introducción

A lo largo de la historia la usabilidad ha estado a nuestro lado casi sin percatarnos de ello, al menos conscientemente, teniendo una gran importancia en una innumerable lista de objetos cotidianos que utilizamos sin mayor complicación, casi de forma autómata. Precisamente es aquí donde quiero hacer un énfasis especial, en el concepto implícito "éxito de uso" (causa-efecto) y "usuario" (agente fundamental y centro del proceso creativo), de forma que todo aquello que ha sido adoptado y "usado" de forma fácil, sencilla y sobretodo directa, sigue siendo vigente sin que a menudo reflexionemos el por qué (¿simple aplicación del sentido común?).

Es obvio que para que este éxito de uso, con la consiguiente satisfacción del usuario, sea factible, debemos aportar buenos contenidos y servicios, pero a su vez si éstos no son fáciles de encontrar y usar, la percepción del entorno se tornará negativa, menoscabando la utilidad con la que fueron concebidos y dispuestos al usuario. Es en este punto donde la usabilidad nos servirá para facilitar este cometido.

Sobre usabilidad existen varias definiciones a las que nos podríamos remitir desde la bibliografía especializada, pero de entre todas ellas nos podemos decantar por una de las más escuetas pero eficaces para aplicar de forma directa a una sitio web; es la pronunciada por Steve Krug (2006), maestro de la sencillez, que se refiere a este concepto señalando que no hay que hacer pensar al usuario en su proceso de interacción con una página web, sino que ésta sea tan clara, obvia y fácil de entender, que implique la acción directa y no la pérdida de tiempo en su intento de exploración y comprensión de lo que se le ofrece por pantalla.

Es por tanto fundamental tener en cuenta que una buena usabilidad es aquella que pasa totalmente desapercibida porque el usuario puede entender sin esfuerzo, qué puede hacer, a dónde puede ir y qué le ofrece la página que consulta y, por ende, todo un mismo sitio web, sin esfuerzo, de forma totalmente directa…, fácil de usar. Esta sencillez se traduce directamente en velocidad de acción, de interacción, que es un factor primordial que los usuarios demandan a un sitio web. Si el usuario no es capaz de encontrar lo que busca de forma rápida, automáticamente tendrá una percepción negativa del sitio web, y por este motivo, es tarea de la usabilidad el velar porque todo se comporte como el usuario espera para obtener una experiencia de usuario satisfactoria en el proceso de interacción.

Partiendo de esta filosofía, vamos a proceder a especificar algunas pautas fundamentales que debemos tener en cuenta a la hora de crear páginas web, sentando unas bases genéricas pero fundamentales sobre la usabilidad y sus principios básicos en base a las formulaciones expuestas por expertos como Nielsen (2000) o Krug (2006), añadiendo el punto de vista de Tognazzini1, que enfatiza en los aspectos relacionados directamente con la interfaz en referencia a los procesos de la percepción del usuario y sus consecuencias directas. Para especificar estas diferentes pautas, nos vamos a centrar en cómo podemos diseñar de forma genérica las páginas del sitio y sobre qué elementos hay que hacer énfasis para planificar y presentar correctamente los contenidos.

volver a inicio

Diseño conceptual general de las páginas del sitio web

El diseño de nuestras páginas debe estar abocado a la sencillez para evitar las posibles distracciones que se puedan originar y, para ello, debemos contar igualmente con una arquitectura de la información que lo haga posible, siendo ésta simple, lógica y directa. En base a estos criterios deberemos hacer un especial énfasis en aspectos como:

  1. La estructura global del sitio, diseñada pensando en los contenidos y no en los organigramas o estructuras organizativas.

  2. La navegabilidad, diseñada para ofrecer caminos claros desde el origen al destino, sin terminología compleja y con la misión de orientar al usuario2.

  3. La consistencia, tanto a nivel de contenidos como del formato visual así como la disposición de elementos en las páginas, ofreciendo entornos homogéneos que ayuden a potenciar una comunicación efectiva del mensaje y, a su vez, ayuden al usuario a formarse un modelo mental del sitio.


volver a inicio

Consejos a tener en cuenta

· El factor clave para conseguir un buen diseño es centrarnos en el reconocimiento instantáneo de las cosas para minimizar la curva de aprendizaje de la interfaz y obtener resultados rápidamente. Un sitio web óptimo ha de ser rápido en todas sus vertientes, no sólo técnicamente, sino desde el punto de vista de la interacción. Cuanto más rápido pueda el usuario completar las tareas en base a sus objetivos mejor percepción tendrá sobre el entorno.

· Mantener el diseño en todas las páginas y no crear diferencias significativas entre secciones o apartados. La excepción ha de ser la página de inicio que suele tener un diseño diferente al resto ya que se enfoca como el teórico punto de entrada principal a una sitio web y ha de ofrecer una visión general de qué información y servicios ofrece al usuario, así como ser un punto de partida hacia las estructuras internas, destacando eso sí, accesos directos a primer nivel para aquellos elementos de mayor importancia e interés para el usuario.

· A pesar de que organicemos adecuadamente la información, es fundamental ofrecer al usuario un sistema alternativo al de la navegación para encontrar la información, es decir, necesitamos ofrecer un motor de búsqueda que sea eficaz y mantenga una excelente indización. Por norma general los usuarios esperan encontrar una caja de texto simple en la parte superiorç de la página para ejecutar una búsqueda y habría que conservar ese convencionalismo.

· Debemos mantener una estructura visual constante, donde los diferentes elementos mostrados en la pantalla no varíen en su ubicación entre páginas. El sistema ha de ser consistente y no móvil, ya que sino provocaremos rápidamente una sensación de desorientación e inseguridad en el usuario. Asimismo, siempre hemos de utilizar las mismas referencias iconográficas y/o textuales para representar las mismas acciones a lo largo del sitio web.

· Para obtener un sistema de navegación eficiente, hay que controlar el número de clics que debe hacer el usuario antes de llegar a la información. Cuantos más niveles de profundidad más compleja será nuestra estructura y, por lo tanto, más difícil de entender por parte del usuario. Siguiendo las directrices de Nielsen (2000), el sistema de navegación sólo debe ocupar como máximo el 20% de la pantalla, mientras que los contenidos han de servirse del 80% restante, sin que con ello tendamos hacia el "horror vacui" o abigarramiento de las pantallas. El espacio en blanco no es un enemigo sino un aliado que facilita la comprensión y agrupaciones de elementos que se dispongan en la página.

· Debemos diseñar las páginas del sitio teniendo en cuenta que existen diferentes tipos de resoluciones y configuraciones de pantalla, por lo tanto, la recomendación es hacer diseños líquidos que se amolden al tamaño de ésta de forma automática, sin que ello vaya en detrimento de la disposición de elementos y funcionalidades.

· En cuanto al logotipo de nuestro sitio web, ha de ser lo suficientemente evidente como para identificarlo como tal (hay que recordar que aporta la identidad básica del sitio), y si incluye texto, ha de ser fácilmente legible. Siempre ha de estar ubicado en la parte superior de la página y, preferiblemente, en su parte izquierda.

· Debemos crear una jerarquía visual clara que se repita en cada página, dividiendo las diferentes zonas de la misma de forma definida y constante, eliminando la superposición de elementos del mismo nivel, utilizando convenciones para fortalecer el reconocimiento de los enlementos y dejando claro en todo momento sobre qué componentes podrá el usuario ejercer una acció.

volver a inicio


1 TOGNAZZINI, Bruce. First Principles of Interaction Design.
<http://www.asktog.com/> [Consulta: 9 de octubre de 2006]. Se puede acceder a una versión traducida y adaptada al español en
<http://www.galinus.com/es/articulos/principios-diseno-de-interaccion.htm> [Consulta: 9 de octubre de 2006]
2 De entre los sistemas para orientar al usuario en su navegación, tenemos la opción de crear las secciones llamadas "migas de pan" o breadcrumbs. Esta técnica está encaminada a ofrecer contexto de situación al usuario para determinar su recorrido hasta una ubicación concreta dentro de la página o su situación dentro de una estructura jerárquica del sitio.
En el artículo Tipos de breadcrumb, o cómo orientar al usuario, de Jesús Carreras se nos explica qué tipos de breadcrumbs existen y cuál es su funcionalidad. <http://www.dnxgroup.com/ideas/articulos/tipos_de_breadcrumb.html> [Consulta: 6 de octubre de 2006]