Martes, 12 de diciembre de 2017

Usabilidad web, tecnología y contenidos

Tanto por usabilidad (facilidad de manejo de un sitio web) como por accesibilidad (uso cómodo para personas con diversas discapacidades), debemos ajustar el contenido de las páginas web y elegir las tecnologías de programación más adecuadas para ello.

Usabilidad web en Salamanca: tecnologías

En anteriores artículos hemos introducido el concepto de usabilidad web, y hemos detallado cómo se lee en pantallas, cómo estructurar los contenidos, cómo definir los menús y la navegación. Hoy hablaremos sobre tecnología y tipos de contenidos.

Páginas web siempre funcionales

El sitio web debe ser perfectamente utilizable en cualquier entorno (dispositivo de acceso, programa navegador, resolución de pantalla, disponibilidad de tecnologías específicas como HTML5, CSS3, JavaScript, Flash …):

  • Si se desactivan las hojas de estilo CSS y/o JavaScript, se mantendrá el acceso a todos los contenidos.
  • Si requiere JavaScript, Flash u otros plugins, ofrecer una versión alternativa. Rellenar <noscript>…</noscript>
  • Si se usan contenidos que requieren plugin, indicar una dirección segura de donde descargarlo (la del fabricante). Además, ofrecer una versión alternativa.
  • En cualquier versión de cualquier navegador se podrá acceder a todos los contenidos, aunque la presentación sea menos atractiva. Es la denominada mejora progresiva, e implica que si el dispositivo y navegador web es más avanzado, se verán los contenidos con una presentación más atractiva (animaciones, interactividad…), pero el sitio web será completamente funcional también en entornos más antiguos.

Otras características

  • No conviene reproducir automáticamente música o sonido de fondo. De hacerlo, el usuario debe poder desactivar el sonido fácilmente.
  • Ofrecer resúmenes en texto de los elementos visuales (imágenes y videos) cuyo contenido sea relevante.
  • Todas las imágenes deben tener un texto alternativo que defina su función y contenido. Las imágenes que sólo tengan función decorativa preferiblemente deben añadirse vía CSS; de hacerlo mediante la etiqueta IMG del (X)HTML, debe incluir el atributo alt=”” (vacío) ó alt=” “ (con un espacio).
  • Si el diseño gráfico del sitio requiere una resolución de pantalla mínima, crear una versión alternativa “para móviles”. La forma recomendada es mediante las denominadas “media queries” de CSS.
  • Si es conveniente mostrar imágenes de alta resolución, utilizar miniaturas o enlaces de texto para que el visitante haga clic sólo en las que le interese. Indicar el tamaño en Kb de la imagen grande.
  • Si se enlaza a un archivo que no sea una página web (p.ej: una imagen, pdf, …), que se abra en ventana nueva, lightbox o similar, o mejor aún, crear una página con el archivo incrustado dentro. Conviene que el enlace indique el formato y tamaño del archivo al que apunta, para que el visitante decida si le interesa descargarlo o no.
  • No debe aparecer una barra de desplazamiento horizontal salvo cuando el tamaño de la ventana sea demasiado pequeña.
  • No debe haber páginas o apartados “en construcción”.
  • Señalar claramente las actualizaciones de los contenidos.

 

Fernando Sánchez Gómez
Diseño Web Global

Leer más artículos sobre Usabilidad web

Cliparts: www.freepik.es