Joaquín Mansilla: Forma de conocer

Joaquín Mansilla: Formas de conocer

Título	Joaquín Mansilla: Formas de conocer
Tipo de Proyecto	Proyecto de Taller, Proyecto de Curso
Palabras Clave	interacción
Período	2021-2021
Asignatura	Taller de Diseño de Interacción
Del Curso	Taller de Diseño de Interacción 2021
Carreras	Diseñ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)	Joaquin Mansilla
Profesor	Herbert Spencer, Renee Rodo

Encargo 2: Formas de Conocer

Este segundo encargo del taller consta de crear un medio o interfaz que permita informarse de noticias locales o mundiales y que a su vez evite la aparición de fake news...¿Cómo logramos comprobar la veracidad de las noticias que aparezcan en nuestra plataforma?

Tipos de Relaciones entre el humano y la tecnología

1) Relaciones de Extensión Corporal/Cognitiva (Las personas se fusionan con la tecnología trabajando en conjunto)

ejemplos:

• bicicleta
• tackpads
• automóvil

2) Relaciones Hermenéuticas (Las personas usan la tecnología como herramienta para lograr cosas)

ejemplos:

• lavadora
• microondas
• celular
• TV
• chip de biohacking

3) Relaciones de Alteridad (Las personas no usan la tecnología, sino que esta funciona por si misma en el mundo de las personas)

ejemplos:

• aspiradora Roomba
• Google Home o Amazon echo
• alarmas hogareñas

Extensiones de Google para identificar bulos (fakenews)

Hoy en día existen diversos sitios web/extensiones que permiten contrastar las informaciones y permiten dar veracidad de sus contenidos, por ejemplo tenemos:

• [1]: Esta extensión para Google Chrome fue creada por Eyeo, la compañía detrás de Adblock Plus. Una vez que hayamos instalado Trusted News en nuestro navegador veremos un icono en la parte superior inderecha que nos indicará si la web es:

1. Desconocida: Trusted News no tiene suficientes datos para evaluarla.
2. No fiable: publican información falsa o engañosa.
3. Satírica: publican contenido satírico que podría parecer una noticia real.
4. Parcial: en esta web publican información parcial que "promueve puntos de vista sesgados.
5. Maliciosa: en esta web buscarán infectar nuestro equipo con malware, etc.
6. Clickbait: publican titulares engañosos para llamara la atención de los lectores.

• [2]:Maldita.es es una página que se esfuerza en recopilar bulos "para que no te la cuelen". Además de todo el contenido que publican en su página web existe una extensión para Chrome y Firefox que te alertará cuando entras en una web poco fiable, nada fiable o satírica.

• [3]: Zetta Cloud, una compañía de origen rumano, son los creadores de TrustServista, una herramienta que nos permite "verificar la fiabilidad de cualquier artículo en Internet con un solo click". Esta extensión para Google Chrome se ha configurado gracias a la beca DNI (Digital News Initiative) de Google, con la que se fomenta el desarrollo de servicios para que los periodistas puedan saber si la fuente que están consultando es de confianza.

• [4]: FactCheck.org es una página web que (sin ánimo de lucro) busca reducir el nivel de engaño y confusión que se genera en la política estadounidense. Se dedican a examinar lo que dicen los principales políticos en la televisión, radio, debates o en la prensa.

Fundamento

Existen varios momentos del día en los que cada integrante de mi familia realiza sus actividades personales, como también momentos donde todos compartimos una misma actividad acompañada de contenidos multimedia.

Momentos de actividad personal:

• estudiar
• trabajar
• aseo personal (cuerpo/espacio)
• comidas (a veces)
• ocio
• deporte

Momentos de actividad grupal:

• aseo general
• cocina
• comidas (la mayoría)
• deporte

En mi hogar, al momento de reunirnos como familia, se comenta en varias ocasiones noticias artísticas, se muestran videos, se comparten intereses, visiones, ideas, proyectos y reflexiones sobre estilos, gustos, estética, decoración, entre otras cosas. En mi proceso de observación me di cuenta que toda información proviene de distintas fuentes, ya sea el diario, revistas, redes sociales, noticias o programas de la radio. Por ende, se le destina una cierta cantidad de tiempo al accionar las tecnologías para encontrar los contenidos buscados.

Me vino a la mente la siguiente pregunta: ¿Se podrá crear una interfaz que permita informarse de contenido artístico con una limitada y fácil interacción con la tecnología?

Entonces se pensó en una aplicación móvil que muestre, cómo audio, las noticias encontradas como texto. Siendo la aplicación la lectora a viva voz de lo encontrado en internet y previamente clasificado con un filtro de lo falso y lo verídico. Para así, mantener informada a mi familia en los momentos que ellos estimen cómodos, en los cuales puedan hacer otras actividades o acciones, sin la necesidad de la “búsqueda” de información.

Hay veces en las que clasificamos la información a partir de lo estético, por ejemplo, si la caratula de una película no es bella no vemos la película, porque ésta no llama nuestra atención. Al momento de leer una noticia no nos fijamos específicamente en la imagen que muestra el suceso presentado, sino que el titular es lo que capta nuestro interés. Por ende, esta aplicación se centrará en no presentar imágenes, con la idea de confiar en el filtro de fake news y destinar la experiencia informativa al escuchar los relatos de contenido.

Cita:“Se necesita alguna acción decisiva a fin de establecer contacto con las realidades del mundo o a fin de que las impresiones de relaciones con los hechos de manera que podamos comprobar y organizar su valor”. p.52. John Dewey, El Arte Como Experiencia. (bibliografía:1)

Esta será la experiencia de informarse de la experiencia y la acción decisiva, en este caso, es el oir.

Croquis y Observaciones

• 

  1)El conocimiento desde la lectura de pantalla requiere una postura estática y un accionar secuencial del objeto tecnológico para dar continuidad a la lectura. 2)La relación hermenéutica con el objeto vuelve determinante para el conocimiento. A demás de cansar la vista del lector, lo somete al control. Es un conocimiento pausado.

• 

  1)Lectura desde lo físico. Requiere el gesto de sostener. Necesita un tiempo determinado por el lector para obtener conocimiento. 2)Por el otro lado, el gesto de cambiar la página. Juntar/separar secuencialmente dependiendo de la continuidad de la lectura.

• 

  Hoy en día el contenido te permite realizar más de una actividad simultánea, como el caso de escuchar un podcast mientras se anda en bicicleta. Esto mezcla habilidades motoras con las auditivas.

Objetivo de la interfaz

A partir de las observaciones presentadas (donde la interacción hermenéutica es importante) se idea una interfaz encargada de informar sin una necesidad constante de interacción con la tecnología, siendo el objetivo principal de esta, generar aprendizaje y conocimiento permitiendo, al mismo tiempo a los usuarios, realizar múltiples actividades. Por ende, su configuración se basa en el "simple accionar" de los botones, para en cuestión de segundos, poder disfrutar de los audios informativos.

¿Cuál es mi público objetivo/meta?

Principalmente, el público "meta" de este proyecto son las personas que utilizan bastante aplicaciones tecnológicas para informarse, lo cual imposibilita a la persona realizar más actividades en un mismo tiempo. En un momento inicial, la aplicación se pensó particularmente para mi familia, pero a medida que el proyecto avanzó se pensó que sería una buena idea para ser llevada a cabo para el público general. Al observar el tiempo, la gestualidad y las posturas de los posibles usuarios, me di cuenta que sería una buena propuesta que abarque múltiples beneficios para los(as) amantes de la información.

Beneficios de la aplicación

Al momento de informarse por medio de las tecnologías (teléfono, computador, radio, periódico, etc...) las personas descuidan las posturas corporales empleadas, las cuales generan daños complejos en la estructura ósea a la larga. Como ejemplo importante, se presenta el daño cervical, conocido hoy en día como "cuello de texto" (text neck).Este síndrome es causado por la postura “agachada” al mirar la pantalla de un celular o tablet. El hecho de mantener durante periodos prolongados esta posición, produce fatiga en músculos y tendones. (bibliografía:3)

• Para ver las consecuencias del "text neck" presiona la tecla expandir ubicada en el sector derecho de la página. Fuente:Centro Quiropráctico QuiroVida

Beneficios:

1. Reduce la interacción directa (conexión física) y constante con la tecnología
2. Permite realizar múltiples actividades al mismo tiempo que el usuario se informa
3. Permite que los usuarios eviten realizar posturas inconscientes y dañinas al sistema muscular y óseo.
4. Facilita la reproducción del contenido deseado mediante su sistema de reconocimiento de voz
5. Permite informarse de fuentes a gustos del usuario

Reconocimiento del habla

El Reconocimiento Automático del Habla (RAH), también conocido como Reconocimiento automático de voz, es una parte esencial de la Inteligencia Artificial y tiene como finalidad la comunicación hablada entre seres humanos y computadoras. El gran problema de este sistema es el de analizar adecuadamente un conjunto de informaciones que proceden de diferentes fuentes de conocimiento (léxica, sintáctica, semántica, pragmática, acústica, fonética y fonológica), teniendo en cuenta que pueden existir ambigüedades, incertidumbres y errores para llegar a conseguir una interpretación apropiada del mensaje acústico recibido.

Definición Los sistemas de RAH son sistemas muy recientes, y aunque han existido diferentes enfoques desde que surgieron siempre han proporcionado mejores resultados los sistemas probabilísticos, los cuales están basados en la “Teoría de la Decisión de Bayes”, la “Teoría de la información” y las “Técnicas de Comparación de Patrones y de Programación Dinámica”. Un sistema de RAH tiene que ser capaz de decodificar los sonidos u otra información de alto nivel que forman parte de un mensaje acústico. Dicha decodificación puede realizarse de diferentes formas, utilizando diferentes técnicas y con unos determinados requisitos iniciales para el mensaje a decodificar, es decir, consiste en generar un conjunto de patrones que puedan ser comparados con el mensaje (acústico) de entrada (a reconocer) devolviendo una secuencia de los patrones que con mayor probabilidad "representan" al mismo.

El proceso de RAH intenta conseguir la secuencia de palabras correspondientes a la frase en lenguaje natural de entrada. La frase es pronunciada de forma continua, sin pausas entre las palabras, por lo que genera problemas de agramaticalidad, además en las frases se incluyen elementos espontáneos como las interjecciones, falsos comienzos, repeticiones… Por todo ello, la tarea del estos sistemas no es sencilla, siendo además bastante costosa, tanto en concepto de memoria como de cálculo. (bibliografía:4)

Wireframe

¿Qué es un Wireframe?

"Un wireframe es la representación esquemática de la estructura de las pantallas de una App o Sitio web, podríamos resumirlo en que es el Esqueleto de nuestro producto. La principal ventaja es que ofrece una perspectiva basada solamente en la arquitectura del contenido y elementos de navegación, obviando el diseño y evitando que puedan distraer (colores, tipografías, sombras, imágenes, etc.)"

Ejemplo Wireframe/Diseño Spotify

Este es un ejemplo de wireframe del funcionamiento de Spotify, se puede ver una paleta de colores y desiciones gráficas características de la marca, marcando un estilo propio en el reproductor y en la manera de mostrar las opciones y sus contenidos. (bibliografia:2)

Wireframe de la aplicación: primera incursión

La idea principal al momento de diseñar los primeros wireframes fue lograr un diseño simple, de fácil comprensión para el usuario y de pocos botones, de esta forma se reduce el tiempo de interacción con el teléfono y con simples pasos se comienza la información.

Esquema de experiencia de usuario con la aplicación

En este esquema se presenta cuál sería la trayectoria de acciones y la secuencia de aperturas de las plantillas. El diseño expone dos trayectos:

1. Usuario sin cuenta registrada previamente
2. Usuario que si tiene una cuenta registrada

El objetivo principal de la aplicación es que en la menor cantidad de interacción hermenéutica posible el usuario pueda informarse de noticias de contexto artístico, lo que le permitirá realizar diversas actividades al momento de adquirir conocimiento. Es por esto que la interfaz trabajará en conjunto con una opción de reconocimiento de voz, para así, facilitar la muestra de noticias al usuario sin que este deba interactuar constantemente por medio de la ciencia háptica (tacto) o kinésica (gesto).

La construcción del esquema de experiencia se llevó a cabo con el modelo "Xr" del teléfono Iphone. A partir de sus medidas de pantalla 414 x 896px

La aplicación y sus detalles

Logo

El logo de la aplicación mezcla dos elementos principales, los cuales serían un micrófono y un rodillo de pintura. La unión de estos muestra un trabajo en conjunto entre la interfaz de reconocimiento de voz/lectura en voz alta de noticias con el arte. El logo se encuentra presente al iniciar la aplicación para dar la bienvenida a los usuarios. Por ende, se lleva a presencia un objeto mental, que sirve para comunicar lo creado por el mundo del arte.

El nombre de la aplicación si es que se pronuncia en español se lee como "noticiarte", lo cual es un juego de palabras compuesto de "noticia" y "arte", lo cual conlleva al verbo "noticiarte", que significa dar noticia o informar sobre algún tema o situación.

Diagramación

Las plantillas de experiencia de usuario en la aplicación están diagramadas mediante una lógica visual de columnas guías. Se utilizan 6 columnas verticales de 42px cada una, separadas por espacios de 25px. De esta forma se puede diagramar la información equilibrando contenidos de imagen como también textos descriptivos.

Iconografía

los iconos presentes en la aplicación siguen una línea de armonía entre sus trazos, estos mezclan lineas curvas y rectas, logrando un equilibrio visual de dimensiones y colores dentro del espacio móvil.

Paleta de colores

La paleta de colores de la aplicación se basa en los "colores web". Este estándar indica que una combinación de los tres colores básicos: rojo, verde y azul puede dar lugar a cualquier otro color. Los valores que se les da al RGB son valores hexadecimales que van desde el 00 (negro) hasta el FF (blanco). (bibliografía:5). Se incluyen mezclas de color utilizando la degradación para brindar mayor contraste visual y atracción hacia el usuario.

Tipografía

Se utilizó la familia tipográfica Helvética Neue, en sus variables Medium, Light y Thin. Esta tipografía se adapta al minimalismo de algunos wireframes donde se necesita recopilar información de fuentes y permisos de acceso. Por otro lado, las letras de mayor grosor contrastan en los los sectores superiores del marco móvil, para resaltar los paneles con fines determinados, como permisos de acceso, control por voz, home y fuentes en reproducción.

Storyboard / Arquetipo

En esta instancia se presenta el Escenario de uso de la interfaz creada. Se trata de representar la realidad del usuario al más alto nivel. Crear un entorno para conocer y saber si la propuesta de valor cubre las necesidades del prospecto. Entonces, se intenta “casar” las necesidades del usuario con la misión del producto.

Se presenta el caso de Tomás, un adulto de 35 años que trabaja en una empresa de marketing digital. Tomás es una persona que dedica mucho tiempo a su trabajo y en sus momentos libres le gusta asear su hogar y hacer actividad física. Este usuario se interesa de todo contenido artístico, ya que al estar al tanto de estas novedades le permite proponer nuevas y mejores ideas para sus proyectos personales y grupales de la empresa.

Por otra parte, Tomás se queja de tener dolores corporales, específicamente del sector cervical, los cuales son causados por reiteradas posturas mal empleadas a la hora de trabajar. Es por esto que se creó un escenario en donde Tomás descubre la aplicación por medio de un mensaje de texto, logrando así responder a sus necesidades tanto físicas como psicológicas, mejorando su estado de ánimo y cumpliendo con el objetivo principal, informarse de contenido artístico con la menor interacción posible con el teléfono.

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

Video nº1: Escenario de uso

Este video muestra el escenario de uso presentado anteriormente en el Storyboard.

Video nº2: Recorrido por la interfaz

Este video muestra una narración personal del recorrido por la interfaz.

Mock up visualización

Estos son ejemplos de como se vería la interfaz en una pantalla de celular

Links de noticias artísticas

• https://cnnespanol.cnn.com/category/arte/
• https://elpais.com/noticias/arte/
• https://www.latercera.com/etiqueta/arte/
• https://www.elmundo.es/cultura/arte.html
• https://masdearte.com/category/noticias/

Bibliografía

1. John Dewey, El Arte Como Experiencia.
2. https://medium.com/@santosalfonso/ironhack-challenge-2-wireframe-de-spotify-c03a3d9fda0e
3. https://www.raquischile.cl/dolor-cuello-uso-del-celular/
4. https://www.ub.edu/journalofexperimentalphonetics/pdf-articles/EFE-IV-FCasacuberta_EVidal-Reconocimiento_autom%E2%80%A0tico_habla.pdf
5. https://htmlcolorcodes.com/es/