USO DE ELEMENTOS MULTIMEDIA,

INTERNACIONALIZACION Y
ACCESIBILIDAD

27/05/2006 DAI

Gráficos

z Complemento (no sustituto) al texto

z Transmitir información que con texto no se representaría

eficientemente

z Mejorar la navegación
– Presentar una visión del sitio
– Identificar las páginas
– Identificar áreas de contenidos

z Llevar cuidado con los gráficos pesados

27/05/2006 DAI

1
Imágenes

z Usar imágenes estándares, legibles y de forma consistente

z Proporcionar etiqueta o texto descriptivo para cada imagen
z Distinguir imágenes decorativas de las navegacionales
z Evitar imágenes gratuitas
z Minimizar el número de colores
z Formato adecuado (GIF, JPG, PNG)
z Reusar imágenes en varias páginas
z Recomendaciones:
– Imágenes individuales < 5K
– Imágenes totales página < 20K
– Proporcionar visiones icónicas

27/05/2006 DAI

Mapas de imágenes

z Proporcionar enlaces de navegación a otros contenidos

z Pros
– Pueden ser estructurados convenientemente
– Carga más rápida que imágenes individuales
z Contras
– Consumen bastante espacio de pantalla
– A veces no es obvia la posición en el mapa
– Puede no quedar claro dónde se puede hacer clic
z Pautas
– Dejar claros los límites de las áreas de selección
– Hacerlos accesibles a personas con problemas de visión

27/05/2006 DAI

2
Fotografías

z Usar cuando todos los aspectos de una

imagen es relevante

z Pautas
– Formato JPEG/PNG
– En la página inicial mostrar un icono o versión
más pequeña
– Enlazar a foto más grande

27/05/2006 DAI

Vídeo
z Usos
– Llamar la atención o proporcionar un mensaje personal
– Demos

z Contras
– Coste de producción y tiempo de descarga
– Problema para ver detalles (¿zoom?)

z Pautas
– No descargar automáticamente al iniciar una página
– Crear segmentos cortos
– Proporcionar controles de reproducción
– Usar vídeo existente, sólo audio, transparencias con audio

27/05/2006 DAI

3
Diagramas

z Usos
– Mostrar la estructura de los objetos
– Mostrar la relación de los objetos
– Mostrar el flujo de procesos o tareas
– Revelar el orden espacial o temporal

z Pautas
– Proporcionar diagramas sencillos
– Proporcionar diagramas/esquemas para ilustrar aspectos
claves

27/05/2006 DAI

Dibujos

z Uso
– Enfatizar o representar partes seleccionadas

z Pautas
– Proporcionar dibujos con detalles mínimos
– Proporcionar un enlace al dibujo completo

27/05/2006 DAI

4
Animación
z Usos
– Explicar ideas que cambian en el tiempo y el espacio
– Ilustrar la posición o estado de un proceso
– Continuidad en transiciones
– Enriquecer representaciones gráficas
– Atraer atención y facilitar la visualización de estructuras 3D

z Contras: Generan distracción y se cargan lentamente

z Pautas
– Fragmentos cortos
– Evitar la distracción
– Proporcionar mecanismos para detener la animación y poder inspeccionar
el fotograma

27/05/2006 DAI

Audio
z Uso
– Suplemento a texto y gráficos
– Establecer una atmósfera y sensación de lugar
– Proporcionar muestras o aprendizaje

z Pros
– No oculta información en pantalla
– Ocupa menos que el vídeo

z Contras
– Puede ser molesto
– SobreusoÎ ignorarlo
– No fiable

z Pautas
– Contenidos audio simples y velocidad de narración (160 pal x min)
– Narración de ideas nuevas más lentas
– Proporcionar controles
– Sonido de fondo suave
– Fragmentos cortos y de alta calidad

27/05/2006 DAI

5
Combinación de medios
z Mejores combinaciones
– Audio con gráficos
– Texto con gráficos

z Audio y vídeo debe ser relevante para la tarea

z Presentación
– Evitar aquello que distraiga de la información importante
– Mostrar la información de forma sistemática para controlar la atención
– Mostrar simultáneamente los elementos narrativos visuales, auditivos y
textuales (los visuales hasta 7 segundos antes de los textuales)

z Tener en cuenta el tiempo de descarga

z Comprobar legibilidad, comprensibilidad y aceptación

27/05/2006 DAI

Internacionalización

z Cuándo hacerlo
– El mercado tiene personas que no hablan el idioma del
producto
– Traducción obligatoria por ley
– Se desea llegar a la mayor cantidad de gente

z Cuándo no hacerlo
– La audiencia entiende el idioma
– Coste prohibitivo

27/05/2006 DAI

6
Palabras y texto
z Vocabulario y estructura sintáctica restringidos

z Evitar
– Acrónimos, abreviaturas, jerga
– Referencias a estereotipos nacionales, regionales, religiosos...
– Estilo telegráfico y demasiado informal
– Ejemplos específicos culturales

z Uso de contextos culturales y localismos lingüísticos

z Usar palabra original para términos que no se puedan traducir

z Dejar espacio adicional para las traducciones

z Etiquetas de iconos fuera del gráfico

z Modificar las teclas de acceso directo

z Ajustar los formatos de fecha, tiempo, moneda,direcciones,etc

27/05/2006 DAI

Imágenes y símbolos
z Usar normas socio-culturales locales

z Usar símbolos aceptados internacionalmente

z Hacer la selección y revisión de imágenes y símbolos en las primeras

etapas del ciclo de diseño

z Llevar cuidado con:

– Símbolos religiosos
– Cuerpo humano
– Mujeres
– Gestos manuales
– Banderas
– Cómo marcar los checkboxes

27/05/2006 DAI

7
Color, secuencia, funcionalidad

z Usar colores con connotaciones locales

z Proporcionar la secuencia de información

adecuada y la funcionalidad adecuada

z Eliminar referencias a características no

internacionalizadas

27/05/2006 DAI

Asociaciones de color
Rojo Amarillo Verde Azul Blanco

China Felicidad Nacimiento Dinastía Ming Cielo Muerte

Poder Cielo Nubes Pureza
Riqueza Nubes
Egipto Muerte Felicidad Fertilidad Virtud Alegría
Prosperidad Fortaleza Fé
Verdad
Francia Aristocracia Temporalidad Criminalidad Libertad Neutralidad
Paz

India Vida Éxito Prosperidad Muerte

Creatividad Fertilidad Pureza

Japón Peligro Nobleza Futuro Villanía Muerte

Rencor Gracia Juventud, Energía

EEUU Peligro Cuidado Seguridad Masculinidad Pureza

Parar Cobardía Ir

27/05/2006 DAI

8
Diseño accesible

z Considerarlo en las etapas de planificación, diseño y

testing

z Compatibilidad con utilidades existentes de

accesibilidad

z Interfaz personalizable

z Seguir convenciones estándares de accesibilidad

27/05/2006 DAI

Discapacidad visual
z Componentes de pantalla
– Títulos de ventana y pantalla significativos
– Asociar etiquetas textuales a todos los controles, objetos, iconos, gráficos, opciones
de menús gráficos
– Resumen textual para cada estadística gráfica
– Escalabilidad de elementos
– Evitar mostrar/ocultar información por movimiento del puntero (excepto casos
obligados como tooltips)

z Teclado
– Proporcionar interfaz completo por teclado y orden lógico de navegación

z Color
– Elemento para mejorar el diseño
– Usar variedad de colores capaz de producir un rango de niveles de contraste
– No definir colores específicos

27/05/2006 DAI

9
Discapacidad auditiva

z Proporcionar versión textual del audio importante

z Opción de mostrar alerta visual de las alertas

sonoras

z Ajuste de volumen

z Audio como mejora de diseño

27/05/2006 DAI

Discapacidad motriz

z Entrada de datos por voz

z Interfaz completo simple por teclado

z Interfaz simple por ratón

z Teclado en pantalla

z Filtros de teclado para ignorar golpeos repetidos

27/05/2006 DAI

10
Discapacidad idiomáticas

z Proporcionar chequeo de gramática o léxico

z Limitar el uso de interfaces basados en

tiempo
– Posibilidad de ajustar tiempo máximo de
respuesta de usuario

27/05/2006 DAI

Epilepsia

z Elementos que no se refresquen en tasas en el

rango 2-55Hz

z Minimizar el área de ventana que parpadea

z Evitar parpadeo con alto nivel de contraste entre los

estados

z Proporcionar una opción que permita reducir o

eliminar el parpadeo

27/05/2006 DAI

11
Diseño accesible de páginas web
z Estructura con 2-3 niveles de encabezados

z Asociar texto a cada imagen

– En página separada si es muy largo

z Para audio: transcripción, descripción textual

z Para mapas de imágenes: menú de texto equivalente

z Proporcionar formas alternativas para acceder a los ítems en tablas

z Proporcionar métodos alternativas de comunicación en formularios on-line que no pueden

ser leídos por utilidades de pantalla

z Si no se puede asegurar de otra forma, proporcionar una versión sólo texto

z Seguir las recomendaciones del W3C

– http://www.w3.org/WAI/guid-tech.html

27/05/2006 DAI

Discapacidades cognitivas

z Permitir modificación y simplificación del

interfaz

z Limitar el uso de interfaces basados en

tiempo
– Posibilidad de ajustar tiempo máximo de
respuesta de usuario

27/05/2006 DAI

12