Protocolo NI4 - Pautas de Diseño de Navegación Fácil

Pautas de Diseño de Navegación Fácil

Las pautas de diseño se pueden clasificar en tres grandes grupos:

1. Contenidos y Navegación

  1.1. Agrupación de contenidos
  1.2. Navegación lineal,
  1.3. Menús de navegación
  1.4. Navegación Rápida

2. Apoyos y ayudas

  2.1. Lenguaje adaptado
  2.2. Prevención de errores
  2.3. Solución de errores
  2.4. Buscadores flexibles y eficaces
  2.5. Apoyos alternativos de comprensión

3. Estilo y Diseño

  3.1. Tipografía
  3.2. Scrolling
  3.3. Movimiento de textos
  3.4. Animaciones y movimiento de imágenes
  3.5. Textos alternativos para la imágenes
  3.6. Control sobre los elementos multimedia

Volver Arriba

1. Contenidos y Navegación

1.1 Agrupación de contenidos. Evitar la sobreinformación. Evitar que una página ofrezca tantas posibilidades al usuario que el éste se pierda entre tantos menús y secciones y subsecciones y submenús. Un ejemplo claro de sobre información son las páginas tipo portales tipo Terra donde la oferta inicial es tan abrumadora que el usuario acaba perdiéndose sin saber encontrar lo que está buscando.

Partir de un diseño más claro, más limpio donde las secciones de los menús sean claras y permitan encontrar rápidamente lo que el usuario está buscando a través de contenidos básicos que se vayan desarrollando a medida que el usuario navega por la web

1.2 Navegación lineal. El diseño debe permitir al usuario informarle en cada momento donde está, cómo ha llegado a ese lugar y cómo puede volver al inicio, tanto al inicio de la sección en la que está navegando como al inicio de la web de donde partió.

Utilizar enlaces de Inicio, Atrás y Adelante para facilitar la navegación lineal. Es más fácil que el usuario descubra todo el contenido de la web si avanza de forma progresiva regresando con facilidad al punto de inicio que ofreciendo todas las posibilidades en la Página de Inicio.

1.3 Menús de navegación. Los menús de navegación deben estar siempre visibles y siempre deben estar ubicados en la misma posición durante toda la navegación de la página. El diseño de la interfaz debe ser también accesible.

El cambio del posicionamiento de los menús de navegación provoca la desorientación del usuario.

Evitar los enlaces a secciones de la propia web que abran nuevas ventanas del navegador ya que esto dificulta la navegación lineal. Intentar que todo el contenido quede integrado siempre dentro de la misma ventana en la que se navega.

1.4 Navegación rápida. Evitar los tiempos de descarga demasiados largos. El usuario puede pensar que el enlace no funciona e insiste presionando repetidamente el enlace, o desistir. Si la información es pesada de descargar acompañar el uso de preload para avisar que se esta ejecutando una acción y que debe esperar. Estos preload han de describir que acción se esta ejecutando…, evitar los tantos por cientos de descarga ya que no se entienden.

Volver Arriba

2. Apoyos y ayudas

2.1 Lenguaje adaptado. El lenguaje utilizado debe ser comprensible por el usuario con palabras, frases y conceptos que sean familiares para el usuario y suficientemente descriptivos que no necesiten de una explicación posterior. En cuanto a los anglicismos, algunos están tan extendidos que es necesaria su utilización para que se familiaricen con ellos. Ej. Webmail, chat

2.2 Prevención de errores. Cuidar el diseño para evitar que el usuario caiga en errores a través de instrucciones y avisos previos. Pe. En el caso de formularios, indicar claramente las instrucciones para rellenarlo correctamente.

2.3 Solución de errores. Si a pesar de todo se produce un error, el aviso de error debe explicar claramente qué tipo de error se trata, por qué se ha producido y que tiene que hacer para subsanarlo y que no vuelva a ocurrir.

2.4 Buscadores flexibles y eficaces. Buscadores que no se limiten a presentar mensajes de “no encontrado” si no que ofrezcan soluciones alternativas: Ejemplo de buscador Google donde aparece la opción “Quiso decir....” o buscador de callejero de QDQ donde aparecen opciones similares a las que el usuario está buscando.

2.5 Identificación de elementos interactivos. El usuario debe identificar claramente dónde y cuáles son los enlaces. Resaltar los enlaces de hipertexto utilizando el estándar de los enlaces subrayados para los textos.

La identificación de un enlace por parte del usuario debería ir acompañada de elementos multimedia que hagan entender al usuario que se trata de un enlace: cambio de color, movimiento y sonido. La zona activa de los enlaces debe ser lo más amplia posible.

Utilizar las hojas de estilo (CSS) para diseñar los enlaces de texto, donde se puede definir el formato de la fuente para enlaces en estado de reposo, sobre, presionado, visitados,… Las hojas de estilo permiten un gran control sobre el diseño de los enlaces.

2.6 Apoyos alternativos de comprensión.

· Apoyos auditivos para textos para usuarios con dificultades de lectoescritura (Magic, ConPalabras, etc)

· Utilización de imágenes e iconos para apoyar los textos. Utilización de iconos ampliamente normalizados en Internet: Inicio Webmail

· Apoyos de texto para representaciones multimedia para usuarios con dificultades auditivas. Usar sistemas alternativos o aumentativos para definir conceptos lectorescritores.

Volver Arriba

3. Estilo y diseño

3.1. Tipografía. Tanto el tipo de fuente como el tamaño y el color deben ser suficientemente claros como para que puede ser leída fácilmente. No utilizar fuentes menores de 12 píxel. Y que tengan suficiente contraste. Destacar los títulos de las secciones para una rápida ubicación del usuario.

Utilizar familias de fuentes estándar: arial, sanserif, verdana, geneva, helvética, e3tc. Todas las fuentes deben estar definidas en la/s hoja/s de estilo (CSS) lo que permite una mayor flexibilidad a la hora de editarlas.

3.2. Scrolling. Evitar en la medida de lo posible las barras de desplazamiento verticales y sobre todo las horizontales. Procurar que la mayor cantidad posible de información aparezca en la pantalla sin necesidad de desplazamientos. Dificultad de utilizar las barras de desplazamiento.

En el caso de páginas con contenidos muy extensos, es preferible dividir una página en varias y enlazarlas entre si con un enlace de <continuar>.

3.3 Movimiento de textos. Evitar textos que se desplacen por la pantalla o que parpadeen o que sufran transformaciones.

· Dificultades de lectura y comprensión

· Distracciones innecesarias.

· Dificultad para interactuar sobre objetos móviles

· Riesgo para usuarios con epilepsia fotosensitiva.

3.4 Animaciones y movimiento de imágenes. Evitar el exceso de movimiento y animación de las páginas (gifs animados) Estos movimientos distraen la atención del usuario.

3.5 Textos alternativos para las imágenes. Usar textos alternativos para las imágenes para describir la función de los elementos visuales. Además de ayudar a usuarios con deficiencias visuales que puedan utilizar lectores de pantalla, ayuda a usuarios con conexiones lentas ya que les informa del contenido o finalidad de la imagen. La descarga progresiva de las imágenes es otra solución a la descarga de imágenes pesadas.

Los textos alternativos también deben utilizarse para los llamados mapas de imágenes.

3.6.- Control sobre los elementos multimedia.

· Posibilidad de poder apagar la música o el sonido

· Posibilidad de detener elementos móviles de la web

· Evitar todo tipo de pop up (publicitarios o informativos) que aparezcan sin una orden previa del usuario. Siempre que se produzca un evento dentro de la web, debe ser como resultado de una acción previa realizada por el usuario.

Volver Arriba