Here are the main issues with accessibility and usability in the provided version: - Visual design does not clearly distinguish active sections or menu levels for users with visual impairments like color blindness. - Page structure and headings are not properly marked up with semantic HTML, making it difficult for screen reader users to navigate and understand the content. - Links are identified only by their text content without additional context, making it hard to understand what page or section each link leads to. - Images and non-text elements like logos are not properly labeled with alternative text descriptions, excluding screen reader users from that information. - Overall page reading order and headings structure is linear and not organized in a clear, logical way for screen

1. Presentación bajo licencia Creative Commons
Atribución 2.5 Argentina
http://creativecommons.org/licenses/by/2.5/arM E M B E R
Diseño de Interacción,
accesibilidad e inclusión
Santiago Bustelo
3a Jornada del FIEDBA · 26 de octubre, 2011
Universidad de Belgrano · 20 de septiembre, 2013
@sbustelo

2. M E M B E R
Me presento…
• Santiago Bustelo, diseñador de interacción.
• Fundador y Director de Diseño, Kambrica.
• Fundador y Coordinador IxDA Buenos Aires y Coordinador
Regional de IxDA en Latinoamérica. Organizador de los
principales eventos de UX en Argentina desde 2010 y de
Interaction South America 2014.
• Desde 1997 he participado en proyectos de diseño y
desarrollo para Microsoft, Staples, Coca-Cola, HP,
TetraPak, MetLife, HSBC, Telefónica, Jumbo, Molinos,
Banco Santander, Bumeran.com, Guía Óleo y
Universidad de Stanford, entre otros.
• He dictado presentaciones y talleres sobre Usabilidad,
Diseño de Interacción y Experiencia de Usuario (UX)
desde el año 2001 en Argentina, Brasil, Colombia, EEUU,
Canadá, Irlanda y Holanda.

3. Santiago Bustelo (@sbustelo) •M E M B E R
IxDA (Interaction Design Association)
• Organización abierta, voluntaria y gratuita, con la
misión de liberar a la condición humana de las malas
experiencias que la desafían, avanzando la disciplina de
Diseño de Interacción.
• Foro global, más de 76.000 miembros, 160 grupos
locales, 36 grupos en América Latina.
• En Argentina:
• Buenos Aires: ixda.com.ar
• Córdoba: ixdaCba.com.ar
• Corrientes / Resistencia:
facebook/IxdaCorrientesResistencia
• La Plata: ixdaLaPlata.com.ar
• Mar del Plata: @IxDAMDQ
• Mendoza: ixdaMza.com.ar
• Rosario: ixdaRosario.com.ar
• Tucumán: ixdaTucuman.com.ar
3
ixda.org

4. Santiago Bustelo (@sbustelo) •M E M B E R
Diseño es…
• …la organización de materiales y procesos de la forma más
productiva, en un sentido económico, con un equilibrado balance
de todos los elementos necesarios para cumplir una función.
László Moholy-Nagy, 1938
• …el poder humano de concebir, planificar y ejecutar los
productos que sirven a los seres humanos en el cumplimiento de
sus propósitos.
Richard Buchanan - Design Research and the New Learning, 1999
4

5. DISEÑO DE
INTERACCIÓN
INTERACCIÓN
HUMANO-COMPUTADOR
IxD
DISEÑO
INDUSTRIAL
DISEÑO
DE SONIDO
DI
ARQUITECTURAARQUITECTURA
DE INFORMACIÓN
ARQ
DISEÑO DE
EXPERIENCIAS
UX
AI
DISEÑO
GRÁFICO
DG
HCI
Señalética
Entornos
Interactivos
Diseño de
Interfaces
Computación
ubicua
Ingeniería de
Usabilidad
Controles
Diseño de
Información
Navegación
PRODUCCIÓN
DE CONTENIDO
(Texto, Imagen,
Video, sonido)
Dan Saffer, Designing for Interaction

6. Santiago Bustelo (@sbustelo) •M E M B E R
• Diseño de Experiencias (UX)
• Diseño de Interacción (IxD)
• Define el modelo de operación de productos
interactivos para lograr mejores experiencias
para la mayor cantidad de usuarios
• Diseño de Interfaces
• Define los elementos concretos empleados en la
interacción
ABSTRACTO
CONCRETO
Diseño de Interacción
6

7. Santiago Bustelo (@sbustelo) •M E M B E R
Funciones del diseño
Información
Presentación
Uso
7

8. Santiago Bustelo (@sbustelo) •M E M B E R
Forma versus Función
1
2 3 4
567
891011
12
1314
15
16 17 18 19
20
21
222324
25
262728293031
8

9. Santiago Bustelo (@sbustelo) •M E M B E R
Forma y Función
9
D L M M J V S
26 27 28 29 30 31 1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 29
30 31 2 3 4 5 6

10. Santiago Bustelo (@sbustelo) •M E M B E R
• La usabilidad de una interfaz es una medida
de la efectividad, eficiencia y satisfacción con
la cual determinados usuarios pueden
alcanzar determinados objetivos en un
entorno particular con dicha interfaz.
(ISO 9241, Requerimientos ergonómicos para
trabajo de oficina con terminales visuales, Parte
11 - 1997)
Usabilidad
10

11. Santiago Bustelo (@sbustelo) •M E M B E R
Datos vs. Información
11
Wired Magazine: The Blood Test Gets a Makeover

12. Santiago Bustelo (@sbustelo) •M E M B E R
Información al servicio de una decisión
12

13. Santiago Bustelo (@sbustelo) •M E M B E R
Información al servicio de una decisión
12

14. Santiago Bustelo (@sbustelo) •M E M B E R
Sitios estáticos
Contenido estático con el
que no se puede interactuar.
Diseño Gráfico
Aplicaciones web
Contenido dinámico privado
modificado por la
interacción con el usuario.
Diseño de Interacción
Sitios sociales
Contenido dinámico público
modificado por la
interacción de mucha gente.
Diseño de Interacción Social
1991-2011: Cada vez más interacción
13

15. Santiago Bustelo (@sbustelo) •M E M B E R
Leer el diario
1991
14

16. Santiago Bustelo (@sbustelo) •M E M B E R
Leer el diario
1991 2011
14

17. Santiago Bustelo (@sbustelo) •M E M B E R
1991
Buscar trabajo
15

18. Santiago Bustelo (@sbustelo) •M E M B E R
1991 2011
Buscar trabajo
15

19. Santiago Bustelo (@sbustelo) •M E M B E R
1991
Trabajo administrativo
16

20. Santiago Bustelo (@sbustelo) •M E M B E R
1991 2011
Trabajo administrativo
16

21. Santiago Bustelo (@sbustelo) •M E M B E R
1991
Hacer las compras
17

22. Santiago Bustelo (@sbustelo) •M E M B E R
1991 2011
Hacer las compras
17

23. Santiago Bustelo (@sbustelo) •M E M B E R
1991
Reencontrarse con compañeros de escuela
18

24. Santiago Bustelo (@sbustelo) •M E M B E R
1991 2011
Reencontrarse con compañeros de escuela
18

25. Santiago Bustelo (@sbustelo) •M E M B E R
El mundo digital que nosotros construimos
19
• En un mundo cada vez más conectado e
interdependiente, los diseñadores y
desarrolladores tenemos la llave para lograr
que cada producto o servicio interactivo sea
usable y accesible para todas las personas,
sin importar el nivel de alfabetización digital y
las capacidades físicas, sensoriales, e
intelectuales que tengan.

26. Santiago Bustelo (@sbustelo) •M E M B E R
Diseñando para
el usuario
20

27. Santiago Bustelo (@sbustelo) •M E M B E R
¿Cuándo está terminado nuestro trabajo?
• Cuando nos gusta a nosotros
• Cuando funciona como queríamos
• Cuando le gusta al cliente
• Cuando el usuario logra lo que esperábamos
21

28. Santiago Bustelo (@sbustelo) •M E M B E R
Diseñando para una mejor Usabilidad
+ Efectividad
• Diseño Centrado en el Usuario
+ Eficiencia
• Análisis, cuantificación y optimización
• Menor carga cognitiva
• Prevención de errores, bajo costo de recuperación
+ Satisfacción
• Previsibilidad
• Consistencia interna y con la plataforma
• Elementos funcionan cumpliendo expectativa
22

29. Santiago Bustelo (@sbustelo) •M E M B E R
Escala de las decisiones sobre la forma
23

30. Santiago Bustelo (@sbustelo) •M E M B E R
Sitios que te inspiran vs. sitios que usás
24

31. Santiago Bustelo (@sbustelo) •M E M B E R
Proceso de diseño convergente
1. Objetivos y análisis inicial.
2. Diseño y desarrollo en iteraciones
avanzando progresivamente en:
• Funcionalidad
• Estructura y elementos
• Lenguaje visual
3. Entrega y puesta en producción.
25

32. Santiago Bustelo (@sbustelo) •M E M B E R
SIU Guaraní: versión actual
26

33. Santiago Bustelo (@sbustelo) •M E M B E R
SIU Guaraní: versión actual
27

34. Santiago Bustelo (@sbustelo) •M E M B E R
Plan de proyecto
• Tareas iniciales
• Establecimiento de objetivos del
proyecto.
• Relevamiento del modelo operativo y
proceso actual.
• Relevamiento con usuarios
• Definición de perfiles de usuarios,
tareas críticas y escenarios, entorno y
guión para las pruebas.
Reclutamiento de usuarios.
• Pruebas con usuarios sobre interfaz
actual.
• Arquitectura de información
• Elaboración de mapa de sitio.
• Diseño de prototipo preliminar
• Wireframes.
• Validación de prototipo con
referentes del cliente.
• Pruebas con usuarios.
• Diseño de prototipo final
• Implementación de ajustes.
• Lenguaje visual.
• Diseño final.
28

35. Santiago Bustelo (@sbustelo) •M E M B E R
Guión de tareas críticas
• Login
• ¿El usuario recuerda su clave? ¿Cómo
resuelve problemas de ingreso?
• Inscribirse a una materia determinada,
cátedra a elección
• Identificación de materia correcta
• Proceso de decisión: Cátedra, días,
horarios
• Inscribirse a materia y comisión (amigos)
• Proceso de navegación e inscripción
• Resolución de problema: no hay cupo
• Inscripción a correlativas
• Información de contexto
• Qué materias figuran como aprobadas,
cursadas o libres
• Nomenclatura, proceso
• Dar de baja una materia
• ¿Cuál es la pantalla inicial?
Orden Sujeto - Verbo
• Inscripción a examen final
• ¿Proceso similar al de insc. a
materia? ¿Posible confusión?
29

36. Pruebas de usabilidad: versión actual

37. Wireframes iniciales

38. Inscripción a materias

39. Inscripción a materias » cátedra y comisión

40. Pruebas de usabilidad: prototipo en papel

41. Diseño final: Inscripción a Materias

42. Diseño final: Inscripción a Materias

43. Diseño final: Historia académica

44. Santiago Bustelo (@sbustelo) •M E M B E R
Resultados
38
Efectividad
Eficiencia
Satisfacción
0 20 40 60 80 100
83,3
73,74
95,82
65,7
47,25
88,69
Interfaz original Nueva interfaz

45. Santiago Bustelo (@sbustelo) •M E M B E R
Accesibilidad Web
39
• Acceso universal a la Web, independientemente
del tipo de hardware, software, infraestructura
de red, idioma, cultura, localización geográfica
y capacidades de los usuarios.
World Wide Web Consortium
• Argentina: ley 26.653 de accesibilidad de la
información en la páginas web, aprobada por el
Congreso Nacional el 3 de noviembre de 2010.

46. ¿Cómo usa la web un no vidente?

47. Santiago Bustelo (@sbustelo) •M E M B E R
Accesibilidad: presentación visual vs.
presentación en lector de pantalla
41
Representación de texto realizada por Fangs – the screen reader emulator

48. Santiago Bustelo (@sbustelo) •M E M B E R
Usando la web con un lector de pantalla
42
• Se accede a la información de manera lineal, en el orden en
que se presenta en el HTML.
• Es necesario “tomarle la mano” a la estructura de la página y
del sitio.
• El marcado semántico ayuda a identificar grupos y elementos.
El lector de pantalla permite obtener índices de títulos, listas y
sus elementos.

49. Santiago Bustelo (@sbustelo) •M E M B E R
Caso ejemplo
43
• Una consultora ficticia de Recursos Humanos, que lanza una
sección de empleos para personas con discapacidad.
• Se presentan dos versiones del mismo sitio: uno con
problemas usuales de usabilidad y accesibilidad, otro
resolviendo esas situaciones.

50. Versión con problemas

51. ...para usuarios con daltonismo...
No se distingue sección activa
No se distinguen niveles de menú

52. ...y de lectores de pantalla
Page has fifty-five Links NTI S.A. Recursos Humanos colon Empleos, Busquedas laborales, buscar trabajo, encontrar
trabajo, trabajo en argentina, trabajo en buenos aires, reclutamiento de personal, cesion de personal dash Internet
Explorer Link Graphic Logo NTI colon los cuatro rombos (en color turquesa, marrón, ocre y gris) representan las cuatro
áreas que conforman nuestra visión y misión, el dinamismo y el constante cambio que son los desafíos del mundo de las
empresas Link Contáctenos Av. Corrientes one thousand forty-six Piso nine Bs. As. Argentina left paren Cone thousand
twenty-three ABC right paren Tel. colon left paren fifty-four eleven right paren four thousand one hundred twenty-three dash
five thousand six hundred seventy-eight Link Inicio Link Empleos Link Recursos Humanos Link La Empresa Link Español
bullet Link English Link Buscar empleo Link Búsqueda avanzada Ofertas destacadas Table with one column and sixty-
three rows Link Industrias Libertador S.R.L. Link Administrador de Bases de Datos Link Derqui SACIFI Link Responsable
Comercial Link Directorio Telemax Link Implementador Link Consultora Delcampo Link Equipe de Suporte Técnico em
Português Link Chandra and Asociados Link Analista Programador Java Sr. slash Ssr. Link Malloc Argentina Link Auditor
Interno Semi Senior slash Senior Link Grupo Castañares Link Administrativa Link Obligado Consultores Link Profesionales
de Impuestos Link Industrias Alvarez Jonte Link Administrador Link Leonov S.A. Link Administrador Middleware Link
Compass East Link Analista de Marketing On Line Jr slash Semi Sr Link Ayefour Link Tester Semi Sr Link Tomahawk SRL
Link Programador Web Java Semi Sr slash Junior Link Grupo Larralde Link Analista Sr. De Compensaciones Link
Constituyentes SA Link Customer Care Representatives Link Bacacay SRL Link Analista Jr. de Precios de Transferencia
Link Udaondo and Asociados Link Estudiantes avanzados o graduados de Contador Público Nacional Link Consultora
Cabildo Link Asistente de Impuestos Link Escalada SA Link Market Research Analyst Link Juramento S.R.L. Link
Enterprise Services Mainframe Link Bowman and CIA Link Administrador Unix Table end Graphic titulo.gif Buscar ofertas
del portal Table with five columns and eleven rows Graphic espacio Categoría colon Graphic espacio Combo box
Administración left paren thirty-seven right paren Graphic espacio Ubicación colon Graphic espacio Graphic espacio
Idiomas colon Graphic espacio Checkbox Not checked buscar empleos en el portal Ingles Checkbox Not checked buscar
empleos en el portal Varios Graphic espacio Antiguedad ofertas colon Graphic espacio Graphic espacio Graphic
espacio Graphic boton dash verde.gif Graphic espacio Table end Link Home Link Mapa del sitio Link Contáctenos
Abuso SEO
Alt describe
logo
Navegación
alt=titulo.gif
Recién llegamos al buscador!
Títulos para
mouseover
alt=boton-verde.gif
Flash “Envíe su CV” no perceptible
Bloque de ofertas destacadas
Sólo 1er categoría es perceptible

53. Santiago Bustelo (@sbustelo) •M E M B E R
Versión accesible: daltonismo
47
Simulación: protanopiaVisión estándar

54. Santiago Bustelo (@sbustelo) •M E M B E R
Page has seven headings and sixty-eight links NTI S.A. Recursos Humanos colon Ofertas laborales dash Internet Explorer Usted está en
colon Link Inicio colon Link Empleos colon Categorías. This page link Saltear navegación
Heading level one Link Graphic N.T.I. S.A. Recursos Humanos
Heading level four Oportunidades laborales Edit Graphic Buscar List of two items bullet Link Empleos por categoría bullet Link Ingrese su
CV List end List of five items bullet Link Inicio bullet Link Empleos bullet Link Recursos Humanos bullet Link La Empresa bullet Link
Contacto List end Link Español bullet Link English List of three items bullet Link Categorías bullet Link Búsqueda avanzada bullet Link
Ingrese su CV List end Graphic Miles de empresas lo están buscando
Heading level four Link Graphic Envíe su Currículum
Heading level two Categorías List of twenty-five items bullet Link Administración left paren thirty-seven right paren bullet Link Call Center
left paren eight right paren bullet Link Comercial slash Ventas left paren one hundred twenty-two right paren bullet Link Comercio Exterior
left paren twelve right paren bullet Link Contabilidad left paren thirty-one right paren bullet Link Diseño left paren twelve right paren bullet
Link E dash commerce left paren nine right paren bullet Link Educación left paren five right paren bullet Link Finanzas left paren thirty-two
right paren bullet Link Gastronomía left paren fourteen right paren bullet Link Gerencia slash Dirección Gral left paren six right paren bullet
Link Hotelería left paren two right paren bullet Link Impuestos left paren eleven right paren bullet Link Ingeniería left paren eight right paren
bullet Link Legal left paren twelve right paren bullet Link Logística left paren fifteen right paren bullet Link Mantenimiento left paren four right
paren bullet Link Marketing left paren twenty-four right paren bullet Link Multimedia left paren four right paren bullet Link Pasantías left paren
six right paren bullet Link Periodismo left paren four right paren bullet Link Producción e Ingeniería left paren twenty-five right paren bullet
Link Recepcionista left paren twelve right paren bullet Link Recursos Humanos left paren twenty-four right paren bullet Link Empleo para
Personas con Discapacidad left paren forty-one right paren List end
Heading level four Ofertas destacadas Definition list of twenty-one items Industrias Libertador S.R.L. equals Link Administrador de
Bases de Datos Derqui SACIFI equals Link Responsable Comercial Directorio Telemax equals Link Implementador Consultora Delcampo
equals Link Equipe de Suporte Técnico…
Versión accesible: lectores de pantalla
48
Categorías perceptibles
Breadcrumb accesible
Sólo perceptible por
lectores de pantalla
Marcado semántico: títulos y listas

55. Santiago Bustelo (@sbustelo) •M E M B E R
Diseñando para todos
• La accesibilidad es un atributo cualitativo intrínseco al
producto, resultado de decisiones acertadas desde el inicio del
proyecto.
• Respetar referentes, estándares y convenciones.
• Validar diseño, contenidos, maquetación e implementación.
• Buscar oportunidades para testear con usuarios.
• Una web accesible nos beneficia a todos, hoy y mañana.
49

56. M E M B E R
¡Muchas gracias!
Diseño de Interacción, accesibilidad e inclusión
Santiago Bustelo
3a Jornada del FIEDBA - 26 de octubre, 2011