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

De Casiopea
Línea 1016: Línea 1016:


==Protocolo==
==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.
{{#widget:Google Document
|id=2PACX-1vQYCJfeucEKi_LEmETlY73qacKE7PAqnP76V1hMxdqxqzZv6_Jn3K9ZSl3p-wOFGCDQzyeO7wBU2sph
|width=500
|height=300
}}
==Guión==
==Guión==
==Herramienta de validación: Maze==
==Herramienta de validación: Maze==

Revisión del 21:35 12 oct 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.

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.

Guión

Herramienta de validación: Maze

Registro de los Talleres

Resultados

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