Aurora Guard

Título	Aurora Guard
Tipo de Proyecto	Proyecto de Taller
Palabras Clave	comunidad
Período	2024-2024
Asignatura	Taller de Diseño de Interacción
Del Curso	Taller de Diseño de Interacción 2024
Carreras	Diseño
Alumno(s)	Anaís Arancibia, Paloma Álvarez, Antonia Olguin Cantillana, Valeria Muñoz Valdivia, Valentina Leiva, Katalina Gajardo, Barbara Suazo, Li Ann Montenegro, Francisca Loyola
Profesor	Herbert Spencer
URL	https://github.com/anaisarancibia/aurora-guard-extension

Aurora Guard

Inspirándose en el enfoque colaborativo de las travesías, donde la creación de una obra se logra con la participación activa de múltiples personas, el proyecto actual se centra en el desarrollo de una herramienta avanzada para la identificación de "black patterns" (patrones oscuros) en una variedad de sitios web. Para lograr este objetivo, se distribuirán las responsabilidades en áreas especializadas que incluyen Tecnologías de la Información (TI), Diseño de Interfaz de Usuario (UI) y Arquitectura de la Información (AI). La meta principal es desarrollar una plataforma integral que permita a los usuarios detectar y comprender estos patrones negativos, promoviendo una experiencia en línea más transparente y ética. Además, se diseñará una extensión que facilite una navegación más consciente y segura para el usuario, contribuyendo a un entorno digital más confiable y respetuoso.

¿Qué es Aurora Guard?

Aurora Guard es una extensión de Google Chrome desarrollada por el equipo de la página web Aurora Adviser. Este proyecto es parte del Ciclo 2 del Taller de Diseño de Interacción 2024. La extensión tiene como objetivo proteger a los usuarios de las malas prácticas de diseño en sitios web, conocidas como patrones oscuros, y promover una navegación más consciente y segura por internet.

Navegación del usuario

Mapa de navegación

Partituras de interacción

¿Cómo instalar Aurora Guard?

Uso de Aurora Guard mediante navegación

¿Cómo desinstalar Aurora Guard?

Conocimientos previos

Para la creación de una extensión de Google, se necesita tener ciertos conocimientos previos y además, hay que profundizar en un estudio del manejo y funcionamiento de las plataformas que te facilita Google para poder diseñar y crear estas extensiones personalizadas.
Por esto, se dará una breve explicación de estos para poder tener un entendimiento total de como funcionaria y como se diseña esta extensión, llamada Aurora Guard.

Google Chrome es uno de los navegadores web más populares y ampliamente utilizados en la actualidad. Desarrollado por el equipo de la página web Aurora Adviser, este proyecto se ha convertido en una pieza fundamental en el mundo digital. En el contexto del taller Diseño de Interacción 2024, se ha creado una extensión para Google Chrome que tiene como propósito principal proteger a los usuarios de las malas prácticas de diseño en sitios web. Estas prácticas, conocidas como patrones oscuros, buscan manipular a los usuarios para que realicen acciones que van en contra de sus intereses o les inducen a tomar decisiones perjudiciales.
A partir de esta pagina se desarrolla la extensión de Aurora Guard busca promover una navegación más consciente y segura por internet al identificar y señalar estos patrones oscuros a los usuarios. Al hacerlo, se pretende empoderar a los usuarios para que tomen decisiones informadas y proteger su privacidad y seguridad en línea. Esta iniciativa representa un paso importante en la lucha contra las prácticas engañosas y abusivas en el diseño web, y refleja el compromiso de Aurora con la creación de una experiencia digital más ética y centrada en el usuario.
Para desarrollar la extensión de Aurora Guard para Google Chrome, es imprescindible contar con conocimientos sólidos en varios lenguajes de programación y herramientas especializadas. Entre las habilidades y recursos necesarios se destacan:

HTML:

HTML es un lenguaje de marcado fundamental para estructurar y organizar el contenido de Aurora. Mediante etiquetas y elementos, HTML permite definir la jerarquía y disposición de los elementos visuales que componen la interfaz de Aurora Guard.

CSS:

CSS, otro pilar esencial en el desarrollo de Aurora, es un lenguaje de estilos que se emplea para dar diseño, formato y aspecto visual al contenido creado con HTML. Con CSS, es posible definir colores, tipografías, márgenes, espaciados y otros aspectos estéticos que contribuyen a la apariencia de Aurora Guard.

JAVASCRIPT:

JavaScript, un lenguaje de programación indispensable para implementar la lógica y la funcionalidad interactiva de Aurora Guard. A través de JavaScript, es factible añadir interactividad, realizar acciones dinámicas y gestionar eventos que respondan a las interacciones del usuario con Aurora.

JSON:

Formato de datos para configurar y almacenar la información de Aurora Guard. Adicionalmente, es importante utilizar un editor de texto adecuado para escribir y gestionar el código de Aurora. En este proyecto, se utiliza Visual Studio Code.

Visual Studio Code

Visual Studio Code (VS Code), es un editor de texto ligero. Su atractivo radica en la perfecta unión entre una interfaz sencilla y funcionalidades avanzadas, convirtiéndolo en una de las herramientas preferidas por los desarrolladores de software en todo el mundo.
Aurora Guard ha incorporado Visual Studio Code como herramienta de trabajo, aprovechando las características que esta plataforma ofrece. VS Code combina simplicidad, funcionalidad avanzada, extensibilidad y versatilidad en un único paquete, lo que ha impulsado la eficiencia y calidad en el desarrollo de Aurora Guard.
La característica más destacada de Visual Studio Code es su capacidad de adaptarse a las necesidades individuales de cada usuario a través de su extensibilidad. Gracias al sistema de Aurora Guard, los desarrolladores pueden personalizar su entorno de trabajo de acuerdo a sus preferencias y requisitos específicos.
La continua evolución de Visual Studio Code, junto con el constante aporte de la comunidad de desarrolladores, aseguran que esta herramienta seguirá siendo fundamental en el arsenal de todo programador en el futuro cercano. Gracias a su robusta arquitectura y su capacidad para adaptarse a las necesidades cambiantes del desarrollo de software, Visual Studio Code se posiciona como una buena herramienta para Aurora Guard y sus proyectos futuros.

Además de estos pilares fundamentales, desarrollar Aurora Guard para Google Chrome también implica tener conocimientos en el uso de herramientas de desarrollo específicas para la plataforma, como el kit de desarrollo de Chrome, que proporciona recursos y funcionalidades para crear, depurar y empaquetar extensiones de forma eficiente y conforme a las directrices del navegador.

El desarrollo de la extensión de Aurora Guard para Google Chrome requiere de un conjunto diverso de habilidades técnicas y herramientas especializadas en HTML, CSS, JavaScript y JSON, junto con un profundo entendimiento de las buenas prácticas de programación y diseño web para garantizar una experiencia óptima y funcional para los usuarios.

¿Cómo se desarrolla una extensión?

Las extensiones de Google Chrome representan una herramienta para enriquecer y personalizar la experiencia de navegación de los usuarios en internet. Estos programas de software se integran directamente en el navegador Chrome, brindando funcionalidades adicionales que pueden simplificar tareas, mejorar la productividad y ofrecer nuevas formas de interactuar con el contenido web.
Al agregar Aurora Guard a Google Chrome, los usuarios pueden adaptar el navegador a sus necesidades específicas, añadiendo características que no están presentes en la versión estándar. Desde bloqueadores de anuncios hasta herramientas de productividad, las posibilidades son amplias y variadas.
En este contexto, Aurora Guard es un ejemplo destacado de una extensión para Google Chrome que se centra en proteger y empoderar a los usuarios durante su experiencia de navegación en línea. Aurora Guard está diseñada para identificar y alertar a los usuarios sobre los denominados "patrones oscuros" presentes en diversas páginas web. Estos patrones oscuros hacen referencia a prácticas de diseño engañosas o manipulativas que buscan influir en el comportamiento de los usuarios de manera no ética.
A través de Aurora Guard, los usuarios pueden contar con una capa adicional de seguridad y conciencia al navegar por internet, permitiéndoles tomar decisiones más informadas y protegiéndolos de posibles engaños o situaciones perjudiciales. Aurora Guard no solo ofrece una mayor transparencia en la relación entre los usuarios y los sitios web que visitan, sino que también fomenta una cultura de navegación más responsable y segura.
Estos sistemas desempeñan un papel crucial en la mejora de la experiencia de navegación online al brindar herramientas especializadas y funciones adicionales que protegen y enriquecen la interacción de los usuarios con el contenido web, promoviendo así un entorno digital más ético, seguro y personalizable.

¿Cómo funciona una extensión?

Una extensión es una herramienta poderosa que puede agregar funcionalidades personalizadas a tu experiencia de navegación web. Pero, ¿Cómo funciona realmente una extensión?

1. Manifest File (manifest.json):

El archivo es como el cerebro de la extensión. Contiene información clave sobre la extensión en donde define detales como su nombre, versión, permisos necesarios y qué scripts o archivos necesarios se deben cargar.

2. Background Scripts:

Estos scripts de fondo son escritos en JavaScript y funcionan en segundo plano sin interferir con la actividad principal del navegador. Se encargan de manejar eventos de larga duración, como la sincronización de datos, notificaciones o cualquier tarea que no necesite interacción directa con el usuario.

3. Content Scripts:

Los scripts de contenido son ejecutados en el contexto de las páginas web que visita el usuario. Esto permite a la extensión manipular y modificar el contenido de las páginas web, brindando así una experiencia de usuario personalizada. Estos scripts pueden ser utilizados para agregar funcionalidades específicas a ciertos sitios web o para realizar acciones automatizadas.

4. User Interface (UI):

La interfaz de usuario (UI) de una extensión incluye elementos visuales que el usuario puede interactuar directamente. Estos elementos pueden ser botones en la barra de herramientas del navegador, menús desplegables, paneles de configuración, o cualquier otro elemento que facilite la interacción del usuario con la extensión.

¿Cómo creo una extensión?

Una extensión para navegador es una combinación de scripts que trabajan juntos para agregar nuevas funcionalidades, automatizar tareas o mejorar la experiencia de navegación del usuario. Cada parte de una extensión cumple un papel importante en su funcionamiento, desde el archivo de manifestó que la define, hasta los scripts que manipulan el contenido web y la interfaz de usuario que permite interactuar con la extensión.
A continuación, se describen los pasos básicos para crear una extensión de Google Chrome:

1. Configurar el Manifest File:

Crea un archivo manifest.json con la configuración básica de la extensión.

2. Desarrollar Background Scripts:

Escribe los scripts que se ejecutarán en segundo plano, como background.js.

3. Crear Content Scripts:

Desarrolla los scripts que interactuarán con las páginas web, como content.js.

3. Diseñar la Interfaz de Usuario:

Crea archivos HTML y CSS para la interfaz de usuario de la extensión, como popup.html y styles.css.

4. Probar la Extensión:

Carga la extensión en el navegador Chrome para probar su funcionalidad.

1. Abre Chrome y ve a chrome://extensions/.
2. Activa el Modo de desarrollador.
3. Haz clic en Cargar extensión descomprimida y selecciona la carpeta de tu proyecto.

5. Iterar y Mejorar:

Realiza pruebas y ajustes según sea necesario para asegurar que la extensión funcione correctamente y cumpla con su objetivo de proteger a los usuarios de patrones oscuros.

Extensión final Aurora Guard

Desarrollo de extensión: Aurora Guard

El desarrollo de la extensión, se basa en el uso de JSON y HTML para la estructura, complementado con CSS para entregarle su estilo. Con esta base tecnológica, se exploraron diversas metodologías para que la extensión pueda identificar los patrones oscuros de manera efectiva. Estas son unas de las formas pensadas para darle funcionalidad a la extensión, de manera en que pueda identificar los patrones oscuros, sin necesidad de inteligencia artificial.

Análisis de la estructura de la página: Las extensiones pueden examinar el código fuente de una página web en busca de patrones específicos que sugieran la presencia de dark patterns. Por ejemplo, pueden buscar la presencia de elementos como casillas de verificación preseleccionadas, ventanas emergentes engañosas o letras pequeñas que ocultan información importante.

Seguimiento de la interacción del usuario: Algunas extensiones pueden rastrear la forma en que los usuarios interactúan con una página web y detectar acciones que podrían indicar la presencia de dark patterns. Por ejemplo, pueden detectar si un usuario hace clic en una ventana emergente sin leer su contenido completo o si intenta cancelar una suscripción pero se enfrenta a obstáculos innecesarios.

Comparación con una base de datos de patrones conocidos: Algunas extensiones pueden comparar el diseño y el comportamiento de una página web con una base de datos de dark patterns conocidos. Si encuentran similitudes significativas, pueden alertar al usuario sobre la posible presencia de prácticas manipuladoras.

En el caso de Aurora Guard, en primera instancia, se tiene la idea de que esta extensión pueda hacer comparativas en base a unos "patrones conocidos" entregados por una base da datos con anterioridad al manifest.json y que esta comparación se pueda hacer mediante la lectura de la página. Pero debido a temas de tiempo y estudios, se le da al manifest.json una previa "base de datos" que consiste en unos urls específicos, en los cuales esta extensión va a funcionar.

Primera fase

En la fase inicial del desarrollo de la extensión, se ha planteado un proceso en el cual el usuario puede activar la herramienta cuando tenga sospechas al acceder a una página web. Esta funcionalidad se implementaría mediante un botón intuitivo que se presentaría al activar la extensión. Una vez que el usuario activa la extensión, esta procedería a realizar un análisis de la página para detectar y contar el número de patrones oscuros presentes en ella. La funcionalidad no se puede llevar a cabo, pero se trabaja en la ventana desplegable y su diagramación.

Segunda fase

Se le agrega una alerta de Google en el content.js de la extensión, la cual aparece cada vez que el usuario entre a uno de los urls entregados anteriormente, al momento de darle aceptar a esa alerta se espera que automáticamente se abra la ventana desplegable de la primera fase desde el icono de la extensión, la cuál, lee la página en la que se esta navegando y te debería decir cuál es el tipo de patrón oscuro detectado. La funcionalidad de la comparación sigue sin funcionar, pero se avanza en agregar estas alertas que aparecen automáticamente al entrar ciertas páginas web.

Tercera fase

Ya en la tercera fase, se cae en cuenta que la funcionalidad que se le quiere dar a la extensión, no se puede llevar a cabo. se le pregunta a Chatgpt el porque del error y responde que no se puede debido a la API de Chrome, que no permite abrir automáticamente el popup de la extensión mediante código. Dio varias soluciones para realizar una visualización de esta funcionalidad, pero aún así, no se podía visualizar debido a estos permisos de la API. Pero se avanza en el look & feel final de estas alertas, y se trabaja en el css y sus ventanas desplegables. El funcionamiento que se logra es que al entrar a la url aparece esta primera alerta de parte de Google, la misma que en el segunda fase, y luego al apretar el icono de la extensión aparece el tipo de patrón detectado y se le agrega un botón que abre una nueva ventana que te permite desactivar la extensión en ese sitio web especifico.