Presentación bajo licencia Creative Commons
Atribución 2.5 Argentina
http://creativecommons.org/licenses/by/2.5/arM E M B ...
M E M B E R
Me presento…
• Santiago Bustelo, diseñador de interacción.
• Fundador y Director de Diseño, Kambrica.
• Fundad...
Santiago Bustelo (@sbustelo) •M E M B E R
IxDA (Interaction Design Association)
• Organización abierta, voluntaria y gratu...
Santiago Bustelo (@sbustelo) •M E M B E R
Diseño es…
• …la organización de materiales y procesos de la forma más
productiv...
DISEÑO DE
INTERACCIÓN
INTERACCIÓN
HUMANO-COMPUTADOR
IxD
DISEÑO
INDUSTRIAL
DISEÑO
DE SONIDO
DI
ARQUITECTURAARQUITECTURA
DE ...
Santiago Bustelo (@sbustelo) •M E M B E R
• Diseño de Experiencias (UX)
• Diseño de Interacción (IxD)
• Define el modelo d...
Santiago Bustelo (@sbustelo) •M E M B E R
Funciones del diseño
Información
Presentación
Uso
7
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
2...
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 ...
Santiago Bustelo (@sbustelo) •M E M B E R
• La usabilidad de una interfaz es una medida
de la efectividad, eficiencia y sa...
Santiago Bustelo (@sbustelo) •M E M B E R
Datos vs. Información
11
Wired Magazine: The Blood Test Gets a Makeover
Santiago Bustelo (@sbustelo) •M E M B E R
Información al servicio de una decisión
12
Santiago Bustelo (@sbustelo) •M E M B E R
Información al servicio de una decisión
12
Santiago Bustelo (@sbustelo) •M E M B E R
Sitios estáticos
Contenido estático con el
que no se puede interactuar.
Diseño G...
Santiago Bustelo (@sbustelo) •M E M B E R
Leer el diario
1991
14
Santiago Bustelo (@sbustelo) •M E M B E R
Leer el diario
1991 2011
14
Santiago Bustelo (@sbustelo) •M E M B E R
1991
Buscar trabajo
15
Santiago Bustelo (@sbustelo) •M E M B E R
1991 2011
Buscar trabajo
15
Santiago Bustelo (@sbustelo) •M E M B E R
1991
Trabajo administrativo
16
Santiago Bustelo (@sbustelo) •M E M B E R
1991 2011
Trabajo administrativo
16
Santiago Bustelo (@sbustelo) •M E M B E R
1991
Hacer las compras
17
Santiago Bustelo (@sbustelo) •M E M B E R
1991 2011
Hacer las compras
17
Santiago Bustelo (@sbustelo) •M E M B E R
1991
Reencontrarse con compañeros de escuela
18
Santiago Bustelo (@sbustelo) •M E M B E R
1991 2011
Reencontrarse con compañeros de escuela
18
Santiago Bustelo (@sbustelo) •M E M B E R
El mundo digital que nosotros construimos
19
• En un mundo cada vez más conectad...
Santiago Bustelo (@sbustelo) •M E M B E R
Diseñando para
el usuario
20
Santiago Bustelo (@sbustelo) •M E M B E R
¿Cuándo está terminado nuestro trabajo?
• Cuando nos gusta a nosotros
• Cuando f...
Santiago Bustelo (@sbustelo) •M E M B E R
Diseñando para una mejor Usabilidad
+ Efectividad
• Diseño Centrado en el Usuari...
Santiago Bustelo (@sbustelo) •M E M B E R
Escala de las decisiones sobre la forma
23
Santiago Bustelo (@sbustelo) •M E M B E R
Sitios que te inspiran vs. sitios que usás
24
Santiago Bustelo (@sbustelo) •M E M B E R
Proceso de diseño convergente
1. Objetivos y análisis inicial.
2. Diseño y desar...
Santiago Bustelo (@sbustelo) •M E M B E R
SIU Guaraní: versión actual
26
Santiago Bustelo (@sbustelo) •M E M B E R
SIU Guaraní: versión actual
27
Santiago Bustelo (@sbustelo) •M E M B E R
Plan de proyecto
• Tareas iniciales
• Establecimiento de objetivos del
proyecto....
Santiago Bustelo (@sbustelo) •M E M B E R
Guión de tareas críticas
• Login
• ¿El usuario recuerda su clave? ¿Cómo
resuelve...
Pruebas de usabilidad: versión actual
Wireframes iniciales
Inscripción a materias
Inscripción a materias » cátedra y comisión
Pruebas de usabilidad: prototipo en papel
Diseño final: Inscripción a Materias
Diseño final: Inscripción a Materias
Diseño final: Historia académica
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
9...
Santiago Bustelo (@sbustelo) •M E M B E R
Accesibilidad Web
39
• Acceso universal a la Web, independientemente
del tipo de...
¿Cómo usa la web un no vidente?
Santiago Bustelo (@sbustelo) •M E M B E R
Accesibilidad: presentación visual vs.
presentación en lector de pantalla
41
Rep...
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 maner...
Santiago Bustelo (@sbustelo) •M E M B E R
Caso ejemplo
43
• Una consultora ficticia de Recursos Humanos, que lanza una
sec...
Versión con problemas
...para usuarios con daltonismo...
No se distingue sección activa
No se distinguen niveles de menú
...y de lectores de pantalla
Page has fifty-five Links NTI S.A. Recursos Humanos colon Empleos, Busquedas laborales, buscar ...
Santiago Bustelo (@sbustelo) •M E M B E R
Versión accesible: daltonismo
47
Simulación: protanopiaVisión estándar
Santiago Bustelo (@sbustelo) •M E M B E R
Page has seven headings and sixty-eight links NTI S.A. Recursos Humanos colon Of...
Santiago Bustelo (@sbustelo) •M E M B E R
Diseñando para todos
• La accesibilidad es un atributo cualitativo intrínseco al...
M E M B E R
¡Muchas gracias!
Diseño de Interacción, accesibilidad e inclusión
Santiago Bustelo
3a Jornada del FIEDBA - 26 ...
Upcoming SlideShare
Loading in...5
×

Diseño de interaccion, accesibilidad e inclusion - 3ª Jornada del FIEDBA

1,959

Published on

El Diseño de Interacción es una nueva disciplina que comparte principios y herramientas de Diseño Industrial, Diseño Gráfico e Ingeniería de Software, dedicada al diseño de productos digitales que ofrezcan mejores experiencias para la mayor cantidad de usuarios.

En un mundo cada vez más conectado e interdependiente, los diseñadores 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.

Se presentan metodologías y herramientas que permiten hoy hacer realidad esa meta, casos reales de aplicación y sus resultados, y oportunidades y desafíos que presentan las nuevas disciplinas.

Acerca del FIEDBA:

El FIEDBA (Foro de Instituciones educativas del Diseño de la Ciudad de Buenos Aires) se constituye desde marzo del 2007, en el marco del Nombramiento de la UNESCO, “Buenos Aires, Ciudad del Diseño”. Dicho Foro está integrado, por los representantes de las Instituciones, privadas y de orden estatal, terciarias y universitarias, que enseñan carreras de Diseño, en la Ciudad.

La misión principal de este foro es promover la mejora de la calidad académica en el diseño y el intercambio entre instituciones, abordando diversas temáticas que incumbe a las instituciones educativas.

Published in: Design
1 Comment
5 Likes
Statistics
Notes
No Downloads
Views
Total Views
1,959
On Slideshare
0
From Embeds
0
Number of Embeds
5
Actions
Shares
0
Downloads
51
Comments
1
Likes
5
Embeds 0
No embeds

No notes for slide

Diseño de interaccion, accesibilidad e inclusion - 3ª Jornada del FIEDBA

  1. 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. 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. 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. 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. 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. 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. 7. Santiago Bustelo (@sbustelo) •M E M B E R Funciones del diseño Información Presentación Uso 7
  8. 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. 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. 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. 11. Santiago Bustelo (@sbustelo) •M E M B E R Datos vs. Información 11 Wired Magazine: The Blood Test Gets a Makeover
  12. 12. Santiago Bustelo (@sbustelo) •M E M B E R Información al servicio de una decisión 12
  13. 13. Santiago Bustelo (@sbustelo) •M E M B E R Información al servicio de una decisión 12
  14. 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. 15. Santiago Bustelo (@sbustelo) •M E M B E R Leer el diario 1991 14
  16. 16. Santiago Bustelo (@sbustelo) •M E M B E R Leer el diario 1991 2011 14
  17. 17. Santiago Bustelo (@sbustelo) •M E M B E R 1991 Buscar trabajo 15
  18. 18. Santiago Bustelo (@sbustelo) •M E M B E R 1991 2011 Buscar trabajo 15
  19. 19. Santiago Bustelo (@sbustelo) •M E M B E R 1991 Trabajo administrativo 16
  20. 20. Santiago Bustelo (@sbustelo) •M E M B E R 1991 2011 Trabajo administrativo 16
  21. 21. Santiago Bustelo (@sbustelo) •M E M B E R 1991 Hacer las compras 17
  22. 22. Santiago Bustelo (@sbustelo) •M E M B E R 1991 2011 Hacer las compras 17
  23. 23. Santiago Bustelo (@sbustelo) •M E M B E R 1991 Reencontrarse con compañeros de escuela 18
  24. 24. Santiago Bustelo (@sbustelo) •M E M B E R 1991 2011 Reencontrarse con compañeros de escuela 18
  25. 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. 26. Santiago Bustelo (@sbustelo) •M E M B E R Diseñando para el usuario 20
  27. 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. 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. 29. Santiago Bustelo (@sbustelo) •M E M B E R Escala de las decisiones sobre la forma 23
  30. 30. Santiago Bustelo (@sbustelo) •M E M B E R Sitios que te inspiran vs. sitios que usás 24
  31. 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. 32. Santiago Bustelo (@sbustelo) •M E M B E R SIU Guaraní: versión actual 26
  33. 33. Santiago Bustelo (@sbustelo) •M E M B E R SIU Guaraní: versión actual 27
  34. 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. 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. 36. Pruebas de usabilidad: versión actual
  37. 37. Wireframes iniciales
  38. 38. Inscripción a materias
  39. 39. Inscripción a materias » cátedra y comisión
  40. 40. Pruebas de usabilidad: prototipo en papel
  41. 41. Diseño final: Inscripción a Materias
  42. 42. Diseño final: Inscripción a Materias
  43. 43. Diseño final: Historia académica
  44. 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. 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. 46. ¿Cómo usa la web un no vidente?
  47. 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. 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. 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. 50. Versión con problemas
  51. 51. ...para usuarios con daltonismo... No se distingue sección activa No se distinguen niveles de menú
  52. 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. 53. Santiago Bustelo (@sbustelo) •M E M B E R Versión accesible: daltonismo 47 Simulación: protanopiaVisión estándar
  54. 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. 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. 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
  1. ¿Le ha llamado la atención una diapositiva en particular?

    Recortar diapositivas es una manera útil de recopilar información importante para consultarla más tarde.

×