PDF de programación - 1.17 Usabilidad de páginas web

Páginas web ::: Usabilidad de páginas web
Diseño de materiales multimedia. Web 2.0

136



1.17 Usabilidad de
páginas web



Páginas web ::: Usabilidad de páginas web
Diseño de materiales multimedia. Web 2.0


1.17 Usabilidad de páginas web



1.17.1 Aclaración terminológica

137

El término "Usabilidad", importado del mundo anglosajón, puede traducirse como "facilidad
de uso". Es un concepto más general. Sin embargo "Accesibilidad" es un término más
específico y se refiere al requisito que debe reunir un documento web para que las personas
con discapacidades puedan alcanzar la información que contiene. Por otro lado la
"Navegabilidad" alude a la definición de una estructura que permita al usuario moverse con
facilidad por un sitio web.

Tener en cuenta estos conceptos cuando se aborda el diseño de un sitio web es una
declaración de intenciones que excede cuestiones de estilo y trata de ponerse en el punto de
vista de los potenciales visitantes con intención de facilitarles el acceso a la información.

A continuación se citan brevemente algunas pautas o consejos que pretenden incrementar la
usabilidad de las páginas web diseñadas.

1.17.2 Navegabilidad

1. Duplica los elementos de navegación si es necesario. Si la página va a tener un
tamaño superior a dos/tres ventanas, conviene situar los elementos de navegación en
el encabezado y pie de la misma

2. Añade enlaces al principio de la página. Si la página es larga, es necesario situar al
final de ella e incluso por el medio hipervínculos que apunten al inicio de la misma.
3. Evita diseñar páginas que sean callejones sin salida. Sitúa en todas las páginas al

menos un enlace que permita continuar la navegación: volver, índice, etc.

4. Define una estructura sencilla de navegación. Es recomendable utilizar una
estructura jerárquica sencilla a partir de una página índice evitando abusar de los
enlaces que saltan de una rama a otra.

5. Proporciona siempre índices. Sitúa siempre que sea posible un índice con el
contenido del sitio. Situálo al principio, lateral o final de cada una de las páginas para
que sea siempre accesible.

6. Añade una paleta de navegación textual. Si utilizas una paleta de navegación a base
de gráficos, incorpora otra paleta adicional a base de enlaces de texto. De esta
forma el usuario no tendrá que esperar a que se carguen las imágenes para saltar a
otra página.

1.17.3 Diseño de Páginas

1. Tamaño de las páginas. Las personas no suelen hacer scroll. Por este motivo las
páginas no deben ser más largas del doble de la pantalla. Fracciona el texto en varias
páginas cuando el tamaño del mismo sea excesivo para una página. El avance a la
siguiente página aportará cierto descanso en la vista que el usuario agradecerá. No
obstante si la página contiene un texto que debe ser leído completo conviene utilizar
marcadores y enlaces para facilitar la navegación por el mismo.
Identificación de las páginas. Es interesante situar información del centro o proyecto
en el pie o encabezado de todas las páginas. Incluso con posibilidad de acceder a un
email de contacto o a la página índice. Hay visitantes que pueden acceder a través de
buscadores a una página concreta del sitio web

2.

3. Enlaces.

• Escribe el texto como si no tuviera enlaces. Evita enlaces con el texto:

"Pincha aquí" porque alteran la normal lectura del texto.



Páginas web ::: Usabilidad de páginas web
Diseño de materiales multimedia. Web 2.0

138



4.

• Elige palabras significativas para el texto del enlace. Elige adecuadamente
el texto del enlace para anticipar lo que se encontrará el usuario antes de
que pulse.

• Evita textos demasiado largos como enlace. Para no dificultar la lectura.
• Revisa el funcionamiento de los enlaces. De esta forma el usuario tendrá

seguridad de encontrar lo que se anuncia tras el enlace.

• Cuida el resaltado que produce un enlace. Si deseamos resaltar una palabra

en una frase debemos tratar de situar el enlace en ella.

• No modifiques el color del texto de los enlaces. Esto desconcierta al

usuario.
Independencia.

• Escribe las páginas para distintos navegadores. Aunque el Internet Explorer

es el más usado cada vez hay más clientes con Firefox.

• No diseñes para la última versión del navegador. No todos los usuarios

tienen instalada la última versión.

• Define el tamaño de las tablas y celdas en %. De esta forma se adaptarán a

la resolución de pantalla del usuario.

• Diseña para una resolución óptima. Actualmente la resolución más utilizada
es 1024x768. Indica en la página principal que es la resolución óptima pero no
descuides la apariencia del documento en resoluciones inferiores ni superiores
porque es el futuro inmediato.

1.17.4 Tipografía

1. Negrita. No abuses del uso de la negrita destacando gran cantidad de texto ni del uso

de mayúsculas porque son más difíciles de leer.

2. Capitalización. Un título es más atractivo con todas las iniciales en Mayúsculas y el

resto en minúsculas que todas en Mayúsculas.

3. Tipos de fuente. Utiliza fuentes habituales porque el usuario debe tenerla instalada
en su equipo para poder ver el texto con ella a través del navegador web. Si utilizas
una fuente enlazada para edades tempranas (Edelfont, Memima, etc) recuerda que el
texto no se mostrará con ella si el usuario no tiene instalada esta fuente en ella.

4. Tamaño de la fuente. Utiliza los estilos de párrafo para modificar el tamaño de los

textos.

5. Variedad de fuentes. No conviene abusar del número de tipos de fuente distintas a

utilizar en un documento. Basta con una o dos (texto y titulares)

1.17.5 Gráficos

2.

3.

1. Tamaño de una imagen enlazada. Si se inserta un enlace a una imagen de cierto
peso conviene situar una vista en miniatura de escaso peso indicando el tamaño del
archivo que la contiene.
Imágenes de fondo. Utiliza imágenes de fondo de colores adecuados que no oculten
el texto de la página. Tendrán una tonalidad parecida al color de fondo y de baja
calidad para que se descarguen rápidamente.
Imágenes decorativas. No abuses del uso de imágenes no significativas. Dosifica el
número de imágenes de una página para evitar las esperas durante su descarga.

4. Dimensiones de una imagen. Indica la altura y anchura de la imagen al insertarla en
una página. De esta forma al descargarse la página ya se reserva el espacio para
mostrarse una vez se complete la imagen.

5. Descarga progresiva. Configura tus imágenes de cierto peso para que realicen la

visualización progresiva conforme se vayan descargando.

6. Ahorro de imágenes. Trata de usar el mismo archivo de imagen tantas veces como

sea posible para acelerar la visualización.

7. Formato de imágenes. Usa GIF y PNG siempre que sea posible. Para las fotografías es

mejor el formato JPEG.



Páginas web ::: Usabilidad de páginas web
Diseño de materiales multimedia. Web 2.0


1.17.6 Accesibilidad



139

En este apartado se describen brevemente algunas de las condiciones que deberían ser
objetivos de diseño cuando se aborda la creación de un sitio web educativo. Se pretende que
el material resultante sea accesible al mayor colectivo de usuarios incluyendo los alumnos/as
con necesidades educativas especiales.

1. Texto alternativo. Proporciona contenidos textuales alternativos a los contenidos
multimedia, por ejemplo, en las imágenes. Agilizará la navegación con conexiones
lentas.

2. Uso del color. El color no es indispensable. Los textos y los gráficos deben ser

comprensibles con independencia del color.

3. Hojas de estilo. Usa las marcas y hojas de estilo adecuadamente. Facilitarán la

personalización de temas para adaptarse al usuario.

4. Tablas. Utiliza las marcas adecuadas para crear las tablas en los documentos. De esta

forma se visualizarán correctamente en todos los navegadores.

5. Claridad del lenguaje. Utiliza el lenguaje de una forma clara y concisa.
6. Objetos insertados. Las páginas que contienen componentes avanzados deben ser

accesibles sin ellas: scripts, applets, etc.

7. Control de reproducción. Proporciona control al usuario para detener movimientos,

parpadeos o actualizaciones automáticas de una página.

8. Acceso directo. Utiliza interfaces que permitan una accesibilidad directa a los

9. Compatibilidad. Diseña la web para que sea navegable desde cualquier plataforma,

contenidos..

sistema operativo o equipo.

10. Ayuda a la navegación. Proporciona en todo momento información de ayuda

contextual al usuario para orientarlo: dónde está y dónde puede ir.

11. Sistema de búsqueda. Ofrece índices o mecanismos de búsqueda para que el usuario

pueda encontrar rápidamente lo que busca.

12. Contenidos asequibles. El contenido de los documentos debe ser claro, simple y fácil

de entender.

1.17.7 Para saber más

La legislación española vigente establece que todos los sitios web institucionales y financiados
con presupuesto público deben cumplir unos requisitos mínimos de accesibilidad.

Los estándares de accesibilidad que deben cumplir los contenidos web educativos en España
están sometidos a las directrices recogidas en los siguientes documentos:

• Norma UNE 139802: http://www.sidar.org/recur/direc/norm/index.php
•

LEY 34/2002, de 11 de julio, de servicios de la sociedad de la información y de comercio
electrónico (LSSICE): http://www.sidar.org/recur/direc/legis/espa.php

• Directrices de Acce