Elementos de los Sistemas de Navegación

Entre los elementos más relevantes que conforman el sistema de navegación se cuentan los siguientes:

Menú General:
siempre presente en todo el sitio, permite el acceso a cada una de las áreas del sitio.
Pie de Página:
usualmente ubicado en la parte inferior de cada página, indica el nombre de la institución, teléfonos, dirección física y de correo electrónico.
Barra Corporativa:
ofrece diversas opciones de información respecto del sitio y tal como el anterior, se muestra en todas las páginas.
Ruta de Acceso:
listado que aparece en la parte superior de cada página y que muestra el trazado de páginas que hay entre la Portada del sitio hasta la página actual que se esté revisando; cada una de ellas debe tener un enlace, para acceder al área de la cual depende la página. Cada uno de los elementos que conforman este camino debe tener un enlace que permita el acceso a esas áreas. En la literatura internacional en inglés sobre este tema, se llama a este elemento como breadcrumbs.
Fecha de publicación:
para saber la vigencia de publicación del contenido desplegado.
Botón Home:
para ir a la portada
Botón Mapa del sitio:
para ver el mapa del Sitio Web
Botón Contacto:
para enviar un mensaje al encargado del sitio (o, de existir, a la OIRS).
Buscador:
presente en cada página si es que la funcionalidad existe en el sitio.
Botón Ayuda:
para recibir ayuda sobre qué hacer en cada pantalla del sitio.
Botón Imprimir:
para imprimir el contenido de la página; se espera que el formato de impresión del documento que se muestra en pantalla sea más simple que la página normal del Sitio Web, para dar la impresión al usuario de que hay una preocupación por ayudarle en la tarea de llevar impreso el contenido.

Definición del Diseño Visual

Una vez que se ha terminado el trabajo en la estructura, ya se cuenta con los insumos suficientes como para avanzar hacia la generación del diseño visual de las pantallas del sitio, momento en que se utilizarán todos los insumos que se han ido generando en las etapas anteriores.

Para ello la recomendación es trabajar en cuatro etapas sucesivas e incrementales, que se describen a continuación:

Diseño de las Estructuras de Páginas

Esta etapa considera la generación de dibujos sólo lineales que describen los componentes de cada una de las pantallas del sitio, con el objetivo de verificar la ubicación de cada uno de ellos.

El ideal es que se dibujen diagramas con todas las pantallas que tendrá el sitio, ya que de esta manera será posible que diseñadores y desarrolladores tengan un documento concreto de trabajo, a través del cual resuelvan todas las dudas de los elementos que componen esta página. Si bien este trabajo es largo y puede resultar tedioso, su ventaja es que ningún elemento en las páginas queda puesto al azar sino que responde a necesidades puntuales que se han detectado y que se resuelven por esta vía.

Nuevamente, tal como se planteó cuando se estaba presentando el tema de Estructura en las páginas anteriores, lo ideal es que estos dibujos no tengan ningún elemento gráfico o visual concreto, sino que sólo incluyan líneas y bloques que representen objetos de contenido (como logos, viñetas o fotos). Nuevamente, como en ese caso, el uso de estas imágenes ayudará a que la discusión sobre cada pantalla se centre en la funcionalidad y no en temas más subjetivos como colores o calidad de los elementos de diseño en la página.

Diagrama de estructura de páginas.

[D] Figura 3: Estructura de páginas (Wireframe).

Un elemento que se debe considerar junto con estos dibujos de estructura, es que en las pantallas que representen transacciones, se debe incluir un diagrama de flujo sencillo, mediante el cual se ejemplifique cuáles son las interacciones posibles y sus resultados. Naturalmente se deberá incluir las pantallas correspondientes cuando sea adecuado.

Diagrama de Flujo.

[D] Figura 4: Diagrama de Flujo.

Gracias a estos diagramas en combinación con las páginas, tanto diseñadores como desarrolladores podrán tener claro cuál es el trabajo que deben realizar en cada una de las áreas del sitio que se estén generando.

Bocetos de Diseño

Esta etapa consiste en la generación de dibujos digitales acabados de la forma que tendrán las páginas principales del sitio que se desarrolla, considerando como tales la Portada, Portada de Sección y Página de despliegue de contenidos.

Boceto de diseño.

[D] Figura 5: Boceto de diseño.

Para desarrollar los elementos gráficos se utilizan como insumos los dibujos de estructura que se han generado en la etapa anterior.

La idea es que en esta etapa se trabaje en software gráfico para facilitar el proceso de corrección, ya que habitualmente habrá mucha interacción con los usuarios.

Los elementos que se deben tener presentes en esta etapa, son los siguientes:

Imagen Corporativa de la institución:
se deben seguir los lineamientos de uso de colores, textos y otros elementos definidos para la entidad.
Imagen Corporativa del Gobierno:
se deben seguir los lineamientos indicados por el Gobierno de Chile en este aspecto.
Criterios de Usabilidad:
se deben tener en cuenta los criterios que se dan a conocer en el capítulo siguiente de esta Guía.
se deben tener en cuenta los criterios que se dan a conocer en el capítulo siguiente de esta Guía.

Más información sobre la imagen corporativa del Gobieno en: www.gobiernodechile.cl/viewNormasGraficas.aspx.

Borradores de Página

Una vez que se ha aprobado la etapa anterior, se toman los bocetos de diseño que hayan sido aprobados y se genera un prototipo (páginas clickeables) mediante el cual se pueda comprobar directamente la forma en que se desempeñan, cuando se les aplica la tecnología HTML de construcción de páginas web.

La intención de esta etapa es usar el diseño de pantalla que se ha creado, contando con enlaces reales que permitan ver la forma de usar sus atributos (cada enlace tiene los estados de Enlace, Flotante, Activo y Visitado) y revisar la forma en que se despliegan las páginas que se van a desarrollar.

Adicionalmente, en esta etapa será posible hacer la comprobación efectiva del peso de las páginas una vez construidas y se podrán optimizar los elementos que queden fuera de norma por peso o tamaño.

Maqueta Web

Es la etapa final y consiste en generar todo el sitio en tecnología HTML utilizando imágenes y contenidos reales (figuras 6, 7 y 8) .

En el caso de un sitio estático, esta etapa corresponderá a la construcción del sitio. En el caso de un sitio dinámico, las páginas que se generen permitirán que el diseñador genere las plantillas de trabajo y el desarrollador de software las utilice como elementos para introducir la programación que sea necesaria para la creación del sitio.

Es importante considerar que todas las tareas y actividades incluidas en esta etapa pueden ser abordadas por un diseñador que tenga experiencia en diseño web. Esto debe ser parte de los requerimientos solicitados a las empresas proveedoras de este tipo de servicios.

Borrador de Portada.

[D] Figura 6: Borrador de Portada.

Borrador Segundo Nivel.

[D] Figura 7: Borrador Segundo Nivel.

Borrador Tercer Nivel.

[D] Figura 8: Borrador Tercer Nivel.

Final del Capítulo II, avanzar al Capítulo III