Alfa: Diseño y Accesibilidad

De Casiopea
TítuloDiseño y Accesibilidad: Alfa
Tipo de ProyectoProyecto de Taller
Palabras ClavePICTOS
Período2021-2021
AsignaturaTaller de Diseño de Interacción
Del CursoTaller de Diseño de Interacción 2021
CarrerasDiseño, Interacción y Servicios"Interacción y Servicios" is not in the list (Arquitectura, Diseño, Magíster, Otra) of allowed values for the "Carreras Relacionadas" property.
Alumno(s)Soledad Araya Urrutia, Catalina Riveros, Daniela Cabezas, Anaís Céspedes, Italo Spinetto
ProfesorHerbert Spencer, Renee Rodo
URLhttps://www.figma.com/file/9pjIScfCkgBR2iAD4sgDGq/Grupo-Alfa

Estudio previo

Relación espacio digital - espacio físico

Señaleticas de orientación
Señaleticas de orientación

¿Cómo las personas se enteran, en los diferentes lugares, que existe PICTOS y que los puede ayudar?

  • A través del sitio web app.pictos.cl
  • A través de señaléticas e interfaces digitales en los puntos físicos en que se encuentra PICTOS, como por ejemplo Metro Valparaíso.

¿Se podría pensar PICTOS como parte del espacio? (señalética)

  • Si, intentando complementar y relacionar el espacio digital y físico creando un entorno de interacción completo para los usuarios y que genere continuidad gráfica y espacial.

¿Porqué señaléticas e interfaces?

  • Para que la interacción con PICTOS sea de forma segura y no arriesgarse a sacar el teléfono en zonas públicas con mucho tránsito de personas. Aprovechar también la capacidad gráfica de PICTOS para ser expuesto en estos puntos físicos.

¿Qué pasa si quiero ocupar PICTOS en mi casa?

  • Habría que enseñarle a la app los componentes de la casa y los lugares en los que se necesita apoyo para aumentar la accesibilidad e independencia de los usuarios.

Croquis

Framedellidergrupocrokis123.png

Observaciones

  1. En una tienda de retail se observa una accesibilidad precaria, la rampa es móvil y no tiene baranda. Es un foco de peligro para los usuarios.
  2. Posee factores buenos y como malos, cumple la función de incluir aquellas "ayudas", pero en aquel recorrido no existe una seguridad como el que se encuentra en "ese" principio/fin.
  3. La accesibilidad nos facilita las cosas de cierta manera que el espacio permite ser utilizado sin problemas, aquí una persona con alguna discapacidad física lograría ingresar solo con ayuda de alguien, esto sucede por causa de aquellos escalones.
  4. Pendiente de una bajada muy abrupta. Puede causar un accidente al momento de movilizarse.
  5. Límite de sensibilidad. Diferentes factores son indicadores del recorrido esperado a realizar.
  6. Transición curva de niveles, escala en pasos posteriores. Se crea una contradicción en el recorrido facilitando en la curva he imponiendo escala de niveles en los pasos siguientes del recorrido.
  7. Las personas al hacer filas terminan haciendo fila en los pasillos, por lo que no se puede ver que fila es más corta, y no se puede pasar por la zona por el desorden.
  8. Lo único que te avisa donde encontrar los productos que buscas son estas láminas que cuelgan del techo y además son muy generales.



Accesibilidad

La accesibilidad o accesibilidad universal es el grado de pendiente el cual permite que cualquier objeto sea utilizado por todo el público, visitar un lugar o acceder a un servicio, independientemente de sus capacidades físicas, cognitivas y/o sensoriales. Proporciona flexibilidad al acomodarse a las necesidades de cada usuario y está dirigida a que el sistema esté elaborado al más amplio número de usuarios. Se abre la posibilidad de que pueda ser accedido y usado por el mayor número posible de personas, indiferentemente de las limitaciones propias del individuo o de las derivadas del contexto de uso.

Físico

Desplazamiento, la movilidad, el espacio que se encuentre en continuidad. La ciudad contiene encuentros del suelo, aquello que nos permite desplazarnos sin problemas.

Sensorial

Contenido, darse cuenta de como el espacio nos habla y posee un lenguaje, un multicanal.

Cognitivo

  • La Subcomisión de accesibilidad cognitiva del CERMI, el Comité de

Representantes de Personas con Discapacidad, adoptó por acuerdo la siguiente definición de accesibilidad cognitiva: Característica de los entornos, procesos, actividades, bienes, productos, servicios, objetos o instrumentos que permiten la fácil comprensión y la comunicación.

  • Publicación “Accesibilidad cognitiva en los centros educativos”(Belinchón y cols., 2014):

Propiedad de entornos, edificios, procesos, bienes, productos, servicios, objetos o instrumentos, herramientas y dispositivos que resultan fáciles de entender. Guía de evaluación de la accesibilidad cognitiva de entornos.


Imágenes y Observaciones

Accesivilidad Ineficaz
Accesivilidad Efectiva

En la búsqueda activa de recolectar información del exterior cada integrante del grupo sale a observar el entorno. Se recolectan imágenes, se comparten dentro del grupo generando una instancia de debate y observación para clasificarlas en cosas que tienen una accesibilidad deficiente, cosas que deberían mejorar o ser cambiadas y cosas con accesibilidad regular, que fueron diseñadas de manera inclusiva pero a la vez podrían seguir mejorando en el futuro.




Tecnología de apoyo para la autonomía A.C.

Error al crear miniatura: Archivo más grande que 25 MP


Estudio y Observación apps - Accesibilidad Cognitiva

Aplicaciones TEA quiere decir que su enfoque es Trastorno del Espectro Autista

  • DoctorTEA es una página web que trata de facilitar las visitas médicas de las personas con autismo, familiarizándose con el entorno médico a través de un recorrido por distintos espacios. Como caso de estudio en su usabilidad, nos enfocamos en el desarrollo y recorrido de las diferentes tareas. Esta interfaz está claramente diseñada para un público específico, todo atiende al paciente y sus necesidades. Como sistema de tareas es una buena guía, para mostrar gráficamente el recorrido y las tareas que son necesarias para lograr el recorrido. En una visión ampliada hacia PICTOS, se puede desarrollar la vista panorámica o completa de los pasos a realizar en una tarea, para tener una idea clara del recorrido, y que en conjunto al iniciar el recorrido real, los iconos sean la compañía del paso a paso, para otorgar seguridad al usuario.
  • PictoTEA es una aplicación diseñada para ayudar en la comunicación a personas con trastorno del espectro autista. El desarrollo de las oraciones es muy corto, y explícito al agregar una barra superior de los preseleccionados a medida que se avanza en la oración. Los pocos pasos y la ayuda de la barra de visualización, es lo universal que logramos rescatar como posible implementación en PICTOS.

Nuevas observaciones


Legibilidad

¿Qué es la legibilidad?

La palabra ‘legible’ , viene del latín legibilis y significa “que se puede leer”. Sus componentes léxicos son ‘’legere’’ (leer), más el sufijo –ible (que se puede).

La legibilidad en la ciudad facilita la identificación de sus habitantes y fomenta medios ambientes sanos humanizando el entorno urbano.

Tallerdeinteracción cartel led .grupoalfa.jpeg
Letreroled tallerdeinteraccion2021 grupoalfa.png

Análisis de señaléticas dinámicas

En el ejercicio de la observación de carteles y señaléticas dispuestos en la ciudad, encontramos el caso de los carteles led, los que son dinámicos mostrando un mensaje que se desliza a través de un panel.


Observaciones

Este tipo de carteles no son interactivos porque el flujo de información es unidireccional, es decir, el mensaje es enviado a los usuarios pero estos no pueden relacionarse de manera recíproca con la pantalla. Sin embargo, pueden ser atractivos para los lectores ya que llaman la atención de la vista periférica porque las palabras se mueven a diferencia de un cartel estático.

Hay que considerar también la legibilidad de este formato de información, que a diferencia de los carteles estáticos disponen de otra variable a considerar, la velocidad en que se muestra el mensaje. Estos letreros pueden configurarse a diferentes velocidades, en el ejercicio se observó un letrero que avanzaba a 2 centímetros por segundo, el mensaje podía leerse, pero era molesto porque había que esperar demasiado, entonces se concluyó que el ritmo en que se muestra un mensaje de tipo dinámico debe ir acorde al ritmo cognitivo que tenemos de leer. Si la velocidad es demasiado rápida o demasiado lenta la legibilidad disminuye.


Sería prudente entonces cuestionarnos:

  • ¿Cuál es la velocidad ideal de lectura?
  • Con respecto a las capacidades cognitivas diversas ¿Cuánto puede variar esta velocidad?¿Cuales serían esos parámetros?

El color en las señaléticas dinámicas también influye en la legibilidad de estas, usualmente se utilizan colores que contrastan bastante como por ejemplo: letras blancas y panel negro, letras amarillas y panel negro. Pero en ocasiones se utilizan una combinatoria de colores los que pueden ser atractivos y llamativos, pero seccionan el mensaje, por lo tanto se entorpece la lectura.

Estudios de accesibilidad de tipografía y color

Ttsinyconserif.png
Coloresydalronimos.png

Una de las cosas que tuvimos que tener en cuenta para el desarrollo de la propuesta de extensión de PICTOS es que debemos considerar una tipografía y color adecuados para todos, realizamos estudios para que el sitio sea accesible.

Para la legibilidad de un texto debemos considerar: El contraste, entre el color del fondo y el color de la letra. Tipografías deben ser Sans serif, sencillas, sin bordes o remates con detalles, ya que son mas legibles al evitar trazos que pueden llegar a malinterpretarse. A su vez debemos ser cuidadosos con el grosor, cursivas la altura y la anchura dependiendo de cada situación.

De la guía de la comunicación clara pudimos rescatar varias cosas una de ellas es que debemos trabajar los textos para que sean sencillos y comprensibles. Muchas veces la fórmula clásica de sujeto + verbo + predicado es la mejor.

  1. Sujeto: persona/ asunto
  2. Verbo: acción
  3. Predicado: detalles de la acción


La legibilidad y la lecturabilidad.

  • legible:El objetivo es conseguir que las informaciones tengan un alto grado de comprensibilidad.
  • lecturabilidad:Garantiza que los textos se entiendan sin esfuerzo. Para ello se planifica y calcula la estructura, la organización de la información, la adecuación de la sintaxis y la claridad de las palabras.

En cuanto al color se investigó sobre los tipos de daltonismos.

Los daltónicos son las personas que poseen una alteración en la percepción de los colores de los objetos a su alrededor. Para crear una interfaz que tenga colores que tengan contraste para así diferenciar los fondos del texto y que las personas daltónicas. Por lo que una persona con visión “normal” vería un celeste y un naranjo, así todos verían con alto contraste de tal forma que podrían notar la diferencia la interfaz.


Estudio PICTOS

Estudio caso usabilidad: Tramitar cédula de identidad. Accesibilidad cognitiva.
En casa
  1. Pensar en que tramite voy a hacer...ver PICTOS en la casa
  2. Indicar el trámite que quieres hacer: carnet de identidad
  3. Buscar palabra clave. ‘carnet’.
  4. Marcar: sacar el carnet de identidad
  5. PICTOS te muestra los lugares en los que puedes hacer ese trámite (ej: registro civil, chile atiende) y te muestra la información de el más cercano. (hora estimada de llegada y con sus respectivos horarios de atención y tipos de servicios que encuentras en el lugar)
  6. PICTOS muestra los pasos que deberás seguir más tarde. Para realizar tu trámite.
  7. PICTOS te recordará los artículos que deberás llevar (ej: tu carnet antiguo, monto $, documentos extra.)
  8. Cuando estés listo Marcar la opción salir de casa
Fuera de casa
  • Los lugares que entregan servicios deben tener señaléticas que muestren antes de llegar que tu destino está cerca.
  • Cuando llegues a tu destino la app debe avisar que estás en el lugar correcto.
  • El lugar debe indicar que está asociado con PICTOS. y mostrarte a través de pictogramas los procesos de los trámites ya sea en pantallas digitales con la app o carteles de ayuda. Mostrándote los pasos que viste en casa
  • sentimiento de seguridad e independencia de la persona.

Propuesta 1

Épica 1 : El usuario utiliza el botón de accesibilidad

El usuario utiliza un botón ubicado en la pantalla de inicio, el cual permite generar cambios visuales en la interfaz de forma que sea más accesible para él. Entre estos cambios se encuentran aumentar o disminuir el tamaño de la tipografía y ajustar la paleta cromática de la aplicación para aquellas personas que posean ciertas discapacidades visuales, entre ellas el daltonismo.

Caso 1

Caso de estudio: Visión Datos Solución
Edad: 65 años
Diagnostico: Presbicia. Persona con discapacidad visual.
Especificaciones: Pérdida gradual y vinculada al envejecimiento de la capacidad de los ojos de enfocarse en los objetos cercanos. Buscar ejemplos de accesibilidad en medios digitales.

Ampliar o disminuir la interfaz de manera responsiva. Profundizar en las diferentes tareas y requisitos de la acción, en la interfaz.


Propuestatallerdeinteracción1 grupoalfa.png

Caso 2

Caso de estudio: Contraste Datos Solución
Edad: 32 años
Diagnostico: Daltonismo. Persona con discapacidad visual.
Especificaciones: Capacidad reducida de distinguir entre ciertos colores. Creación de una interfaz consistente y accesible (tipografía, colores,pesos )

paleta de colores que pueda diferenciar distinguiendo, estudiando los tipos de daltonismo.

Épica 2: El usuario utiliza el botón de pánico

El usuario registra su numero telefónico, el cual le permite seleccionar o añadir contactos cercanos a los que se les enviara un mensaje de alerta con la ubicación del usuario, en caso de que este se encuentre en alguna emergencia. Esta acción lo realiza activando un botón de pánico que se encuentra ubicado en la pantalla de inicio de la aplicación.

Caso 3

Caso de estudio: Botón Datos Solución
Edad: 21 años
Diagnostico: Espectro autista. Persona con capacidad cognitiva limitada
Especificaciones: Una discapacidad del desarrollo que puede provocar problemas sociales, comunicacionales y conductuales significativos. botón de pánico muy notorio.

Agregar efectos sensoriales como vibraciones para indicar inicio y fin del recorrido.


Correcciones 17 de Junio

  • La visualización de la interfaz se vuelve saturada al disponer el botón de accesibilidad al lado del menú.
  • La aplicación debería ser accesible por sí sola de manera que el usuario no tenga que modificarla.
  • La solución relacionada al daltonismo es muy específica.
  • El aumento excesivo de la interfaz altera el contraste visual.
  • Se podría replantear la ubicación del botón de accesibilidad dentro de la interfaz.
  • Sería poco efectivo el uso del botón de pánico, ya que el celular ya posee la función.

Propuesta 2

Épica 3: El usuario revisa la lista de requisitos para una tarea

Se observa en los pictogramas que existen requisitos para ejecutar las tareas, por lo tanto sería óptimo tener un listado de chequeo, de elementos para recordarle al usuario lo que se necesita para realizar la tarea. Se hace un estudio de la categoría "trámites", en donde se da como ejemplo, realizar la tarea de renovar la cédula de identidad, lo cual posee ciertos requisitos como: Nombres, Apellidos, RUT y la cantidad de dinero. Se añade en la interfaz el horario y el lugar del servicio donde se ejecuta la tarea.

FRAM15.png

Épica 4 : El usuario evalúa un lugar

Se reordena y disminuyen las interfaces de la épica "El usuario evalúa un servicio", eliminando preguntas para facilitar la evaluación, además se agrega un botón " más fotos" donde al usuario se le permite agregar más de una foto. Se corrige la consistencia del diseño y por último se añade un icono de micrófono, para dejar opiniones a través de audios. Previo a lo anterior se le solicita al usuario, algunos datos que son: la fecha de nacimiento, número telefónico y correo electrónico con la finalidad de obtener métricas.

Frame2 accesibilidad .jpeg

Correcciones 21 de Junio

  • Se considera buena alternativa el listado ya que refuerza los requisitos que se muestran en los pictogramas.
  • No existe coherencia en ciertos enunciados.
  • Replantearse la paleta de color asignada a estas interfaces.
  • No se puede reducir las pantallas que piden datos, porque estos son necesarios para métricas.
  • No se pueden reducir pantallas, porque estas ya han sido validadas y probadas.

Propuesta 3

Épica 5: El usuario planifica una tarea con anticipación

Como grupo presentamos la extensión de Cosas que debes tener en cuenta, llevar, o vas a necesitar el día en que hagas tu trámite por lo que registramos una tarea por cada categoría con esta extensión. Se agregó en cada tarea un botón que da la opción de activar un recordatorio con cosas a considerar ese día. Extensión que muestra lista de recordatorio de prerrequisitos , que se encuentra disponible en el menú. Cuando un recordatorio es activado aparecerá un ícono de notificación rojo en el menú, donde es posible modificar el recordatorio o marcar cuando el usuario disponga los ítems de la lista. La lista de requisitos es una extensión de PICTOS que te avisará en la fecha que se indique y se pueda chequear cada punto para asegurar que se tiene lo necesario.

  • Trámites Registro Civil

Renovar cédula de identidad como caso de estudio desarrollamos esta épica para observar el desarrollo de la aplicación, tomando nota del recorrido. En estas pantallas nos centramos en la comparación de las tres imágenes centrales, que dan cuenta del proceso de estudio para la ubicación de información días, horario de atención y ubicación linkeada a google maps. El proceso de distribución espacial de las frases y el juego con colores para remarcar las diferentes informaciones. Se decide finalmente por la opción de la última imagen; parte superior destinada a la dirección con link directo a google maps. En el centro el nombre dando énfasis del lugar en el que se efectúa el trámite. Línea inferior se indica día y hora de atención. Tres niveles distribuidos de manera equilibrada, con la información básica necesaria para planificar una tarea.


Frame3 accesibilidad.jpeg Notificación en menú Cuando activas un recordatorio aparecerá en el menú con un circulo rojo y el numero de recordatorios agendados, cuando la persona esté por salir deberá revisar la lista de cosas que debe considerar o llevar y marcarlas una vez que lo haya completado.

Fram5 accesibilidad.jpg

Trasporte: viajar de un punto a otro - cargar tarjeta

La tarea de viajar de un punto a otro; antes de que comiencen los pictogramas de pasos, aparece anuncio de prerrequisitos, donde te indica lo necesario para viajar. En este caso metro de Valparaíso donde es necesario tener la tarjeta exclusiva de este transporte y saldo en la tarjeta. En este item puedes acceder a los pasos de otra tarea que es ‘’’Cargar tarjeta’’’ de metro, la frase con hipervínculo redirige a la pantalla tipo ficha de requisitos para esta nueva tarea, donde te indica los requisitos para llevarla a cabo, puedes continuar con los pictogramas de la tarea nueva o volver a la tarea relacionada.

Viajar de un punto a otro y Cargar tarjeta: como subtarea'

Frame11 accesibilidad.png

Pruebas de usuario con familiares/amigos

  • Usuario 24 años: no marca la lista de cosas que necesita llevar para realizar una tarea. La ruta parece ser simple e intuitiva para el usuario durante todo el trayecto, fallando sólo en la lista de tareas mencionada. Confusión en los botones “Tengo todo listo” y “Comenzar el recorrido” de la interfaz recordatorio. pregunta por parte del usuario ¿Cuál botón debo apretar?
  • Usuario 73 años: Pantalla E1.03. Sucursales de un servicio: no se entiende cuál es el ‘boton’, no sabía que apretar, marca el título en negrita. Pantalla E1.05. Requisitos de la tarea: entiende Nombre y apellido como espacio para poner nombre, lo marca. Luego no sigue la recomendación de ‘recordarme’. Pantalla E1.09. Notificación Menú PICTOS: no sigue la marca de notificación. Pantalla Recordatorio: no entiende cómo se marcan las cosas que tienes listas.
  • Usuario 52 años: lee con atención las indicaciones de las primeras pantallas hacia la introducción de PICTOS, se hace entendible y explicativo para él/ella. Pantalla de Inicio, se dirige rápidamente a trámites, al ser el botón con más cercanía y en la forma de lectura que tenemos es el que más atención le causó junto a ello el desear hacer un trámite de sacar carnet. Se le facilitan los botones, se le hace entendible el manejar aquello, pero en la pantalla de notificación no encuentra donde hacer “check” para el listado de cosas que debe necesitar para ejecutar la acción, encuentra faltas ortográficas.
  • Usuario 40 años: realiza el recorrido con atención, siguiendo de manera intuitiva el recorrido. Los pictogramas los encuentra claros con respecto a la tarea que representan. Problemas detectados: La pantalla que debe guiar al menú con la notificación agendada, no le queda claro, le cuesta continuar con la acción. La lista de recordatorios le es entendible y fácil de completar. Al terminar cada recorrido hay un vacío, punto a estudiar y desarrollar la redirección al menú o evaluación.


Correcciones Jueves 24

  • Se plantea colocar la ubicación específica del lugar (enlace).
  • El color amarillo no es legible para el usuario (horario).
  • El día y la hora deben tener el mismo peso tipográfico.
  • La funcionalidad de recordatorio no funcionará porque la aplicación no posee registros de usuarios ni guardado de información.

Pruebas usabilidad grupo asesor y conclusiones

Se realizan pruebas de usuarios con el grupo asesor con el fin de obtener una retroalimentación de la funcionalidad del prototipo.

Inicio de la aplicación PICTOS y su vinculación con Gmail

Se presenta los tutoriales de PICTOS, en que uno de ellos se solicita el correo electrónico, esta solicitud genera confusión en uno de los usuarios, ya que en esa interfaz se pide obligatoriamente el correo, en caso contrario no permite avanzar al usuario.

Frame6 accesibilidad.jpeg

Subtarea: Cargar tarjeta

Se presenta un vínculo desde la tarea "viajar de un punto a otro" hacia la tarea "cargar tarjeta", este vínculo se encuentra subrayado lo cual dificulta al usuario para ingresar a él. Se plantea ubicar el vínculo dentro de un botón que sea más visible para el usuario.

Frame11 accesibilidad.png

La legibilidad

En la sección de recordatorio la legibilidad del calendario no era efectiva, ya que la tipografía era muy pequeña. La ruta finalizaba solicitándole al usuario calificar el apoyo, sin embargo, no se le agradece al usuario por su respuesta.

Frame12 accesibilidad.png

Definir si se va a tutear al usuario o no

No existe un lenguaje homogéneo para dirigirse al usuario, entonces se plantea la elección de tutear al usuario en toda la interfaz.

Frame10 accesibilidadpng.png

Propuesta Final

https://www.figma.com/file/9pjIScfCkgBR2iAD4sgDGq/Grupo-Alfa

  1. Épica 1: El usuario planifica una tarea con anticipación
  2. Épica 2: El usuario realiza una tarea en el lugar
  3. Épica 3: El usuario efectúa una subtarea desde la tarea


Considerando unas de las preguntas iniciales del modulo ¿cómo se puede ocupar PICTOS desde la casa?, se comenzó a fundamentar nuestra propuesta la cual fue dividida en dos instancias, la casa y el lugar. La primera de ellas fue pensar como el usuario se podría involucrar con la app en la casa. Inicialmente no encontramos ninguna acción que pudiera realizarse de manera previa a concurrir al lugar. Teniendo esto en mente y observando las instrucciones que se dan en los pictogramas nos dimos cuenta que existían requisitos y elementos para desarrollar cada tarea y concluimos que sería óptimo crear una especie de recordatorio vinculado al correo personal para organizar todos aquellos requisitos que se necesitan con anterioridad a fin de ejecutar una tarea. Dado que esta lista debe crearse antes que el usuario esté en el lugar, esto nos parece que sería una funcionalidad ejecutable desde la casa, que permita planificar de una forma fluida la tarea.

La segunda instancia permite al usuario ejecutar las instrucciones de los pictogramas en el lugar, con la finalidad de apoyar a los usuarios de una forma segura e independiente.

Vinculación con Gmail

Vinculación con gmail modulo4 grupoalfa.png
Modulo4 accesibilida grupoalfa.png























Mapa de clase

Mapa de Clases PICTOSgurpoalfa.png

Referencias