C2: Laberinto Transparente - Oficina B

Título	C2: Laberinto Transparente - Oficina B
Tipo de Proyecto	Proyecto de Taller
Asignatura	Taller de Diseño de Interacción
Del Curso	Taller de Diseño de Interacción 2024
Carreras	Diseño
Alumno(s)	María de la Luz Fernández, Ignacio Osorio, Angelica Andueza, Carla Lorca, Alejandra Collao, Diego Tapia Soto, Fernanda Farías
Profesor	Herbert Spencer

30.04 Definir aspectos gráficos mediante visualizaciones

Investigación (AI)

Resultado de Encuestas

Comentarios claves

"Patrones de uso que promueven malas prácticas ya sea éticas o de usabilidad de parte de plataformas web de servicios u organizaciones."
"No he indagado a profundidad, entiendo que es como una estrategia de juego sucio."
"Anuncios persistentes que te mandan a otro sitio cuando intentas quitarlos."
"Técnica sucia para engañar al usuario y entregar datos que no quiero entregar."
"No lo se, nunca había escuchado sobre eso"

Interacción de los Usuarios

Insights detectados

Los usuarios al no conocer los patrones oscuros, no comprendren y termina siendo un tema muy lejano para formar comunidad.
Muchas malas experiencias de los usuarios no tienen una buena llegada a las empresas responsables de proponer el blackpattern

Propuesta de Sitio de Comunidad : TraslaWeb,Traslucir lo que la web no quiere que sepas

TraslaWeb es el proyecto de un sitio de internet donde se formará comunidad mediante las malas experiencias del usuario en diversas páginas web, esta enfocada a que el usuario pueda reconocer los patrones oscuros para que entre ellos se adviertan y concientice al mismo tiempo a los creadores de estos patrones las malas prácticas que se pueden realizar, ver cdomo esta puede perjudicar a las empresas o equipos de trabajo y a su vez promover a los diseñadores el velar por la seguridad de las personas.

Por lo que mediante el sitio web, buscamos que el usuario sepa reconocer estas prácticas para que con el pasar del tiempo se le tome el peso a como esto perjudica la experiencia de usuario.

Publico Objetivo de TraslaWeb

Usuarios victimas del darkpatterns	Diseñadores y equipos de trabajo
Usuarios que hayan obtenido una mala experiencia con los patrones oscuros en distintos sitios web y desean informar a otros sobre sus dudas o desacuerdos en la experiencia, se busca generar comunidad mediante un público amplio. (Cualquier persona tiene malas experiencias o dudas sobre una web)	Organizaciones y sistemas que buscan concientizarse sobre los patrones oscuros mediante nuestro catalogo o noticias relacionadas al tema

Partitura de Interacción

Propuesta de Diseño del Sitio WEB

Usar la luz como metáfora de revelado de información, donde de manera visual trabajaremos el mostrar acciones y procesos.

En el sitio se muestran distintos patrones de interfaces, donde aparecen indiscriminadamente y plantea como propósito aprender desde la ignorancia de los dark pattern y a través de "juegos" dinámicos e interactivos. Es una página que también informa sobre los patrones oscuros donde por medio de herramientas visuales muestra cuáles son estos y cómo evitarlos.

Crear Comunidad

Dentro del sitio se incorporará un foro de personas que comentan sobre sus malas experiencias con el internet y páginas web, apuntando a los puntos de dolor de los usuarios.

Arquitectura de Información

(TI)

Recursos de desarrollo de TraslaWeb

Traslaweb se trabaja en base a las animaciones interactivas otorgadas por javacript, mediante visual studio code, se incorporará la programación y el codigo en un repositorio para consolidar la página web

Recursos javascript gratis

Diagramas y botones js : https://www.chartjs.org/

Animaciones js : https://codepen.io/collection/XLebem/?cursor=eyJwYWdlIjozfQ==

Animaciones para fotografías js : https://michalsnik.github.io/aos/

Paginas de plantillas de sitios gratis

Startbootstrap : Código compatible con github, editable, en lenguaje HTML y css.

Html5up : Código Abierto descargable, en lenguaje HTML, css y js.

Paginas de plantillas de sitios de pago

Template monster : (disponibles para celular, tablet y computador).
$52 USD
$19 USD
$$21 USD

Patrones Interactivos y Prueba de códigos

a) Cursor luminoso

b) Cambio de color

c) Aparición por sensor lento

d) Despliegue

a) Cursor luminoso

Plantillas Gratis

Páginas

https://startbootstrap.com/

Código compatible con github, editable, en lenguaje HTML y css.

https://html5up.net/

Código Abierto descargable

Recursos de luminosidades en p5js

Sktech 1

Sketch: [1]

modificación de movilidad mediante noise

Páginas

https://www.chartjs.org/

Librería flexible y sencilla para diseñadores y desarrolladores que pueden añadir gráficos y diagramas a sus proyectos en poco tiempo. Es de código abierto y tiene una licencia MIT.