Clase 19 Accesibilidad

Vista previa del material en texto

ACCESIBILIDAD
 Clase 19. DISEÑO UX/UI
Obligatoria siempre. Lleva el ícono y el color del curso (provisto por CH).
RECORDÁ PONER A GRABAR LA CLASE
LO MÁS RELEVANTE DE LA CLASE 18
ui kit: El UI kit (del inglés User Interface Kit) es un archivo/documento que incluye varios elementos ya prediseñados para ayudarnos en el desarrollo de nuestras interfaces de usuario. Se pueden editar fácilmente (los elementos en un UI kit suelen estar hechos con capas), de manera que podemos personalizarlos o adaptarlos a nuestras necesidades (cambiar tamaño, color, etc.).
GLOSARIO:
Clase 18
Moodboard: En un tablero visual con todos aquellos elementos estéticos que sirven para diseñar la UI. Nos permite definir el clima visual del proyecto y chequear con el cliente si es lo que este esperaba. Nos ayuda a identificar el tema y el espíritu visual de una idea, abriendo la creatividad, enfocando y dando forma a nuestras ideas.
Icono: Es el signo identificatorio de una app que tiene por objetivo generar interés e impacto visual en los usuarios. También sirve para identificarla en el listado de app disponibles del celular. No importa cuán genial sea su ícono, si una aplicación no es útil, el usuario la eliminará.
GLOSARIO:
Clase 18
CRONOGRAMA DEL CURSO
Clase 20
Motion UI
Clase 18
UI Kit y Moodboard
UI KIT+MOODBOARD
& ICON DESIGN
DEFINIENDO EL MOODBOARD Y ARMANDO EL UI Kit DEL PROYECTO
GENERAR NUESTRO
ICONO DE LA APP
Clase 19
Accesibilidad
REVISANDO Y APLICANDO ACCESIBILIDAD AL PROTOTIPO
ENTREGA PROYECTO 5
MICROINTERACCIONES Y ANIMACIÓN DEL PROTOTIPO
INCORPORANDO MICROINTERACCIONES AL PROTOTIPO
Comprender el concepto de Accesibilidad Digital
Reconocer cómo aplicar accesibilidad en un sitio web o app.
Revisar conceptos de colores, estructura, imágenes desde la accesibilidad digital.
OBJETIVOS DE LA CLASE
No va, es para guiar el uso del plantilla.
MAPA DE CONCEPTOS CLASE 19
ITERAR
Analizar
Diseñar
Validar
Prototipar
Evaluar
EVALUACIÓN HEURÍSTICA
ACCESIBILIDAD
¿ARRANCAMOS?
ACCESIBILIDAD
Usar para los módulos más importantes de la clase, donde se introducen conceptos que se ven en varios módulos. No hay que usarla para todos los módulos.
La accesibilidad digital consiste en desarrollar productos que puedan ser utilizados por el mayor número de usuarios con necesidades específicas. 
Estas necesidades pueden ser debido a limitaciones derivadas del entorno o derivadas de dificultades visuales, auditivas, motrices y neurológicas (dislexia, trastornos de atención, falta de memoria, entre otras).
Usar para slides de sólo texto. Si no alcanza, no sobrecargar, usar otra con el mismo título para indicar que continúa el mismo módulo.
La accesibilidad establece normas específicas (regulaciones) para crear plataformas que puedan ser consumidas por cualquier persona desde cualquier dispositivo. 
Considera las condiciones especiales de movimiento, percepción o cognición de los usuarios. También contempla las particularidades del entorno, como la luminosidad, ruido ambiente, idioma o lenguaje técnico.
Usar para slides de sólo texto. Si no alcanza, no sobrecargar, usar otra con el mismo título para indicar que continúa el mismo módulo.
En 2018, la Organización Mundial de la Salud informó que más de mil millones de personas (15% de la población mundial) tienen algún tipo de discapacidad.
Usar para slides de sólo texto. Si no alcanza, no sobrecargar, usar otra con el mismo título para indicar que continúa el mismo módulo.
REGULACIONES
Usar para los módulos más importantes de la clase, donde se introducen conceptos que se ven en varios módulos. No hay que usarla para todos los módulos.
A nivel mundial se encarga de la creación de lineamientos de Accesibilidad Web, llamados “Pautas de Accesibilidad de Contenido Web” (WCAG). Cada país decide o no utilizarlas y de qué manera. En Argentina existe la ley “26.653 de “Accesibilidad Web” 
W3C (WORLD WIDE WEB CONSORTIUM)
Usar para slides de sólo texto. Si no alcanza, no sobrecargar, usar otra con el mismo título para indicar que continúa el mismo módulo.
“Estado nacional, los entes públicos no estatales, las empresas del Estado y las empresas privadas concesionarias de servicios públicos, deberán respetar en los diseños de sus páginas Web las normas y requisitos sobre accesibilidad de la información que faciliten el acceso a sus contenidos, a todas las personas con discapacidad”.
Ley “26.653 de “Accesibilidad Web”
Usar para slides de sólo texto con citas.
¿CUÁLES SON LOS PRINCIPIOS DE ACCESIBILIDAD WEB?
Usar para los módulos más importantes de la clase, donde se introducen conceptos que se ven en varios módulos. No hay que usarla para todos los módulos.
PRINCIPIOS
Perceptible
Operable
Robusto
Comprensible
Usar para slides de texto con iconos. Sacar íconos de https://www.flaticon.com/
VEAMOS CADA UNO
DE LOS PRINCIPIOS EN PROFUNDIDAD
Usar para los módulos más importantes de la clase, donde se introducen conceptos que se ven en varios módulos. No hay que usarla para todos los módulos.
La información y los componentes de la interfaz deben ser presentados a las personas en formas que ellos puedan percibir.
PERCEPTIBLE
Usar para slides de sólo texto. Si no alcanza, no sobrecargar, usar otra con el mismo título para indicar que continúa el mismo módulo.
Usar para slides de sólo texto. Si no alcanza, no sobrecargar, usar otra con el mismo título para indicar que continúa el mismo módulo.
Debes ofrecer un texto alternativo para el contenido que no esté escrito. De esta forma, los usuarios podrán cambiarlo a otros formatos.
No usar la palabra imagen, sino el lector de audio reproducirá “una imagen de la torre de tokio”.
Texto o alternativa textual
El ejemplo muestra la forma correcta de usarlo. 
Usar para slides de texto con imagen.
Los contenidos multimedia que se sincronicen en tiempo real deben tener una alternativa para que los usuarios los accedan.
Agregar transcripciones a los videos y audios. Enlazar a contenidos que entreguen la información en texto.
Contenido multimedia dependiente del tiempo
Usar para slides de texto con imagen.
Los contenidos deben ser adaptables de distintas formas sin perder información o alterar su estructura. 
Organiza la página usando títulos y encabezados en distintos niveles. Los círculos negros indican el orden en que los elementos en pantalla podrían recibir el foco.
Adaptable
Usar para slides de texto con imagen.
Los títulos h1, h2… deben estar bien indicados y según importancia, por ejemplo: nombre de sección y nombre de subsección o título y subtítulo.
Adaptable
Usar para slides de texto con imagen.
Los nombres de las secciones o bloques deben ser descriptivos e indicar correctamente su contenido. 
Por ejemplo, que una página de Noticias enlace a artículos de actualidad y no a otro tipo de contenido que no tenga nada que ver.
Adaptable
Usar para slides de texto con imagen.
Los usuarios deben poder distinguir la importancia del contenido y su estructura con facilidad.
Uso del color: El color crea jerarquías y destaca. Además, se deben considerar formas alternativas de percepción del color.
Distinguible
Usar para slides de texto con imagen.
Los usuarios deben poder distinguir la importancia del contenido y su estructura con facilidad.
Texto adaptable: Debe existir la posibilidad de agrandar hasta un 200% las tipografías, sin perder funcionalidad o contenido.
Distinguible
Usar para slides de texto con imagen.
Los usuarios deben poder distinguir la importancia del contenido y su estructura con facilidad.
Contraste: La presentación visual del texto y las imágenes deben tener un radio de al menos 4:5:1. Cuando se trata de fuentes muy grandes este puede ser de mínimo 3:1. La única excepción son los componentes inactivos o decorativos (contrast-ratio.com/)
Distinguible
Usar para slides de texto con imagen.
Las imágenes informativas tienen elementos esenciales y no esenciales. La informaciónesencial (1) debe tener una relación de contraste de color de 3: 1 para texto grande y 4.5: 1 para texto pequeño.
Elementos esenciales
y no esenciales
Usar para slides de texto con imagen.
El usuario debe poder manejar los componentes de la interfaz
y la navegación.
OPERABLES
Usar para slides de sólo texto. Si no alcanza, no sobrecargar, usar otra con el mismo título para indicar que continúa el mismo módulo.
Usar para slides de sólo texto. Si no alcanza, no sobrecargar, usar otra con el mismo título para indicar que continúa el mismo módulo.
Debes ofrecer una forma de controlar las funciones desde el teclado, sin requerir tiempos específicos para llevar a cabo acciones.
Control desde
el teclado
Usar para slides de texto con imagen.
Ayuda a los usuarios a navegar y buscar contenido. Se puede lograr mediante el uso de enlaces, títulos y encabezados, entre otros.
Navegación
Usar para slides de texto con imagen.
La información y las operaciones deben ser comprensibles para los usuarios.
COMPRENSIBLE
Usar para slides de sólo texto. Si no alcanza, no sobrecargar, usar otra con el mismo título para indicar que continúa el mismo módulo.
Usar para slides de sólo texto. Si no alcanza, no sobrecargar, usar otra con el mismo título para indicar que continúa el mismo módulo.
Crea contenido legible y comprensible. Se puede ofrecer un mecanismo para ver el significado de abreviaciones o identificar la correcta pronunciación de palabras, entre otros.
Legibilidad
“Mostrar / Ocultar menú de navegación”
“Editar”
Usar para slides de texto con imagen.
Los elementos relacionados se pueden agrupar en proximidad entre sí para mejorar la legibilidad.
El valor del control deslizante está muy cerca del control deslizante.
Agrupación
Usar para slides de texto con imagen.
La apariencia y la forma de utilizar las interfaces digitales debe ser previsible. Los mecanismos de navegación y los componentes que comparten una misma función deben ser similares y consistentes a través del sitio. Además, las funciones automáticas deben ser anunciadas o contextualizadas.
Previsible
Usar para slides de texto con imagen.
Se debe notificar a los usuarios cuando ha ocurrido un error o algo es incorrecto y hay que guiarlos para que entiendan cómo interactuar con la plataforma.
Asistencia a la
entrada de datos
Usar para slides de texto con imagen.
El contenido deber ser suficientemente robusto para que pueda ser bien interpretado por una gran variedad de agentes de usuario, incluyendo tecnologías de asistencia.
ROBUSTO
Usar para slides de sólo texto. Si no alcanza, no sobrecargar, usar otra con el mismo título para indicar que continúa el mismo módulo.
Usar para slides de sólo texto. Si no alcanza, no sobrecargar, usar otra con el mismo título para indicar que continúa el mismo módulo.
El orden visual de la pantalla debe coincidir con el codigo HTML de la pagina. Caso contrario el lector de pantalla leera cada linea de codigo y confudira al usuario que este escuchando (imagen 2). En la imagen 1 vemos como el orden visual de pantalla coincide con el codigo generando que el usuario escuche correctamente cada uno de los pasos. Mient
Jerarquías y lectores
de pantalla
imagen 1 
imagen 2 
Usar para slides de texto con imagen.
NIVELES DE CONFORMIDAD Y PRIORIDADES
Usar para los módulos más importantes de la clase, donde se introducen conceptos que se ven en varios módulos. No hay que usarla para todos los módulos.
Las pautas WCAG 2.0 se clasifican en tres niveles de conformidad: A (mas bajo) - AA (rango medio) - AAA (más alto). Las herramientas de accesibilidad puntúan utilizando esta nomenclatura.
PAUTAS WCAG 2.0
Usar para slides de sólo texto. Si no alcanza, no sobrecargar, usar otra con el mismo título para indicar que continúa el mismo módulo.
PRIORIDADES Y CONFORMIDAD
	Prioridad 1
De no cumplirse, ciertos usuarios no podrían acceder a la información.	Nivel A
Cumple con todas las pautas de prioridad 1.
	Prioridad 2
De no cumplirse, para ciertos usuarios sería muy difícil acceder a la información.	Nivel AA
Cumple con todas las pautas de prioridad 2.
	Prioridad 3
De no cumplirse, ciertos usuarios podrían
tener ciertas dificultades para acceder a la información.	Nivel AAA
Cumple con todas las pautas de prioridad 3.
Usar para slides de sólo texto. Si no alcanza, no sobrecargar, usar otra con el mismo título para indicar que continúa el mismo módulo.
¡PARA PENSAR!
¿Cuál es el mayor problema de accesibilidad que tiene la siguiente imagen?
MULTIPLE CHOICE
CONTESTA LA ENCUESTA DE ZOOM
MULTIPLE CHOICE
Duración estimada: 3 minutos
Espacio: Encuesta Zoom
El docente deberá habilitar esta encuesta desde poll zoom para que los alumnos respondan. Esto es una actividad de comprobación.
NOTA: retomar y mostrar los resultados de la encuesta a los estudiantes al volver el break.
Pregunta: ¿Cuál es el mayor problema de accesibilidad que tiene la siguiente imagen?
Opciones:
Legibilidad
Contraste
MULTIPLE CHOICE
Duración estimada: 3 minutos
Espacio: Encuesta Zoom
El docente deberá habilitar esta encuesta desde poll zoom para que los alumnos respondan. Esto es una actividad de comprobación.
NOTA: retomar y mostrar los resultados de la encuesta a los estudiantes al volver el break.
Pregunta: ¿Cuál es el mayor problema de accesibilidad que tiene la siguiente imagen?
Opciones:
Legibilidad
Contraste
☕ BREAK
¡5/10 MINUTOS Y VOLVEMOS!
Obligatoria siempre.
REVISANDO Y APLICANDO
ACCESIBILIDAD AL PROTOTIPO
Paso a paso
Revisando y Aplicando Accesibilidad al prototipo: Paso a paso
Duración estimada: 30 minutos 
Herramientas: Adobe XD y Figma
Consigna: El docente deberá:
Mostrar como funcionalidad los plugins destinados a verificar la accesibilidad del prototipo.
Mostrar y ejemplificar que sucede con el contraste y la legibilidad.
Dejar en claro que los iconos deben ser fáciles de comprender. 
¿Cómo llevar adelante la actividad?
Paso 1: Comentar que existen plugins que nos ayudarán a mejorar nuestro prototipo desde la accesibilidad.
Paso 2: Introducir A11y - Color Contrast Checker en FIGMA y mostrar cómo funciona el plugins. Debe quedar claro el uso de los niveles de conformidad.
Paso 3: Introducir Stark en Adobe XD y mostrar cómo funciona el plugins. Debe quedar claro el uso de niveles de conformidad.
Paso 4: Hablar de Color Blind y Stark en Figma y Adobe XD respectivamente y hablar acerca del uso del color y el daltonismo. 
Paso 5: Mostrar el ejemplo del color con los Daltónicos y muestra algunos ejemplos de como solucionarlo. 
Paso 6: Mostrar Color Safe como una herramienta web para revisar y generar elementos de colores que cumplan con los niveles de conformidad de accesibilidad.
¿Cómo se irán mostrando las herramientas de Adobe XD y Figma?
Tanto Adobe XD como FIgma tienen varias capas para ir mostrando por parte del docente. Esto lo haremos de la siguiente manera:
1. Conceptos básicos
2. Concepto Prototipo Funcional básico (Interacción y Acción)
3. Concepto de Componentes y Estilos
4. Concepto de Grilla
5. Plugins Accesibilidad (HOY ESTAMOS ACA)
5. Concepto Prototipo Funcional Avanzado (Smart Animation, After Delay, entre otros)
NOTAS:
1. Se pueden mostrar otros plugins o web que ayuden a los estudiantes a mejorar sus prototipos desde la accesibilidad.
A11y - Color Contrast Checker
La herramienta (en este caso para Figma) nos permite trabajar sobre los elementos y recomendaciones que nos permitirán crear prototipos más accesibles. Este plugin trabaja con los niveles de conformidad para definir su accesibilidad.
Revisando y Aplicando Accesibilidad al prototipo: Paso a paso
Duración estimada: 30 minutos 
Herramientas: Adobe XD y Figma
Consigna: El docente deberá:
Mostrar como funcionalidad los plugins destinados a verificar la accesibilidad del prototipo.
Mostrar y ejemplificar que sucede con el contraste y la legibilidad.
Dejar en claro que los iconos deben ser fáciles de comprender. 
¿Cómo llevar adelante la actividad?Paso 1: Comentar que existen plugins que nos ayudarán a mejorar nuestro prototipo desde la accesibilidad.
Paso 2: Introducir A11y - Color Contrast Checker en FIGMA y mostrar cómo funciona el plugins. Debe quedar claro el uso de los niveles de conformidad.
Paso 3: Introducir Stark en Adobe XD y mostrar cómo funciona el plugins. Debe quedar claro el uso de niveles de conformidad.
Paso 4: Hablar de Color Blind y Stark en Figma y Adobe XD respectivamente y hablar acerca del uso del color y el daltonismo. 
Paso 5: Mostrar el ejemplo del color con los Daltónicos y muestra algunos ejemplos de como solucionarlo. 
Paso 6: Mostrar Color Safe como una herramienta web para revisar y generar elementos de colores que cumplan con los niveles de conformidad de accesibilidad.
¿Cómo se irán mostrando las herramientas de Adobe XD y Figma?
Tanto Adobe XD como FIgma tienen varias capas para ir mostrando por parte del docente. Esto lo haremos de la siguiente manera:
1. Conceptos básicos
2. Concepto Prototipo Funcional básico (Interacción y Acción)
3. Concepto de Componentes y Estilos
4. Concepto de Grilla
5. Plugins Accesibilidad (HOY ESTAMOS ACA)
5. Concepto Prototipo Funcional Avanzado (Smart Animation, After Delay, entre otros)
NOTAS:
1. Se pueden mostrar otros plugins o web que ayuden a los estudiantes a mejorar sus prototipos desde la accesibilidad.
Stark
La herramienta de verificación de contraste de Stark permite a los diseñadores verificar que su tipografía y tamaño de fuente, junto con los colores de fondo del diseño o las imágenes de apoyo, proporcionen la legibilidad necesaria y el contraste suficiente para armonizar con las pautas de accesibilidad.
Revisando y Aplicando Accesibilidad al prototipo: Paso a paso
Duración estimada: 30 minutos 
Herramientas: Adobe XD y Figma
Consigna: El docente deberá:
Mostrar como funcionalidad los plugins destinados a verificar la accesibilidad del prototipo.
Mostrar y ejemplificar que sucede con el contraste y la legibilidad.
Dejar en claro que los iconos deben ser fáciles de comprender. 
¿Cómo llevar adelante la actividad?
Paso 1: Comentar que existen plugins que nos ayudarán a mejorar nuestro prototipo desde la accesibilidad.
Paso 2: Introducir A11y - Color Contrast Checker en FIGMA y mostrar cómo funciona el plugins. Debe quedar claro el uso de los niveles de conformidad.
Paso 3: Introducir Stark en Adobe XD y mostrar cómo funciona el plugins. Debe quedar claro el uso de niveles de conformidad.
Paso 4: Hablar de Color Blind y Stark en Figma y Adobe XD respectivamente y hablar acerca del uso del color y el daltonismo. 
Paso 5: Mostrar el ejemplo del color con los Daltónicos y muestra algunos ejemplos de como solucionarlo. 
Paso 6: Mostrar Color Safe como una herramienta web para revisar y generar elementos de colores que cumplan con los niveles de conformidad de accesibilidad.
¿Cómo se irán mostrando las herramientas de Adobe XD y Figma?
Tanto Adobe XD como FIgma tienen varias capas para ir mostrando por parte del docente. Esto lo haremos de la siguiente manera:
1. Conceptos básicos
2. Concepto Prototipo Funcional básico (Interacción y Acción)
3. Concepto de Componentes y Estilos
4. Concepto de Grilla
5. Plugins Accesibilidad (HOY ESTAMOS ACA)
5. Concepto Prototipo Funcional Avanzado (Smart Animation, After Delay, entre otros)
NOTAS:
1. Se pueden mostrar otros plugins o web que ayuden a los estudiantes a mejorar sus prototipos desde la accesibilidad.
Color Blind
La herramienta (en este caso para Figma) nos permite comprender cómo se verán sus colores desde la perspectiva de los diferentes tipos de daltonismo. Una de las cosas únicas de este complemento es que no solo le brinda una vista previa de los colores que ha elegido, sino que en realidad genera imágenes en el lienzo en función de los elementos que haya seleccionado.
Revisando y Aplicando Accesibilidad al prototipo: Paso a paso
Duración estimada: 30 minutos 
Herramientas: Adobe XD y Figma
Consigna: El docente deberá:
Mostrar como funcionalidad los plugins destinados a verificar la accesibilidad del prototipo.
Mostrar y ejemplificar que sucede con el contraste y la legibilidad.
Dejar en claro que los iconos deben ser fáciles de comprender. 
¿Cómo llevar adelante la actividad?
Paso 1: Comentar que existen plugins que nos ayudarán a mejorar nuestro prototipo desde la accesibilidad.
Paso 2: Introducir A11y - Color Contrast Checker en FIGMA y mostrar cómo funciona el plugins. Debe quedar claro el uso de los niveles de conformidad.
Paso 3: Introducir Stark en Adobe XD y mostrar cómo funciona el plugins. Debe quedar claro el uso de niveles de conformidad.
Paso 4: Hablar de Color Blind y Stark en Figma y Adobe XD respectivamente y hablar acerca del uso del color y el daltonismo. 
Paso 5: Mostrar el ejemplo del color con los Daltónicos y muestra algunos ejemplos de como solucionarlo. 
Paso 6: Mostrar Color Safe como una herramienta web para revisar y generar elementos de colores que cumplan con los niveles de conformidad de accesibilidad.
¿Cómo se irán mostrando las herramientas de Adobe XD y Figma?
Tanto Adobe XD como FIgma tienen varias capas para ir mostrando por parte del docente. Esto lo haremos de la siguiente manera:
1. Conceptos básicos
2. Concepto Prototipo Funcional básico (Interacción y Acción)
3. Concepto de Componentes y Estilos
4. Concepto de Grilla
5. Plugins Accesibilidad (HOY ESTAMOS ACA)
5. Concepto Prototipo Funcional Avanzado (Smart Animation, After Delay, entre otros)
NOTAS:
1. Se pueden mostrar otros plugins o web que ayuden a los estudiantes a mejorar sus prototipos desde la accesibilidad.
Stark
La herramienta de daltonismo de Stark permite simular las diversas formas de daltonismo al previsualizar rápidamente sus diseños y hacer los ajustes necesarios.
Revisando y Aplicando Accesibilidad al prototipo: Paso a paso
Duración estimada: 30 minutos 
Herramientas: Adobe XD y Figma
Consigna: El docente deberá:
Mostrar como funcionalidad los plugins destinados a verificar la accesibilidad del prototipo.
Mostrar y ejemplificar que sucede con el contraste y la legibilidad.
Dejar en claro que los iconos deben ser fáciles de comprender. 
¿Cómo llevar adelante la actividad?
Paso 1: Comentar que existen plugins que nos ayudarán a mejorar nuestro prototipo desde la accesibilidad.
Paso 2: Introducir A11y - Color Contrast Checker en FIGMA y mostrar cómo funciona el plugins. Debe quedar claro el uso de los niveles de conformidad.
Paso 3: Introducir Stark en Adobe XD y mostrar cómo funciona el plugins. Debe quedar claro el uso de niveles de conformidad.
Paso 4: Hablar de Color Blind y Stark en Figma y Adobe XD respectivamente y hablar acerca del uso del color y el daltonismo. 
Paso 5: Mostrar el ejemplo del color con los Daltónicos y muestra algunos ejemplos de como solucionarlo. 
Paso 6: Mostrar Color Safe como una herramienta web para revisar y generar elementos de colores que cumplan con los niveles de conformidad de accesibilidad.
¿Cómo se irán mostrando las herramientas de Adobe XD y Figma?
Tanto Adobe XD como FIgma tienen varias capas para ir mostrando por parte del docente. Esto lo haremos de la siguiente manera:
1. Conceptos básicos
2. Concepto Prototipo Funcional básico (Interacción y Acción)
3. Concepto de Componentes y Estilos
4. Concepto de Grilla
5. Plugins Accesibilidad (HOY ESTAMOS ACA)
5. Concepto Prototipo Funcional Avanzado (Smart Animation, After Delay, entre otros)
NOTAS:
1. Se pueden mostrar otros plugins o web que ayuden a los estudiantes a mejorar sus prototipos desde la accesibilidad.
Daltonismo
La imagen muestra que una persona con visión de protanopía puede no ver una diferenciación entre un color naranja (# FFA800) y un color verde (# 4AC200).
Revisando y Aplicando Accesibilidad al prototipo: Paso a paso
Duración estimada: 30 minutos 
Herramientas: Adobe XD y Figma
Consigna: El docente deberá:
Mostrar como funcionalidad los plugins destinados a verificar la accesibilidad del prototipo.
Mostrar y ejemplificar que sucede con el contrastey la legibilidad.
Dejar en claro que los iconos deben ser fáciles de comprender. 
¿Cómo llevar adelante la actividad?
Paso 1: Comentar que existen plugins que nos ayudarán a mejorar nuestro prototipo desde la accesibilidad.
Paso 2: Introducir A11y - Color Contrast Checker en FIGMA y mostrar cómo funciona el plugins. Debe quedar claro el uso de los niveles de conformidad.
Paso 3: Introducir Stark en Adobe XD y mostrar cómo funciona el plugins. Debe quedar claro el uso de niveles de conformidad.
Paso 4: Hablar de Color Blind y Stark en Figma y Adobe XD respectivamente y hablar acerca del uso del color y el daltonismo. 
Paso 5: Mostrar el ejemplo del color con los Daltónicos y muestra algunos ejemplos de como solucionarlo. 
Paso 6: Mostrar Color Safe como una herramienta web para revisar y generar elementos de colores que cumplan con los niveles de conformidad de accesibilidad.
¿Cómo se irán mostrando las herramientas de Adobe XD y Figma?
Tanto Adobe XD como FIgma tienen varias capas para ir mostrando por parte del docente. Esto lo haremos de la siguiente manera:
1. Conceptos básicos
2. Concepto Prototipo Funcional básico (Interacción y Acción)
3. Concepto de Componentes y Estilos
4. Concepto de Grilla
5. Plugins Accesibilidad (HOY ESTAMOS ACA)
5. Concepto Prototipo Funcional Avanzado (Smart Animation, After Delay, entre otros)
NOTAS:
1. Se pueden mostrar otros plugins o web que ayuden a los estudiantes a mejorar sus prototipos desde la accesibilidad.
Daltonismo
Puede usar patrones o iconos para aumentar los colores en cuadros, gráficos y otras imágenes que diferencian los elementos en función del color. Como siempre con los gráficos, asegúrese de proporcionar una clave que vincula el color y el patrón con los datos que representa.
Revisando y Aplicando Accesibilidad al prototipo: Paso a paso
Duración estimada: 30 minutos 
Herramientas: Adobe XD y Figma
Consigna: El docente deberá:
Mostrar como funcionalidad los plugins destinados a verificar la accesibilidad del prototipo.
Mostrar y ejemplificar que sucede con el contraste y la legibilidad.
Dejar en claro que los iconos deben ser fáciles de comprender. 
¿Cómo llevar adelante la actividad?
Paso 1: Comentar que existen plugins que nos ayudarán a mejorar nuestro prototipo desde la accesibilidad.
Paso 2: Introducir A11y - Color Contrast Checker en FIGMA y mostrar cómo funciona el plugins. Debe quedar claro el uso de los niveles de conformidad.
Paso 3: Introducir Stark en Adobe XD y mostrar cómo funciona el plugins. Debe quedar claro el uso de niveles de conformidad.
Paso 4: Hablar de Color Blind y Stark en Figma y Adobe XD respectivamente y hablar acerca del uso del color y el daltonismo. 
Paso 5: Mostrar el ejemplo del color con los Daltónicos y muestra algunos ejemplos de como solucionarlo. 
Paso 6: Mostrar Color Safe como una herramienta web para revisar y generar elementos de colores que cumplan con los niveles de conformidad de accesibilidad.
¿Cómo se irán mostrando las herramientas de Adobe XD y Figma?
Tanto Adobe XD como FIgma tienen varias capas para ir mostrando por parte del docente. Esto lo haremos de la siguiente manera:
1. Conceptos básicos
2. Concepto Prototipo Funcional básico (Interacción y Acción)
3. Concepto de Componentes y Estilos
4. Concepto de Grilla
5. Plugins Accesibilidad (HOY ESTAMOS ACA)
5. Concepto Prototipo Funcional Avanzado (Smart Animation, After Delay, entre otros)
NOTAS:
1. Se pueden mostrar otros plugins o web que ayuden a los estudiantes a mejorar sus prototipos desde la accesibilidad.
Color Safe
Herramienta que permite a los diseñadores generar paletas de colores basadas en los estándares WCAG para la relación de contraste. Simplemente seleccione el color de fondo de su proyecto, la familia de fuentes, el tamaño y el peso de la fuente, más el estándar WCAG que está tratando de lograr.
http://colorsafe.co/
Revisando y Aplicando Accesibilidad al prototipo: Paso a paso
Duración estimada: 30 minutos 
Herramientas: Adobe XD y Figma
Consigna: El docente deberá:
Mostrar como funcionalidad los plugins destinados a verificar la accesibilidad del prototipo.
Mostrar y ejemplificar que sucede con el contraste y la legibilidad.
Dejar en claro que los iconos deben ser fáciles de comprender. 
¿Cómo llevar adelante la actividad?
Paso 1: Comentar que existen plugins que nos ayudarán a mejorar nuestro prototipo desde la accesibilidad.
Paso 2: Introducir A11y - Color Contrast Checker en FIGMA y mostrar cómo funciona el plugins. Debe quedar claro el uso de los niveles de conformidad.
Paso 3: Introducir Stark en Adobe XD y mostrar cómo funciona el plugins. Debe quedar claro el uso de niveles de conformidad.
Paso 4: Hablar de Color Blind y Stark en Figma y Adobe XD respectivamente y hablar acerca del uso del color y el daltonismo. 
Paso 5: Mostrar el ejemplo del color con los Daltónicos y muestra algunos ejemplos de como solucionarlo. 
Paso 6: Mostrar Color Safe como una herramienta web para revisar y generar elementos de colores que cumplan con los niveles de conformidad de accesibilidad.
¿Cómo se irán mostrando las herramientas de Adobe XD y Figma?
Tanto Adobe XD como FIgma tienen varias capas para ir mostrando por parte del docente. Esto lo haremos de la siguiente manera:
1. Conceptos básicos
2. Concepto Prototipo Funcional básico (Interacción y Acción)
3. Concepto de Componentes y Estilos
4. Concepto de Grilla
5. Plugins Accesibilidad (HOY ESTAMOS ACA)
5. Concepto Prototipo Funcional Avanzado (Smart Animation, After Delay, entre otros)
NOTAS:
1. Se pueden mostrar otros plugins o web que ayuden a los estudiantes a mejorar sus prototipos desde la accesibilidad.
VAYAMOS AL PROGRAMA DE PROTOTIPADO Y VEAMOS COMO FUNCIONA TODO LO QUE VIMOS
Usar para los módulos más importantes de la clase, donde se introducen conceptos que se ven en varios módulos. No hay que usarla para todos los módulos.
QUINTA ENTREGA DEL PROYECTO FINAL 
Deberás entregar el prototipo en fidelidad alta visual, de contenido y media de funcionalidad. Este prototipo debe incluir: moodboard, UI Kit.
¿CUÁNDO?
	CUARTA ENTREGA	1. Prototipo - Fidelidad Alta :
Visual: UI Kit + Moodboard
Contenido: UX Writing´
 Fidelidad Media:
Funcionalidad: modificaciones y observaciones de la entrega pasada.
2. UI Kit y Moodboard	Clase 19
			
			
¡IMPORTANTE!
Las entregas del proyecto final tienen fecha de entrega 7 días después de finalizada la clase. Te sugerimos llevar las entregas al día. 
Usar para slides de sólo texto con el contenido más importante de la clase. En una presentación de 50 slides usar máximo 5 de estas.
	ENTREGA	REQUISITO	FECHA
	1° entrega	Idea para el prototipo + Arquetipo de Persona	Clase 4
	2° entrega	Userflow + Arquitectura de la Información (Cardsorting)+MVP y POV	Clase 8
	3° entrega	Wireframes/Prototipo en baja + Evolución del prototipo (Sketch+Patrones+WB)	Clase 12
	4° entrega	Wireframe/Prototipado en media fidelidad	Clase 16
	5° entrega	Prototipo en media/alta fidelidad 
+ UI KIT +Moodboard	Clase 19
	Proyecto Final 	Unificación de todas las entregas anteriores	Clase 24
	QUINTA ENTREGA DEL PROYECTO FINAL		
	Clase 4	Formato: Archivo en tipo .ppt o .doc con el desarrollo de la actividad. Generar un archivo con el nombre “ProyectoFinal+Entrega5+Apellido”. También se puede entregar un Google Slide.
Sugerencia: habilitar la opción de comentarios.
Objetivos Generales:
Integrar todos los desafíos entregables del proyecto. 
Chequear y revisar el proyecto.
Generar, en forma de presentación, el detalle de los desafíos anteriores.
Objetivos Específicos:
Recorrer el prototipo completo y completar la tarea principal propuesta en el userflow.
Definir la interfaz del prototipo a partir de los conceptos vistos de accesibilidad, leyes aplicadas a UX y UI Kit.
Se debe entregar:
Mejorar el Prototipo Funcional (Fidelidad Alta de Contenido, Media Visual y Baja/Media de Funcionalidad). - URL a Figma o Adobe XD con el Prototipo funcional. 
UI Kit y Moodboard.	
	UI KIT			MOODBOARD			
	Aspectos a incluir enel entregable:
Botones y sus diferentes estados
Navegación e Interacción
Formularios
Label e Inputs, entre otros.
Paleta de color
Primario / Secundario / Acento
Elementos UI
Sliders / Tabs / Cards / Links / Enlaces / entre otros
Sistema de íconos
			Aspectos a incluir en el entregable:
Debe incluir referencias (de app u otras piezas de diseño) de los siguientes elementos:
Colores
Imagenes
Texturas
Estructuras
Palabras clave
(Optativo) Se puede generar un moodboard de referencia de app.
(Optativo) Se puede llegar a generar un moodboard con movimiento y/o auditivo.			
	PROTOTIPO FUNCIONAL						
	Aspectos a incluir en el entregable:
Cumplir con los principios de heurística: el prototipo será evaluado en relación a los 10 principios de heuristica de Nielsen.
Ser funcional: tener la transición entre todas las pantallas de la funcionalidad principal.						
EJEMPLO DE PRESENTACIÓN
Objetivo: Generar, en forma de presentación, el detalle de los desafíos anteriores. No deberás colocar toda la información, sino lo más relevante o aquello que fue solicitado modificar por tu tutor/a.
UI KIT Y MOODBOARD
PROTOTIPO FUNCIONAL - FIDELIDAD ALTA VISUAL
Y DE CONTENIDO & MEDIA DE FUNCIONALIDAD
NOTA: El Gif es a modo ilustrativo. Acá deberás colocar la url a tu prototipo hecho en FIgma o Adobe XD. El mismo debe:
Incorporar las decisiones de diseño del UI KIT
Ser funcional: todas las pantallas deben estar conectadas (se puede incorporar el teclado como una instancia más del recorrido).
Aplicar las leyes UX
Incorporar los resultados de la Evaluación Heurística.
Y AHORA, ¿DUDAS SOBRE LA ENTREGA?
Usar para los módulos más importantes de la clase, donde se introducen conceptos que se ven en varios módulos. No hay que usarla para todos los módulos.
¿QUERÉS SABER MAS? TE DEJAMOS BIBLIOGRAFÍA AMPLIADA DE LA CLASE 19
Usar para los módulos más importantes de la clase, donde se introducen conceptos que se ven en varios módulos. No hay que usarla para todos los módulos.
UXcellence. Accesibilidad [ENLACE]
ENLACES
Disponible en nuestro repositorio.
Usar para que los estudiantes puedan explorar en sus casas los recursos vistos en clase: artículos, herramientas, websites, videos.
¿PREGUNTAS?
Obligatoria siempre.
Resumen de lo visto en clase hoy:
Concepto de Accesibilidad Digital
Aplicación de la accesibilidad en un sitio web o app.
Conceptos de colores, estructura, imágenes desde la accesibilidad digital.
¡MUCHAS GRACIAS!
Obligatoria siempre. Completar el resumen con palabras claves de lo visto.
OPINÁ Y VALORÁ ESTA CLASE