PEC2 - Solucion PEC 2 interaccion persona ordenador Nota A PDF

Preview

Summary

Interacción PersonaOrdenadorPECSeptiembre 2021Alumno: Alejandro Ródenas CumplidoEjercicio 13 Principios de Diseño Universal3.1 Definición de los principios de DiseñoUniversalEl termino diseño universal fue acuñado por Ronald L. Mace para hacer referencia al tipo de diseño que cualquier persona puede...

Description

Interacción Persona Ordenador PEC2 Septiembre 2021 Alumno: Alejandro Ródenas Cumplido

1

Ejercicio 1 3.1 Principios de Diseño Universal 3.1.1 Definición de los principios de Diseño Universal El termino diseño universal fue acuñado por Ronald L. Mace para hacer referencia al tipo de diseño que cualquier persona puede entender y usar, independientemente de su edad, habilidad o estado. El diseño universal define siete principios que se tienen que cumplir para que una interfaz sea considerada universal: 1. Uso equiparable: el diseño tiene que ser utilizable para cualquier tipo de persona independientemente de sus capacidades. 2. Uso flexible: el diseño tiene que poder adaptarse a un amplio rango de preferencias y habilidades individuales. 3. Simple e intuitivo: el diseño ha de ser fácil de comprender independientemente de la experiencia, los conocimientos, las habilidades o el nivel de concentración de los usuarios. 4. Información perceptible: el diseño tiene que permitir la interacción/comunicación con el usuario, independientemente de las condiciones ambientales o de las capacidades sensoriales de este. 5. Tolerante a errores: el diseño debe minimizar las acciones accidentales o fortuitas que puedan tener consecuencias fatales o no deseadas por parte del usuario. 6. Escaso esfuerzo físico: el diseño tiene que permitir su uso con el menor esfuerzo posible y debe ser usado eficazmente. 7. Dimensiones apropiadas: el diseño debe tener unas medidas apropiadas para la manipulación y el uso de los usuarios, independientemente de su medida, posición o movilidad.

2

3.1.2. 4 principios de diseño universal Los 4 principios de diseño universal que se han seleccionado para analizar su aplicabilidad en el caso de estudio son los siguientes: Uso equiparable, Uso flexible, Simple e intuitivo y tolerantes al error. Para este ejercicio se ha seleccionado Airbnb que es la principal aplicación que se ha trabajado en el resto de los retos. El primer principio que se va a analizar en Airbnb es el uso equiparable, que tiene como definición que el diseño debe ser utilizable para cualquier tipo de persona independientemente de sus capacidades. Si nos vamos a la página principal de Airbnb, podemos observar que la barra para hacer la búsqueda del alojamiento está situada en el centro y a la altura de la vista y que destaca por encima del resto de elementos que nos podemos encontrar. Esto nos puede ayudar visualmente a muchas personas que no tengan un gran manejo de páginas web y que quieran encontrar un alojamiento (imagen 1). Además, si bajamos un poco podemos encontrar algunas imágenes que ayudan a elegir alojamiento, para la gente que no puede visualizar correctamente los diferentes textos que se muestran en pantalla (imagen 2). Imagen 1

3

Imagen 2

El segundo principio universal es el uso flexible que se describe como que el diseño tiene que poder adaptarse a un amplio rango de preferencias y habilidades individuales. Por lo tanto, este principio está relacionado con el uso equiparable, para adaptarse a un gran rango de habilidades el diseño ha de ser simple para que todo el mundo, con mucha o poca experiencia en el manejo de las páginas web puedan utilizar la aplicación sin encontrar dificultades. En la imagen 1 antes mencionada se puede observar que Airbnb, este principio lo tiene muy claro ya que resulta muy sencillo poder hacer cualquier tipo de búsqueda y obtener un alojamiento. De esta manera, cualquier tipo de usuario puede utilizar su plataforma y así poder tener el máximo de posibles clientes. Las otras aplicaciones de reserva de alojamientos como puede ser Booking o TripAdvaisor son muy similares en el diseño.

Booking

4

Tripadvaisor

El tercer principio de diseño universal que se va a tratar es que sea simple e intuitivo. Como se explica en el punto anterior el diseño ha de ser fácil de comprender independientemente de la experiencia, los conocimientos, las habilidades o el nivel de concentración de los usuarios. En este caso, en Airbnb este principio es muy importante, ya que desea que un gran número de usuarios pase por su aplicación web. Cualquier persona que este o no acostumbrada al manejo de portales web puede llegar fácilmente a encontrar un alojamiento y hacer una reserva, es decir, no hace falta unos conocimientos elevados para navegar en la aplicación y hacer las tareas que el usuario necesita para llegar a su objetivo. Tal y como muestra la imagen 1 antes expuesta, en la pagina principal hay una barra central, que pide al usuario unos datos muy sencillos que hay que rellenar para que el portal haga su búsqueda según los datos aportados.

El cuarto y último principio de diseño universal que se tratará en este ejercicio es el de que el diseño sea tolerante a errores. Esto se describe como: el diseño debe minimizar las acciones accidentales o fortuitas que puedan tener consecuencias fatales o no deseadas por parte del usuario. En este caso, el diseño es tan simple que es extremadamente complicado que el usuario pueda cometer algún error grave. Otro punto que puede ocurrir con frecuencia es que después de haber introducido los datos y haber realizado la búsqueda el usuario se haya dado cuenta que ha cometido un error, es por eso por lo que en Airbnb después de haber realizado la búsqueda siempre se puede acceder a la barra principal para poder cambiar los datos y encontrar un nuevo destino o con fechas distintas. Esto se muestra en la siguiente imagen.

5

Página principal:

Página despues de realizar la busqueda:

6

3.1.3. Diseño universal en el prototipo de la práctica En el reto 2 se propuso una serie de mejoras a las cuales se llegó a través de las conclusiones realizadas con los test de usuarios. Una de las soluciones propuestas fue poner un botón de promociones en la página principal de la plataforma Airbnb, tal y como muestra la imagen siguiente, ya que en este apartado Airbnb no tenía sección de promociones.

A partir de esta pantalla se pasaría a otra donde aparezcan todas las promociones.

Una vez en esta pantalla se podrían aplicar los filtros que el usuario desee (destino, fechas, precio, tipo de alojamiento, valoración, etc.).

7

Otra solución propuesta a partir de los resultados obtenidos con los test de usuarios fue que a veces resulta un poco difícil aplicar los filtros que actualmente están disponibles. Por eso, se propuso fijar un botón de filtros en todas las posibles pantallas donde el usuario tenga que decidir que tipo de alojamiento desea.

8

Estas fueron dos de las soluciones propuestas para mejorar la aplicación web de Airbnb. A partir de estas soluciones se evidenciarán 3 principios de diseño universal, en con concreto, el uso equiparable, tolerancia a errores y que cumpla con un diseño simple e intuitivo.

El primer criterio que se evidenciará es el uso equiparable, que dice que el diseño tiene que ser utilizable para cualquier tipo de persona independientemente de sus capacidades. Siguiendo con el estilo de diseño de Airbnb se propone el botón que dice promociones en la parte central a bajo de la barra de búsqueda. En este caso, este botón es bastante grande comprándolo con lo demás elementos que tenemos en pantalla excepto con la barra de búsqueda ya que tiene que ser el principal motivo y objetivo de cualquier usuario. Esto se muestra en la primera pantalla antes descrita en el prototipado. El segundo criterio que se evidencia es la tolerancia a errores, que dice que el diseño debe minimizar las acciones accidentales o fortuitas que puedan tener consecuencias fatales o no deseadas por parte del usuario. Al ser un botón grande no puede dar a errores por parte del usuario, lo único que puede ocurrir es que el usuario se haya equivocado y no quiera entrar en esa sección. Una vez dentro de promociones, si que es cierto que debería haber un botón para poder retroceder a la página principal. Otro punto que destacar en esta sección es que el botón de filtro siempre está disponible, entonces para cualquier resultado mostrado el usuario siempre tiene la posibilidad de cambiar los criterios de filtrado. Que es a la vez la segunda propuesta de mejora de Airbnb. El tercer criterio que se evidencia es que cumpla con un diseño simple e intuitivo, que dice que el diseño ha de ser fácil de comprender independientemente de la experiencia, los conocimientos, las habilidades o el nivel de concentración de los usuarios. Este criterio se cumple al cien por cien, ya que siguiendo con el diseño tan simple que tiene la aplicación web de Airbnb y sin elementos que dificulten el manejo, se ha diseñado el botón de promociones para que no sea demasiado intrusivo y que sea fácil de comprender para un usuario independientemente de sus conocimientos, habilidades o experiencia. En la siguiente pantalla y ya dentro de la sección de promociones, también se mantiene el diseño de Airbnb con el mismo formato que las otras secciones de la aplicación. Por eso, el diseño es a la vez simple, intuitivo y robusto.

9

3.2 Evaluación de Accesibilidad Para realizar la evaluación de accesibilidad, se han utilizado las herramientas Taw y CynthiaSays, junto con la revisión manual de todos los puntos contenidos en las WCAG 2.0. Se adjunta en el anexo los resultados obtenidos con la herramienta CynthiaSays. Criterios de conformidad A: Perceptible: 1.1.1 Contenido no textual El contenido no textual que se presenta al usuario no tiene alternativa textual que cumpla el mismo propósito. En algunos casos sí que hay descripción de que intenta decir la imagen. 1.2.1 Sólo sonido y solo video No ha sido posible encontrar vídeos o pistas de audio, por lo tanto, no ha sido posible evaluar este apartado 1.2.2 Subtítulos (gravado) Al no haber pistas de audio o vídeos, tampoco ha sido posible evaluar este apartado. 1.2.3 Audio descripción o medio alternativo Al no haber vídeos, tampoco existen alternativas para el contenido de vídeo grabado en ninguna parte de la aplicación 1.3.1 Información y relaciones La información estructural y relaciones comunicadas a través de la presentación no pueden ser determinadas por el software o no están disponibles. 1.3.2 Secuencia significativa La secuencia afecta a su significado. Y no hay ninguna presentación alternativa al contenido, en algunos casos puede crear confusión. (Cuando la secuencia en que se presenta el contenido afecta el significado de este, el orden correcto de lectura puede ser determinado por el software). 1.3.3 Características sensoriales Hay textos que tienen un tamaño de letra muy pequeño y para los usuarios que tienen problemas visuales les supondrá un gran esfuerzo. 1.4.1 Uso del color

10

El uso del contraste entre el texto y el color de fondo es correcto. El color de fondo no es el único medio definido para comunicar información, mostrar una respuesta o distinguir un elemento visual. 1.4.2 Control de audio El portal web no dispone de audio. Si el audio supera los 3 segundos tiene que haber un mecanismo para pararlo o modificar su volumen. Operable: 2.1.1 Teclado El teclado es correcto no se exige ninguna velocidad en la pulsación de teclas. (Todas las funcionalidades del contenido se llevan a cabo a través de la interfaz del teclado sin requerir un tiempo determinado para pulsaciones de teclas concretas). 2.1.2 Sin bloqueos de teclado No es posible controlar toda la navegación de la aplicación web con teclas claves del teclado. 2.2.1 Tiempo ajustable No existe tiempo limitado. 2.2.2 Pausar, detener, ocultar La información que tiene movimiento se desplaza o se actualiza, no existe un mecanismo para que el usuario pueda poner en pausa, detener o controlar la frecuencia de actualización. 2.3.1 Umbral de tres destellos o menos La aplicación web no contiene nada que parpadee más de tres veces por segundo o que este por debajo del umbral de parpadeo general y rojo. 2.4.1 Evitar bloques No existe un mecanismo a disposición del usuario para saltar bloques de contenido que se repiten múltiples veces. 2.4.2 titulado de páginas La aplicación web tiene títulos que describen la temática o propósito. 2.4.3 Orden del foco En la aplicación web se puede navegar secuencialmente y la navegación no afecta el significado o la operatividad de la operación, los elementos reciben el foco preservando esta secuencia.

11

2.4.4 Propósito de los enlaces (en contexto) Los enlaces no disponen de un texto, en consecuencia, no ayuda a los usuarios a comprender el propósito de cada enlace. Comprensible: 3.1.1 Idioma de la página El idioma determinado de la web puede ser determinado por software. 3.2.1 Al recibir foco Cuando cualquier componente recibe el foco, no inicia ningún cambio en el contexto. 3.2.2 Al introducir datos El cambio de estado de cualquier componente de la interfaz provoca automáticamente un cambio en el contexto, aunque el usuario no haya sido advertido. 3.3.1 Identificación de errores Si se detecta un error en la entrada de datos, no avisa al usuario. 3.3.2 Etiquetas o instrucciones Aparecen instrucciones y etiquetas en la introducción de datos. Robusto: 4.1.1 Procesamiento Los contenidos implementados mediante el uso de lenguajes de marca no están las etiquetas de apertura y cerradas correspondientes y no cumplen con los estándares correspondientes. 4.1.2 Nombre, función, valor Para todos los componentes de la interfaz de usuario el nombre y la función no pueden ser determinados por el programa; los estados, propiedades y valores que pueden ser asignados por el usuario no pueden ser especificados por el programa; y los cambio en estos elementos no se encuentran disponibles para la consulta por las aplicaciones del usuario, incluyendo las ayudas técnicas.

12

Criterios de conformidad AA

1.2.4 Subtítulos (en directo) No hay subtítulos en los videos de la web, porque no hay videos. 1.2.5 Audio descripción(gravado) No se proporciona una auto descripción para todo el contenido gravado dentro del contenido multimedia sincronizado. No hay pistas de audio. 1.4.3 Contraste El contraste entre los colores de menú principal con el fondo de la pagina de inicio son muy bajos. Es importante tener un contraste adecuado con el fin de que todos los usuarios, especialmente para los que tengan visión baja. 1.4.4 Cambio de tamaño del texto En algunos casos el tamaño del texto es muy pequeño y dificulta la lectura a personas con visión baja. 1.4.5 Imágenes de texto Se utiliza texto en lugar de imágenes de texto si con las tecnologías utilizadas se puede conseguir la presentación visual deseada. 2.4.5 Múltiples vías Se puede hacer una búsqueda de la información concreta mediante el buscador. O bien, buscarlo mediante una secuencia. 2.4.6 Encabezados y etiquetas Los encabezamientos y etiquetas definen el tema y el propósito. 2.4.7 Foco visible Cualquier interfaz de usuario que te permita interactuar por el teclado tiene un indicador que indica el componente que tiene el foco. 3.1.2 Idioma de las partes El idioma de cada pasaje o frase en el contenido puede ser determinado por el programa excepto los nombres propios, temas técnicos, palabras en un idioma indeterminado y palabras o frases que se hayan convertido en parte natural de texto que les rodea. 3.2.3 Navegación coherente Los mecanismos de navegación que se repiten entre paginas se dan en el mismo orden relativo cada vez que se repiten. 13

3.2.4 Identificación coherente Los componentes que tienen la misma funcionalidad de un conjunto de páginas web son identificadas de manera coherente. 3.3.3 Sugerencias delante de errores No se presentan sugerencias delante de errores, comprobando el introducir una palabra errónea en el buscador. 3.3.4 Prevención de errores (legales, financieros, datos) Se verifica la información para detectar errores en la introducción de datos y se proporciona al usuario una oportunidad de corregirlos. Se proporciona un mecanismo para revisar, confirmar y corregir la información antes de finalizar el envío de datos.

Nota: Algunos puntos se han tenido que revisar manualmente, ya que las herramientas utilizadas y mencionadas anteriormente no han podido detectarlo de manera automática. La aplicación web de Airbnb no contiene videos o pistas de audio, por lo que muchos puntos relacionados no se han podido verificar y, por lo tanto, no aplica. Otras advertencias que he tenido que revisar manualmente y es muy común es la introducción de datos y como se tratan los diferentes errores.

Propuesta de solución: •

La primera solución es poner un texto alternativo a todas las imágenes. En HTML solo hay que presionar el atributo alt en la imagen correspondiente definiendo una descripción para esta imagen (1.1.1 Contenido no textual).

•

La segunda solución es añadir texto en los enlaces con el objetico de que el lector de pantalla los pueda interpretar (2.4.4 Propósito de los enlaces (en contexto)).

•

La tercera solución cuando se detecte algún error del tipo que sea, se avise por pantalla al usuario de dicho error (3.3.1 Identificación de errores).

14

Valoración final La conclusión final de la evaluación de accesibilidad de Airbnb es que, con el tráfico de usuarios a nivel mundial que tiene y que no se cumplan todos los requisitos de accesibilidad están excluyendo a muchas personas con discapacidad y es importante tenerlas en cuenta. Pero como hemos comprobado, la aplicación web de Airbnb no cumple la accesibilidad en ningún nivel, ni en el A ni en el AA. Hay errores básicos, que hace imposible que una persona con discapacidad pueda interactuar con esta web adecuadamente. En consecuencia, al no cumplirse el nivel A de accesibilidad tampoco se cumple el nivel AA.

15

3.3 Niveles de accesibilidad de tu interfaz En este apartado se describirán tres mejoras que se tendrían que hacer para cumplir el nivel A de accesibilidad del concepto clave Perceptible a partir de la propuesta de mejora del reto 2.

Propuesta de solución para mi interfaz: •

La primera solución es poner un texto alternativo a todas las imágenes. En HTML solo hay que presionar el atributo alt en la imagen correspondiente definiendo una descripción para esta imagen (1.1.1 Contenido no textual). En la propuesta del reto 2 las imágenes no contenían un texto alternativo.

•

La segunda solución es el uso del color (1.4.1 uso del color), es cierto que en la propuesta del reto 2 no hay colores, pero en un principio se había pensado seguir con el estilo de Airbnb, por lo que se podría mejorar para que no sea la única vía para transmitir la información, indicar una acción, solicitar una respuesta o distinguir un elemento visual.

•

La tercera solución para mejorar la propuesta del reto 2 y que se acerque más a un nivel A de accesibilidad es el apartado 1.4.3 Contraste (mínimo) que para nada se ha tenido en cuenta. La presentación visual de texto e imágenes de texto deben de tener una relación de contraste de, al menos 4.5:1, excepto algunos casos.

Nota: No se vuelven a dibujar los bocetos hechos a mano alzada porque las soluciones antes propuestas para alcanzar un nivel A de accesibilidad tienen que ver en su gran mayoría a temas de color y contraste, y los bocetos están hechos en blanco y negro. Para la primera solución tampoco se ha vuelto a dibujar ya que es para añadir el atributo alt en HTML en las imágenes.

16

Anexos •

Compliance Level A The priority set of WCAG 2.0 criteria. Generally these requirements are the most important and will have the widest impact on the accessibility of your site. o

Criterion 1.1.1 [Non-text Content] The intent of this Success Criterion is to make information conveyed by non-text content accessible through the use of a text alternative. Text alternatives are a primary way for making information accessible because they can be rendered through any sensory modality (for example, visual, auditory or tactile) to match the needs of the user. Providing ...