Elementos del Diseño de Interfaces e Interacción

Elementos del Diseño de Interfaces e Interacción
 
-A +A

Sistema de Navegación

Se denomina "sistema de navegación" al conjunto de elementos presente en cada una de las pantallas, que permite a un usuario moverse por las diferentes secciones de un Sitio Web y retornar hasta la portada, sin sentir la sensación de haberse perdido en ese camino.

Para conseguir este objetivo el diseño web debe contemplar, al menos, que el sistema de navegación cuente con los siguientes elementos:

    • Menú de secciones: es una zona de la interfaz en la que se detallan las secciones o categorías en las que está dividida la información contenida en el Sitio Web. Normalmente se ubica en la parte superior de cada página o bien en la zona superior derecha o izquierda. Hasta la aparición de los últimos estudios basados en "eyetracking" no había una recomendación certera acerca de su ubicación; tras éstos, parece indicado ubicarlos en la zona superior o en la zona superior izquierda.
Icono con el símbolo de información adicionalEyetracking: sistema de comprobación de usabilidad que permite identificar, usando un dispositivo de detección de miradas, lo qué está efectivamente viendo un usuario que interactúa con una pantalla.
  • Menú de rastros: es el menú que indica mediante los nombres de cada sección o categoría del menú, la distancia que separa a la página actual de la portada. Por ejemplo, si el usuario está revisando la página del "Programa A", el menú correspondiente debe indicar Portada > Programas > "Programa A". Este menú debe ir siempre debajo de la Identificación de la sección o categoría y sobre el título.
  • Identificación de secciones: debe estar en la zona superior de la página, de manera cercana la zona donde se encuentra el logotipo que se haya elegido para identificar al Sitio Web. Puede ser gráfico y por lo mismo tener alguna imagen alusiva a la sección o categoría o bien ser una solución que incorpore sólo texto y color. Sí debe tener en forma destacada el nombre de la sección o categoría y por lo mismo, debe aparecer en todas las pantallas que pertenezcan a dicha ésta. En términos de tamaño, su ancho debe ser el de la zona de contenido y su alto, no menor a 100 pixeles (aproximado) para una adecuada visualización.
  • Botones de acción: son aquellos elementos que permiten realizar acciones directas relativas a la navegación y que se muestran como parte de ésta, tales como los correspondientes a "Regreso a la Portada", "Contacto", "Envío de Mail al Sitio" y "Mapa del Sitio".
  • Pie de página: aunque regularmente no se le concede importancia en términos de navegación, se entiende que la zona inferior de cada pantalla cumple el relevante papel de completar la información que se ofrece en las zonas superiores de navegación, al entregar datos relativos a la organización (nombre, direcciones, teléfonos) y repetir enlaces que se han entregado en la zona superior, para facilitar el contacto del usuario con el sitio.

Áreas de contenidos

Se entiende por "áreas de contenidos" a las zonas en la que se entrega la información en cada página web, sin importar el formato o los medios que ésta utilice.

Dentro de la zona de contenido se debe distinguir las zonas de título, resumen e información propiamente tal.

Para la zona de título, como se especificó previamente en esta versión de la Guía se debe trabajar con las estructuras definidas por las etiquetas <h...> que permiten indicar hasta seis niveles de importancia de los titulares (incluyendo títulos y subtítulos) utilizados en el documento. Es imprescindible para efectos de Accesibilidad por parte de personas con discapacidades físicas, en particular para quienes tienen problemas de visión, que el título principal del contenido se escriba usando la etiqueta HTML conocida como <h1> debido a que los lectores de pantalla usada por personas ciegas lo destacan como el título principal de la página.

El resumen en tanto, permitirá explicar en dos o tres líneas el contenido de la página y se podrá utilizar esa misma información para la etiqueta del encabezado que permite incluir una descripción.

Respecto del contenido o información propiamente tal, se debe privilegiar el uso de textos cortos, separados por subtítulos significativos que permitan entregar de manera concisa y clarea la información al usuario. Se debe recordar que las personas no leen en pantalla de la misma forma que en los documentos impresos, por lo que se debe privilegiar la economía de palabras.

Adicionalmente, como parte de los contenidos, siempre se deberá ofrecer información adicional, recursos multimediales y otros que aprovechen el hecho de que el usuario accede a la información a través de un sistema computacional. Nuevamente, se debe recordar que los contenidos que no sean textuales deberán cumplir con las normas de accesibilidad recomendadas por el W3C, las cuales han sido adoptadas por el Gobierno de Chile a través del DS 100-2006.

Áreas de interacción

Se entiende por "áreas de interacción" a las zonas en la que se ofrece realización de acciones por parte de los usuarios del Sitio Web, a través de las cuales pueden utilizar los servicios de la institución que pone en marcha el espacio digital. La interacción, en este sentido, va desde acciones menores que pueden ser enlaces para mayor información o suscripción a servicios informativos periódicos, hasta la realización de trámites complejos como la obtención de certificados o el pago de obligaciones.

Uno de los elementos que se debe tener en cuenta en este aspecto es que el usuario normalmente entiende que las zonas de contenidos son para leer y revisar información y las zonas de interacción son las que muestran botones y en ellas no se lee, sino que se ingresa información y se desarrolla la actividad que el sitio ofrece llevar a cabo.

Por lo mismo, es necesario que en las zonas de interacción haya la mínima información posible y que siempre sea la necesaria para llevar a cabo en forma adecuada la acción a que se refiere la interfaz.

Por ejemplo, debido a que normalmente la interacción tendrá lugar a través de un formulario, es necesario que éste sólo cuente con los datos mínimos para que el usuario ingrese lo solicitado para activarlo. En los siguientes ejemplos se hace un comentario sobre esta forma de trabajo.

Ejemplo 1: la pantalla muestra un sistema de interacción directa a través de un formulario que sólo ofrece información básica, ya que todo está explicado mediante elementos del propio formulario en la página web; el texto, por lo mismo se reduce al mínimo.

El formulario sólo ofrece la información precisa para ser utilizado.

[D] Figura 9. El formulario sólo ofrece la información precisa para ser utilizado.

Ejemplo 2: el formulario contiene mucha información, pero en términos prácticos el usuario no la lee porque está interesado en la acción propuesta en el formulario, que es ingresar RUT y Clave.

El formulario ofrece demasiada información -la cual para efectos demostrativos aparece desenfocada- la que regularmente no es leída.

[D] Figura 10. El formulario ofrece demasiada información -la cual para efectos demostrativos aparece desenfocada- la que regularmente no es leída.

Como se puede apreciar a partir de los ejemplos, es necesario que las zonas de interacción estén diseñadas de manera que privilegien la acción. Si se desea dar información relativa a ésta, debe ofrecerse mediante enlaces relacionados y ubicados en las cercanías y no a través del despliegue de texto en el mismo lugar porque queda claro que éste no será leído.