Diferencia entre revisiones de «Construcción de un lenguaje visual accesible»

De Casiopea
Línea 1307: Línea 1307:
'''07. Grupo Asesor discutiendo'''
'''07. Grupo Asesor discutiendo'''


[[Archivo:Figura-15-ExE.png|400px|center]]
[[Archivo:Figura-15-ExE.png|300px|center]]


Esta ilustración muestra al equipo de investigación convergiendo en una misma idea en común y discutiendo proponiendo soluciones ante los problemas que se han planteado. Hay formas de diálogo, de ideas y de preguntas, demostrando la versatilidad de las sesiones de ideación y la diversidad de personalidades que se evidencia en la dinámica del grupo.
Esta ilustración muestra al equipo de investigación convergiendo en una misma idea en común y discutiendo proponiendo soluciones ante los problemas que se han planteado. Hay formas de diálogo, de ideas y de preguntas, demostrando la versatilidad de las sesiones de ideación y la diversidad de personalidades que se evidencia en la dinámica del grupo.
Línea 1313: Línea 1313:
'''08. Sesión de formación'''
'''08. Sesión de formación'''


[[Archivo:Figura-16-ExE.png|400px|center]]
[[Archivo:Figura-16-ExE.png|300px|center]]


Esta escena ilustra el momento de introducción a las temáticas, objetivos y narrativas de los talleres de ideación o trabajo de campo que el grupo asesor deberá llevar a cabo, se introducen conceptos e historias que construyen un diálogo en el equipo. Las sesiones de formación son esenciales para la dinámica del trabajo en equipo y el entendimiento del trasfondo de las actividades que se realizarán.
Esta escena ilustra el momento de introducción a las temáticas, objetivos y narrativas de los talleres de ideación o trabajo de campo que el grupo asesor deberá llevar a cabo, se introducen conceptos e historias que construyen un diálogo en el equipo. Las sesiones de formación son esenciales para la dinámica del trabajo en equipo y el entendimiento del trasfondo de las actividades que se realizarán.
Línea 1319: Línea 1319:
'''19. Sondas'''
'''19. Sondas'''


[[Archivo:Figura-17-ExE.png|400px|center]]
[[Archivo:Figura-17-ExE.png|300px|center]]


Esta ilustración está basada en el registro de una jornada de trabajo de campo del equipo de investigación, donde al grupo asesor se les otorgó una sonda donde se mostraban iconos relacionados con el espacio público que se encontraban evaluando, el metro, para dejar anotaciones y observaciones sobre el nivel de accesibilidad que presentaba el servicio. Estas jornadas de evaluación con sondas apuntan a un rediseño accesible de los servicios que no están pensando desde la inclusión de las personas con discapacidad intelectual.
Esta ilustración está basada en el registro de una jornada de trabajo de campo del equipo de investigación, donde al grupo asesor se les otorgó una sonda donde se mostraban iconos relacionados con el espacio público que se encontraban evaluando, el metro, para dejar anotaciones y observaciones sobre el nivel de accesibilidad que presentaba el servicio. Estas jornadas de evaluación con sondas apuntan a un rediseño accesible de los servicios que no están pensando desde la inclusión de las personas con discapacidad intelectual.

Revisión del 13:54 15 dic 2020

TítuloProyecto Expertos por Experiencia
Tipo de ProyectoProyecto de Titulación
Palabras Claveaccesibilidad, lenguaje, discapacidad, codiseño
Período2020-202
AsignaturaTaller de titulación
Del CursoTaller de Título: Accesibilidad e Inclusión
CarrerasDiseño, Diseño Gráfico"Diseño Gráfico" is not in the list (Arquitectura, Diseño, Magíster, Otra) of allowed values for the "Carreras Relacionadas" property., 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)María Jesús Ossandón, Felipe Meza
ProfesorKatherine Exss, Herbert Spencer, Catalina Pérez
URLhttps://felipemezab.github.io/exe/


Carpeta Proyecto Expertos por Experiencia S1

Archivo:Carpeta Expertos por Experiencia.pdf

Link lectura

https://issuu.com/mariajesusosssandon/docs/carpeta_expertos_por_experiencia

Introducción al Proyecto

Este proyecto de título trata sobre el desarrollo de un sitio web para el libro “Expertos por Experiencia”. Este libro busca recoger el trabajo y la experiencia de un grupo multidisciplinario de investigadores, que en conjunto con un Grupo Asesor de adultos con Discapacidad Intelectual trabajan para desarrollar productos, servicios y entornos accesibles e inclusivos. Durante los años que lleva este proyecto ambos académicos y grupo asesor han tenido aprendizajes significativos mediante distintas metodologías de investigación y taller de co diseño. Estas son justamente las experiencias que busca recoger este proyecto.

En nuestra investigación y desarrollo ahondamos en conceptos claves para la construcción de un sitio web accesible en todas sus capas, desde el planteamiento del contenido, el diseño de la navegación y arquitectura de información y la capa visual de tipografía, ilustración e interfaz para distintos tipos de dispositivos como computador, tablet y teléfono móvil.

Buscamos también definir el público objetivo de este libro, que son personas que pueden estar relacionadas al área de la investigación accesible, y también para quienes deseen conocer y familiarizarse en el tema. Y en un menor grado también para el grupo asesor, que puede mediante este libro revivir y recordar sus experiencias a lo largo del proceso, ver los frutos de su trabajo y visualizar lo relevante y fundamental que es.

Conceptos Claves

  • Accesibilidad
  • Discapacidad Intelectual
  • Accesibilidad Web
  • Investigación Inclusiva
  • Co Diseño
  • Lenguaje Fácil

Accesibilidad

Podemos definir la accesibilidad como una característica del entorno que permite a cualquier persona su máxima utilización así como su autonomía sobre los espacios y objetos que habita. La autonomía personal entrega igualdad de oportunidades e integración en la sociedad. Hay una definición importante respecto a la carencia de accesibilidad, que representa un problema del espacio y no un problema de la persona que lo habita.

Accesibilidad es el conjunto de características que debe disponer un entorno urbano, edificación, producto, servicio o medio de comunicación para ser utilizado en condiciones de comodidad, seguridad, igualdad y autonomía por todas las personas, incluso por aquellas con capacidades motrices o sensoriales diferentes. Una buena accesibilidad es aquella que pasa desapercibida a los usuarios. Esta “accesibilidad desapercibida” implica algo más que ofrecer una alternativa al peldaño de acceso: busca un diseño equivalente para todos, cómodo, estético y seguro. Es sinónimo de calidad y seguridad, siendo este último requisito fundamental en el diseño. Si carece de seguridad en el uso para un determinado grupo de personas, deja de ser accesible. La gran ventaja de la “accesibilidad desapercibida” es el valor agregado que otorga al diseño, ya que no restringe su uso a un tipo o grupo etario de personas. Los entornos, productos o servicios pueden ser usados con comodidad por todos a lo largo de la vida[1]

La accesibilidad entonces son características que conversan e interactúan constantemente entre ellas, lo que las hace variables dinámicas dentro de un sistema. De ahí aparece la diferencia entre ser accesible y estar accesible. Es que la existencia de un servicio no asegura que esté disponible. (acá falta)

Discapacidad Intelectual

Entenderemos a la discapacidad como una falla en la interacción entre el individuo y su entorno, pero es importante destacar que el entorno es el responsable de la discapacidad, son los espacios y nos las personas. Todo entorno debería estar preparado para acoger a todos quienes lo habitan. Este entorno incluye evidentemente el ámbito cultural del resto de la sociedad, pues también es un fallo la falta de empatía.

La discapacidad se puede presentar de las siguientes maneras:

  • Física
  • Sensorial
  • Cognitiva

El orden habla también de la más conocida (física) y la menos (cognitiva).

Accesibilidad Web

La accesibilidad web es una característica de un sitio web que permite un acceso universal a él, ya sea mediante idioma, cultura o capacidades de los usuarios. Las normas de la accesibilidad web son reguladas la organización internacional W3C (World Wide Web Consortium)[2], quienes se encargar de poner a disposición pautas para desarrolladores web para que los sitios puedan ser mas accesibles. [3]

Dentro de este concepto tenemos dos términos muy importantes, la usabilidad y la accesibilidad.

Para la usabilidad hay dos definiciones relevantes por parte de la Organización Internacional de la Estandarización (ISO). La primera es la ISO/IEC 9241

1. Usabilidad es la eficacia, eficiencia y satisfacción con la que un producto permite alcanzar objetivos específicos a usuarios específicos en un contexto de uso específico.

Luego la ISO/IEC 9126

2. La usabilidad se refiere a la capacidad deun software de ser comprendido, aprendido, usado y ser atractivo para el usuario, en condiciones específicas de uso

Luego la accesibilidades una característica propia del contenido en sus capas de interfaz y diseño visual.

Investigación Inclusiva

La Investigación Inclusiva busca darle voz a personas en situación de exclusión social en los procesos de investigación [4]. El cambio de paradigma respecto a personas con discapacidad hace necesario darle a todos la oportunidad de participar en las investigaciones, no solo como validadores sino también como personas creativas capaces de proponer ideas y soluciones. Los desafíos en esta área son las metodologías para en primera instancia formar en investigación a los participantes, y luego diseñar la metodología y las maneras de participación que tendrán en el proceso de investigación.[5]

Co Diseño

Lectura Fácil

Entenderemos a la lectura fácil como un apoyo y una manera de hacer más accesible el contenido escrito.

La lectura fácil es una herramienta de comprensión lectora y del fenómeno de la lectura para atraer a personas que no tienen el hábito de leer o se han visto privadas de él[6]

Es importante destacar que la lectura fácil está pensada para las personas con dificultad para comprender, sea cual sea el motivo. La lectura fácil corta las frases en varias líneas, no así el lenguaje llano.

El lenguaje llano, también denominado lenguaje claro, lenguaje sencillo o lenguage ciudadano... trata de evitar los párrafos confusos, las frases complicadas y las palabras raras que dificultan la comprensión de los textos.Error en la cita: Etiqueta <ref> no válida; las referencias sin nombre deben tener contenido

Expertos por Experiencia

El proyecto "Expertos por Experiencia" se enmarca dentro de un Fondo Nacional de Desarrollo Científico y Tecnológico (FondeCyT) llamado “Nuevos desafíos para Educación en Chile: Apoyos a la Vida Independiente de adultos con Discapacidad Intelectual o del Desarrollo”. El equipo multidisciplinar consta de profesionales de las áreas del Diseño, Educación e Ingeniería de la Pontificia Universidad Católica de Valparaíso, en conjunto con el Grupo Asesor, quienes son adultos de distintas edades y con algún grado de Discapacidad Intelectual.

Referencias: Casos de Estudio

1.The Shape Of Design [7]

Tipografía y Jerarquías de texto

Jerarquías de uno de los capítulos del libro Shappe of Design

Este libro en particular utiliza sólo una tipografía llamada “Quadraat” y sólo un tamaño tipográfico para todo el texto (con excepción de la portada). Cambia en su estilo de carácter para marcar la diferencia de categorías de texto:

  • número de capítulo (versalita en color negro)
  • nombre del capítulo (versalita en color naranjo)
  • citas (italic en color negro)
  • nombre de referencia de la cita (versalita en color negro)
  • pie de página (versalita en color negro)
  • número de página (versalita en color negro)

A pesar de ser constante en cuanto a la tipografía y su tamaño logra diferenciar las jerarquías de texto claramente con una simpleza visual. Frank Chimero en un blog llamado “Rediseño: Escalas y Jerarquía” escribe que existen herramientas tipográficas para crear estructura:

  • espaciado (“spacing”)
  • peso (“weight)
  • color (“color”)
  • tamaño (“size”)
  • estilo tipográfico (“typeface switch”)
  • acento gráfico (“accent”)

Estos son los elementos (dejando de lado la variación de tamaño) con los que diferencia los títulos, subtítulos, cuerpo de texto, cita, pie de página y pie de foto.El interlineado y los márgenes de la página construyen un blanco que aumenta la legibilidad del párrafo.

Imagen

Ejemplo de Ilustración del libro Shape of Design

Las ilustraciones del libro dan paso a cada capítulo, son una fusión entre un dibujo realista de tinta negra y un vector abstracto del color naranjo que posee el nombre del capítulo, que interviene en el dibujo. Es una forma de abstracción de lo que habla el capítulo. Al ser la primera información que hay del capítulo se produce un juego de analizar la imagen y deducir o pensar de qué forma puede desarrollarse el relato del capítulo, de qué temática será, como podría relacionarse.


Narrativa

Siguiendo la misma línea de la incorporación de lo lúdico a la lectura, el autor incorpora analogías e historias, tanto personales como ajenas, para poder dar a entender mejor la idea o concepto que presenta. Esto logra que al leer se vuelva mucho más interesante, sin terminologías tediosas, haciendo que la lectura sea liviana y simple, construyendo a la vez un relato que tiene como conclusión un aprendizaje en cuanto al mundo del diseño. Además el mismo libro destaca la importancia que tiene el contar historias al momento de definir una problemática de diseño, ya que al relatar sucesos humanos se activa el lado emocional del problema, y se entiende la urgencia de desarrollar una solución a partir del diseño. Se entiende el “porqué” del accionar y no el “cómo”, el “propósito” y no necesariamente la “forma”, el “objetivo” y no la “tarea”.

Arquitectura de la Información

El libro se divide en tres partes (“the song”, “in between spaces”, “the opening”) y cada uno tiene cierta cantidad de momentos definidos en el índice. Además cuenta con un prefacio, introducción, notas y reconocimiento. La división es bastante clara, y a pesar de que los fragmentos del capítulo no están anunciados con un título, si se reconocen fácilmente en su estructura y contenido.

2.Designing in the Border Lines [8]

Tipografía y Jerarquías de texto

Este sitio es una adaptación de una charla universitaria a página web. Utiliza, al igual el libro Shape of Design, la tipografía Quadraat para el cuerpo de texto, la cual es una tipografía con serif. Luego para los subtítulos, citas y frases con un énfasis utiliza una fuente sans que utiliza otro color. Los subtítulos en los que se divide la narración aparece blanca sobre una franja de color. Luego las citas aparecen en la misma tipografía en un color ocre y con un margen más grande

Al ser un tipo de lectura “scroll” se inventa la forma de dividir la página larga con estas franjas horizontales de colores, dentro de la paleta cromática elegida, interviniendo de forma horizontal. Ante el ojo aparece la distinción entre las distintas partes del text, como lector se aprecia el avance en la lectura, y no se vuelve tedioso.

Imagen

El blog cuenta con diversos elementos visuales, como fotografías, dibujos e ilustración. Tanto para hacer referencia al caso del que se está hablando, como para abstraer un con concepto que se quiere dar a conocer. La mayoría posee el tamaño suficiente para ocupar el ancho de la pantalla, ninguna imagen es pequeña, quitándole dificultad a la lectura de los elementos gráficos.

Narrativa

El discurso está divido en 6 partes: “Lightness”, “Design Ideals”, “Homelands”, “Walking the Line”, “Translate”, “All a Once” y “The Field”. El texto es una reflexión personal del autor respecto a una manera de afrontar el proceso de diseño, que él lo llama el “estar al medio” entre dos conceptos y no verlos como dicotomías. Esto decanta en los ejemplos del multiformato y cómo el contenido puede aparecer de dos o más maneras y aún así estar relacionados en el tono. Al final del texto menciona la frase “everything at once, everything all together”, una manera de abarcar el problema desde un todo y no como piezas por separado.

Benchmark

Exel benchmark.png

Referencias Web

Para el diseño del sitio visitamos algunas páginas web a manera de referencia, para sacar ideas que puedan funcionar en este proyecto.

Fase de Exploración Conceptual

María Jesús Ossandón

La exploración individual abarca los conceptos que se relacionan con el co-diseño, en un inicio se analizó los participantes y los roles, los procesos y las etapas, en el análisis de resultados, y la participación de las personas con discapacidad. En paralelo se estudio las características de un entorno accesible y lo que ocurría con la persona con discapacidad cuando interactuaba con un espacio no congruente con ella, y se planteó la problemática de la total accesibilidad en los espacios de talleres de co-diseño.


Accesibilidad cognitiva

La investigación inicial comenzó con la lectura de diferentes textos que trataban el estudio de las problemáticas de la accesibilidad de personas con discapacidad intelectual y talleres de co diseño para soluciones a problemáticas de la vida de los adultos con discapacidad. En este contexto, en el libro "Investigación en accesibilidad cognitiva: indicadores para diseñar espacios accesibles, espectro cognitivo" (Berta Brusilovsky Filer, Jacob Pineda Castro, Rosario Valdivieso Alba y David López Blanco), hablan del carácter y cualidades de un espacio, como la "seguridad cognitiva espacial" y la fractura que puede presentar en ella, cuando lleva a la persona a un espacio inaccesible. Se cuestiona si es posible volver a ubicarse en un espacio cognitiva accesible después de sufrir una fractura en ella.

Con respecto a los talleres de co-diseño, se realizan lecturas de textos que se ubican en un contexto de talleres, metodologías, y la ideación y diseño de soluciones a problemáticas de este grupo de personas. En este sentido se lee el artículo "Including intellectual disability in participatory design processes: Methodological adaptations and supports" (Herbert Spencer, Katherine Exss, Vanessa Vega, Marcela Jarpa, y Izaskun Álvarez), escrito por los académicos tras el proyecto de Expertos por Experiencia. En este texto hablan de los talleres de co diseño, el análisis de resultado y descubrimientos. Como el mapa muestra, se cuestiona el rol de las personas con discapacidad, si están presentes en todas las etapas de los talleres, incluyendo el análisis de resultados y la ideación de los objetos, y si su participación es fundamental en las conclusiones.


Mapa 1. Accesibilidad cognitiva

Talleres de Co-diseño

Siguiendo la línea del mapa conceptual anterior, se profundiza en el estudio de los talleres de co-diseño, analizando su fundamento, las metodologías, los tipos de participantes y los roles que cumplen, las soluciones de accesibilidad, y el impacto que tienen los resultados de los talleres en las personas, los objetos y las organizaciones. Para tener un entendimiento mayor del guión de estos talleres, su beneficio en la comunidad de adultos con discapacidad intelectual, y el impacto que tiene en todas las personas.

Mapa 2. Talleres de Co-diseño

Felipe Meza

El estudio e investigación se enfoca en los elementos que hace aparecer la discapacidad, el hecho de que la persona habite un entorno no accesible, significa que no puede interactuar sin dificultades. Se analiza y profundiza en los conceptos de accesibilidad, las cadenas y capas de accesibilidad y el carácter de las etapas de interacciones con del entorno con la persona con discapacidad intelectual.

Cadena de accesibilidad

El concepto de la cadena de accesibilidad viene desde la arquitectura, y se define como un conjunto de elementos que, en el proceso de interacción del usuario con el entorno, permite aproximarse, acceder, usar y salir de todo espacio o recinto con autonomía, facilidad y sin interrupciones. (NCh 3271. Accesibilidad Universal. Criterios DALCO para facilitar la accesibilidad al entorno.)

Hablaremos de la accesibilidad como una cadena de secuencias dinámicas que construyen un modelo mental de mi entorno y mi desplazamiento e interacciones en él. Es una cadena porque todas las acciones vienen de otras anteriores, que de a poco construyen una experiencia que me lleva a armar un modelo mental de las relaciones entre los espacios, servicios y objetos que conviven en un contexto determinado. Esas relaciones marcarán el comportamiento. Cada factor afecta y es afectado por los demás, y de ahí viene el dinamismo de las variables que componen mi contexto. La manera de habitar es mediante el desplazamiento, pero entiéndase no como un desplazamiento puramente físico, sino también por espacios digitales y servicios. Otros elementos del dinamismo es una diferencia fundamental entre el estar accesible y el ser accesible.

Modelo mental fm.png

Capas de la accesibilidad

Lo que compone a esta cadena son las capas de accesibilidad con las cuales una persona interactúa y sobre las cuales avanza. El entendimiento es aquí el factor clave, ya que la correcta interpretación de cada capa permite a una personas avanzar a la siguiente. Desde el concepto del diseño universal podemos pensar en un sistema que permita acceder a distintas capas de información dependiendo de lo que se quiera lograr con ella. Permitiendo varias entradas a un sistema de capas podríamos acercarnos a un diseño más accesible y universal.

capas de accesibilidad


El Entorno como barrera

El diseño accesible busca construir un balance entre las demandas del entorno y las capacidades individuales. Entenderemos un entorno como accesible cuando el diseño lo hace comprensible bajo 4 criterios:

  • Deambulación: Se debe facilitar la acción de entrar y desplazare de un sitio a otro. Se debe contemplar el desplazamiento solo o acompañado.
  • Aprehensión: Manipular elementos, productos o servicios. Implica también las acciones de aproximación, alcance y manipulación.
  • Localización: Localizar e identificar lugares y objetos de modo sencillo, así como planificar posibles rutas en ellos.
  • Comunicación: Transmisión y recepción de información. Todos los medios que permitan obtener información precisa para que el entorno pueda ser utilizable y comprensible.

Estos criterios podemos traducirlos como oportunidades para el diseño de involucrarse en acortar la brecha o equiparar las oportunidades para todos.

Esquema Ind.png


La Confiabilidad

En una esquema anterior, la autonomía aparecía como el resultado de una serie de factores que se conjugan de una manera específica. Esta conjugación desde los métodos del diseño podemos relacionarla a la que hace Frank Chimero cuando habla sobre el mensaje, el tono y el formato. Cada combinación de medidas llevará a un único resultado. Para el factor de la confiabilidad hablaremos no ella misma como factor sino de lo que hace que un sistema sea confiable. Es una cosa de los sentidos, como el ejemplo de la belleza. Un objeto parece más digno de la confianza de una persona si este responde a un estándar de belleza, algo con el color, la geometría, la proporción. La belleza es una herramienta para construir la claridad de la información entregada así como hacerla lo más comprensible posible. Es el primer punto de entrada para el constructo mental de un diseño, y además fundamental, ya que un objeto en cual alguien no confía no podrá ser parte de su contexto y de se vida.


Tarea3 150 fm.png

Recogimiento de conceptos

A partir del estudio de ambos, podemos recoger los siguientes pilares conceptuales: la accesibilidad, el entorno, la accesibilidad cognitiva, y el co-diseño. Estos son clave para el desarrollo de nuestro proyecto, ya que debemos ubicar el origen de nuestro oficio en la accesibilidad para poder crear un contenido accesible cognitiva y visualmente, en todas las capas de diseño que definimos. Es necesario entender también la estructura y dinámica de los talleres de co diseño, ya que el contenido del libro se formula desde la experiencia de este co diseñar del equipo de investigación y el equipo asesor. Es fundamental profundizar en las experiencias de los participantes para poder visualizar las vivencias y pensamientos del proceso con un lenguaje gráfico que traiga a presencia el acto de co-diseñar.

  • Accesibilidad:el objeto editorial que diseñamos debe estar pensado y creado desde la accesibilidad, esto significa que los elementos visuales (tipografía, paleta de colores, diagramación, ilustración) deben apuntar a este objetivo.
  • Entorno: a pesar de no tratarse de un espacio donde transita una persona, si es un entorno físico que la persona recorre visualmente, y las interacciones deben ser intuitivas y fáciles, la lectura del lenguaje visual no debe ser difícil, debe ser rápida, intuitiva y fácil de entender.
  • Accesibilidad cognitiva:en cuanto al contenido del libro, debe estar estructurado y organizado de una forma que sea intuitivo y lógico el orden de los fragmentos y partes que lo constituyen. Como editores debemos cuidar que la redacción del texto no posea un alto contenido de térmicos técnicos y académicos que no se entiendan fácilmente, y que se utilicen metáforas para que el lector pueda asociar la materia que trata el libro con sus propias experiencias, logrando una comprensión más profunda y rápida.
  • Co-diseño:Los talleres de co diseño son fundamentales para la investigación y metodologías llevadas a cabo por el equipo investigador y grupo asesor, y es la razón por la cual se obtienen resultados y se hacen pruebas de soluciones diseñadas para los adultos con discapacidad intelectual. Entender el co diseño nos hace entender la forma en la que debe ser visualizado tanto en el texto como de manera visual. Al mismo tiempo, estudiar este concepto nos hace internalizar que el proceso de creación de este objeto editorial no recae sólo en nosotros, sino que en todo el equipo, contando también la validación del grupo asesor, siendo un objeto de co-diseño en sí mismo.


Relevancia y Trascendencia del diseño

Este proyecto permite a la comunidad de la PUCV, a personas con DI y su círculo cercano y a la sociedad en general visualizar a las personas con Discapacidad Intelectual como expertos por experiencia, y mostrar y considerar su impacto como agentes de cambio en la sociedad. Lo que se busca es visibilizar el trabajo y la constante lucha por derechos y participación de las personas con discapacidad intelectual en nuestra comunidad.

Nosotros como diseñadores nos encargamos de la edición, donde los lectores objetivos determinan una transversalidad en la accesibilidad cognitiva del contenido. Tenemos la responsabilidad de hacer accesible la visualización de la información para el entendimiento de los procesos de este proyecto mediante el diseño universal centrado en el usuario, somos facilitadores de herramientas para la participación. La dimensión sensible desde la cual proponemos nos permite construir un objeto/espacio que cuida de las cualidades más relevantes que debe tener el diseño de la lectura y la estructura de información que manejamos. El enfoque es mostrar a la comunidad un proceso que pueda ser y estar accesible.

Construcción del sitio Expertos por Experiencia

Este proyecto decantó en la construcción de un sitio web para el libro Expertos por Experiencia. Esto implica trabajar en varias capas de diseño para llegar a un sitio navegable que contenga al libro. Las capas de diseño que abarca este proyecto son las siguientes:

  • Objetivos del sitio
  • Contenidos del sitio
  • Arquitectura de la información
  • Diseño de la navegación
  • Diseño de la interfaz
  • Diseño visual
  • Diseño Front End

Es importante mencionar que todas las capas si bien tienen un orden importante que se debería seguir, el trabajo ha sido un constante ir y volver entre las partes, siempre dejando el espacio para volver a los trabajos pasados con el fin de llegar a un mejor resultado. También es relevante decir que los estilos que se propongan pueden ser extrapolados a otros formatos para el libro, como una edición física.

Objetivos del proyecto

  • Arquitectura de la Información
    1. Recopilar el contenido disponible que será parte del libro.
    2. Categorizar y ordenar el contenido en una estructura de navegación.
    3. Visualizar mediante diagramas y esquemas la navegación.
  • Definición del estilo visual
    1. Identificar el mensaje y tono del libro para luego abstraerlos a los elementos visuales que lo conforman.
    2. Definir las voces que aparecen a lo largo del libro.
    3. Producir maquetas de páginas clave para definir elementos de interfaz.
    4. Definir la estructura gráfica, lo cual implica:
      • Establecer la diagramación. (márgenes, relación entre elementos visuales)
      • Explorar y proponer una paleta de colores.
      • Explorar y proponer una tipografía junto con sus jerarquías en el sitio.
      • Explorar, definir y producir ilustraciones para apoyar al contenido escrito.
  • Diseño front end
    1. Crear un repositorio de github para trabajar.
    2. Armar la carpeta del proyecto, ordenando los archivos en relación a lo propuesto en la arquitectura de información.
    3. Desarrollar el contenido base en HTML.
    4. Agregar la capa de estilos visuales mediante CSS.
    5. Agregar elementos de animación y microinteracciones dentro del sitio, como menús desplegables y botones.

Autores del libro

Los contenidos son el libro “Expertos por Experiencia”, escrito por Vanessa Vega, Paulina Carrasco, Herbert Spencer, Andrea Maturana, Carolina Lucero, Gonzalo Osorio, Marcelo Escobar, Pablo Andrade, José Miguel Salas, Pauline Müller y Pamela Soto. Los textos aún están en fase de desarrollo, por lo tanto solo incorporaremos las partes que ya tienen su texto redactado y revisado.

Arquitectura de la información

El Information Architecture Institute define a la arquitectura de la información de las siguientes maneras:

  • El diseño estructural en entornos de información compartida.
  • El arte y la ciencia de organizar y rotular sitios web, "intranets", comunidades en línea y software para promover la usabilidad y la "encontrabilidad".
  • Una comunidad emergente orientada a aplicar al entorno digital los principios del diseño y la arquitectura.

Cuando comenzamos el proyecto, se nos hizo llegar el material correspondiente, lo que incluyó el documento del libro hasta ese momento, que ya contaba con una indexación y algunos títulos desarrollados. También muchas de las partes estaban en estado de duda porque no había propuestas para ellas.

Arquitectura Previa

Arquitectura Previa 1 .png

La indexación inicial del sitio constaba de 6 capítulos. El fuerte de contenido está en el capítulo 2 de fundamentos teóricos, donde se explican pensamientos y estudios que ayudan a entender el marco teórico y conceptos claves.

Respecto a esta indexación aparecen algunas observaciones:

  1. El contenido del capítulo 2 es muy extenso, y está escrito en un lenguaje muy académico y difícil de entender. Hay errores de redacción como poner demasiadas referencias juntas, cortando constantemente la lectura.
  2. Los capítulos 3 y 4 no presentan una narrativa que se condiga con el proceso de los talleres con el grupo asesor.
  3. Aplicar las “voces” de los distintos actores que aparecen en la construcción del contenido. En este caso académicos y grupo asesor.

Propuesta 1°

Arquitectura Previa 3.png

Nuestra primera propuesta define los siguientes cambios:

  1. Definir dos partes para el libro. La primera tiene una breve conceptualización de conceptos claves para el proyecto, y las escuelas de pensamiento que son el contenido más denso queda como una suerte de anexo para la segunda parte. Esto con el objetivo de alivianar la lectura hasta los talleres con el grupo asesor.
  2. Sintetizar los Capítulos 3 y 4 en un solo capítulo nombrado “De asesores a investigadores” que tiene los objetivos, desarrollo y resultados de los talleres con el grupo asesor. Esto porque la capitulación anterior no era clara al respecto y el contenido no está redactado a la fecha.
  3. El capítulo 1 “equipo de investigación” se eliminó y se puso la sección de presentación del equipo al comienzo, junto a los agradecimientos, dedicatoria y prólogo.
  4. Se agregó un epílogo para palabras de despedida y referencias bibliográficas.

Junto con esta propuesta de cambios se presentó una visualización del estado de avance de cada capítulo por separado, marcando con colores las partes terminadas (verde), terminadas con corrección (amarillo), terminadas con mucha corección (naranjo) y faltantes (rojo)

Arquitectura Previa 4.png

Si bien la mayoría del capítulo 2 está escrito, se decide dejarlos en amarillo porque la redacción necesita revisión.

Como mencionamos antes, una de las apreciaciones respecto a la estructura y relato del libro fue el incorporar las voces de las personas que participaron a lo largo de los talleres y actividades. Cuando hablamos sobre las "voces" hacemos referencia al distingo entre el tono de aquellos que participaron de la creación del contenido del proyecto. Cada aporte fue distinto y construyó una experiencia en particular, y nuestro objetivo es poder mostrar visualmente estos distingos y poder darle una mayor riqueza gráfica al libro. Por esto hicimos un diagrama para mostrar dónde proponemos que aparezcan estas voces. Se consideran distintas maneras gráficas de hacer aparecer a las voces, como tipografía y/o ilustración.

Arquitectura Previa 5.png

El color verde es la voz académica, la naranja es la voz del grupo asesor y la celeste corresponde a una suerte de mezcla de ambas.

Mapa de Navegación

El mapa de navegación es un esquema con forma de árbol que muestra visualmente la estructura del sitio. El primer mapa que se hizo fue en base al contenido indexado en una primera instancia, y solo considera elementos básicos de interfaz desde los cuales se avanzó a nuevas y más completas versiones. Arquitectura Previa 2.png

Junto con el cambio en la indexación y arquitectura de información se propone un nuevo mapa de navegación que considera aspectos más complejos de la interfaz y de la relación del libro con la estructura del sitio. Este nuevo mapa contiene secciones en la página del home, que son: El libro, que relata los objetivos del proyecto así como una síntesis sobre el proceso y los colaboradores que aportaron. Descarga, que ofrece simplemente la posibilidad de descargar el libro en distintos formatos. Quienes somos, que habla sobre la comunidad de la Pontificia Universidad Católica de Valparaíso y el grupo de investigadores del núcle acción. Y por úntilo un formulario de contacto. Mapa de Navegación 1.png

Propuesta 2

Luego de revisiones con el equipo académico, la estructura del libro se simplifica sustancialmente, quitándole énfasis a la parte conceptual pero sin perder la gran importancia del suelo teórico necesario para entender el argumento del proyecto. Solo se dejaron los conceptos fundamentales para tener un suelo teórico fuerte previo a los talleres y a la metodologías específicas usadas.

Arquitectura Actual 1.png

El mapa de navegación tuvo por consiguiente variaciones en su estructura. La principal es la separación del sitio en dos secciones con un lenguaje distinto. La primera sección del “home” es una página de navegación estándar con elementos de información puestos en el header. Hay secciones que al igual que la primera propuesta de mapa nos llevan a información básica sobre lo que trata el proyecto y quienes lo conforman, así como la posibilidad de descargarlo en varios formatos y contactarse por medio de un formulario. La segunda parte es donde habita el libro, y tiene distingos tipográficos y de diagramación para cuidar la legibilidad y la lectura de las partes.

Arquitectura Actual 2.png

Diseño Visual

El diseño visual para el sitio

Interfaz

Proceso: Pruebas y Versiones

Para las pruebas visuales de páginas clave, se trabajó en un comienzo desde adobe xd, un software de diseño para wireframes e interfaces navegables. Se eligió este programa también porque permite un trabajo colaborativo en tiempo real.

Pruebas en Adobe xd

Cuando se comenzó con la maquetación del sitio, se tuvo en cuenta que lo que se está diseñando no es una página web sino que es un libro para ser leído en la web, y por lo tanto los elementos que van a apareciendo corresponden a decisiones tomadas con este distingo muy en cuenta. Lo que más se intentó cuidar a lo largo de las muchas versiones fue la lectura y el cómo es que el sitio nos lleva hacia esta lectura (cosa que aparece también en la arquitectura de la información).

Con las primeras versiones podemos empezar a ver los elementos que aparecen en la página. Tenemos principalmente un acceso al índice de contenidos del libro, y luego una imagen acompañando al título. Esta landing page del home cumple la única función de ser un acceso a la lectura, los únicos caminos disponibles en cuanto a navegación son las partes del libro. Cabe mencionar que las imágenes en estas versiones son solo de referencia y no están producidas por los estudiantes.

Uno de los elementos agregado a algunas de las versiones es un lomo alineado a la izquierda, que busca imitar el lomo de un libro con información editorial. Un elemento de navegación agregado al lomo es que al hacerle click nos direcciona al home desde alguna sección de la lectura.

lorem
lorem
lorem
lorem

Para los las páginas tipo de la lectura, se experimentó con dos principales tipologías que son la columna simple y la doble columna de texto. La doble columna hace sentido respecto a la horizontalidad de la pantalla de escritorio, y luego en dispositivos verticales con cualidades responsive se puede lograr que module a la columna simple. Lo elementos de navegación son el acceso al índice al igual que en home, links para continuar a la siguiente parte y para regresar a la anterior. Luego de probar poner estos links al comienzo del párrafo se decide moverlos para el final para no interrumpir la lectura y porque llegar a una nueva sección y que el primer elemento sea uno para irse de inmediato puede crear un ritmo entrecortado de la lectura. En estas páginas tipo de texto al hacer scroll solo queda el texto, y los elementos y metadatos de arriba quedan en su posición. Un elemento que aparece en consideración es el "scroll spy", un complemento de navegación que permite al lector ubicarse en la extensión vertical de la página.

lorem lorem lorem

lorem lorem lorem


Se hizo también una prueba de poner una barra lateral del lado derecho de la pantalla, con un símbolo de estrella que desplegara al índice. Este símbolo viene desde un archivo en google docs con el contenido del libro, donde se pusieron estrellas a modo de cierre de la sección del prólogo.

Exe web 14.png Exe web 12.png Exe web 13.png Exe web 15.png Exe web 16.png Exe web 17.png Exe web 18.png

Pruebas en html y css

Para estas versiones se trabajó directamente la diagramación desde la hoja de estilo de CSS, sin una maquetación específicamente diseñada desde antes. Para siguientes versiones, se pensó en agregar una imagen para abrir los capítulos. Manteniendo una diagramación de doble columna se agregó una imagen del lado izquierdo y se dejó el texto del lado derecho. Respecto a esta diagramación salen 2 versiones. La primera queda con imagen fija y el texto hace scroll para la izquierda. Otra, con la imagen que también es parte del scroll y luego aparece el texto en doble columna. La doble columna tiene el problema que es difícil hacer coincidir la página con los márgenes establecidos, y puede quedar el texto corrido y ofrece menos control. Luego se propuso agregar un botón para ir cambiando de páginas, entonces en lugar de hacer scroll se navegan las páginas mediante clicks.

versión de doble columna con imagen fija Prologo-version-2.png Paradigma-version.png

Tipografía

La elección de la tipografía es esencial para la edición de un libro y su identidad visual, en especial si el texto debe ser accesible y fácil de leer. Por un lado están las particularidades y características de la anatomía de la letra en sí, y por otro están los atributos de texto que se le agrega a la tipografía. La tipografía debe tener un blanco necesario en su forma, entre sus trazos, y entre caracteres generando un espacio para que sean legibles, también debe tener distingos visibles para que cada letra tenga su individualidad y se pueda identificar de las otras letras. Con respecto al tamaño de esta debe ser lo suficientemente grande para poder leerse con facilidad, debe tener un contraste alto entre la página y la letra y no debe poseer tantas variantes de familias tipográficas, no más de dos. En esta caso en particular hemos elegido dos tipografías: Lora y Lato, la primera perteneciente a la familia de las Serif y la segunda a la familia “Sans Serif”, para generar un contraste y poder organizar y jerarquizar la totalidad del texto con atributos notorios y que el lector distinga fácilmente.

Lora

Esta tipografía pertenece a la familia de las “Serif”, al poseer remates curvos sutiles en los extremos de su trazo, a pesar de que pueda parecer que esta particularidad en un carácter dificulte la comprensión de su forma, estos generan una continuidad en la lectura y hace que cada letra se distinga por sus individualidades en su estructura. Es por esto que hemos elegido esta tipografía para el cuerpo del texto, con el objetivo de navegar por la lectura de forma continua y sin dificultades, para que los lectores tengan una experiencia de navegación sin barreras.

Tipografía-Lora01.jpg Análisis de las características de la tipografía Lora


  • Serif: como mencionamos anteriormente, el serif es el remate del trazo en uno o ambos extremos, en este caso el serif tiene un carácter recto del lado derecho y curvo del lado izquierdo. Este elemento le agrega su propia personalidad a cada letra y genera continuidad en la lectura.
  • Contraste del trazo: el grosor del trazo de la letra no es continuo, esta diferencia ante el ojo genera un contraste que ayuda a la legibilidad del texto, ya que al no ser un grosor monótono los caracteres se distinguen entre ellos.
  • Eje: hay tipografías que a pesar de estar en su versión Regular, poseen una inclinación en su eje de simetría, en un espacio de lectura accesible este no debería estar inclinado excesivamente, en este caso cumple con esta particularidad.
  • Oreja: es el trazo que se le atribuye a ciertos caracteres de la tipografía, en este caso a la letra “R”, donde observamos un remate redondo que se hace diferenciar esta letra.
  • Apertura: es importante para la legibilidad que los caracteres tengan un espacio amplio en su contra forma, el blanco, para poder leer con mayor facilidad la forma.
  • Contraforma: como se mencionó anteriormente la contraforma es fundamental para la lectura de la forma de la letra, en este caso el carácter “O” tiene un blanco abundante.
  • Espacio entre letras: es importante para la lectura fácil del párrafo que haya un espacio prudente entre los caracteres, sino el usuario deberá esforzarse en entender las frases al tratar de leer con un mínimo de espacio entre letras, esto no sería accesible. En este caso la tipografía cumple con tener el espacio necesario para facilitar la lectura del texto.
  • Caja de X: la proporción que tiene un carácter accesible, debe tender a la forma cuadrada pero no serlo por completo, debe ser un poco más alargada en su eje vertical, ya que si todas las letras tienden a ocupar un espacio cuadrado, tenderán a verse iguales y afectaría al entendimiento de su trazo. En este caso, cumple con esta característica.
  • Líneas de altura: la línea ascendente marca hasta donde llega la altura de los trazos ascendentes, lo mismo en el caso de la altura de los trazos descendentes y de las mayúsculas. Estas variaciones en las alturas hace que se construya una “llave tipográfica” en las líneas de texto, se llama así debido a que las diferentes alturas van construyendo una línea con hendiduras similares a las de una llave. Esta particularidad hace que la lectura sea fácil, al generar una diversidad en las letras que hace que el ojo las distinga sin dificultades, mejorando el entendimiento del texto.

Tipografía-Lora02.jpg Familia tipográfica Lora, tiene ocho estilos. A la izquierda se despliega un texto para demostrar su legibilidad en el párrafo.

Lato

Esta tipografía pertenece a la familia de las “Sans Serif” o las “Palo Seco”, ya que no poseen un remate en el trazo que les da forma a la letra. Esta tipografía se caracteriza por su simpleza y legibilidad ya que no posee mayores cambios en su forma, el aire que posee en su contraforma permite una lectura fácil de la forma de su letra.

Tipografía-Lato-01.jpg Análisis de la anatomía de la tipografía Lato


  • Serif: el remate del trazo es recto, continúa con el grosor del trazo sin variación, esto le brinda un carácter simple que lo hace fácil de leer.
  • Contraste del trazo: a pesar de lo monótono del grosor del trazo, posee algunos quiebres en uniones donde varía su grosor, esto ayuda a distinguir curvaturas y otras partes de la forma de la letra, que ayuda a distinguir una de otra.
  • Eje: la tipografía posee un eje de simetría de 90 grados, completamente vertical.
  • Oreja: hay trazos particulares de letras específicas que contienen un grosor diferente para poder distinguirlas, por ejemplo la letra “R”.
  • Apertura: el espacio blanco que poseen los espacios de una letra son muy importantes para que el ojo pueda distinguir con facilidad la forma, en este caso la apertura de los caracteres es suficiente para que esto pase.
  • Espacio entre letras: el interletrado es fundamental en la legibilidad de una palabra, y a la vez un párrafo, en esta tipografía el espaciado entre los caracteres es abundante permitiendo una lectura rápida.
  • Contraforma: el espacio que encierra la forma de una letra debe ser abundante, ya que sólo con los blancos podemos distinguir el negro que hace aparecer a la letra, en esta tipografía el blanco es suficiente.
  • Líneas de altura: a pesar de que se presentan diversas alturas de los trazos de las letras, la llave tipográfica no posee tantas hendiduras o variaciones en comparación a la tipografía Lora, es por esto que elegimos la mencionada para el cuerpo y no la tipografía Lato.

Tipografía-Lato-02.jpg Familia tipográfica Lato, tiene seis estilos. A la izquierda se despliega un texto para demostrar su legibilidad en el párrafo.


Paleta de colores

El manejo del uso del color es fundamental para que un sitio web o cualquier visualización en la pantalla sea legible, en nuestro proyecto escogimos la paleta de colores tomando en cuenta que debía tener un contraste adecuado para la lectura en pantalla. Se utilizaron diferentes sitios donde se comprobara que los colores fueran adecuados y legibles, los dos colores principales de la paleta se seleccionaron desde un sitio que exponía distintas paletas de colores que funcionaban en la pantalla.

IL Paleta-01.png

Los colores elegidos fueron un azul marino desgastado y un naranjo opaco, no son colores con exceso de brillo ya que con un fondo blanco sería difícil distinguirlos. Ya que el celeste y el naranjo son colores complementarios, tomamos tonos que se asemejaran a su construcción visual, ya que los colores complementarios funcionan en el mismo espacio, son armónicos y agregan un valor a la estética y al lenguaje visual.

IL Paleta-02.png

Con respecto al trato del color en la ilustración se agregaron colores a partir de los dos principales mencionados anteriormente, un celeste y un naranjo de carácter más vibrante y brillante, para poder crear espacios y superficies con luces y sombras, creando opacidades y gradientes, que agregan un valor de profundidad y perspectiva a la ilustración. Estas cualidades aportan realidad en el dibujo para que el lector pueda construir relaciones mentales que conectan lo que ve con las experiencias que ha vivido.

IL Paleta-03.png

En cuanto a la tipografía el color juega un rol importante en las jerarquías de texto, para diferenciar, organizar el tipo de información. Se utilizan los dos colores principales para algunos títulos que contienen un tamaño de letra mayor al cuerpo de texto, y no poseen una mayor cantidad de caracteres como el cuerpo de texto. El color en el texto no se debe aplicar en el caso de que la tipografía esté en un tamaño pequeño y sea una gran cantidad de caracteres porque afectaría la legibilidad de las palabras, ya que negro sobre blanco tiene un mayor contraste, lo que ayuda a la lectura fácil y rápida.

Ilustración

La ilustración es un aspecto fundamental para lograr una lectura accesible ya que se genera un soporte visual que facilita la comprensión del texto y los conceptos que se definen en él. Al estudiar la función de este elemento gráfico entendemos que una ilustración extremadamente abstracta puede llegar a confundir al usuario, en especial si poseen discapacidad intelectual. Por otro lado, el uso de la metáfora visual facilita la formación de relaciones mentales que conectan lo que la persona va leyendo con experiencias previas en su entorno, agregándole una dimensión conocida a la ilustración que hasta ese momento era algo que no había visto.

En este sentido, la línea de partida que se ha elegido para la ilustración es la relación entre la persona y su entorno, una mezcla del dibujo vectorial de personajes inmersos en superficies que construyen su entorno. Ya que la discapacidad intelectual es la no congruencia de la persona con su entorno, las barreras que le impiden interactuar con este sin facilidades, pensamos que la relación e interacción entre estos dos elementos debería ser el origen del dibujo.

A pesar de que hemos llegado a este punto de partida, al comenzar con las propuestas se trazó un camino de experimentación que también consideramos valioso ya que es parte del proceso para llegar hasta lo que hemos realizado.

Exploración ilustrativa

Propuesta 01: Metamorfósis

La primera propuesta ilustrativa fue el dibujo botánico de una mariposa, como una metáforma visual de la evolución que se presenta en las personas con discpacidad intelectual con las herramientas correctas, cuando son incluidos en procesos de investigación y diseño, y tienen un rol fundamental en ellos. La idea era ilustrar la evolución de la metamorfosis paso a paso.


Propuesta 02: Identidad

Esta propuesta busca ilustrar una sección del libro donde los integrantes del equipo investigador hablan de cómo ven a sus colegas y como se ven a sí mismos, en una forma de introducción del equipo. Esta versión queda descartada debido al aspecto general que posee, sin un trazo o un carácter que lo diferencie de otras ilustraciones, además posee un bajo contraste al tener una paleta basada en un color, azul. Además de estos motivos, se descarta debido a que se pone en duda la permanencia de este fragmento introductor del texto.

IL como me veo.png

Propuesta 03: Comunidad colaborativa

Esta propuesta intenta reflejar el funcionamiento del trabajo en equipo y la participación de este en la construcción, redacción y diseño del libro, y el sitio web. Esta ilustración es débil en cuanto a la identidad ya que tiene un estilo genérico, tanto las personas como los elementos no tienen un trazo y forma que los distinga de otras ilustraciones. De todas formas nos guió por el camino de la isométrica que más adelante tomaremos, es importante considerar la perspectiva en ángulo del dibujo para agregarle una dimensión realista a los espacios.

IL trabajo en equipo.png

Construcción ilustrativa

El proceso ilustrativo se refleja en la evolución de la ilustración correspondiente al fragmento del texto de Psicología Positiva, esta fue la primera ilustración que se realizó con este proceso y que definió el trazo de las otras. Se seleccionó este fragmento del texto ya que corresponde a uno de los textos con conceptos técnicos y académicos que no son fáciles de entender, es por esto que tuvimos la necesidad de diseñar la ilustración para poder brindar un apoyo visual que facilitara la comprensión de la lectura.

01. Observación en la lectura

El proceso de la construcción de una ilustración específica para un fragmento del texto, es obviamente la lectura de este y la identificación de los puntos, relaciones y conceptos claves para el entendimiento de este. Una vez que se destacan estos puntos, se establecen relaciones entre ellos a través de un mapa conceptual.

Este fragmento en particular habla de la psicología positiva y los buenos resultados que se obtienen de una intervención positiva por parte de los investigadores al Grupo Asesor. Habla de una secuencia de etapas donde la persona con discapacidad al enfrentarse a una problemática impuesta por la brecha entre él y el entorno, experimenta un momento de disgusto y nacen emociones negativas de esta experiencia, como frustración y angustia, al no poder realizar lo que se propuso hacer. En este momento el grupo de apoyo y su círculo debería realizar una intervención positiva que lleve a la persona a un lugar de aceptación de las emociones negativas que está teniendo, y luego un afrontamiento positivo de ellas, haciendo de este proceso un aprendizaje valioso que posicione al adulto con discapacidad intelectual en un escenario de bienestar.

02. Construcción de relaciones

El mapa conceptual se define como una herramienta gráfica para organizar el contenido de una idea, visualiza los conceptos claves y la relación entre ellos de una forma que facilite el entendimiento de ellos.

IL concepto-01.png

03. Modelo

Del mapa conceptual se observa la relación que hay entre los conceptos y se profundiza en la visualización de ellas con formas y trazos específicos que construyen una visualización más específica de la idea.

IL concepto-02.png

04. Esquema ilustrativo

El modelo diseñado refleja que el contenido del libro es más bien académico y técnico, y si bien el texto contiene fragmentos de este carácter, su objetivo es que sea de una lectura fácil y rápida y que narra la experiencia de investigación inclusiva de un equipo co diseñador. En este sentido, se propone integrar personajes al modelo, que están relacionándose y realizando la investigación y experimentación, de acuerdo a las etapas que menciona el texto.

Relaciones de conceptos y esquemas de visualizaciones
Esquema de la relación de los personajes, acciones y etapas

Metáfora visual

Conectado esta ilustración con el contexto del fragmento del texto que hablamos anteriormente se utiliza una metáfora visual para poder comunicar de una forma accesible el concepto de la psicología positiva y las intervenciones positivas.

  1. Frecuentemente los adultos con discapacidad intelectual se enfrentan a situaciones que les provocan emociones negativas, como frustración y angustia, debido a que no logran realizar algo que se han propuesto por la falta de accesibilidad en su entorno. Esta situación se ilustra como un personaje en un escenario donde posee una ampolleta y no puede conectarla al techo, por lo tanto no puede alumbrar la escena, este impedimento hace florecer emociones negativas en él.


  1. En la siguiente escena acude a un grupo de personajes que lo ayudan a idear en conjunto una solución a este problema, haciendo que acepte la emoción negativa para poder pasar a la etapa de afrontamiento del problema.


  1. En el afrontamiento de la emoción negativa aparece una escena donde ya ideada la solución, la co diseñan, y empiezan la construcción de una escalera para que el personaje logre encender su ampolleta.


  1. En la etapa de aprendizaje de esta intervención positiva, los personajes van transportando en conjunto la escalera construida, en este momento el adulto con discapacidad descubre que de las emociones negativas puede nacer una solución que además te deja una lección.


  1. En el último escenario el personaje puede encender su ampolleta gracias a la escalera, y llega a un lugar de bienestar, donde sus emociones negativas se transforman en positivas gracias a la intervención del equipo.


IL personajes-05.png


Se utiliza la referencia del sitio web “Hidden Folks”, donde los personajes, dibujados con un trazo cercano a la textura del lápiz, se encuentran en distintos escenarios realizando diferentes actividades.

05. Ilustración casa

Al estar dividido en etapas el proceso de una intervención positiva, dentro de la psicología positiva, se propone visualizar estas etapas en diferentes escenas dentro de distintas piezas de una casa, y que se vea como el tránsito de los personajes de una habitación a otra es el proceso de la transición de las etapas.

En esta propuesta, la idea de que las etapas correspondiendo a diferentes escenas y que los personajes naveguen por ella funciona, pero visualmente la estructura de la casa no funciona, ya que resalta más la estructura que los personajes y las acciones que ellos realizan en cada una, perdiéndose el proceso tras la idea de la psicología positiva. Debido a esto se considera cambiar la escena que contiene a las personas por una más sutil, que aparezca desde el blanco y no genere un contraste muy alto, ya que opaca a los personajes y los elementos con los que se relacionan.

IL estrcutura casa-06.png


Anatomía del personaje

Además de la estructura de la casa la anatomía de los cuerpos no se acerca a la realidad, ya que los personajes contienen cabezas grandes en relación al tamaño del cuerpo, y las extremidades no tienen una definición clara. Para lograr acercarse al gesto del cuerpo humano en movimiento se realizan distintas pruebas de la forma del trazo y también de la textura y grosor del trazo en sí.

IL prueba trazo-07.png

06. Isométrica: Personas y Escenarios

Siguiendo la línea de propuestas ilustrativas pertenecientes al fragmento de texto “Psicología Positiva” hay una necesidad de que aparezca visualmente la relación entre la persona y el entorno, y las relaciones con elementos y otras personas. La discapacidad nace en la brecha entre la persona y el espacio, es por esto que nos pareció fundamental ilustrar esta relación. Con este objetivo se realiza una ilustración isométrica donde conviven superficies que construyen la realidad circundante de las personas y personajes que habitan estos espacios. Ambos elementos fueron evolucionando en cuanto a significado, trazo, forma, paleta de colores, dimensiones, proporciones y relaciones. A continuación se muestra el proceso de este estilo gráfico de ilustración.

Ideación de la ilustración isométrica


  • Versión 01: Esta propuesta cuenta con una anatomía de los personajes más cercana a la figura humana, a pesar de esto el gesto es rígido, lo que le resta expresión al dibujo. La paleta de colores aumenta pero los tonos no se complementan de una forma armoniosa, la tonalidad gris de los escenarios no aporta a la ilustración.

IL Isometrica-01.png


  • Versión 02:En cuanto a la figura humana se traza una línea más flexible, para que el gesto del movimiento se aprecie se decide que las figuras no tengan relleno ni ropa que pueda ocultar la línea del cuerpo. Se escoge un trazo con una textura que se asimile a la del lápiz. La paleta de color de los escenarios pasa a ser un degradado de celeste y amarillo tenue para mantener la sutileza pero a la vez agregar color. Los números en relieve no aportan y su tamaño era excesivo en contraste al tamaño de los personajes y escenarios.
Prueba de flexibilidad de la forma de los personajes

IL Isometrica-02.png


  • Versión 03:Los escenarios se voltean desde su eje vertical, ya que el ojo lee desde la izquierda a la derecha, debido a esto tiene sentido que la primera escena se encuentre en el lado izquierdo de la página y la escalera vaya dirigida en una diagonal desde la izquierda a la derecha. En cuanto a la forma del cuerpo, se mejora la consistencia en el tamaño, y las proporciones, se trabaja en el gesto del movimiento. El trazo vuelve a su textura lisa y blanda para que no se genere un contraste mayor con las superficies de la escena y escaleras.


IL Isometrica-04.png


  • Versión 04:La anatomía de los cuerpos se mantiene pero hay un cambio importante en la paleta de colores, con el objetivo de generar un contraste mayor entre la ilustración y el blanco de la página escogen dos tonos, uno celeste y otro naranjo, y se trabajan en degradado. Los personajes de color naranjo serán los adultos con discapacidad intelectual, también el color aplicado en las superficies de escenarios y herramientas serán un indicador de accesibilidad en el entorno construido. Para el resto de los personajes se escoge un color blanco y se mantiene un trazo rugoso con textura que asimila un lápiz grafito, esta combinación hace referencia a personajes dibujados en la página.


IL Isometrica-05.png


  • Versión 05:En la versión actual los colores de la paleta se mantienen, pero hay un enfoque mayor en la perfección del gesto de la figura humana, en el movimiento y las proporciones reales. Se estudia el dibujo de la estructura del cuerpo y se realizan pruebas de trazos, líneas y ángulos que se asimilen a la realidad anatómica.



El resultado de este proceso ayuda a que la mano se acostumbren a las líneas y ángulos que el cuerpo tiene, estos dibujos fueron escaneados y traspasados al computador para poder imitar la línea del lápiz con el vector. Se presenta una mejora notoria en la forma, peso, ángulos y proporciones de los personajes, lo que hace que su movimiento se lea mejor, logrando que las acciones que realizan se entiendan con facilidad, con el objetivo de obtener una ilustración visualmente accesible para todos. Este estilo visual y anatomía de los personajes son los definidos para las ilustraciones restantes que se muestran a continuación, quedan abiertas a cambios y mejoras ya que el diseño siempre se reinventa en virtud a la accesibilidad.

IL Isometrica-06.png

Ilustración: Investigación Inclusiva

Esta ilustración busca visualizar el contexto de la investigación inclusiva, donde se comparan dos escenarios:

El primero muestra la investigación no inclusiva, donde un grupo de personas estudia a los sujetos de investigación, en este caso a los adultos con discapacidad intelectual, dejándolos excluidos de todo los procesos académicos del campo de estudio. Debido a esto aparecen en una plataforma alzada los adultos con discapacidad intelectual, siendo el centro de estudio de los investigadores quienes con lupas los observan, pero no participando a la par con ellos en el proceso.

Investigación inclusiva-01.png

La segunda escena muestra a la plataforma se ha bajado, permitiendo a las personas con discapacidad participar activamente del proceso de investigación junto con el resto de las personas del equipo, todos son investigadores. Esta ilustra la investigación inclusiva, donde el grupo asesor no es solamente el sujeto en estudio si no que también está involucrado activamente en el proceso de la investigación y análisis de datos, llegando a resultados y soluciones realmente accesibles, ya que son expertos en sus propias experiencias y necesidades.

Investigación inclusiva-02.png

Ilustración: Paradigma DI

El texto habla del Paradigma DI admitiendo que la discapacidad se genera cuando hay una brecha entre el entorno y la persona, haciendo que los espacios que transitan no sean accesibles, espacios físicos y cognitivos. Se propone que esta brecha que impide a la persona con discapacidad relacionarse fácilmente con su entorno puede atenuarse con la generación de apoyos de acuerdo a las necesidades y capacidades de la persona. Para definir estas capacidades y necesidades de la persona, hay que determinar ciertos aspectos de su vida, definidos por el Modelo Ecológico Multidimensional:

  • Habilidades intelectuales: la capacidad de la persona para comprender lo que lo rodea y adaptarse al entorno.
  • Conducta adaptativa: las habilidades que tiene la persona para funcionar en su día a día.
  • Salud: el bienestar físico, mental, y social.
  • Participación: cuán involucrada está la persona en actividades diarios dentro de su comunidad.
  • Contexto: el entorno físico, social y actitudinal en el que se encuentra la persona, donde hay que definir los facilitadores y barreras que existen.
  • Apoyos: los recursos y estrategias para mejorar el funcionamiento individual, logrando una congruencia entre la persona y el entorno.


Esquema de bitácora visualizando las relaciones del mapa conceptual y posible ilustración


Mapa conceptual


La parte del texto que habla del Paradigma DI, reconoce que para poder brindar apoyos adecuados y necesarios a los adultos con discapacidad intelectual, es necesario definir sus capacidades y necesidades. En este sentido la primera escena de la ilustración muestra un cubo con sus caras desplazadas y sin una superficie definida, metáfora para la situación de capacidades sin definir en la que se puede encontrar un adulto con discapacidad intelectual, donde no están las herramientas para que su círculo genere los apoyos necesarios, es por esto que el personaje aparece haciendo equilibrio y tambaleándose en su entorno sin apoyo.

Paradigma DI-01.png


En la segunda escena se definen las superficies de las caras del cubo, el entorno, ya que el texto habla de los diferentes aspectos específicos que se deben definir dentro del contexto de una persona con discapacidad, de acuerdo al Modelo Ecológico Multidimensional. El personaje ya puede sostenerse en la superficie del cubo, pero aún no está acoplado.

Paradigma DI-02.png


En la tercera escena las necesidades y capacidades de la persona con discapacidad intelectual están definidas, por lo tanto tiene un sistema de apoyo de su círculo. La ilustración refleja el cubo con todas las superficies de sus caras definidas, brindando seguridad a la persona.

Paradigma DI-03.png

Ilustración: Diseño centrado en las personas

En esta parte del texto se habla de los aspectos que debe tener un entorno o espacio para que sea accesible para una persona con discapacidad o para cualquier otra. En este sentido, la ilustración muestra un escenario donde aparecen elementos que ayudan a las personas a navegar por este, señaléticas, pantallas de interacción, ascensores, rampas, y personas a quien consultar. La idea es ilustrar un ejemplo de cómo se vería un escenario accesible


Diseño centrado personas.png

Ilustración: Teoría de la Modificabilidad Cognitiva

Este texto habla de las fases de niveles de razonamiento y procesos mentales a los que una persona accede, cada una de estas fases tiene sus propias capacidades y logros a nivel mental, como la recopilación y organización de información, la percepción, orientación espacial y temporal, entre otras. Se dividen en tres fases:

Dibujo de ideación de la ilustración. Del concepto a la visualización


La primera es la fase de Entrada, donde las personas son capaces de percibir, tienen orientación espacial y temporal, pueden identificar objetos y recopilar datos, entre otras. en la ilustración la persona con discapacidad va subiendo una escalera, donde cada uno de los peldaños son estas capacidades descritas anteriormente, hasta llegar al piso de la Fase de Entrada.

TMC-01.png


La segunda es la fase de Elaboración, donde la persona accede a capacidades como la organización y relación de datos, tiene un pensamiento hipotético e inferencial, es capaz de definir los problemas y desafíos y puede anticiparse a los resultados, entre otras capacidades.

TMC-02.png


La tercera fase es la de Resultados, donde la persona establece metas y objetivo, es capaz de justificar sus respuestas, puede regular sus impulsos y comunicar respuestas, entre otras habilidades.

TMC-03.png


Además de las fases de habilidades y capacidades cognitivas, en el texto también existen las Funciones Ejecutivas, que son las que permiten a la persona relacionarse con su entorno, tanto con objetos, herramientas, como espacios y personas. Son habilidades sociales y también capacidades motoras que permiten que una persona con discapacidad intelectual interactúe con el espacio en el que se encuentra.

TMC-04.png

Ilustración: Portada - Home

La ilustración pensada para la portada del libro reúne distintos escenarios que reflejan el trabajo en equipo de la investigación inclusiva y el co diseño llevado a cabo por este equipo de investigación interdisciplinario. Estos escenarios diversos con sus personajes se conectan a través de toda la ilustración con la intención de tomar consciencia de que no solamente ciertos espacios tienen que ser accesibles, sino que todos los espacios deberían serlo, en todos las personas con discapacidad deberían ser incluídos y deberían poder participar activamente en todas las acciones que se devuelven en su entorno.

Este libro es el resultado de un trabajo en conjunto, es construido por el equipo investigador y el grupo asesor, y es por este motivo que era importante reflejar en la ilustración que las mismas personas son las que construyen el contenido, es por esto que hay diversos elementos que interactúan con las personas:

  • Los personajes organizando y discutiendo el contenido del sitio web accesible
  • Las personas reuniéndose crearán la información del libro descargable en la tablet.
  • Las personas en el libro escribiendo y siendo parte de los procesos colaborativos de la creación del libro
  • Los grupos de personas construyendo y co diseñando las soluciones a problemas planteados en los talleres, con las cajas de herramienta diseñadas para ellos.
  • El grupo de personas que se junta cerca de la pizarra para discutir y validar conceptos después de la experimentación del taller
  • Un grupo de personas encargándose del diseño y ubicación de señaléticas en un edificio para no tener dificultades al navegar en el.
  • Personas trabajando en equipo para poder encender la luz del edificio.



IL Home grande Mesa de trabajo 1.png

Versión Responsive

Se ajusta la ilustración en una proporción vertical para el carácter responsive del sitio web, ya que la versión estándar horizontal, al ajustar el tamaño y disminuirlo, en la ilustración no se aprecian los detalles.

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

Videos Registro

Diseño Front End

El front end es la maquetación web encargada de llevar al código el diseño del proyecto bajo los estándares de la web, que en este caso son los lenguajes de programación html y css. Hasta el momento este proyecto no considera javascript para su desarrollo.

Para mostrar el trabajo del código se hicieron “mapas de divs”, que son wireframes que muestran los contenedores usados en los archivos html para armas la diagramación y ordenar el contenido. A la vez se irá contando cómo se fueron resolviendo las distintas partes del sitio.

El sitio consta de dos tipos de archivos html. El primero corresponde al home y a las páginas que están colocadas en el header, y el segundo corresponde a los capítulos del libro. Ambos tienen distintas diagramaciones y elementos que se explicarán por parte.

main HTMLT

Mapa de divs

Mapa de div 3.png

El index.html del proyecto tiene dos contenedores base, el topnav y el imagen, ambos contenedores div. El header contiene elementos a para los botones, siendo el logo distinto ya que tiene la clase active.

<div class="topnav" id="myTopnav">
            <a href="#home" class="active">E×E</a>
            <a href="#news">Ir al libro</a>
            <a href="#contact">Descarga</a>
            <a href="#about">Nosotros</a>
            <a href="#about">Contacto</a>
            <a href="#about">Proyecto Exe</a>
            <a href="javascript:void(0);" class="icon" onclick="myFunction()">
              <i class="fa fa-bars"></i>
            </a>
          </div>

Luego el contenedor de la imagen del home es un div de clase imagen.

<div class="imagen">
   <imagen src=""images/ilustracion-home.svg alt="">
</div>

La cualidad respondive del sitio es cómo la página se adecúa a los distintos tamaños de pantallas que corresponden a dispositivos. Para esto se uso la propiedad media query de css para establecer los cambios según el tamaño de la pantalla.

El home tiene un breakpoint establecido a los 764 pixeles, establecido con el siguiente código:

@media screen and (max-width: 764px) {
  .topnav a:not(:first-child) {display: none;}
  .topnav a.icon {
    float: right;
    display: block;
  }
}

@media screen and (max-width: 764px) {
  .topnav.responsive {position: relative;}
  .topnav.responsive .icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .topnav.responsive a {
    float: none;
    display: block;
    text-align: left;
  }
}

Lo que pasa con el header es que cuando la pantalla tiene 764 pixeles de ancho o menos, se aplican las propiedades CSS contenidas dentro del media query. En este caso los elementos del header desaparecen y aparece un icono de menu, que al hacerle click despliega los botones de manera vertical.

Home del sitio en tamaño completo Home full size.png

Home del sitio en 580 px de ancho con el header colapsado Header half size cerrado.png


Home del sitio en 580 px de ancho con el header abierto Header half size abierto.png

text HTMLT

Mapa de divs

Mapa de div 1.png

El html de la sección de lectura tiene dos elementos generales, que son el elemento breadcrumbs y el elemento article. El breadcrumbs es un elemento de navegación que ayuda al lector a ubicarse dentro del sitio. Es un elemento ul que dentro contiene elementos li que a su vez contienen al elemento a para que al hacer click sobre un item de la lista el sitio nos lleve a esa sección en específico.

<ul class="breadcrumb">
    <li><a href="../../index.html">Home</a></li>
    <li><a href="#">Libro</a></li>
    <li><a href="#">Capítulo 1</a></li>
    <li>Investigación inclusiva</li>
</ul>

Luego tenemos al elemento contenedor del texto. El elemento article contiene al header, los párrafos, las anotaciones y el footer.

<article id="contenido">
      <header class="title">
          <h1>Investigación Inclusiva</h1>
      </header>
      <p>Lorem ipsum</p>
</article>

Uno de los desafíos para el texto fue el colocar las anotaciones al costado del cuerpo del párrafo. Esto se resuelve finalmente de la siguiente manera:

 <p>
   Lorem ipsum <a href="#" class="sidenote"><span class="sidenote_link">[1]</span>
               <span class="sidenote_content">1. Lorem ipsum</span></a>
</p>

La etiqueta global es la a de clase sidenote. Dentro tenemos dos contenedores span. El primero es de clase sidenote_link que contiene al superindice dentro del texto. Y luego el sidenote_content tiene al contenido de la nota en particular. Esto en la hoja de estilos de CSS se trabaja para que la nota aparezca donde se desea.

Luego para el footer tenemos otro div de clase footer. Dentro del footer tenemos dos botones, que son divs de clases button_left y button_right. Dentro de cada botón hay un span con un a dentro.

<div class="footer">
       <div class="button_left">
           <span><a href="#">anterior</a></span>
       </div>
       <div class="button_right">
           <span>a href="#">siguiente</a></span>
       </div>
</div>


En la navegación tenemos un elemento que está fijo en la pantalla al hacer scroll. Es una barra que indica el avance a lo largo de la página, y está puesto ahí para ser una ayuda en la lectura. Este indicador es un div de clase scroll-indicator, que dentro contiene al div de clase progress-container que a su vez contiene al div de clase progress-bar.

<div class="scroll-indicator">
        <div class="progress-container">
            <div class="progress-bar" id="myBar"></div>
        </div>
</div>

La barra que contiente el div de más adentro detecta el avance según el scroll que se va haciendo en el sitio, y funciona con la siguiente linea de javascript.

window.onscroll = function () { myFunction() };
function myFunction() {
   var winScroll = document.body.scrollTop || document.documentElement.scrollTop;
   var height = document.documentElement.scrollHeight - document.documentElement.clientHeight;
   var scrolled = (winScroll / height) * 100;
   document.getElementById("myBar").style.width = scrolled + "%";
}


El último elemento de esta tipología de página es el menú de hamburguesa que despliega el índice del libro. Esto se resolvió de la siguiente manera:

<div class="menu-wrap">
        <input type="checkbox" class="checkbox" id="check">
        <label for="check" class="hamburger">
            <div></div>
        </label>
        <div class="left-panel">
            <ul class="indice">
            </ul>
        </div>
    </div>

El elemento contenedor es el div de clase menu-wrap. Dentro de él hay 3 elementos que conforman el menú desplegable. El primero es el input que permite crear una casilla de selección, que luego podremos vincular con la animación del menú lateral. Luego tenemos al elemento label, que está vinculado al input que nombramos previamente. Este label contiene un div que corresponde al ícono de hamburguesa gatilla la animación. Luego tenemos al div de clase left-panel, que contiene una lista con el índice. El menú cuando no está seleccionada la casilla del elemento input tiene un margen negativo hacia el lado derecho, por lo cual no aparece hasta que se apreta el ícono. El CSS de este elemento es el siguiente:

.checkbox {
    display: none;
}
.checkbox:checked ~ .left-panel {
    right: 0;
}
.left-panel {
    background-color: #eaeaea;
    position: fixed;
    right: -30em;
    top: 0;
    width: 30em; 
    height: 100%;
    transition: 0.4s;
    padding:  3em 5em;
    z-index: 10;
    overflow: auto;
}
.hamburger {
    position: fixed;
    background-color: transparent;
    top: 26px;
    right: 60px;
    z-index: 5;
    width: 3em;
    height: 3em;
    padding: 3px 8px;
    cursor: pointer;
    z-index: 12;
}

Como se ve la clase .checkbox del elemento input esta con la propiedad display: none;, lo cual hace que no aparezca la casilla de selección por defecto, sino que el ícono de la etiqueta label que está enlazado al input.

Sitio con el menú no desplegado Menu no desplegado.png

Sitio con el menú desplegado Menu si desplegado.png

Proyecciones 2° Semestre

Codiseño

  1. Diseñar un taller de validación para poder validar la visualización del contenido, la navegación del sitio, el entendimiento del lenguaje y la narrativa del texto.
  2. Realizar taller de validación con el grupo asesor, académicos y otros usuarios, ya que el libro debe ser accesible para todo tipo de lector.
  3. Crear y editar los textos faltantes del libro
  4. Verificar que la redacción de los fragmentos de textos restantes no estén escritos con un lenguaje técnico que será de difícil entendimiento para el lector.

Diseño Front End

  1. Crear y diseñar los espacios de interacción social y feedback en el sitio web.
  2. Diseñar visualización del contenido de las secciones navegables. Definir la línea gráfica (uso de fotografías por ejemplo).
  3. Construir en su completitud el carácter responsive del sitio, con el

objetivo que el contenido esté disponible y visualmente accesible en todo formato de dispositivo digital.

  1. Explorar, estudiar e implementar animación digital en las ilustraciones del sitio para agregar una dimensión dinámica, interactiva y lúdica al espacio.

Ilustración

  1. Explorar herramientas digitales que logren elaborar un trazo similar al dibujo de lápiz en papel, en cuanto a su grosor, textura y forma.
  2. Ser perseverante en el estudio de la línea del cuerpo humano y perfeccionar el gesto para poder lograr ilustrar personajes con los que el lector se pueda sentir identificado.
  3. Construcción ilustrativa de los segmentos de texto que aún no han sido elaborados.

Editorial

  1. Pruebas de tamaño, proporciones y diagramación de la versión descargable del libro.
  2. Pruebas de tamaño, proporciones y diagramación de la versión impresa del libro.
  3. Objeto editorial impreso entregable


Carta Gantt

Carta Gantt

Talleres de Validación

En vista de las proyecciones que planteamos el semestre pasado, retomaremos el trabajo pendiente de los talleres de validación de nuestras propuestas de navegación y de ilustraciones. Para estos talleres, trabajamos en la redacción del protocolo para el taller con el grupo asesor, el guion de dicho taller, preparar la prueba en el software de validación elegido, agendar y realizar los talleres y luego en base a los resultados trabajar en la mejora del sitio.

Taller de Validación 01: Navegación

Protocolo

Estos talleres de validación de navegación, consisten en una prueba de usabilidad individual realizada en la plataforma Maze, donde los adultos del Grupo Asesor, a través de sus tablets, realizarán distintas tareas para cumplir objetivos determinados en la navegación del sitio web Expertos por Experiencia. El proceso será guiado por un profesional específico que será un facilitador para el grupo asesor. Cabe mencionar que el protocolo presentado a continuación es la versión final de este, que pasó por varias correcciones y modificaciones antes de estar listo.

Guion

El guion tiene como objetivo ser una guía para realizar el taller.

Herramienta de validación: Maze y Figma

Como herramientas para los talleres de validación, se elige en una primera instancia el software de pago MAZE DESIGN, que permite crear pruebas de usabilidad y generar un link para que cualquier persona con el enlace pueda acceder a la prueba y realizarla. Y luego el mismo software genera un informe con resultados relevantes. Para hacer la prueba se insertan las pantallas en formato .png que se sacaron desde FIGMA, un software online de edición en el que se diseñaron las pantallas, y desde Maze se asignan a las pantallas los puntos de interacción donde la persona deberá apretar. Las ventajas por las cuales se eligió Maze como herramienta de pruebas de usabilidad fueron la facilidad para producir la prueba, los mensajes instructivos con los que se presentaba la prueba, que eran muy amigables y se entendían con claridad. También la facilidad con la que se podía acceder, que es solo con un link.

Cuando se realizó el primer taller apareció el primer problema con la plataforma de Maze. Pasó que el mensaje de bienvenida de la primera pantalla de introducción quedó pegado en la pantalla, lo cual no permitía avanzar o hacer click en la prueba para seguir avanzando. En ese momento, una de las asistentes del taller tuvo que compartir su pantalla para poder realizar el taller, problema que sin duda costó feedback a la prueba ya que la persona que la realizó lo hizo de manera indirecta. En el segundo taller pasó exactamente lo mismo con la pantalla de introducción, y se decidió hacer la prueba de manera directa en FIGMA, que también permite generar un link con el diseño que tenga partes interactivas y clicleables para realizar una navegación simulada. Las primeras sesiones de talleres sufrieron este problema, y para las siguientes sesiones de uso directamente el link generado por FIGMA.

Las sesiones fueron todas grabadas desde google meet y subidas a youtube de manera privada para luego hacer el trabajo de registro.

Registro de los Talleres

Cada taller realizado es grabado desde principio a fin con el objetivo de que cualquier tipo de retroalimentación sea reconocida en el momento o después, ya que en ese mismo instante llevar a cabo el taller requiere mucha interacción con la persona y en esa dinámica se nos dificulta tomar apuntes de las observaciones del Grupo Asesor. A continuación presentamos las transcripciones realizadas de los talleres de validación, realizar una transcripción ayuda a buscar citas literales y que se pueda volver a visitar la sesión sin tener que adelantar o retroceder un video buscando la parte que necesitas.


Transcripción Taller Andrea


Transcripción Taller Caro


Transcripción Taller Gonzalo

Transcripción Taller Pepe

Resultados


Conclusiones

A partir de lo analizado de la transcripción de los talleres, se construyen tablas de resultados para cada momento o pantalla del taller de validación, y una vez haciendo este trabajo se logran identificar las siguientes conclusiones, que llevarán al rediseño de ciertos aspectos y elementos:


  • Agregar el título del sitio “Expertos por Experiencia”, aclarando la abreviación ExE. Pasó que no se entendió bien la relación entre el título del libro/sitio y la sigla EXE, que aparece dentro del diseño a modo de Logotipo.
  • Rediseñar la forma de los edificios para que la “E” sea evidente visualmente y se entienda con facilidad. Pasó también que no se entendió la relación entre “expertos por experiencia” y la forma de la ilustración, en la que los edificios dibujan las forma del EXE.
  • Repensar los elementos abstractos, como los hilos que sostienen el libro, las personas arriba del computador, el enchufe, las cajas con elementos adentro. Porque hubo una confusión al momento de reconocer las acciones y actividades que los personajes realizan en la ilustración.
  • Darle atributos a los rotulados para que se entienda visualmente que son botones clickeables.
  • Cambiar la palabra “Descarga” por “Descargar” para aclarar que es una acción.
  • Repensar las acciones que se pueden realizar en el botón “Contacto”, además de contactarse directamente con los creadores del libro para enviar comentarios, pueden estar los contactos de los integrantes, puede estar asociado a redes sociales, trabajar en las interacciones sociales que podrían ocurrir.
  • Incorporar botones de Anterior/Siguiente en la parte superior de la página para que el lector no deba hacer scroll hasta el final de la página para poder ir a la siguiente.
  • La flecha que sea del mismo color de la palabra anterior/siguiente por una cosa de consistencia en el diseño.
  • Agregar la palabra “índice” cerca del botón para que sea fácil de encontrar. Replantearse también las “tres rayitas” porque no se entendió bien que ese botón despliega al índice.
  • Cambiar la palabra “Home”, por la palabra “inicio”.

Taller de Validación 02: Ilustración

El objetivo general de este taller es evaluar el entendimiento y legibilidad de las ilustraciones del sitio, cuidando que los conceptos e ideas que representan sean claras para el lector a través del dibujo y sus elementos. También poner a prueba los cambios de interfaz que se aplicaron respecto a los resultados del anterior taller de validación.

Protocolo


Guión

El guión tiene como objetivo ser una guía para realizar el taller, e incluye una guía detallada de las acciones y preguntas que se harán y quién deba hacerlas. El guión al igual que los protocolos pasaron antes por una corrección con los profesores y profesionales a cargo. A pesar de tener una guía para el dialogo, tomamos el aprendizaje del primer taller que la dinámica fuese una conversación, no un diálogo pauteado, ya que se necesita generar un lazo con los participantes del taller, generar la confianza necesaria para que sean sinceros y se sientan en la libertad de decirnos lo que observan y qué opinan.


Herramientas de Validación

Para este taller no se utilizó ningún software externo para probar la usabilidad, como el anterior que se hizo el intento con el sitio MAZE. Esta vez quieres realizaron la prueba lo hicieron directamente desde la maqueta web que está en un repositorio de Github, en cual se viene trabajando desde el semestre pasado. Los cambios se agregaron al código y se trabajó directamente con el link de Github. Probar el sitio teniendo control del código nos permite estar seguros que funcionará en cualquier dispositivo y que lo que se vea será lo más parecido posible a un producto real terminado.


Registro

Para el registro se hicieron los mismos pasos que en el taller pasado: se grabaron las sesiones en Google Meet y luego se subieron a la plataforma Youtube de manera privada para luego hacer las transcripciones en un documento de google.


Conclusiones

Las conclusiones relevantes para el proyecto son presentadas en un documento en el cual se analiza por cada pantalla las respuestas y comentarios de los participantes en las tareas específicas. Luego a partir de esos comentarios y respuestas claves se elabora una lista de conclusiones y consideraciones para el rediseño o ajustes del sitio y de las ilustraciones específicas, en este caso fueron las siguientes:

  • Se entiende de mejor manera la relación entre las letras “EXE” y el concepto de “expertos por experiencia” en la página de inicio del libro. También se identifica el edificio en forma de letra “E” en relación a “expertos”.
  • En las páginas de lectura se identifica la función de la barra de avance que aparece en la parte inferior de la pantalla.
  • El índice se identifica de manera más sencilla al tener explícitamente escrito “índice” al lado izquierdo del icono.
  • En cuanto a las ilustraciones de modo general, el grupo asesor relaciona mucho los escenarios a su propia experiencia como investigadores en el área de accesibilidad cognitiva. Por esto en la mayoría de las ilustraciones se reconocen acciones de investigación, investigadores e investigados junto a lugares que les son conocidos como la estación de metro.
  • En la ilustración de “Barreras y facilitadores para construir co-investigación” se entendió de manera contraria el concepto de “derribar barreras”, y se entendió como que el grupo asesor estaba levantando la muralla cuando el sentido es que ellos junto a los facilitadores estaban botándola como un simbolismo de la accesibilidad e inclusión.


Rediseño: definiendo estilos

En base a los talleres de validación realizados con el grupo asesor, tuvimos la información y retroalimentación necesaria para avanzar hacia un objeto editorial accesible, considerando todos los elementos que lo componen, como la tipografía, la ilustración, y la diagramación de estos aspectos en el blanco. El sitio web debía repensar desde la forma en que se presentan los contenidos, las palabras específicas, los atributos de ciertas zonas clickleables, la encontrabilidad de los anexos, y la relación del texto y las ilustraciones. Estas últimas fueron evaluadas por el grupo asesor, abriendo una pregunta importante sobre el nivel de abstracción de requerían para su entendimiento en algunos casos, el significado que se le daba al color, el trato y contraste de las tonalidades con la página, las formas, los escenarios, y cómo estos se comunicaban visualmente. A continuación especificamos los aspectos que repensamos y rediseñamos con el objetivo de hacer de este libro un cuerpo accesible y fácil de entender.


Sitio Web

Pantalla de Inicio

Para las correcciones en la página de inicio se tienen en cuenta los aspectos de: Construir de mejor manera la relación entre la sigla EXE, el nombre del libro y el rol del grupo asesor, ya que ellos son los Expertos por Experiencia. También darle a los botones del header atributos visuales que hagan evidente visualmente su carácter clickleable.

[Pantalla de inicio previa][Pantalla de inicio rediseñada]

Como se puede observar, hubo un cambio considerable en la disposición de los elementos en la página y en la relación entre ellos. Primero, se corrigieron los márgenes superior e izquierdo, para darle más aire a lo que antes estaba muy apretado a los bordes y aprovechar de manera más eficiente el blanco de la página. Luego a los botones del header se le agregaron bordes que están marcados por una sombra, esto para marcar una distinción entre lo que es apretable y lo que no, como los títulos. También al logotipo se le agregó una sombra para darle volumen y una consistencia visual con los botones, ya que también es un botón que lleva siempre a la página de inicio. Se agregó también el título del libro con una jerarquía sencilla y con una tipografía distinta. El cambio tipográfico se debe a que se hace una distinción visual entre las páginas que son solo de navegación (como el inicio) y las que son de lectura, que siguen otro lenguaje y tienen otra cuidado. Finalmente se cambió la ilustración a una versión más breve que permita entender más claramente las interacciones y elementos que se dibujan. Para más detalle del rediseño de la ilustración se puede ver el capítulo 11.

Pantalla de Anexos

[Pantalla de descarga rediseñada][Pantalla de contacto rediseñada]

Pantalla de Lectura

Para las correcciones en las páginas de lectura, se consideran los botones de “anterior” y “siguiente”, que ahora deben estar en la parte superior del texto. También hacer más explícito el botón que abre el índice.

[Pantalla de lectura previa][Pantalla de lectura rediseñada]

En cuanto a los cambios, primero se añade en la cabecera de la pantalla el logotipo del sitio, que cumple con mantener una consistencia entre las pantallas del inicio y de lectura, y también de botón que redirige a la pantalla de inicio. Luego, los tamaños tipográficos de los títulos se reducen, ya que antes eran demasiados grandes en comparación al tamaño del texto y a los blancos de la página. Los botones de anterior y siguiente que antes quedaban al final de la lectura se pusieron debajo del título, para que sea más fácil acceder a ellos, ya que no será necesario llegar al final de la página para irse a la siguiente sección o capítulo. Finalmente, junto al ícono que despliega el índice se añade la palabra “índice” para acompañar al ícono (que es una abstracción) con un mensaje explícito. Esta decisión asegura la comprensión del contenido que se presenta de manera redundante.


Ilustración

Anatomía el cuerpo

En el estudio anatómico de las ilustraciones, se explora el trazo y la soltura de este a través de versiones de la ilustración a modo de boceto, para poder presentar y visualizar la idea del escenario, la relación personas y entornos ,y si funciona como abstracción del concepto particular tratado en el libro. Tras este método de boceto previo a la ilustración aparece un dibujo del cuerpo de las personas más suelto, donde el trazo no es uno definido y rígido sino que se construye mediante múltiples líneas que aportan una idea de dinamismo al ojo, lo que hace a los personajes más cercanos a la realidad.

Evolución anatomía ExE.png

Los personajes anteriores si bien estaban en posiciones distintas y curvaturas que daban a entender que se encontraban en movimiento o realizando una acción en particular, seguían estando rígidos, pareciera que tuviesen un traje o envoltura que los privaba de moverse con libertad. Gracias a las líneas aleatorias que van conformando los pliegues y lados del cuerpo se generan discontinuidades que sueltan el cuerpo de los personajes, y simulan movimientos previos o posteriores, como si esa fuese la posición capturada por el lápiz, pero que la preceden otras posturas.

Basado en este análisis de la anatomía de los cuerpos y el trazo que los construye, se toma la decisión de trabajar en ellos a modo de boceto, con el objetivo que las ilustraciones queden con una sensibilidad humana, que los lectores del libro puedan relacionar fácil y rápidamente lo que están viendo con lo que están leyendo, y a la vez conectarlo con vivencias personales del día a día.

Trabajo del color

Para la relación entre el entorno y las personas se pensó en la relación entre lo plano y lo flexible, entre lo rígido y lo curvo, lo inmutable del entorno construido y lo versátil de la persona. En este sentido se pensó en superficies geométricas construidas a partir de planos de colores, correspondiente a objetos como edificios, lugares públicos, escenarios cotidianos que reciben personas habitualmente. Estas superficies fueron trabajadas desde el color y su combinación, resultando en gradientes de tonos que le dieran profundidad, perspectiva, a través de su luz y su sombra.

Diseño degradado ExE.png

En un principio se trabajó este degradado con dos colores similares de tonalidades distintas: una más clara y otra más oscura, para que se notara la transición de estos dos colores, pero el contraste con el blanco de la página era muy drástico, el bloque de color aparecía muy fuerte ante el ojo sobre el blanco. Teniendo en consideración que el contraste debía existir pero no debía ser exagerado, se escogen los colores dentro de la paleta pero se construye el degradado hacia o desde un blanco para que se difumina con la página, y pareciera estar apareciendo desde esta.

Abstracción

Como se hablaba en fragmentos anteriores, hay una definición que describe la discapacidad intelectual como la brecha entre la persona y su entorno, y desde este concepto nacen las ilustraciones que se componen por los personajes, su entorno y la interacción de estos dos. A pesar de que la construcción de objetos y lugares públicos habitados por personas es una abstracción de la realidad, al momento de validar estas ilustraciones y la idea tras ellas, el grupo asesor entendió rápidamente de qué se trataba el dibujo y qué significaban cada una de sus partes. Siempre va a haber una parte de interpretación personal subjetiva, dado a las diferentes experiencias que les ha tocado vivir, pero la idea en general es entendida y también la relación de lo que ven con lo que leen. Se ve claramente la facilidad en la lectura de los dibujos en cuanto estos se acercan más a la realidad, y apelan menos a la necesidad de la abstracción del pensamiento al ver las imágenes.

Proceso ilustrativo

El libro “Expertos por Experiencia” al ser una divulgación de pensamientos, descubrimientos y metodologías del orden académico, en cuanto a texto puede volverse denso y en algunas instancias dificultoso de entender a totalidad, y es por este motivo que la ilustración juega un rol importante en su estructura editorial. Así como muchos otros campos académicos utilizan este recurso visual para ayudar el entendimiento del texto, el estudio de la investigación inclusiva del grupo de investigación también requiere de un apoyo visual que agregue una dimensión lúdica al modo de comunicar lo que se quiere decir.

Al decidir que trabajaríamos en este soporte visual, experimentamos con diferentes trazos, tanto el tipo como el grosor, distintas paletas de colores, formas e ideas variadas. Al mismo tiempo estudiamos el campo en el que se sumerge este libro, la investigación inclusiva y la colaboración con personas con discapacidad intelectual, también leímos y subrayamos fragmentos del libro complejos que quizás requerían un soporte ilustrativo para construir una lectura fácil de los conceptos e ideas que se plantean. Esta primera fase inicial del análisis del texto del libro fue de la mano con propuestas que resultaron en un proceso de experimentación que nos fue guiando a una metamorfosis constante del dibujo. El proceso de lectura incluía, además de simplemente leer el texto, se resaltan las partes fundamentales para el entendimiento de la idea central, las palabras claves, si habían conceptos complejos se investigaba el tema para poder llegar a una mayor comprensión. Una vez con la información principal destacada se construye un mapa de relaciones de estos conceptos, donde se empieza a esbozar visualmente el contenido del fragmento específico del libro. Al tener las conexiones hechas se piensa en darle forma a estas ideas tras las relaciones, y debido a que la materia trata de las personas con discapacidad intelectual como piezas fundamentales en la investigación, se dibujan a personajes realizando acciones que representen lo que dice este mapa conceptual, transformándose en un esquema ilustrativo. En este proceso se empieza con el texto y cada vez se va retirando más la comunicación verbal textual y va quedando la comunicación visual del trazo, así mismo es como el siguiente momento es pasar al lápiz y al papel y derechamente dibujar un boceto de la ilustración que hable por sí misma, idealmente con el menor número de palabras en esta, además del título que la introduce, ya que el objetivo de la ilustración es que a través de los personajes, los entornos y las interacciones entre ellos visualice lo que el texto está diciendo a partir de la interpretación del lector y la imágen que está viendo.

Una vez que la idea de la ilustración está en modo boceto, se digitalizará mediante el escáner del dibujo y posteriormente su vectorización en el programa de Adobe Illustrator, a través de una tableta digitalizadora llamada Wacom Intuos Pro. Se dice trabajar en esta plataforma digitalizadora ya que el trazo logrado con el mouse se alejaba mucho a la soltura de la mano, lo que dejaba a los personajes rígidos, alejándose de la figura humana y su movimiento, lo que hace que los lectores no se sientan representados por ellos, agregándole dificultad a la interpretación personal basada en experiencias propias. Es por esta razón que fue una necesidad estudiar y explorar el dibujo de la anatomía del cuerpo y su gestualidad en movimiento, ya que a pesar de no tener mayor detalle en cuanto a la superficie y los rasgos faciales, si se debe reconocer claramente que es una persona y qué acción está realizando. Para perseverar en lograr un gesto cercano a la realidad se dibujan cuerpos en distintos ángulos, en distintos ejes, y con diversas partes del cuerpo flectadas y extendidas hacia direcciones varias.

Modelo proceso ilustracion-ExE.png

Ya hemos comentado anteriormente que la idea central de las ilustraciones, las interacciones entre personajes y su entorno, nace de la idea que la discapacidad intelectual es la brecha entre el entorno y la persona, en este sentido se diseñan desde la intención de que el lector entienda la situación de la persona con discapacidad intelectual y que empatice a través del dibujo. Si el objetivo es representar situaciones que involucran directamente a las personas con discapacidad intelectual, las ilustraciones pasaron por un proceso de validación con el Grupo Asesor, donde pusimos a prueba la ideación y diseño del dibujo y el nivel de abstracción que asumimos que el lector tendría. Dependiendo de las respuestas y comentarios que nos daban pudimos medir qué elementos se escapaban del nivel de abstracción que se espera del lector, y que habían situaciones a las que les faltaban elementos visuales para completar y concretar el entendimiento de la idea que se estaba tratando de ilustrar. Con estos talleres de validación de la ilustración nos dimos cuenta que es necesario y fundamental tener retroalimentación a través de los ojos de lectores que no están enterados del proceso que hay detrás de la ilustración, el texto y mapas conceptuales que hacen que aprendamos tanto del tema que cometemos el error de asumir que el otro también entenderá sin haber pasado por ese nivel de análisis y estudio.

Este proceso de validación lleva al rediseño de la ilustración en base a los comentarios y sugerencias que el Grupo Asesor provee, y aun cuando realizamos los cambios, se puede validar una vez más o las veces que sean necesarias las ilustraciones, lo que lleva a un proceso de rediseño de nuevo, hasta que se llegue al punto de entendimiento de la situación a través del dibujo.

Si bien es un trabajo de años de experimentar y probar distintas formas de realizar un proceso los que se requieren para establecer una metodología de cómo diseñar ilustraciones accesibles, en el tiempo que tuvimos en el proyecto sentimos que nos acercamos a un patrón y un orden de sucesos que nos llevan a un resultado satisfactorio, y más importante, que cumple su propósito de visualizar las relaciones que abre el texto del libro.

Objetos de diseño

Sitio Web

En este capítulo se presentarán las versiones finales de los objetos de diseño a los que llegamos luego de los meses de trabajo de investigación, construcción y validación. En cuanto al sitio cabe mencionar algunas decisiones que se tomaron en el transcurso del proceso de diseño del sitio, específicamente en temas de diseño del código. Luego de la segunda validación del sitio, de ilustración y elementos de navegación, la tarea es traducir este nuevo diseño al lenguaje de HTML y CSS. Uno de los desafíos que se plantearon previamente era el aspecto interactivo del sitio, que consta de elementos de animación y micro animaciones en las interacciones del sitio. Y también la cualidad responsive del sitio en su totalidad. Por responsive entendemos un ajuste de tamaño del sitio que se ajusta a los dispositivos desde los cuales se puede acceder, o sea que en cada tamaño de pantalla se podrá ver el mismo cuidado de diseño que en el formato de escritorio. La cualidad de responsive responde a un lenguaje específico de programación que se trabajó con media querys que se agregaron a la hoja de estilos de CSS. Esto supuso el primer problema en cuanto al diseño, ya que el trabajo de código requiere de un tiempo distinto y significa adquirir un conocimiento distinto, que requiere de una dedicación y un trabajo que escapa a nuestros tiempos de proyecto. Por lo tanto, nuestro trabajo en este tema en específico se vió con las complicaciones mencionadas. Como solución que salió desde una conversación con los profesores, se decidió eliminar la lectura del libro del sitio, y solo dejarlo el formato .epub del libro descargable y el pdf. No se podrá entonces leer el libro directamente desde el sitio, sino que se deberá descargar alguno de los formatos que se ofrece.

La lectura directa y el trabajo más especializado en el código las dejaremos entonces como una proyección para este proyecto, que sin dudas tiene mucho trabajo por delante y puede seguir creciendo de muchas maneras distintas, y sin duda el trabajo de programación es fundamental y puede ofrecer una gran variedad de posibilidades para el diseño.

Diseño de Pantallas

A continuación se mostrarán las pantallas del sitio acompañadas del código con el que se programaron y un mapa de divs que muestre visualmente la estructura de front que se usó para trabajar.

  • pantallas con la respectiva bajada de imagen.
  • Presentar las pantallas acompañadas del nuevo html y css y mapas de divs.
  • Hablar sobre las complicaciones de la parte de lectura que llevó a la decisión de no incluir la lectura del libro directamente desde el sitio.

Ilustración y Modelos

Ya existiendo un contexto del proceso e ideas tras el desarrollo y producción de las ilustraciones, a continuación presentamos las que hemos podido dar por cerradas, aunque siempre mantenemos la mirada abierta a cambios y mejoras que pudieran tener a futuro, en cuanto a forma, color, contraste. Nuestro objetivo o meta fue iluminar y esclarecer la máxima cantidad de textos posibles, pero debido al tiempo del proyecto esto no fue posible. De todas formas, presentamos las siguientes visualizaciones, que fueron evolucionando, cambiando y pasaron por distintas validaciones para llegar al punto actual.

Ilustraciones

01. Investigación Inclusiva

Invistigacion inclusiva ExE.png

Esta ilustración busca visualizar el contexto de la investigación inclusiva, donde se comparan dos escenarios: El primero muestra la investigación no inclusiva, donde un grupo de personas estudia a los sujetos de investigación, en este caso a los adultos con discapacidad intelectual. La segunda escena muestra a la plataforma se ha bajado, permitiendo a las personas con discapacidad participar activamente del proceso de investigación junto con el resto de las personas del equipo, todos son investigadores.

02. Implicancias de la investigación inclusiva

Implicancias ExE.png

La siguiente ilustración fragmentada es una representación metafórica de las implicancias en las que se traduce la investigación cuando se incluye a las personas con discapacidad. en la primera escena las implicancias sobre el individuo, la segunda es la implicancia social, la tercera es la implicancia en la investigación y la cuarta en la política.

03. Diseño centrado en las personas

Figura-07-ExE.png

la ilustración muestra un escenario donde aparecen elementos que ayudan a las personas a navegar por este, señaléticas, pantallas de interacción, ascensores, rampas, y personas a quien consultar. La idea es ilustrar un ejemplo de cómo se vería un escenario accesible.

04. Codiseño

Figura-08-ExE.png

Esta sección del texto habla de lo que es diseñar de forma colaborativa con las personas con discapacidad intelectual y los avances y resultados positivos que se reflejan al ponerlo a prueba en la investigación inclusiva. Esta ilustración no extrae fragmentos específicos y los hace visibles, sino que plantea un problema ante un equipo de personajes y visualiza la importancia de trabajar en colaboración para poder resolverlo, ya que si sólo hubiese uno o alguno de esos personajes no podrían lograr armar el puzzle. Se requieren distintas personas ocupando diversos roles, y son esenciales las personas con discapacidad intelectual al momento de resolver este problema que teóricamente sería un problema de accesibilidad.

05. Paradigma DI

Pardigma DI ExE.png

La parte del texto que habla del Paradigma DI, reconoce que para poder brindar apoyos adecuados y necesarios a los adultos con discapacidad intelectual, es necesario definir sus capacidades y necesidades.La primera escena muestra a la persona con DI tambaleando debido a que no tiene los apoyos necesarios porque sus capacidades no están definidas. En la segunda escena se definen las superficies de las caras del cubo, debido a que se reconocen las capacidades de la persona, y finalmente, en la tercera escena las necesidades y capacidades de la persona con discapacidad intelectual están definidas, por lo tanto tiene un sistema de apoyo estable

06. Psicología positiva

Figura-12-ExE.png

Frecuentemente los adultos con discapacidad intelectual se enfrentan a situaciones que les provocan emociones negativas, como frustración y angustia, debido a que no logran realizar algo que se han propuesto por la falta de accesibilidad en su entorno, en esta ilustración se muestra en el primer piso que la persona no puede poner una ampolleta. Al ir avanzando con psicología positiva brindada por apoyos y facilitadores logran que la persona con DI cumpla su objetivo mediante este proceso que es una intervención positiva.

07. Grupo Asesor discutiendo

Figura-15-ExE.png

Esta ilustración muestra al equipo de investigación convergiendo en una misma idea en común y discutiendo proponiendo soluciones ante los problemas que se han planteado. Hay formas de diálogo, de ideas y de preguntas, demostrando la versatilidad de las sesiones de ideación y la diversidad de personalidades que se evidencia en la dinámica del grupo.

08. Sesión de formación

Figura-16-ExE.png

Esta escena ilustra el momento de introducción a las temáticas, objetivos y narrativas de los talleres de ideación o trabajo de campo que el grupo asesor deberá llevar a cabo, se introducen conceptos e historias que construyen un diálogo en el equipo. Las sesiones de formación son esenciales para la dinámica del trabajo en equipo y el entendimiento del trasfondo de las actividades que se realizarán.

19. Sondas

Figura-17-ExE.png

Esta ilustración está basada en el registro de una jornada de trabajo de campo del equipo de investigación, donde al grupo asesor se les otorgó una sonda donde se mostraban iconos relacionados con el espacio público que se encontraban evaluando, el metro, para dejar anotaciones y observaciones sobre el nivel de accesibilidad que presentaba el servicio. Estas jornadas de evaluación con sondas apuntan a un rediseño accesible de los servicios que no están pensando desde la inclusión de las personas con discapacidad intelectual.

10. Bitácoras de elicitación

Bitacora elicitacion ExE.png

La escena ilustrada muestra al grupo asesor completando bitácoras de licitación, las cuales son un modo de evaluación mediante la expresión de respuestas de los adultos con discapacidad intelectual. Se muestran las secciones en un detalle de las partes de esta bitácora, donde se realiza una pregunta en la parte superior, luego hay espacios cuadrados para ubicar los pictogramas o forma visual que represente lo que siente la persona respecto a la pregunta, y en la parte inferior un segmento para escribir de forma privada ya que se entrega plegado.

11. Taller de ideación

Taller ideacion ExE.png

Este fragmento del texto habla del proceso y las etapas que constituyen un taller de ideación con el Grupo asesor, la ilustración busca iluminar al lector para poder profundizar en el entendimiento de estos momentos y la importancia de cada uno si se busca realizar uno. En las etapas primero se muestra la de contextualización, donde el equipo se reúne e introducen el taller, de lo que se tratará y empiezan a construir un imaginario del objeto que pueden crear presentandoles la narrativa, una historia que abra su imaginación, es por esto que se visualizan las personas hablando y tienen como base el mismo imaginario que están creando en el momento, mostrado metafóricamente como una nube. El siguiente momento es el de la exploración, donde se les presenta a los grupos una caja con herramientas para construir lo que ellos decidan como la solución ante el problema planteado en la etapa inicial, es por esto que los personajes aparecen abriendo y explorando los materiales. El siguiente momento representa el diálogo que hay entre los integrantes del grupo, intercambiando ideas sobre las posibilidades que abren las herramientas y materiales que se les han dado, es por esto que aparecen diálogos visualizando diferentes formas. La siguiente etapa dentro del taller de ideación es la construcción, donde la decisión sobre el objeto que construirán está consolidada y el equipo trabaja en conjunto para poder materializar lo que era un imaginario, es por esto que aparecen los personajes armando dos artefactos. Una vez que los grupos construyen su artefacto, deben presentarlo a todo el equipo, explicando porque soluciona la problemática planteada en la narrativa, los atributos que tiene y cómo pasaron de la idea a la forma, además de cómo se utiliza en cuanto a la interacción el cuerpo. Finalmente, se reúne todo el equipo a discutir y analizar los objetos creados, como fue el proceso, que se rescata, que aprendizaje se llevan, y lo fundamental, cuál es el impacto de este objeto en la vida de las personas con discapacidad, y si el taller lleva a resultados concretos para diseñar un objeto real, es por esto que la ilustración los muestra con los artefactos en la mesa pensando, y dialogando.

12. Toolkit

Lorem

13. Validación

Lorem

14. Roles en los procesos de investigación inclusiva

Lorem

15. Barreras y facilitadores para construir coinvestigación

Lorem

Modelos

1. Modelo doble Diamante

Figura-14-ExE.png

El siguiente modelo es extraído de uno realizado por Herbert Spencer como adaptación de Bethany (1996), y visualiza las etapas que existen dentro de la metodología de trabajo del codiseño, aplicada a la investigación inclusiva. Se utiliza una paleta de colores que brinda unidad a los modelos entre sí, se respeta un patrón geométrico y el grosor de línea.

2. Anatomía de las sesiones de ideación

Lorem

3. Ideación inclusiva

Lorem

4. Codiseño en la investigación inclusiva

Figura-13-ExE.png

El siguiente modelo también fue extraído de una de las presentaciones del equipo investigador, y adaptado a la línea gráfica que se trabajó para el libro. Muestra la relación entre la investigación inclusiva y el codiseño tiene como pieza esencial la participación activa de los adultos con discapacidad intelectual.

Libro Digital

Lorem

Aprendizajes

Ilustración

Ya se ha abordado la ilustración en cuanto el proceso y su constante rediseño, la ideación de estas y su relación directa e indirecta con el texto que les da su origen. Al momento de reflexionar sobre lo que es crear ilustraciones accesibles, se viene a la mente el esbozo de una metodología en este proceso de un año, donde podemos identificar un inicio, un desarrollo, un resultado, y su rediseño a partir de validaciones con el Grupo Asesor; si bien no se logró llegar a una metodología donde se asegure que el resultado será efectivamente una ilustración accesible, si nos pudimos dar cuenta que nos aproximamos a fórmula, que no es sólo una, pero al menos es una posible. Si se tiene el objetivo de crear ilustraciones accesibles el paso fundamental es la validación, poner a prueba el entendimiento de estas con el público objetivo, y con otros tipos de públicos también, ya que para que sea verdaderamente accesible una ilustración tiene que estar diseñada colocando al usuario al centro. En cuanto a la ideación de las piezas gráficas nos hizo sentido que las interacciones y relaciones de la ilustración se dieran por el juego de las personas y sus acciones en su entorno, donde las personas se presentan versátiles y dinámicos, al ser dibujados con una línea más suelta y curva; mientras que las superficies se presentan sólidas y concretas, creadas con bloques de colores degradados para poder hacer aparecer sombras y profundidades, que hacen que el entorno se acerque más a la perspectiva que hay en la realidad. Este proyecto abre un campo que antes no habíamos explorado anteriormente, y nos llevamos conocimientos importantes, como el hecho de que una ilustración puede ser rediseñada las veces que sean necesarias, pero llega un punto donde hay que darles un cierre y definir una línea que aporte una continuidad visual que comunique una historia, en este caso la narrativa de un equipo de investigación inclusiva, si no hay un hilo conductor evidente es dificultoso llegar a comunicar el impacto que tiene este libro. Esperamos que la paleta de colores elegida, el trazo, las texturas, las formas, los personajes y la relación con sus entornos y el texto hayan logrado el objetivo de transmitir estos años de investigación inclusiva, y que logren conectar con las ilustraciones revisitando lugares en su mente.

Expertos por Experiencia

Este proyecto se enmarca en un contexto de pandemia global que afectó directamente la forma en la que nos relacionamos, ya que la opción de mirarnos a los ojos, interactuar físicamente, tener la mesura y dimensión de los objetos ya no era una posibilidad. Para nuestro taller específicamente significó un cambio de paradigma en la modalidad de observación, de trabajo de campo, y de talleres de validación con el grupo asesor. El hecho de interactuar con el Grupo Asesor requiere un especial cuidado en el lenguaje, en el tono y en la articulación de las frases que construimos, cada mensaje que entregamos debe ser pensado con cautela para poder entregar la información necesaria para ellos y para todo el equipo. Quizás hay personas que tienen más experiencia en el área de la discapacidad que no están de acuerdo con lo que estamos escribiendo, que quizás no hay que pensar tanto en las palabras sino que hay que dejarse llevar, pero la verdad como equipo tratamos de realizar el trabajo de la mejor forma posible, y al tratarse de interacciones de forma virtual, quizás nos volvimos muy conscientes de lo que debíamos decir, ya que si no nos dábamos a entender de forma simple y fácil de comprender, no podíamos estar ahí con el Grupo Asesor para poder explicar con un lenguaje kinésico, o quizás ejemplos visuales, es por esto que preferimos tomarle la importancia que se merece y tener pensado y planeado nuestra forma de comunicarnos para poder atender sus necesidades de forma correcta, y hacer de los talleres online una experiencia accesible dentro de las posibilidades.

Dentro de este contexto de los talleres de validación que nombramos anteriormente, fueron clave los miembros del equipo que nos guiaron y nos enseñaron a través de la observación de su manera de comunicarse, cuales eran las formas más acertadas y que hacían que el Grupo Asesor se sintiera cómodo y con gusto realizando los talleres. Todos los años de experiencia que los miembros del equipo poseen interactuando con el Grupo Asesor se notaban, los adultos con discapacidad intelectual se mostraban cómodos y se entendía inmediatamente lo que debían realizar, lo que fue clave al momento de obtener retroalimentación honesta, objetiva y profesional de parte de ellos en cuanto a la accesibilidad del objeto a evaluar.

Si bien es necesario tener documentos formales como los protocolos y los guiones en los talleres, donde se planifican los momentos y los puntos de acción, lo que se va a preguntar en cada pantalla, uno de los aprendizajes que nos llevamos es que la existencia de un guión no significa leer al pie de la letra lo que se planificó, sino que se debe llevar a cabo un diálogo natural y espontáneo dentro de lo estipulado, ya que es necesario generar una relación de confianza a través de una comunicación cercana y amable. Al mismo tiempo es necesario dejar de lado todo modo de comunicación que se acerque al modo de comunicarse con niños, ya que los adultos con discapacidad intelectual son perfectamente capaces de comunicarse como cualquier otro adulto.

Al avanzar en los talleres de validación es importante realizar preguntas que no entreguen la respuesta deseada, que dejen abierto el canal de comunicación para que el Grupo Asesor responda con sinceridad lo que opina y piensa, aún así si no era lo esperado. Es importante darles el espacio para hablar lo que están pensando en el momento, sin hacer que sientas que pueden equivocarse o fallar, ya que todo lo que dicen es de mucha utilidad para mejorar el proyecto. En este sentido, hay que permitir que ejerzan su independencia y autonomía para poder descubrir qué secciones del objeto evaluado no está diseñado de forma accesible.

Cuando nos preparábamos para el primer taller de validación estábamos nerviosos, ansiosos e intrigados ya que no conocíamos anteriormente al Grupo Asesor, no sabíamos si se iban a sentir cómodos con nosotros ni cómo iban a reaccionar ante las preguntas, si nos íbamos a dar a entender bien, cuáles serían sus respuestas. A medida que avanzabamos con distintos miembros nos dimos cuenta que manejaban todos los conceptos relacionados con la discapacidad intelectual, la investigación inclusiva, y la accesibilidad, realizaban comentarios profesionales relacionados con el tamaño de la letra, con la encontrabilidad de los elementos, la paleta de colores y el aspecto editorial en general, siendo críticas constructivas objetivas en el contexto de la accesibilidad. Toda la experiencia como investigadores, evaluadores y validadores se demostró en la forma que nos comunican sus observaciones, en los aspectos que llamaban su atención. Creo que uno de los mayores aprendizajes que nos llevamos es que los miembros del Grupo Asesor, realmente son Expertos por Experiencia, sin lugar a duda, fueron una pieza fundamental al momento de rediseñar hacia un objeto editorial más accesible.

Antes de embarcarnos en este proyecto y adentrarnos en la materia de la investigación inclusiva, tenía sentido el motivo por el cual se indagaba y practicaba un modo de diseñar e investigar que pusiera a las personas con discapacidad en el centro, ya que se observan beneficios para los objetos o servicios creados desde las necesidades del grupo asesor, y también para las mismas personas con discapacidad intelectual. Pero una vez que íbamos avanzando en el proyecto, sobretodo en los momentos de validación donde pudimos interactuar con el Grupo Asesor nos dimos cuenta lo esenciales que son al momento de diseñar, no sólo para las personas con discapacidad intelectual, sino para todos, un diseño universal accesible. Hay prejuicios con respecto a las capacidades que tienen, lo que hace que el entorno tome una actitud que no les permite sentir la confianza y seguridad para dar su opinión, pero este quipo de investigación ha dado el espacio para que se generen esas ideas, esas observaciones y evaluaciones que nos guían a construir lugares que están bien pensados, que se originan de una ideación inclusiva. Creemos que la pieza gráfica a la que hemos llegado no sería la misma sin las validaciones y observaciones que nos fueron dadas por el Grupo Asesor, y al vivirlo con nuestro proyecto de título, el cómo la participación y colaboración de adultos con DI impacta positivamente en el diseño, esperamos poder siempre diseñar desde la accesibilidad y tener la posibilidad de co diseñar con Expertos por Experiencia.

Bibliografía

  1. https://www.ciudadaccesible.cl/wp-content/uploads/2012/06/manual_accesibilidad_universal1.pdf
  2. https://www.w3.org/
  3. Riaño, J; Ballesteros, J, 2014. "Aspectos y normas de Accesibilidad Web". Ing. USBMed, Vol. 5, No. 2
  4. Aldridge, J. (2012). Working with vulnerable groups in social research: Dilemmas by default and design. Qualitative Reaearch
  5. Pallisera, M; Puyaltó, C; Fullana, J; Vila, M; Castro, M. () Investigamos juntos: Un curso de formación en investigación educativa para personas con discapacidad intelectual.
  6. García, Ó. (2012) Lectura Fácil: Métodos de Redacción y Evaluación
  7. https://shapeofdesignbook.com/
  8. https://frankchimero.com/blog/2014/designing-in-the-borderlands/
  9. https://atozofai.withgoogle.com/intl/en-US/
  10. https://www.hellomonday.com
  11. https://parall.ax/
  12. https://edwardtufte.github.io/tufte-css/
  13. https://turbulent.ca/?lang=en