Soledad Araya: Formas de conocer

Título	Soledad Araya: Formas de conocer
Tipo de Proyecto	Proyecto de Taller
Palabras Clave	interacción
Asignatura	Taller de Diseño de Interacción
Del Curso	Taller de Diseño de Interacción 2021
Carreras	Diseño
Alumno(s)	Soledad Araya Urrutia
Profesor	Herbert Spencer

Formas de conocer

Resumen del proyecto: A través de la observación minusiosa de las interacciones entre la información y el humano, construimos una interfaz gráfica que proponga una manera de informarnos evitando caer en fake news y considere los principios de usabilidad y Heurística propuestos por Jackon Nielsen. El proyecto culmina en un escenario de uso expuesto en un video.

Primera etapa: croquis y observaciones de valor

Relaciones de extensión corporal

Relaciones de Hermenéutica (humano-tecnológico)

Relaciones de alteridad

Lectura digital vs lectura análoga

En esta segundo momento de croquis, realicé una comparación de la manera en que leemos contenidos. Identificando puntos en común podemos mencionar que en ambos casos leemos de izquierda a derecha y de arriba abajo, ésta acción termina solo cuando se nos acaba el espacio limitado de lectura, ya sea la hoja de un periódico o la pantalla de un notebook. Sin embargo, las diferencias se hacen notorias al momento de actualizar la información, es decir, si queremos seguir leyendo la continuación del texto, entonces la interacción es distinta.

Cuando el marco limitado de información termina (en este caso una hoja de un libro o un periódico) existe un interrupción de la lectura y debemos cambiar de hoja para volver a integrarnos en la lectura.

Mientras que en la lectura digital la interrupción se disminuye mucho con la funcionalidad de ir haciendo scroll. Entonces mantenemos una lectura mas fluída y continua.

¿Cómo ha cambiado la forma de comunicarnos ahora en pandemia?

Observaciones del plano físico

Existen focos de información que deben estar distanciados para percibirse en completitud.
Si la distancias no se respetan la información se intersecta e interrumpe, entonces no es clara para ninguna dirección.
Esto obliga que los receptores de la información estén separados entre ellos físicamente.
Los receptores pueden abandonar un foco de información e integrarse a otro sin dificultad, esto va generando un vínculo entre los foco.

Por lo tanto la información exige una distancia mínima para ser comprensible por los receptores

¿Que ocurre en un foco de información?

Dentro de un foco de información surgen distintas interacciones.Pasivas (como receptor) o activas (como emisor).

¿Cómo se replica esta situación en una interfaz? ¿Ocurrirá lo mismo?

La distribución de información también necesita una distancia mínima porque si se traslapa una sobre otra se interrumpe y no es clara.

De acuerdo a lo observado espero lograr abstraer la idea de lo que ocurre en el plano físico e integrarla en una interfaz de contenido tipo informativo.

Segunda etapa, definir la idea a través de la exploración

¿Cómo construir una manera de estar informado de lo que ocurre en la actualidad y que no se vea afectado por las fake news?

Comenzaremos definiendo algunas características mínimas que debiera tener esta plataforma

Permitir el flujo inmediato de información relevante
Lograr evitar las fake news
Sea de acceso global y que tenga repercusión
Inspire confianza en los usuarios

Ejercicio de card sorting abierto

El ejercicio de card sorting nos ayudará a comprender cómo piensan los usuarios y cómo creen que es mas lógico ordenar una gran cantidad de contenidos relacionados a una temática, para poder ir definiendo la arquitectura de información de un sitio navegable. En éste caso propuse contenidos que existirían en una interfaz de noticias, en donde los usuarios debían ordenar categorías y titulares de noticias reales.

Preparé algunas tarjetas con categorías tentativas para agrupar las noticias y otras tarjetas con titulares de noticias de todo tipo. Posteriormente ordené el contenido de acuerdo a mi intuición, con éste ejercicio pude darme cuenta que hacía falta nuevas categorías porque habían noticias que no quedaban bien ubicadas en las categorías iniciales. Las categorías iniciales fueron:

Economía
Educación
Geografía
Tecnología
Política
Salud

Las categorías agregadas fueron:

cultura
clima

Además propuse una sección aparte con una jerarquía diferente llamada "Analizador de fake news". La idea de ésta sección es que sea un campo donde los usuarios pueda hacer drag and drop a noticias que provengan de sitios que le inspiren desconfianza y que a través de una inteligencia artificial se pueda detectar si la información corresponde a fake news o no.

Usuario 1, prueba de card sorting

Tardó aproximadamente 4 minutos en ordenar el contenido
Apartó algunas tarjetas que no incluyó en ninguna categoría
Expresión: De vez en cuando ponía cara de extrañeza
Comentario: "Falta una categoría de delincuencia, asaltos y cosas malas"

Usuario 2, prueba de card sorting

Este usuario propuso crear las categorías: accidente, personaje, delincuencia, moda, deporte.
Crear una categoría especial con noticias positivas. Ejemplo ficticio de noticia positiva referida por el usuario: "Un grupo de personas se dedica a atender a indigentes y necesitados en las calles de Santiago"
Propone crear subcategorías

Usuario 3, prueba card sorting

Este usuario propuso que toda noticia pase por el analizador de fake news antes de ser publicada, por lo tanto sería la categoría de mayor jerarquía
Posteriormente propuso eliminar la categoría geografía y pase a llamarse: selector por país, el que funcionaría como un filtro geográfico y de acuerdo al continente o país escogido es que se mostrarían las noticias.
Propuso crear la categoría: recientes, para las noticias de último minuto.
Propuso eliminar las categorías violencia y delincuencia por considerarlas morbosas para los lectores

Tercera etapa: Idea definida

El desafío: Próximamente la ciudadanía deberá sufragar para decidir quienes serán las personas que redacten la nueva constitución que rija el país. Esta decisión es importante y está en las manos de todos los ciudadanos del país, por lo tanto es crucial que voten informados. Pero, ¿existen fuentes confiables de información que les ayuden a comparar de manera rápida y eficiente las propuestas de los candidatos?

Idea definitiva: Crear una plataforma que permita a los usuarios informarse sobre el proceso constituyente en Chile

Cuarta etapa: investigando la competencia

Ahora analizaremos que plataformas similares existen e intentan solucionar la misma problemática, identificaremos cuales son sus ventajas y desventajas para encontrar cómo podemos aportar con nuestra propuesta de manera que sea innovadora y proporcione algo que no existe aún.

Propuesta de La tercera

Ventajas de esta interfaz:

Se entiende y ofrece información validada
Informa cual es tu distrito con solo ingresar tu rut
Te menciona cuales son los candidatos por distrito
Te dirige al contenido de cada constituyente

Desventajas de esta interfaz:

No ofrece una comparativa de las propuestas
No se puede identificar de un solo vistazo las posturas respecto a cierto tópicos

Cuarta etapa: prototipando

Primera propuesta

Esta primera propuesta es un sitio web que permita a los usuarios buscar con su rut su distrito para saber quienes son sus candidatos a constituyente. Posteriormente comparar la propuesta por categorías de estos candidatos para definir quien representa sus ideas mas fielmente.

Segunda propuesta: aplicación móvil

Arquitectura de la información: Nos permitirá ordenar de manera gráfica el contenido que será navegado por los usuarios dentro de la aplicación, con la finalidad de que sea encontrable. En este caso la app será de consultas, no tendrá proceso de registro de usuarios, por lo tanto será sencilla de navegar porque existirán pocos procesos.

Prototipo de baja fidelidad: Nos permitirá situar en página el contenido definido en la arquitectura de información dándole estructura, pero no se entrará en mayor detalle de estilos gráficos.

Prototipo de alta fidelidad: En este prototipo afinamos detalles de jerarquía, y estilos gráficos como lo son la paleta de color, tipografías, tamaño de botones, etc.

Identidad de la aplicación, estilos gráficos

Comencé haciendo un boceto para delimitar la idea. Quería que el logo fuera una sola palabra que hiciera referencia a la acción de informarse, así que lo llamé infórmate. Lo coloqué en lenguaje imperativo porque este es claro para las personas y lo repliqué dentro de toda la aplicación para dar las instrucciones. También añadí una pequeña mano haciendo tap en un botón que hace referencia a la manera en que se accede al contenido en ésta interfaz llamada infórmate.

tipografías utilizadas

Paleta de color utilizada

Aplicación de principios de usabilidad y heurística

Son 10 principios reados por Jackob Nielsen y que ayudan a crear interfaces intuitivas.

1 Visibilidad del estado del sistema: Cuando un usuario está haciendo un proceso dentro de un producto digital hay que darle retroalimentación de lo que está pasando.

2 Relación entre el sistema y el mundo real

3 Control y libertad del usuario: El usuario siempre debe tener la capacidad de cancelar un proceso, salir de un flujo o deshacer una acción

4 Consistencia:Si se usa un color específico y un tamaño específico, este debe aplicarse en toos lados de la misma forma.

5 Prevención de errores: Hay que dar instrucciones claras a los usuarios de como manejar el sistema o la acción que tiene que hacer.

6 Reconocer antes que recordar: Mostrar siempre la información evitando que el usuario tenga que recurrir a su memoria.

Principio 6tallerdeintercción2021SAU.PNG

7 Flexibilidad y eficiencia de uso:Permite a los usuarios novatos y avanzados utilizar el producto. Trata de abarcar todo tipo de usuario

8 Diseño estético y minimalista:No saturar de información al usuario y mostrarle solo el contenido que va a utilizar.

9 Ayudar a los usuarios a corregir y reconocer errores: Dar recomendaciones de porqué está sucediendo el error.

10 Ayuda y documentación

Ultima iteración

Primera parte

tercera parte

segunda parte

1 En esta última iteración cambié la estructura de la app, de manera que el mapa no indique el distrito sino la comuna a la que pertenece el usuario. Y de acuerdo a esa comuna se desplieguen las opciones de candidatos alcaldes, concejales, gobernadores y constituyentes. Esta modificación soluciona el tener que incluir muchos mapas dentro de la app y que el usuario deba buscar de manera reiterada hasta llegar a la comuna.

2 También quité el icono de persona cuando se muestren los datos del usuario. Añadí la foto del candidato en la interfaz de detalle y además incluí el logo de la lista a la que pertenece.

3 La propuesta del candidato ahora se puede desplegar y ver dentro de la misma app.

4 Incluí un sistema de puntaje que registre si el usuario está de acuerdo o desacuerdo con las opiniones de los candidatos, de manera de encontrar al candidato que represente mejor las ideas de los usuarios.

5 Quedará registro en la lista de los candidatos por quienes se han votado y por quienes no.

6 Coloqué el ícono de infórmate dentro de la barra superior y le asigné la funcionalidad de llevar a la interfaz de ingresar el rut.

Revisar prototipo

https://www.figma.com/proto/ycLLfoIJrI1mbGzg07hFMZ/dise%C3%B1o-de-interacci%C3%B3n?page-id=0%3A1&node-id=14%3A0&viewport=-38%2C382%2C0.0625&scaling=min-zoom

Noticias