Presentacion diseño inclusivo accesible

27
Diseño Web: Enfoque en los adultos mayores Mariana Varela [email protected]

TAGS:

description

Inclusive Design Event presentation: Web Design for Senior Citizens.October 2010 - Buenos Aires

Transcript of Presentacion diseño inclusivo accesible

Page 1: Presentacion diseño inclusivo accesible

Diseño Web: Enfoque en los adultos mayores

Mariana [email protected]

Page 2: Presentacion diseño inclusivo accesible

“Envejecer es obligatorio, crecer es opcional.”

Chili Davis

Page 3: Presentacion diseño inclusivo accesible

Problema de la brecha digital

¿Que es la brecha digital?

La brecha digital se define como la separación

que existe entre las personas (comunidades,

estados, países…) que utilizan las Tecnologías

de Información y Comunicación (TIC) como una

parte rutinaria de su vida diaria y aquellas que

no tienen acceso a las mismas y que aunque las

tengan no saben como utilizarlas.

Page 4: Presentacion diseño inclusivo accesible

El obstáculo que representa de la brecha digital

impacta directamente a la calidad de vida todos

los ciudadanos, incluyendo a los adultos

mayores.

Problema de la brecha digital

Situación Nacional

Page 5: Presentacion diseño inclusivo accesible

Nos metemos de llenoen nuestro usuario

Page 6: Presentacion diseño inclusivo accesible

Problema de la brecha digitalen el usuario Mayor:

¿Quien es el usuario? En la Argentina casi un 10% del total de

los argentinos es Mayor, con una

esperanza de vida que ronda los 73

años.

Hay 146 mujeres mayores por cada 100

hombres mayores.

Las ciudades más envejecidas son

Capital Federal (17,2 %) y Santa Fe

(11,6 %).

El 50% se concentran en la Ciudad de

Buenos Aires, el Conurbano y la

provincia

Page 7: Presentacion diseño inclusivo accesible

Problema #1:

La imposibilidad de compraro adquirir tecnologías

+ =++

Page 8: Presentacion diseño inclusivo accesible

Problema #2

Problemas psicológicos y cognitivos

• Problemas en la memoria

• Problemas para entender y reaccionar rápidamente ante los cambios de situación

• Alzheimer

Page 9: Presentacion diseño inclusivo accesible

Problema #3:

Enfermedades mas comunes

• Artritis

• Osteoporosis

• Entumecimiento de músculos

• Diabetes

• Cataratas y otras disfunciones

oculares

Page 10: Presentacion diseño inclusivo accesible

Problema #4:

Discapacidad total o parcial

• Visión disminuida

• Disminución de audición

• Falta de coordinación entre

las manos y la voluntad de

movimiento

• Dificultad de psicomotriz

manipulación con precisión de

objetos pequeños

Page 11: Presentacion diseño inclusivo accesible

Problema #5:

Actitud negativa

“No me interesa/No

entiendo”

“Tengo miedo de romper

algo”

“Nadie me quiere ayudar”

Page 12: Presentacion diseño inclusivo accesible

No usuario

Usuario avanzado

Usuariobásico

Grandes en Edad pero chicos en el interior, siguen aprendiendo todos los días. No se quedan quietos, no tienen miedo a nada, los que “estan en todas”

Mayores que se resignaron a utilizar la tecnología porque no les quedaba otra o porque vieron que los beneficios eran importantes.

Ancianos sin ningún interés por el cambio, personas que se quedaron en el pasado y “estan bien como estan”

Page 13: Presentacion diseño inclusivo accesible

Es posible desde nuestro lugar de diseñadores y desarrolladores web ayudar en el acortamiento de la

brecha digital en este grupo?

Si, Podemos!

Page 14: Presentacion diseño inclusivo accesible

Antes de empezar:

Ponerse en sus zapatos.

Page 15: Presentacion diseño inclusivo accesible

Consideraciones de diseño

Errores comunes en el uso del Internet (todos los sufrimos, ellos los padecen)

• “No se encuentra la página”

• Mala visualización en browsers viejos (por

ejemplo, IE6)

• “Intros”

• Páginas de excesiva cantidad/falta de gráficos

• Falta de “alts” y “titles”

• Enlaces y menús no accesibles desde el teclado

• Iconografía propia de Internet

• Formularios poco explicativos, largos, sin ayuda.

Page 16: Presentacion diseño inclusivo accesible

Consideraciones de diseño

Estructura de la páginaUtilizar una estructura ordenada de columnas y filas para su fácil lectura.

Page 17: Presentacion diseño inclusivo accesible

Consideraciones de diseño

Diseño y estilos: La dificultad con el uso del scroll

• La información más importante en la parte superior del diseño.

• Dejar márgenes generosos del lado derecho de la pantalla para que no haga click sin querer en otras cosas

Page 18: Presentacion diseño inclusivo accesible

Consideraciones de diseño

Navegación, botones y clicks

• Navegadores ser horizontales o verticales, sobre el lateral izquierdo.

• Usar breadcumbs

• Botones largos y estáticos.

• Mantener el estilo subrayado para todos los enlaces de texto.

• Que no se abran en múltiples direcciones

• 6 o 7 enlaces

Page 19: Presentacion diseño inclusivo accesible

Consideraciones de diseño

Popups, banners animados y publicidades: Atrapados sin salida

Evitar estos elementos en su totalidad

Page 20: Presentacion diseño inclusivo accesible

Consideraciones de diseño

Búsquedas

• Siempre presente en todas las páginas arriba, en el lateral derecho.

• El uso de autofoco es recomendable

• Presentar pocos resultados por página, “palabra en cache” puede ser util.

Page 21: Presentacion diseño inclusivo accesible

Consideraciones de diseño

Videos y Podcasts

• Deben ser cortos

• Controles de reproducción y pausa bien marcados y accesibles.

• Opciones como subtitulado y ajuste de volumen

• No basar todo el contenido en el video

• Eliminar el autoplay

Page 22: Presentacion diseño inclusivo accesible

Consideraciones de diseño

Color: Contraste y Contrastante.

• Tener en cuenta enfermedades de la vista

• Anteojos sucios o viejos cambian los colores

• Monitores malos, viejos o sucios

• Comprobar contraste en escala de grises

• Fondo claro con tipografía oscura funciona OK

Page 23: Presentacion diseño inclusivo accesible

Consideraciones de diseño

Texto: No solo una cuestión de letra mas grande.

• Tipografías entre 12 y 14px de alto

• Interlineas amplias

• Poner la opción de “agrandar la letra”

• Sanserif Aa

Page 24: Presentacion diseño inclusivo accesible

Consideraciones de diseño

Bloques de Texto: terminemos con los interminables

• Bloques de texto breves

• Alineado a la izquierda

• Márgenes y calles amplias

• Ilustrar con fotos y gráficos

• No mas de 18 palabras por oración

• No hacer columnas muy anchas

• Utilizar bold para resaltar

Page 25: Presentacion diseño inclusivo accesible

Consideraciones de diseño

Tono de comunicación: no son hackers!

• No usar palabras en ingles

• No manejar vocabulario técnico

• Títulos claros y breves

• Empezar con una introducción los

artículos

• Punteos de contenido

Page 26: Presentacion diseño inclusivo accesible

Objetivos finales

Que se despierte el interés por las tecnologías

Que puedan encontrar alternativas a la tv, el diario y la radio

Que descubran un espacio donde puedan encontrarse con nosotros y entre ellos

Que aprovechen una web que puedan usar solos, sin la ayuda de otros.

#1#2#3#4

Page 27: Presentacion diseño inclusivo accesible

Muchas Gracias

Diseño Web: Enfoque en los adultos mayoresMariana Varela

[email protected]