Título	C2: Transparency - Oficina B
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)	Angelica Andueza, Arturo Céspedes, Fernanda Farías, María de la Luz Fernández, Alejandra Collao, Carla Lorca, Diego Tapia Soto, Ignacio Osorio
URL	https://traslaweb.com/

Transparency

Agencia de trabajo :

Gestión: Arturo Céspedes - María de la Luz Fernández
Investigación: Diego Tapia - Alejandra Collao
Desarrollo: Angelica Andueza - Fernanda Farias
Diseño Visual: Ignacio Osorio - Carla Lorca

Objetivo general

Transparency busca establecer una plataforma abierta de conocimientos ética y no éticamente aplicables en el diseño, donde por medio de la agregación de información, se construya una comunidad actualizada e informada sobre las estrategias mayormente utilizadas para influir en el comportamiento del usuario por parte de las empresas.

Objetivos especificos:

Viernes 26: Investigación acabada sobre el dark pattern, donde se busca establecer los primeros parámetros para levantar el proyecto.

Martes 30: Determinación de los elementos gráficos, tecnológicos y de navegación más adecuados para la construcción de un sitio web.

Viernes 3: Primeros bosquejos de diseño y prototipado de códigos en complemento de datos estadísticos en torno a su elección.

Martes 7: Definición más clara y consistente en función de la construcción del sitio web y todas sus aristas para su correcta elaboración.

Viernes 10: Desarrollo detallado de todas las áreas que conforman la oficina, buscando pulir todos los aspectos requeridos.

Martes 14: Acercamiento más pulcro en relación a lo propuesto en el objetivo general, se busca lograr una aproximación al resultado final.

Viernes 17: Entrega en completitud de lo solicitado (sitio web), en conjunto de un análisis escrito, con esquemas y videos que dan cuenta de toda la investigación previamente realizada.

Carta Gantt

Clase 1: Investigación DarkPattern

26.04 Investigación acabada sobre el dark pattern

Investigación (AI)

Dark Patterns

a) ¿Qué son?

En general, todos los Dark Patterns constan de elementos visuales con los cuales se pueden identificar, pero hay ciertos tipos que utilizan las imágenes, y el lenguaje para tratar de lograr que el usuario haga lo que la empresa quiere, son técnicas utilizadas en la interfaz de usuario,en ámbitos digitales como aplicaciones, sitios webs, entre otras. Estos tienen la intención de persuadir, engañar y/o manipular al usuario para que realice ciertas acciones.

b) ¿Cómo se caracterizan?

Se resaltan ciertos mensajes o botones accionables con colores cálidos: ROJO, NARANJA, AMARILLO

Hacer llamativa una opción que la empresa quiera que elija (Desviar la atención o desorientar al consumidor)
Se usa para exigir una acción (Acciones forzadas)
Se usa para denotar la escasez de algún producto (Señales de urgencia de escasez)
Denotar algún descuento de algún producto de manera ambigua, dificultando la comparación con otros (Obstáculo de comparación de precio)
El precio cambia del servicio solicitado, sin dar explicaciones de cuáles son las razones de la modificación al respecto (Precios por goteo o costos ocultos)

c) ¿Cuál es su propósito?

Desviar atención o desorientar a los consumidores: El diseño centra su atención a propósito en una cosa para distraerla de otra. (imágenes, lenguaje y emoción)
Anuncios disfrazados: Otro tipo de contenido o navegación, para que se haga click en ellos.
Opt-out por defecto Configurar opciones de forma predeterminada para que el usuario acepte algo, como suscripciones o compartir datos, a menos que actúe activamente para evitarlo.
Intersticial de miedo: Mostrar mensajes alarmantes o engañosos para presionar a los usuarios a tomar decisiones rápidas, como indicar que un producto está a punto de agotarse o que perderán una oferta si no compran de inmediato.
Sneak into Basket (Meter en la cesta sin consentimiento): Agregar productos automáticamente al carrito de compras sin el consentimiento claro del usuario, con la esperanza de que compren sin revisar detenidamente.
Confirmshaming (Vergüenza al confirmar): Utilizar lenguaje que induce culpa o vergüenza para disuadir a los usuarios de tomar decisiones que no benefician al sitio web, como rechazar una suscripción.
Suscripción oculta: Hacer que sea difícil para los usuarios cancelar sus suscripciones o darse de baja de servicios, ocultando los enlaces o complicando el proceso de cancelación. Al hacer clic en el botón "Compartir", aparece un cuadro de diálogo, donde pueden elegir un destinatario y decidir si "pueden editar" o "pueden ver". Si el usuario elige la opción "puede editar", esto crea silenciosamente una nueva suscripción mensual para el destinatario, que se paga automáticamente con la tarjeta de crédito del usuario que invita. Este costo adicional no se menciona en ninguna parte de la interfaz de usuario.

d) ¿Qué tipos existen?

Preguntas engañosas: Esto se suele dar al registrarse con un formulario en un servicio. Al mirar rápidamente las casillas puede parecer que se pregunta una cosa, pero si lees con más atención es una pregunta completamente diferente.

Colarse en la cesta: Ocurre cuando vas a comprar algo y en algún momento del proceso otro producto entra en tu cesta, sin que tú seas plenamente consciente.

Motel de cucarachas: Una de las técnicas más utilizadas para conseguir que el consumidor se comporte de una determinada manera es la denominada “motel de las cucarachas”, cuyo nombre explica bien cómo funciona.

Privacidad de Zuckerberg: "Privacy Zuckering", que lleva el nombre del cofundador de Facebook y director ejecutivo de Meta Platforms, Mark Zuckerberg , es una práctica que engaña al usuario para que comparta más información de la que pretendía. Los usuarios pueden revelar esta información sin saberlo o mediante prácticas que oscurecen o retrasan la opción de optar por no compartir su información privada.

Evitar la comparación de precios: Esto lleva a que sea más difícil tomar una decisión informada.

Distracción: Llevar tu atención de un elemento a otro.

Costes escondidos: Se da en el momento en el que llegas al último paso del proceso de compra y te das cuenta de que hay costes adicionales.

Cebo y cambio: Los patrones de cebo y cambio anuncian un producto o servicio gratuito (o a un precio muy reducido ) que no está disponible en absoluto o se almacena en pequeñas cantidades. Luego de anunciar la indisponibilidad del producto, la página presenta productos similares de mayor precio o menor calidad.

Confirma que te avergüenzas: En este caso se culpa al usuario de elegir una opción, como por ejemplo de no suscribirse a una newsletter. Sobre esta técnica ya escribimos un post que os aconsejamos leer si queréis conocer más sobre ella.

Anuncios disfrazados: Son anuncios escondidos para que hagas click en ellos sin ser consciente de que realmente es un anuncio.

Continuidad forzada: Cuando termina la prueba gratuita de un servicio y automáticamente empiezan a cobrar sin previo aviso.

Spam de amigos: Esto ocurre cuando se solicitan permisos al usuario justificándolo con un fin en concreto, pero después se envía spam a todos sus contactos en un mensaje que dice ser el usuario.

Dirección errónea: Común en los instaladores de software, la dirección errónea presenta al usuario un botón con la forma de un botón de continuación típico. Un patrón oscuro mostraría un botón prominente "Acepto estos términos" pidiendo al usuario que acepte los términos de un programa no relacionado con el que está intentando instalar.
’’’Los colores y la inercia:’’’ Otro de los ejemplos muy utilizados, en los que las cosas son confusas a propósito y llevan a que los consumidores hagan lo que la marca quiere y no lo que ellos desean, es el jugar con colores y otros elementos.

Casos de los Dark Patterns

Puede parecer que los dark patterns no forman parte de nuestro día a día, pero desafortunadamente sí que es así. Estas prácticas llegan incluso a ser sancionadas por la ley.

Hace unos años una plataforma fue llevada a los tribunales por utilizar la práctica del spam de amigos. Cuando se hacía el proceso de registro en ella, el usuario daba permiso para compartir sus contactos sin ser consciente de ello, y después estos correos recibían invitaciones para suscribirse a esta plataforma como si el usuario los hubiera enviado. Esta práctica le costó 13 millones de euros. Puedes leer en este enlace cómo era el problema perfectamente detallado.

Otro caso que es más habitual de lo que nos imaginamos es cuando se cambia la posición de elementos de navegación, especialmente cuando los usuarios tenían automatizado el uso de la misma.

En las redes sociales, nos encontramos bastantes dark patterns, especialmente en lo relativo a la protección de datos y las configuraciones de privacidad, aunque últimamente hay un comportamiento que ha empezado a ser demasiado habitual.

Dentro de las empresas que presentan los peores resultados, se encuentran ‘’Travel Security, Froens, Despegar.com, DirecTV, La Polar y Mundo Aromas.’’

¿Quienes necesitan conocimiento sobre dark patters?

Usuarios que consuman productos digitales como apps moviles y , sitios webs , los cuales pueden ser mas concientes y no caer en estas estrategias engañosas
Diseñadores de interfaz Ui que deben entender desde el codigo el uso y funcionamiento de estos patrones.
Empresas que utilizan el conocimiento de estos patrones para su uso, o para evitarlo.
¿Personas que trabajen en marketing lara ser concientes al momento de plantear estrategias de promocion y venta.

Tecnología (TI)

Diferencias Código Abierto y Código Cerrado

1. Precios

Código Abierto	Código Cerrado
Estos tipos de softwares tienen un costo menor por el ahorro de las licencias, pero pueden tener otros gastos como la asistencia técnica o mantenimiento.	Los softwares de código cerrado son de pago, y los precios varían según las funcionalidades, números de usuarios, entre otros factores.

2. Usabilidad

Código Abierto	Código Cerrado
Las guías del software están escritas y enfocadas para usuarios que están entendidos en el área y son desarrolladores, no son para usuarios sin conocimientos técnicos.	La usabilidad es ideal, ya que toda la documentación e información se encuentra detallada y bien escrita. Cuenta con instrucciones claras.

3. Seguridad

Código Abierto	Código Cerrado
Cualquier persona puede actualizar el código, visualizarlo, compartirlo y editarlo. A pesar de que los errores se corrigen más rápido que los software de código cerrado, no asegura que funcione correctamente ni que cumpla distintas normativas legales.	Este código solo se puede editar (en caso de falla) por el equipo de soporte y esperar la solución, por lo que reparar un problema conlleva mucho más tiempo. Lo bueno, se garantiza la calidad profesional de los consultores.

4. Innovación

Código Abierto	Código Cerrado
Existe libertad al momento de modificar el código, ya que no depende de ningún elaborador. Relacionado a lo anterior, las empresas pueden verse favorecidas por los cambios que desarrollen la comunidad de usuarios.	A pesar de que la empresa no puede modificar el código directamente, los elaboradores del software lo van actualizando constantemente con el fin de no perder ante la competencia, agregando que los cambios se realizan dependiendo de las demandas de los usuarios.

Programas gratuitos de código abierto

Github
Atom
Notepad++
Sublime text
Apache NetBeans IDE
CKEditor
Komodo Edit
CoffeCup HTML Editor

Editores de código HTML WYSIWYG

(What You See Is What You Get, es decir, se puede editar una página web a viendo los cambios a tiempo real, y sin la necesidad de la redacción de códigos, si no que, en algunos casos, se puede editar como maqueta pero teniendo la página real)

1.-WYSIWYG Web Builder (https://www.wysiwygwebbuilder.com/index.html)

Venden distintos grupos de extensiones a 19.95 USD, y un pack de todos los volúmenes (incluyen más de 100 extensiones) a 99.95 USD.

2.-Froala (https://froala.com/)

Plan profesional: 899 USD/al año o 2.699 USD/infinito
Empresarial: 1.999 USD/al año o 4.799 USD/infinito

3.-Brackets (https://brackets.io/)

Gratis

Páginas Web creadoras de Sitios Web

Wix: plataforma de creación de sitios web que ofrece una interfaz intuitiva y herramientas de inteligencia artificial para ayudarte a diseñar y personalizar tu sitio web sin necesidad de conocimientos técnicos.

Squarespace: es otra plataforma popular que proporciona herramientas de diseño visual y asistentes inteligentes para crear sitios web de aspecto profesional sin necesidad de codificación. Ofrece plantillas elegantes y una interfaz fácil de usar para personalizar el diseño y el contenido de tu sitio.

WordPress.com: es una plataforma de blogging que también ofrece capacidades de creación de sitios web. Con el plugin Jetpack, puedes acceder a herramientas como la optimización de SEO, análisis de tráfico y funcionalidades de diseño asistido que te pueden ayudar a construir tu sitio web de manera más rápida y sencilla.

Weebly: es un creador de sitios web que ofrece una interfaz intuitiva y funcionalidades de arrastrar y soltar para diseñar tu sitio web sin necesidad de conocimientos técnicos. También incluye herramientas de inteligencia artificial para sugerir diseños y funcionalidades basadas en tus preferencias.

Los planes:

1.-Plan Gratuito:

Para usuarios que desean crear un sitio web básico sin costo.
Incluye un subdominio de Weebly (tunombre.weebly.com).
Funciones limitadas.
Mostrará anuncios en tu sitio web.

2.-Plan Personal: $10-13 USD mensual

Una opción económica para usuarios individuales o pequeñas empresas.
Permite conectar un nombre de dominio personalizado (tuempresa.com).
Ofrece herramientas básicas de construcción de sitios web y soporte.

3.-Plan Profesional: $12-16 USD mensual

Más funcionalidades y herramientas avanzadas de diseño y marketing.
Sin anuncios de Weebly en tu sitio web.
Integraciones adicionales, como herramientas de SEO y análisis.

4.-Plan de Rendimiento: $26-29 USD mensual

Ideal para empresas y emprendedores que necesitan un sitio web más completo.
Incluye todas las características del plan Profesional, además de herramientas de comercio electrónico avanzadas.
Soporte prioritario y opciones de personalización adicionales.

Páginas que venden Dominios

El dominio (.cl o .com) tiene un costo por mensualidad generalmente anual, donde el valor va dentro de los 15.000 a los 30.000CLP.

NIC Chile: Es la entidad encargada de administrar los dominios .cl en Chile. Puedes registrar dominios .cl directamente a través de su sitio web: NIC Chile.

HostGator Chile: HostGator es un proveedor de servicios de alojamiento web que también ofrece registro de dominios. Puedes encontrar opciones para registrar dominios .cl y otras extensiones en su sitio web: HostGator Chile.

Bluehost Chile: Bluehost es otro proveedor de servicios de alojamiento web que ofrece registro de dominios. Puedes encontrar opciones para registrar dominios .cl y otras extensiones en su sitio web: Bluehost Chile.

GoDaddy Chile: GoDaddy es uno de los registradores de dominios más grandes y conocidos a nivel mundial. También ofrecen registro de dominios .cl y otras extensiones en su sitio web: GoDaddy Chile.

Diseño Visual (UI)

En general, todos los Dark Patterns constan de elementos visuales con los cuales se pueden identificar, pero hay ciertos tipos que utilizan las imágenes, y el lenguaje para tratar de lograr que el usuario haga lo que la empresa quiere.

Dark Patterns relacionados directamente a lo gráfico (visual):

Desviar atención o desorientar a los consumidores: El diseño centra su atención a propósito en una cosa para distraerla de otra. (imágenes, lenguaje y emoción)

Anuncios disfrazados: Se disfrazan como otro tipo de contenido o navegación, para que se haga click en ellos. Aquí, la publicidad se presenta de manera que parezca parte del contenido principal del sitio web, lo que puede confundir a los usuarios y hacer que hagan clic en anuncios sin darse cuenta de que son anuncios.

Opt-out por defecto: Configurar opciones de forma predeterminada para que el usuario acepte algo, como suscripciones o compartir datos, a menos que actúe activamente para evitarlo.

Intersticial de miedo: Mostrar mensajes alarmantes o engañosos para presionar a los usuarios a tomar decisiones rápidas, como indicar que un producto está a punto de agotarse o que perderán una oferta si no compran de inmediato.

Sneak into Basket (Meter en la cesta sin consentimiento): Agregar productos automáticamente al carrito de compras sin el consentimiento claro del usuario, con la esperanza de que compren sin revisar detenidamente.

Confirmshaming (Vergüenza al confirmar): Utilizar lenguaje que induce culpa o vergüenza para disuadir a los usuarios de tomar decisiones que no benefician al sitio web, como rechazar una suscripción.

Suscripción oculta: Hacer que sea difícil para los usuarios cancelar sus suscripciones o darse de baja de servicios, ocultando los enlaces o complicando el proceso de cancelación.

Empresas que utilizan la desviación de atención o desorientar:

Despegar.com
DirecTV
DirecTV GO
La Polar
Mundo Aromas
Banco Santander
Dafiti
Lenovo
Multimarcas Perfumes
Atrapalo
Easy
Skechers
Blab

Características similares/comunes entre distintos Dark Patterns:

Se resaltan ciertos mensajes o botones accionables con colores cálidos: ROJO, NARANJA, AMARILLO

Hacer llamativa una opción que la empresa quiera que elija (Desviar la atención o desorientar al consumidor)
Se usa para exigir una acción (Acciones forzadas)
Se usa para denotar la escasez de algún producto (Señales de urgencia de escasez)
Denotar algún descuento de algún producto de manera ambigua, dificultando la comparación con otros (Obstáculo de comparación de precio)
El precio cambia del servicio solicitado, sin dar explicaciones de cuáles son las razones de la modificación al respecto (Precios por goteo o costos ocultos)

Ejemplos Gráficos de Dark Patterns:

DAFITI: Acciones Forzadas
Cuponatic: Señales de urgencia y escasez
Ripley: Señales de urgencia y escasez
Travel Security: Señales de urgencia y escasez
La polar: Señales de urgencia y escasez
Direct TV: Desviar atención o desorientar al consumidor
Lenovo: Desviar atención o desorientar al consumidor
Santander: Desviar atención o desorientar al consumidor
A. Zendan: Obstáculo de comparación de precios
Viajes Falabella: Precios por goteo o costos ocultos
Dafiti: Finalizar compra
A. Zendan: Obstáculo de comparación de precios

Clase 2: TraslaWeb-Fundamento e Investigación

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

Tecnología (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

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.

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

Animaciones js.

https://michalsnik.github.io/aos/

Animaciones para fotografías js.

https://codepen.io/sharnajh/pen/YzXOGpm

Animación de variacion de color en botones grid

https://codepen.io/wilfred-mint/pen/rNxXorz

Animación modo claro-oscuro

Plantillas de pago

Template monster: https://www.templatemonster.com/ (disponibles para celular, tablet y computador)

$52 USD

Link: https://demo.templatemonster.com/demo/196280.html?_gl=1*qaavqt*_ga*MjA1MTA5MjYxMy4xNzE0NDAxMjQ4*_ga_FTPYEGT5LY*MTcxNDQwNjQyNS4yLjEuMTcxNDQwNjY3My4yNi4wLjA.

Live demo: https://demo.templatemonster.com/demo/196280.html?_gl=1*qaavqt*_ga*MjA1MTA5MjYxMy4xNzE0NDAxMjQ4*_ga_FTPYEGT5LY*MTcxNDQwNjQyNS4yLjEuMTcxNDQwNjY3My4yNi4wLjA.

$19 USD

$21 USD

Cuadro Comparativo Relación Tiempo-Costo

Archivo:Paleta de colores oficina b 1.jpg

Diseño Visual (UI)

Paleta de colores

Se determina el uso de colores "nocturnos" con el fin de expresar la temática principal del proyecto, mostrando los patrones oscuros como una mala practica y revelando los mismos mediante la oposición de luces, matices claros y otros mas llamativos.

Tonos Grises

Elegidos principalmente para el uso de títulos, texto y fondo de la pantalla, en donde se pretende generar un contraste entre los mas claros con los más oscuros.

Tonos Intensos

La selección surge desde la inspiración en proyectos donde se contrasta información relevante dentro de la plantilla; parte de los actos interactivos contaran con estos colores.

Tonos Cálidos

Pretenden ser utilizados para iluminar y revelar los patrones que son considerados como buenas prácticas dentro del diseño y de éste modo fomentar su uso en diversas plataformas.

Tonos Fríos

Considerados para provocar esta antítesis que surge en la ética del diseño en relación a los patrones oscuros expresando mediante luces y opacidades.

Tipografía

Comparación de tamaños

Se opta por una tipografía que transmita un sentido más futurista y que su forma sea simple y "seca" puesto que el sitio contendrá muchos elementos interactivos y formas variadas, por lo tanto, la idea es que la mirada no se desvíe en la letra, sino que se mantenga en los patrones oscuros que son la prioridad.

Wireframes

Clase 3: Prototipado Sitio Web

03.05 Primeros bosquejos de TraslaWeb mediante Figma

Pantallas

Inicialmente se elabora un montaje que propone el uso de diversas pantallas que se trasladan de una a otra mediante un click en donde en cada una de éstas se reparte la información a incorporar segmentada por categorías.

Estructura

Cambiando la idea inicial, en ésta ocasión se conforma un wireframe que da cuenta de la pantalla principal que es a su vez la que contiene toda la información a incorporar dentro del sitio, por lo tanto, el mecanismo para navegar dentro de TraslaWeb consiste en un scroll que permite abarcar toda la información.

1. Franja de etiquetas: a la izquierda se ubica el logo y a la derechas cada parte de la estructura.

2. Homepage: título y gráfica interactiva que se relaciona con el logo de TraslaWeb. Éste espacio tiene como propósito obtener la atención del usuario mediante animaciones que buscan lograr que las personas permanezcan dentro del sitio con total interés de navegar dentro de él.

3. Ejemplos: Promueve el aprendizaje mediante la exposición de ejemplos explícitos que dan cuenta de qué se tratan los patrones oscuros. Éstos aparecen con interacción dentro de burbujas que se inflan y desinflan para mostrar la información, el usuario no es quien lo controla, sino que simplemente cumple la acción de detenerse a observar algo que se muestra dinámicamente.

4. ¿Qué son?: Breve texto que explica lo que se reveló anteriormente y lo que aparecerá a continuación, de tal manera que el usuario logre comprender a grandes rasgos qué son los patrones oscuros, donde se encuentran y qué pretender lograr al ser utilizados.

5. Patrones: Elementos gráficos que muestran y hablan principalmente sobre patrones oscuros, pero ésta vez comparándolos con aquellas prácticas que son consideradas éticas dentro del diseño, de ésta manera, posiblemente el contenido que se quiere transmitir logre ser mejor recibido por los usuarios. Al pasar el mouse cada visualización ésta se pondrá clara u oscura (dependiendo de la categoría del patrón), pudiendo jugar entre las opacidades que buscan transparentar una información relevante.

6. Quienes lo hacen: Recuadro que da a conocer las empresas chilenas que más utilizan patrones oscuros dentro de sus plataformas y cuáles son los que usan para persuadir al usuario.

7. Categorías: Los tantos patrones investigados se agrupan en partes que dan cuenta de su relación siendo títulados por palabras claves que relacionan esa característica en común, y es en ésta sección en donde aparecen a través de un carrusel que los presenta.

8. Testimonios: Espacio que permite a los usuarios crear comunidad envíando sus propias experiencias al equipo de TraslaWeb para que posteriormente los publiquen dentro del miso sitio, ésta sección permite adjuntar archivos que respalden la descripción escrita dentro de uno de los recuadros, además que copiar el URL del sitio en donde se encontró el engaño.

9. TraslaWeb: Video que muestra en brevedad (no más allá de 1 minuto y medio) preguntas como ¿quiénes somos?, ¿qué pretendemos?, ¿cuál es nuestro propósito?, entre otras que pueden resultar en el camino.

10. Franja: Información leve sobre la oficina, el logo, dónde estamos ubicados, y las condiciones y términos legales.

Contenido

Textos

TraslaWeb

TraslaWeb es una plataforma que busca dar a conocer sobre las tácticas engañosas que son aplicadas al diseño de las páginas web; manipulando al usuario para que tome decisiones a beneficio de la misma.

Misión y Visión

Buscamos informar sobre los aspectos que caracterizan a los patrones engañosos, para dar a conocer sobre las aplicaciones no éticas del diseño de interacción en el medio digital.

Donde por medio de la agregación de contenido se actualice e informe a la comunidad sobre las estrategias utilizadas por parte de las empresas para influir en el comportamiento del usuario en el medio.

¿Qué son los patrones engañosos?

¿Te ha pasado que al entrar a un sitio web has tenido que forzosamente crear una cuenta o suscribirte a un servicio para poder acceder al contenido del mismo? Este es un aspecto de las prácticas que se les conoce como Patrones Oscuros o Dark Patterns.

Los patrones oscuros buscan controlar al usuario utilizando distintos aspectos del diseño, como el lenguaje, los colores y la disposición de los elementos, para causar que ceda y haga exactamente lo que la página quiere.

Categorías patrones oscuros

Preguntas engañosas/capciosas: Ponte en la situación que debes completar un formulario en algún sitio web; miras rápidamente una de las preguntas, contestas, pero al leer con atención te das cuenta de que lo que se te está preguntando es algo completamente distinto. Esto es hecho con la intención de que el usuario de una respuesta no deseada.
Colarse en la cesta: ¿A la hora de comprar algo en línea el sitio te mete algún artículo adicional en el carrito? Sucede debido a que posiblemente la página ya tenga seleccionada alguna opción que beneficie más a la empresa que a ti, como consumidor; también pueden aparecer como costos adicionales, como un seguro de viaje.
Motel de cucarachas: ¿Has hecho alguna vez una suscripción premium a algún servicio y te ha costado retirarlo? El nombre de este patrón oscuro explica bien esta situación; al igual que al reservar una noche en un hotel el trámite resulta ser bastante sencillo, al entrar te das cuenta que el lugar tiene cucarachas y lidiar con el problema de los insectos ya no lo es tanto, en pocas palabras; entrar es fácil, salir dificil.
Privacidad de Zuckering: ¿Utilizas Facebook? Entonces posiblemente te sonará la problemática que tuvo la plataforma hace algunos años, tras la revelación de que Facebook había estado recopilando y utilizando datos de sus usuarios sin consentimiento explícito. La privacidad de Zuckering, llamada así por el fundador de Facebook, Mark Zuckerberg; es una práctica que utiliza este tipo de plataformas para que tú como usuario compartas y reveles más información personal de manera inconsciente.
Evitar la comparación de precios: Estás tratando de comprar un producto o servicio en línea, pero al momento de querer saber cual tiene el precio más económico se te dificulta bastante, ¿a qué se debe esto?, es debido a que la forma en la que presentan la información está hecha a propósito confusa para el consumidor; juntando las características individuales de los productos, descuentos, entre otro tipo de información, lo cual resulta difícil de comparar.
Desviar atención o desorientar a los consumidores: Es muy seguro que con este patrón oscuro te has topado más de una vez, al entrar en una página es muy común que te pregunten si quieres habilitar las cookies, el botón de “Sí, acepto” es mucho más llamativo que el que niega el servicio ¿verdad?, este patrón busca distraerte de un elemento y que lleves tu atención a otro, mediante elementos gráficos como los colores llamativos o agrandar más un texto por encima de otro.
Precios por goteo o costos ocultos: Llegas al último paso para comprar ese producto, estás a punto de pagar cuando te das cuenta que han aparecido algunos cargos sorpresa a la compra, tales como impuestos y servicios adicionales; es usual que no se informe de estos cambios en el precio del producto hasta llegar a la etapa final de la compra.
Cebo y cambio: Ves una publicación de una compañía, en ella hay un enlace a un video y le das al link; resulta que para poder ver el video debes darle like a la publicación, te das cuenta tiempo después de que te empieza a aparecer publicidad de la compañía en tu propio muro de Facebook; esto ocurrió en 2010 con una publicación de Nike; este patrón oscuro busca llamar la atención del usuario con algún producto o servicio llamativo (gratuito o a precio reducido), que al interaccionar con estos resulta que ya no están disponibles o debes hacer algún tipo de acción para acceder a los servicios,
Vergüenza de confirmación/ Confirmshaming: ¿Al rechazar la oferta de algún servicio la opción suele decir algo como “No, prefiero pagar más” en vez de un simple “No, gracias”? Este patrón oscuro utiliza un lenguaje que apele a la emocionalidad del usuario para hacerlo sentir culpable de no cumplir con lo querido por la página; usualmente utilizado por las newsletters.
Anuncios Disfrazados: Te llega una notificación en una página, le das click y ¡oh!, resulta que es un anuncio; estos patrones hacen parecer que realmente puedes interactuar con ellos, pareciendo otro elemento más de la página; hasta que te das cuenta que realmente son solo anuncios.
Continuidad forzada o suscripciones ocultas: ¿Has solicitado alguna vez una prueba gratuita a algún servicio y te han pedido ingresar los datos de crédito? Esto puede derivar a que una vez que se te acabe la gratuidad, empiecen a cobrar de la tarjeta sin previamente avisar al usuario del costo de renovación del servicio.
Spam de amigos: ¿Alguna página o servicio te ha pedido el correo electrónico o un permiso para acceder a tus contactos? Lo justifican diciendo que utilizarán para un fin concreto, como encontrar conocidos en la plataforma; pero lo que terminan haciendo al final es envíar spam por mensaje a tus contactos.
Dirección errónea: ¿Has instalado alguna vez un software? Es común que en el proceso salga un botón que dice “Aceptar términos y condiciones”, algo que aceptas por costumbre, al hacer esto se podría instalar un programa no relacionado posteriormente, esto debido a que los autores del software hacen esto porque los autores del programa no relacionado pagan por cada instalación que realizan, obteniendo así un beneficio. La alternativa que permite omitir la instalación del programa se muestra mucho menos prominente o parece contraintuitiva, como “Rechazar los términos del servicio” .
Los colores y la inercia: ¿Te has querido dar de baja de un servicio y se te ha dificultado encontrar el botón para hacerlo? Se debe a que la página utiliza el diseño para hacer más llamativas las opciones que ellos quieren que elijas por encima de las que no les convienen, haciéndolas difíciles de encontrar o de percibir; utilizando tamaños de textos más amplios y colores que acostumbran al consumidor a un determinado tipo de acción dentro del sitio; implantando ese patrón en el inconsciente del usuario.
Señales de urgencia o escasez: ¿Te ha pasado que cuando compras en línea te sale un producto y la página avisa insistentemente que quedan pocas unidades? Lo hacen para que aumente el atractivo del producto y puede hacer que el consumidor pueda actuar bajo presión.
Acciones forzadas: Estás completando el último proceso de tu compra en línea, cuando te piden crear una cuenta para poder finalizarla; este tipo de práctica es de carácter obligatorio y al usuario no le queda de otra que tener que acceder para poder completar la compra al no haber otra opción para proceder.
Notificaciones de actividad: Estás navegando por el sitio web de compra, cuando te empiezan a llegar notificaciones de personas cerca de tu área geográfica que han estado comprando cierto tipo de productos. Este patrón oscuro está bastante ligado al de Señales de urgencia y escasez, al crear una presión artificial de escasez; la mayoría de veces estas notificaciones ni siquiera son en tiempo real o basadas en datos reales.

Testimonios dudosos

Estas viendo un producto en una página, al momento de bajar a mirar los comentarios y ver lo que la gente opina solo se observan testimonios destacados, y las calificaciones son de notas máximas; este tipo de comentarios sin ningún tipo de respaldo son sumamente sospechosos, al solo exponer clientes que han quedado satisfechos.

Patrones

Interacción

En base al wireframe, se construye un prototipo de sitio web, en donde se trabajan mayormente las interacciones dentro del mismo tratando las estructura general pero realizando pequeños cambios en función de una mejor legibilidad y utilizando la paleta y la tipografía definida

Resultado Figma

Clase 4: Montaje Figma y Sitio Web

07.05 Profundidad en el contenido y la animación

Contenido

Paleta de Color

Se define una paleta que contiene 5 colores en donde tienen tendencia a algo más oscuro, destacando entre ellos dos colores mas claros para resaltar elementos desde algo más frío, como también una opción más cálida y de éste modo tener una opción de juego entre las luces y sus opacidades.

Arquitectura de Información

Frente a los cambios realizados principalmente dirigido en la constracción de la pantalla, se requiere rehacer el mapa de arquitectura para poder representar todos los elementos visuales que permanecerán dentro de la pantalla principal, quedando como la única dentro del sitio web. además, la estructura sigue conformándose por tres grandes secciones que exponen la información: contenido, catálogo, quienes somos. En éstas, se presentan los patrones oscuros de manera lúdica mediante aspectos interactivos con los usuarios.

Comentarios

Hace algún tiempo decidí contratar un plan de adobe. Cuando estaba dentro del sitio aparecía una oferta atractiva que promocionaba todas las utilidades por 30.000 pesos mensuales, así que opté por contratarlo. Lo que no aparecía es que éste corresponde a un plan anual que se divide en “cuotas”, pero esa información jamás se vió a simple vista.

Realicé compras en Froens porque su puntuación era extrañamente buena ya que todos los comentarios aparecías asociados con el máximo de estrellas. Asi que confié y compre un articulo por primera vez, pero no alcanzó a durar ni siquiera UN MES... con el primer lavado quedó en vista su pésima calidad, probablemente las puntuaciones son falsas, asi que OJO!.

Antes de comprar algo investiga el producto y haz seguimiento, ya con esa pega hecha a conciencia creo que es más fácil no caer en el juego de los dark patterns. También, pregúntate: ¿Lo necesito? ¿Y si lo necesito, es urgente o puedo esperar?, calmar un poco la ansiedad para no caer en falsas ofertas.

Como cliente me he dado cuenta que varias empresas tienen algunos comportamientos que no me parecen correctos, y simplemente he preferido por dejarles de comprar. Me topé con muchísimas una vez que estuve realizando un estudio sobre los patrones oscuros, así que adiós con esas marcas.

Últimamente he estado en busca de un pasaje y me he encontrado con muchas estrategias engañosas en booking. Averiguando llegué a éste sitio y es realmente bueno para informarse sobre los patrones oscuros y así poder evitarlos... ¿es necesario engañar a los clientes para obtener más ventas? hay muchas empresas que no los utilizan y funcionan muy bien.

Ayer estaba comprando en Falabella y cuando iba a finalizar mi comprar decidí revisar mi carro de compras para asegurarme de que no me había faltado nada, pero en realidad lo que pasó fue que (sin saber cómo) añadieron un producto extra en mi carro... me pareció algo super invasivo y poco ético, realmente no me quiero imaginar cuantas veces me lo han hecho.

Patrones Oscuros

Al realizar el análisis en torno a aquellos patrones recopilados, se hace presente la idea de agruparlos de tal manera que salgan de lo convencional y puedan ser distinguidos en espacios mas amplios, quedando del siguiente modo:

Tras la Confusión

Tras la Mentira

Tras los Pagos no Deseados

Tras la Interrupción

Buenas Prácticas

Enviar spam o compartir a tus amigos	Preguntar al añadir al carrito de compras	Preguntar dos veces antes de continuar	Ocultar información poco relevante
Publicar en diferentes medios	¿Quieres algún articulo?	¿Estás seguro de ésta acción?	Término de uso... leer más

En contraste, es posible distinguir ciertos patrones que son considerados como buenas prácticas, considerando como un buen método de enseñanza y práctica, utilizar la parte contraria del foco principal para poder ejemplificar de manera extensa a qué nos referimos por patrones oscuros.

Sitios Revelados

EL VOLCAN: Precios por goteo o costos ocultos

En el último paso del proceso de pago han aparecido cargos inesperados. Algunos productos se presentan para comprar de forma individual, pero al revisar el carrito de compra se puede ver que automáticamente se aumentan las unidades del producto, sin antes consultarlo. Esto también sucede con otro tipo de productos y las cantidades agregadas varían, pueden ser editables pero no se puede bajar de unas unidades mínimas, lo que resulta sumamente extraño. Sobre todo cuando ya existen sets o productos que especifican el lote que se vende.

Ripley: Notificaciones de actividad

Mensajes llamativos que indican la actividad de otros usuarios. Los mensajes aparecen espontáneamente y tienen un tiempo de aparición, después de unos segundos se desvanecen. Parecen dividirse en tres categorías: Uno que notifica cuantas personas van a comprar el producto en ese momento, incitando al cliente a comprar. Uno que avisa cuántas personas han visto el producto que el cliente está viendo. Y uno que notifica que persona de qué región del país ha visto el producto en el último momento.

Mercado Libre: Acciones forzadas

Obligar al usuario a hacer una acción para completar su compra. No se puede ni acceder al proceso de compra ni al carrito para ver el producto. Al tratar de regresar automáticamente la página te dirige al menú de iniciar sesión.

Pedidos ya: Obstáculo en la comparación de precios

Se dificulta la comparación del precio de un artículo con otro, mediante la implementación de otros elementos en el medio visual. A veces algunos combos vienen con los descuentos propios de la cadena de alimentos como el caso Wendy’s, otras veces es con los propios descuentos del servicio, lo que hace aún más confusa la comparación de precios; pues los descuentos están dispuestos de distintas maneras.

Falabella: Señales de urgencia y escasez

Indican que un producto o servicio se agotará pronto, no esté disponible y/o haya cantidad limitadas. Se utilizan dos colores principales, el verde de falabella (la marca) y el rojo. El verde es para resaltar los descuentos y alguna gratuidad. El rojo es para marcar el límite de la oferta y lo fugaz de esta.

Bonoboss: Testimonios dudosos

Testimonios de clientes cuyo origen no está claro, dé una valoración muy positiva del producto o servicio. Las reseñas de usuarios verificados tienden a tener una estructura similar y referirse a temas en común; como la comodidad de los marcos, la alta calidad o lo lindos que son; siguiendo una misma pauta.

Santander: Colarse en el carrito de la compra:

Ocurre en el proceso de compra, el sitio introduce un artículo adicional en la canasta. Al realizar una simulación de crédito de consumo en el banco, se selecciona por defecto el seguro de Desgravamen, siendo que este es opcional.

La Polar: Desviar la atención o desorientar

El diseño a propósito centra tu atención en una cosa para distraerla de otra. El color principal de La Polar es el rojo, usan el mismo para destacar aquellas opciones que quieren que el usuario elija, haciéndolas más llamativas.

Sitio Web

Si bien el sitio web se está programando de manera independiente al diseño en figma, se vuelve indispensable concretar éste paso para ir definiendo y afinando los aspectos gráficos a incorporar dentro de TraslaWeb, evitando de éste modo caer en errores que dificulten el proceso de montaje en cuanto a códigos gráficos e interactivos.

Figma

Ya aproximándonos al término del montaje del prototipado en figma, se incorporan un conjunto de animaciones que hacen referencia a lo que se quiere aproximar dentro del sitio web, sin embargo, en ésta ocasión, se trata de una simulación más simple, en donde el foco principal está puesto en tratar la estructura, el contenido, y las interacciones a modo general.

link figma

Animación

Formulario

Se diseñó un formulario (aún debe terminar de adaptarse a la página final) que envía la información de respuestas a un mail, esto se logró gracias a https://web3forms.com/. Esta página te entrega un par de códigos que se integran al html y con js permite crear un sistema donde las respuestas del formulario te llegan ordenadas como mail (todo en las imágenes de abajo)

Respuesta

De éste modo, es como llega la información recopilada dentro del email correspondiente a traslaweb, para que posteriormente esa información pueda ser integrada en el sitio web y expuesta para todos los usuarios participantes del mismo.

Una manera sencilla y eficiente de recibir los testimonios de los usuarios, con un sistema claro y preciso en cuanto a la información solicitada y almacenada, permitiendo que ésta pueda ser transferida hacia el sitio web a la brevedad y sin mayores barreras.

Interacción

Códigos

HTML y CSS formulario

Slider de containers con movimiento hacia la izquierda en una sola fila

Slider con transparencia en containers

Grid column con distinta medidas

Con movimiento a la izquierda

Clase 5: Definición aspectos gráficos para el Sitio

10.05 Construcción de un sitio con estilo futurista-retro

Sitio web

Patrones oscuros

Se realizan algunos cambios sutiles para que existe una mejor relación con el trabajo que se está realizando dentro del sitio web en cuanto a los elementos visuales. El manejo de colores tiene una tendencia a lo oscuro, mientras que el uso de muchos marcos se reduce; además, los patrones se integran dentro de una franja que consta del mismo tamaño para todas las gráficas, de éste modo, se evita configurar un sitio en donde las partes son irregulares.

Avance Figma

Las modificaciones consisten en:

Resaltar los títulos quitando los marcos y manteniendo un solo color dentro de la tipografía
Conectar todos los botones de tal manera que se pueda navegar dentro de todo el sitio
Reubicar los elementos dentro del "homepage" y redefinir el tamaño de los escritos

link figma

Animación

Formulario

Como consecuencia del prototipo del formulario realizado anteriormente mediante la elaboración de códigos, es posible llevarlos a un sentido visual en consistencia con el sitio web, tanto en su tipografía, como en la paleta de colores, los trazos, las transparencias y las animaciones.

Interacción

Códigos

HTML y CSS formulario

Animación base de datos

Video

Estructura

Evitando integrar textos extensos y que puedan agotar al usuario, es que se decide elaborar un video que habla breve y lúdicamente sobre quiénes somos, qué queremos y además se indaga a grandes rasgos sobre la temática de los patrones oscuros

Contenido visual

Se buscan elementos que vayan con concordancia con lo que busca proyectar el sitio web, para que de éste modo, el conjunto tenga una armonía en su totalidad y no parezca que se unieron muchas partes sin relación alguna.

Introducción

Objetivo

Desarrollo

Cierre

Contenido escrito

Éstos se mostrarán como textos escritos que aparecen acompañados de imágenes, iconos estáticos o en movimientos, grabaciones, ilustraciones, entre otros. Por ende, no habrá voz en off ya que puede provocar distracción en el usuario

Introducción: ¿Quiénes somos?

Traslaweb es una página desarrollada por una oficina conformada por ocho diseñadores, estudiantes de la facultad de diseño de la Universidad Católica de Valparaíso (PUCV). La oficina está constituida por tres grupos que hicieron posible el desarrollo de este sitio web: AI, encargados de la arquitectura de información de la página, siendo esta el seguimiento de los pasos de la interacción posible en la misma; TI, encargados del código web, haciendo posible el diálogo del usuario con el medio; y UI, encargado de los elementos gráficos que dispone la página dándole una identidad reconocible.

Objetivo: ¿Qué pretendemos?

Buscamos dar a conocer las prácticas engañosas utilizadas por las páginas de muchas empresas, a través de la interacción del usuario con el sitio mediante el diseño de la interfaz. Visibilizando la conducta poco ética de las empresas que efectúan estas prácticas. Mostrando los tipos de tácticas que emplean y qué componentes las caracterizan mediante la implementación de elementos visuales en nuestra página, para poder ser así identificadas al ojo del usuario.

Desarrollo: ¿Qué son los patrones oscuros?

Con “tácticas” nos referimos a los patrones oscuros, los cuales son un concepto no muy mencionado. Los patrones oscuros son elementos dentro de las páginas web que han sido diseñados con el propósito de manipular y engañar al usuario para que hagan acciones que beneficien a la página. Utilizan varios elementos visuales para persuadir a la persona que se encuentra dentro del sitio. Existen de distintos tipos y están ligados a diferentes áreas interactuables dentro del medio digital.

Desarrollo: ¿Cómo reconocerlos?

Para poder identificar los patrones oscuros se debe conocer que utilizan varios aspectos del diseño; en el gráfico, emplean la psicología del color o el lenguaje para expresarse de cierta forma y causar una emoción en el usuario; y también usan aspectos del diseño interactivo, cómo redirigir la página a ciertas secciones de la misma manipulando su ubicación, son características comunes que tienen ciertos patrones que se disponen en el medio de estas maneras. Es por eso que tenemos la intención de mostrarles cómo reconocerlos utilizando ejemplos y casos de los mismos empleados por empresas de nuestro país, Chile.

Cierre: ¿Qué hacer con ellos?

¿Sabías lo que era un patrón oscuro?¿Te has encontrado con alguno de estos navegando por la web?. ¡Cuéntanos tu experiencia! Responsabilicemos a las empresas de sus prácticas engañosas. Para que no te vuelva a pasar y puedas denunciarlos exponiéndolos. Miras las secciones Ojo Piojo para ver más información y descubrir más de los patrones oscuros utilizados en los sitios de empresas, y el Catálogo donde se recopilan testimonios de usuarios insatisfechos y molestos por el uso de estas prácticas.

Clase 6: Aspectos gráficos en consistencia con el sitio

14.05 Acercamiento a los últimos detalles para la Completitud del Sitio

Contenido Visual

En ésta ocasión, se busca determinar con más fuerza los aspectos gráficos para que logren una aproximación a lo que se está construyendo en el sitio web, además de comenzar a profundizar en la elaboración de un video explicativo tanto de lo que es TraslaWeb, como algo breve en relación a los patrones oscuros.

Arquitectura de Información

Puesto que se han realizado cambios para el sitio, el cual a logrado una personalidad algo retro y al mismo tiempo futurista, y por otro lado se ha modificado la estructura de la página que se tenía en mente inicialmente, es que se requiere rehacer el mapa de arquitectura, buscando entreegar una mejor comprensión en torno al contenido que se expone en cada sección del sitio web.

Patrones oscuros

Queriendo disminuir los elementos incorporados anteriormente, es que se sacan marcos mientras que otros se mantienen pero sólo como contorno, utilizando efectos de iluminación, desenfoque y degradado para que éstos destaquen en coherencia con el sitio web.

Elementos video

Se determina que los íconos tienen que tener una consistencia visual entre sí, estando todos elaborados mediante trazos, o bien, con relleno. Evitando también, aspectos que contengan mucha información o formas muy complejas, ya que el fondo del video es lo que contendrá movimiento en conjunto de textos y música de fondo.

Avance video

Dentro del sitio web existe un espacio destinado para la integración de un video en donde se da cuenta de la misión particular que tiene TraslaWeb, además de una pincelada de información en relación a los patrones oscuros y de las secciones dentro del sitio que mencionan éstas prácticas y de qué manera se entrega dicho conocimiento.

Clase 7: Desarrollo de los últimos puntos a tocar

17.05 Ajuste en puntualidad para lograr un Sitio en completitud

Contenido Visual

Ya aproximándonos al término del ciclo 2 es que llega la etapa de pulir aspectos mínimos ya que las decisiones a grades rasgos están tomadas. Puesto que el sitio se está construyendo por partes las áreas se separan de ésta manera:

AI: encargados de construir las plantillas para la difusión del sitio web a través de instagram. También, propone una última manera de elaborar los patrones tanto éticos como también las malas prácticas.
UI: enfocados en rehacer el figma para que éste se adecue a los últimos cambios realizados en el montaje del sitio web. Por otro lado, se están encargando de ver el contenido dentro del video a incorporar.
TI: tienen como propósito armar la totalidad del sitio web, que en éste caso va la parte del home como pantalla principal, y los otros elementos que se integrarán en otras pantallas.
G: además que verificar la realización de cada tarea y documentar las mismas, una parte se dirige a TI y la otra se suma a UI.

Patrones oscuros

Los cambios consisten principalmente en reducir elementos que contengan otros y que de alguna manera puedan parecen excesivos, mientras que los textos disminuyen y las márgenes se adecuan para que el espacio sea más equilibrado. Las opacidades se modifican y algunos colores también, para que así pueda haber un mayor contraste.

Plantillas de difusión

Sabemos que "patrones oscuros" es un término poco conocido entre las personas a pesar de que es algo con lo que interactúan constantemente a través de los sitios web, por lo mismo, se crean graficar a publicar mediante Instagram y que de éste modo los usuarios puedan aprender más sobre éste mecanismo engañoso.

Avance video

Puesto que el sitio debe adecuarse a un formato de celular, es indispensable que lo esencial del video se ubique únicamente en el centro de la pantalla y que de ésta manera pueda ser visualizado por el usuario; por otro lado se añaden los íconos seleccionados y se hacen unas pequeñas modificaciones en el fondo en cuanto a los colores. Como otro aspecto fundamental es que se tuvo que reducir el tiempo del video para que su peso fuese menor, por lo mismo, fue necesario sacar el texto que consideráramos menos relevante a exponer.

Proyecto: Sitio web que crea comunidad

21.05 Agrupar los fragmentos para el desarrollo del sitio web

Nosotros

¿Qué pretendemos?

Teniendo como misión estos tres puntos es que se comienza a construir un sitio web que se conforma a partir de 3 secciones principales.

En una se expone información relacionada con los patrones oscuros y en contraste con las buenas prácticas, algunos de éstos representados mediante gráfica digitales y otros son imágenes que situaciones reales. De éste modo, el usuario interactúa con dichos elementos y aprende de manera dinámica. En un segundo punto nos encontramos con una sección que corresponde a la exposición de empresas en cuyos sitios web se encuentran reiteradamente el uso de patrones oscuros. El objetivo es visibilizar y que de éste modo los usuarios puedan tomar una decisión sobre qué hacer al realizar las compras de manera completamente consciente. Por último, se presenta un punto que busca dialogar con los participantes del sitio web de tal manera que puedan enviar propias experiencias para que esto se haga público y evitar que les ocurra a otras personas.

¿Cómo lo haremos?

Mediante un sitio web interactivo que atraiga la atención del usuario para que éste permanezca, aprenda y colabore con el mismo, generando un sentido de comunidad.

¿A quién nos dirigimos?

A través del diseño del sitio web (paleta de colores, tipografía, iconos, imágenes, etc), en conjunto de la interacción visual y el contenido incorporado, buscamos llegar a personas de un rango etareo entre 15 a 45 años aproximadamente, un segmento de personas que busca aprender sobre lo que existe cuando navegan por la web y al mismo tiempo evitar situaciones en donde sean inducidos a actuar de una manera que no quieren realmente.

¿En qué contexto ocurre?

Contenido Visual

Patrones oscuros	Buenas prácticas	Iconos	Gráficas
Abarcan gran parte de la sección y se muestran a partir de visualizaciones gráficas con un estilo coherente con el sitio. Representan situaciones similares a las que ocurren cuando se navega por la web, de modo que su reconocimiento se pueda asimilar con situaciones propias.	Corresponden a un número menor de ejemplos dentro del sitio, ya que su finalidad es que mediante la exposición en contraste de las prácticas poco éticas, se pueda comprender con claridad en que se diferencian unas de las otras. Son visualizaciones menos cargadas y que ocupan el mismo estilo del sitio.	Se incorporan con el propósito de que el usuario pueda comprender a grandes rasgos de qué trata el patrón que prontamente se expondrá, éste va a acompañado del nombre del patrón y una breve descripción en qué consiste. Su estilo entre líneas lo hace mas legible a simple vista.	Éste recuadro se encuentra en el homepage del sitio y corresponde a cuatro distintos que contienen las secciones existentes en cada pantalla de la página.

Patrones oscuros

A partir de lo que surge desde un comienzo es que se realizan una serie de cambios tanto en el contenido como en el aspecto visual de cada gráfica. Esto debido a que no se lograba transmitir con claridad de qué se trata cada patrón, requiriendo necesariamente del apoyo del texto utilizado, aspecto que como grupo se decidió dejar como algo complementario y no principal, buscando potenciar el propio lenguaje del diseño. En cuanto a éste aspecto mencionado, es que los colores se tratan principalmente entre blancos y negros con algunas opacidades bajas, generando una expresión futurista de cristal opaco. Por otro lado, los patrones se resaltan entre trazos más anchos y luces de color cálido, mientras que la suma de cajas desaparecen para darle cabida a las líneas.

Tras la confusión

Tras la mentira

Tras la interrupción

Tras los pagos

Buenas prácticas

Se realizan cambios similares que en los patrones oscuros, puesto que el propósito y las observaciones previas son similares, además, se sacan los textos para ser incorporados en el sitio web y que de éste modo puedan ser utilizados por los usuarios.

Iconos

Para que la información sea aun más clara, se añaden iconos en la primera capa de los patrones, de éste modo se puede deducir de que trata cada uno de ellos si es que en complemento se lee su nombre, para que cuando se haga click dentro del mismo aparezca la representación gráfica y no queden dudas de que lo se busca transmitir en cada segmento.

Gráficas Home

Para cada sección se elabora una gráfica utilizada en el homepage, ubicándose en el interior de recuadros que llevan a una sección determinada y al mismo tiempo, se encuentran dentro de la misma sección: prácticas, ojo piojo, cuéntanos, equipo

Contenido escrito

Patrones oscuros

Tras la mentira: Estos patrones oscuros buscan engañar mandando información falsa al usuario que lo presione o haga que se confíe.

¡Solo por tiempo limitado! (urgencia falsa): ¿Te ha pasado que cuando compras en línea te sale un producto y la página avisa insistentemente que quedan pocas unidades? Lo hacen para que aumente el atractivo del producto y hace que el consumidor pueda actuar bajo presión.

Comentarios de 5 estrellas (comentarios falsos): Estás viendo un producto en una página, al momento de bajar a mirar los comentarios y ver lo que la gente opina solo se observan testimonios destacados; son comentarios sin ningún tipo de respaldo sumamente sospechosos.

¡Quedan pocos! (escasez falsa): Es cuando te empiezan a llegar notificaciones de personas cerca de tu área que han estado comprando cierto tipo de productos. Crea una sensación artificial de escasez; la mayoría de veces estas notificaciones ni siquiera son en tiempo real.

Tras la confusión: Quieren confundir al usuario mediante el uso del lenguaje de manera ambigua o manipuladora; y el uso de elementos visuales que resaltan las opciones que benefician a la página.

Interferencia visual: Consiste en un patrón el cual emplea elementos visuales en la interfaz, para redireccionar el foco de atención del usuario. Esto puede verse tanto con elementos muy llamativos como imágenes y colores fuertes, sobrecargando el sitio; o también puede opacar los elementos.

Lectura engañosa (Redacción engañosa): Se refiere a un patrón que busca inducir al usuario a realizar algo distinto a lo que quiere, buscando que se confunda, en donde la redacción se presenta de manera ambigua. Estas pueden ser condiciones de uso ambiguas, los botones con etiquetas poco intuitivas o engañosas, entre otras.

Comparación confusa: Estás tratando de comprar un producto en línea, al momento de querer comparar el precio se dificulta bastante, es debido a la forma en la que presentan la información, juntando las características individuales de los productos, descuentos, entre otros.

Dificultad al cancelar: ¿Te has querido dar de baja de un servicio y se te ha dificultado encontrar el botón para hacerlo? Se debe a que la página utiliza el diseño para hacer más llamativas las opciones que ellos quieren que elijas por encima de las que no les convienen.

Vergüenza de confirmación: ¿Al rechazar la oferta de algún servicio la opción suele decir algo como “No, prefiero pagar más” en vez de un simple “No, gracias”? Este patrón oscuro utiliza un lenguaje que apele a la emocionalidad del usuario para hacerlo sentir culpable.

Anuncios disfrazados: Te llega una notificación en una página, le das click y resulta que es un anuncio; estos patrones hacen parecer que realmente puedes interactuar con ellos, otro elemento más de la página; hasta que te das cuenta que son solo anuncios.

Tras los pagos: Buscan sacar dinero al usuario sin su consentimiento mediante cargos adicionales o suscripciones sin dar previo aviso de su inclusión.

Suscripción oculta: ¿Has solicitado alguna vez una prueba gratuita a algún servicio y te han pedido ingresar los datos de crédito? Esto puede derivar a que una vez que se te acabe la gratuidad, empiecen a cobrar de la tarjeta sin previamente avisar al usuario.

Carrito furtivo: ¿A la hora de comprar algo en línea el sitio te mete algún artículo adicional en el carrito? Sucede debido a que posiblemente la página ya tenga seleccionada alguna opción que beneficie más a la empresa que a ti, como consumidor.

Tras la interrupción: Interrumpen alguna tarea que está realizando el usuario en el sitio mediante elementos como anuncios o procesos secundarios, que no permiten finalizar con comodidad el proceso.

Obstrucción: Este patrón se refiere a elementos de la interfaz que incorporan barreras, buscando dificultar el flujo del usuario complicando realizar ciertas acciones. Pueden solicitar demasiada información o dividir el proceso en varias partes.

Preselección: Consiste en un patrón que selecciona de forma automática opciones en la interfaz, antes de que el usuario pueda hacerlo o sea consciente de la selección. Al preseleccionar opciones trata de inducir al usuario a un tipo de respuesta y acción restringiendo la toma de decisiones en su experiencia,

Acción forzada: Estás completando el último proceso de tu compra en línea, cuando te piden crear una cuenta para poder finalizarla; este tipo de práctica es de carácter obligatorio y al usuario no le queda de otra que tener que acceder para poder completar la compra.

Buenas prácticas

Una buena práctica es una opción más ética de cómo una página podría realizar tácticas que busquen el beneficio de la página, sin pasar encima del beneficio del usuario.

Preguntar dos veces: Esta herramienta se debe utilizar con prudencia, no hay razón para utilizarla en preguntas banales, cómo si quieren cambiar el tema de la página. Pero cuando sea importante se debe hacer este tipo de doble confirmación, asegúrese de que las opciones para responder también se reiteren con la opción seleccionada por el usuario.

Ocultar información sin importancia: Para evitar los costos ocultos hay que sacar de la pantalla información que en ese momento no aporta nada, para la acción que el usuario quiera realizar dentro de la página. Resalte solo la información útil para el buen flujo del usuario por el sitio web.

Confirmación: En lugar de agregar artículos al carrito automáticamente, se abre un anuncio de artículos relacionados después de la selección de un producto por parte del usuario. Por ejemplo, si el usuario está añadiendo al carrito un celular de iPhone, sugerirle un cargador y/o unos auriculares IOS mediante un anuncio.

¿Enviar spam o compartir?: La solución ante el spam es una pregunta: “¿Le gustaría contarles a sus amigos y familiares sobre nosotros?” Sugiriendo al usuario compartir la página voluntariamente, pudiendo elegir a qué contactos mandarles un mensaje.

Sitio web

REVELEMOS LAS LUCES DE LA WEB: TraslaWeb, donde sacamos a la luz los engaños en internet. Buscamos dar a conocer las prácticas engañosas utilizadas en el internet, con el fin de que este se empiece a utilizar de manera más ética y responsable

¿Qué te puede ofrecer TraslaWeb?: Aquí podrás saber sobre... Los patrones oscuros: qué son, cómo se disponen en las páginas web y cómo identificarlos. Además de las buenas prácticas a seguir. Podrás verlo acá, en Traslaweb!

Prácticas engañosas en la web

¿Sabes qué es y cómo reconocer un patrón oscuro? Ve al catálogo de patrones oscuros para averiguar más!
Que sus rebajas y ofertas de tiempo limitado no te engañen!!
¿Quieres saber a qué tipo de tiendas pertenecen estos patrones? Te invitamos a revisar la sección de Ojo Piojo

Comunidad: ¿Te has topado con algún patrón oscuro? ¿Quisieras contar tu experiencia?¡No eres el único! Ve a la comunidad para ver qué patrones oscuros se han visto!

Quienes somos: ¿Te gustaría ser parte del equipo que está detrás de TraslaWeb? Ve a equipo y contacto para formar parte de nosotros!

Equipo de TraslaWeb: Somos un equipo conformado por ocho diseñadores, estudiantes de la facultad de diseño de la Universidad Católica de Valparaíso (PUCV). Buscamos transparentar las prácticas engañosas ejercidas por las páginas web mediante la interacción del usuario con la interfaz del sitio.

Gestión y Documentación: El equipo de gestión, es el que encabeza a los demás grupos, lleva el registro de las tareas de los demás y establece un orden dentro de la oficina.
Desarrollo Web: Equipo encargado del código del sitio web, haciendo posible el diálogo del usuario con el medio de la interfaz.
Diseño Visual: Encargados de los elementos gráficos que dispone la página, dándole una identidad reconocible para el medio digital.
Investigación: Encargados de la arquitectura de información de la página, y de los datos recopilados, que hace posible su difusión en la página.

Video

Se mantiene al aspecto general de las ideas desarrolladas previamente, sin embargo, en ésta ocasión se modifican levemente los iconos trabajándolos mediante trazos y no llenos; además, se les incorpora una pequeña luz en el contorno para que siga la continuidad visual del sitio web en su totalidad.

Figma

video

Sitio WEB

Códigos

PDF

Interacción

Archivo

Testeo: Navegación del Sitio Web

24.05 Uso de TraslaWEB por usuarios que desconocen del mismo

Objetivo

Mostrar el sitio construido a usuarios de diversos rangos etáreos con el propósito de obtener un resultado certero en cuando a su funcionalidad, diseño, interacción, estructura y contenido en relación a cómo las personas navegan dentro del mismo.

Agustín - 15 años

Eficacia: logró completar la tarea
Eficiencia: se demora 12 segundos en llegar a la sección prácticas (se queda un tiempo en el home apenas ingresa) y se mantiene 73 segundos dentro de ésta
Observaciones: Su primera impresión es de asombro (positivo). Comenta que le incomodan algo las luces de los iconos pero que de todos modos los encuentra legibles al igual que las gráficas que van debajo. Le gusta como aparecen nuevas imágenes al dejar el cursor sobre éstas. No se detiene mucho tiempo a mirar cada cosa ya que no es un tema de su interés, simplemente obedece a las tareas que se le dan y las realiza en un tiempo acotado para dar su opinión. Lo que más le llama la atención son las animaciones interactivas dentro del sitio

Gonzalo - 71 años

Eficacia: logró completar la tarea
Eficiencia: se demora 47 segundos en llegar a la sección prácticas (se queda un tiempo extenso en el home revisando lo que aparece) y se mantiene 388 segundos dentro de ésta
Observaciones: Apenas ingresa comenta con felicidad que le gusta “el globo” que se mueve y como aparecen las gráficas de la parte inferior. Luego se detiene un rato para esperar las instrucciones y apenas las recibe avanza a la barra superior para ingresar a prácticas. Comenta que las luces le incomodan pero que le parecen super legibles los iconos. Se detiene a leer cada uno de los patrones y se identifica con alguno de ellos. Considera que la descripción es clara aunque algunos elementos de las gráficas no los logra distinguir porque a su parecer son pequeños. Encuentra interesante como se expone la información.

Emilia - 54 años

Eficacia: Logró completar la tarea.
Eficiencia: Demoró 2.49 minutos.
Observaciones: Apenas se carga la página le chocan las luces de fondo. Lee el título e inmediatamente clickea el botón de “¿qué es TraslaWeb?”, lo lee y entiende de qué trata. Luego de hacer scroll llega a las categorías, lee la primera y hace click (para abrirlo en otra pestaña), mientras continúa leyendo las otras categorías. Encuentra que en general hay mucha información visual, la cansa y confunde un poco. Para la primera tarea llega mediante el botón de categorías, y lee la información propuesta. Al ver los íconos no es intuitivo para ella posicionar el cursor sobre éste, pero destaca la conexión entre el ejemplo visual con el texto. Lee distintos patrones y los comprende a la perfección. Vuelve a comentar sobre el exceso de información visual.

Bernardita - 26 años

Eficacia: Logró completar la tarea.
Eficiencia: Demoró 2.04 minutos.
Observaciones: La primera impresión de la página es que es distinto a lo normal, encuentra que es muy llamativo y eso no le agrada, muchas luces le molestan y desconcentran, sobre todo los movimientos de efectos. Visualiza el video pocos segundos y sigue haciendo scroll, no le llama la atención. Encuentra que la fila de texto carrusel está mal ubicada, ya que la información ya se dio, el “bienvenidx” debería estar sobre todo. Sigue bajando y lee las distintas categorías, opina también que el scroll es muy largo, el usuario prefiere páginas a modo de diapositivas. Iniciando la tarea, se dirige al menú superior para ir a prácticas, no le inspira apretar el botón de categoría al final del home. Comienza a leer y hacer scroll hasta llegar a las prácticas. Le gusta que haya un cambio de información al posicionar el cursor sobre el ícono, es intuitivo para ella, le acomodaría también que el ejemplo estuviera bajo el texto, pero sí destaca la relación ejemplo-información.

Elizabeth - 20 años

Eficacia: Logró completar la tarea.
Eficiencia: Demoró 4.23 minutos.
Observaciones: A primera instancia la página le pareció atractiva y linda. No puede seguirle el ritmo al video, la exposición del texto va demasiado rápido. Al ver los iconos de los patrones oscuros en la sección Prácticas ya se puede hacer una idea de que son, aunque encontró que los iconos no estaban alineados y eso le incomodó a la vista. Le gusta la transición del icono a la imagen y texto mediante el cursor, se queda un momento jugueteando con la interacción. Le gustaría que las buenas prácticas se aplicarán más, aunque a primera instancia no capta la idea de que se supone que quieren decir y los dos últimos no los termina de entender del todo. La primera tarea le dejó con curiosidad y quiere explorar más de la página.

Carlos - 57 años

Eficacia: Logró completar la tarea
Eficiencia: Demoró 11.00 minutos.
Observaciones: Le agrada el diseño de la página, lo encuentra estéticamente atractivo. La primera imagen que ve de la sección junto al texto “¿Qué son los patrones?” no la entiende, piensa que los elementos que la componen son muy pequeños. Las imágenes de abajo ya les encuentra más sentido y son legibles. Comprende la información presentada. El usuario revisa detalladamente cada icono de la página junto a su descripción. No comprende la explicación del patrón “Comparación confusa”. El icono de “Anuncios disfrazados” siente que no aclara mucho de lo que realmente es, cree con que estuviera el dibujo del personaje sin las letras estaría bien. Pasa los mismo con el icono de “Acción forzada”, no resultando claro al principio, teniendo que verlo detalladamente para encontrarle un sentido. Las Buenas prácticas le parecieron claras. La información le pareció útil, sintió que no le estaba dando antes la suficiente importancia a anteriores experiencias ocurridas en internet, donde le sucedieron situaciones similares de prácticas manipuladoras.

Rocio - 22 años

Eficacia: Logro completar la tarea.
Eficiencia: Demoró 1.39 minutos.
Observaciones: Rocío despliega el menú de hamburguesa desde el catálogo y se dirige directamente a la sección de prácticas. Su primera impresión es positiva, ya que le agrada la interacción de las luces en las imágenes. Al hacer scroll, comienzan a aparecer íconos, pero desde su celular no intuye que son clickeables. Al mencionarle esta funcionalidad, Rocío comenta que debería haber un icono visual que indique que se puede hacer clic. Al hacerlo en un ícono, le gusta que aparezca una imagen de fondo con más información. Opina que este enfoque hace que la experiencia de informarse sea más interactiva y entretenida.

Ana - 28 años

Eficacia: Logro completar la tarea.
Eficiencia: Demoró 1.10 minutos.
Observaciones: Ana desde su computador, se dirige a la sección de prácticas utilizando el menú en la parte superior. Al llegar a esta página, le gusta mucho la gráfica utilizada y como se resaltan las cosas con las luces. Hace scroll y se encuentra con la interacción de hover que cambia al pasar el cursor. Aunque encuentra la interacción muy entretenida, menciona que le distrae y se lleva toda su atención, haciendo que se convierta en un juego con estas características en lugar de leer el contenido de las imágenes

Carolina - 30 años

Eficacia: Logró completar tarea
Eficiencia: Demoró 3.42 minutos
Observaciones: Utiliza el menu superior para llegar a la sección y su primera impreción es de que le gusta visualemnte que es "bonito" y facil de usar, de desplaza con facilidad y se detiene a mirar algunos ejemplos y a leer mas nota que los iconos tal vez no os entiende muy bien y le cuesta leer los textos pequeños, según ella son muy pequeños, la luz hace que no los capte bien y le distrae un poco

Vicente - 24 años

Eficacia: Logró completar la tarea
Eficiencia: 7.45 segundos
Observaciones: Es rápido en revisar todo pone el mouse encima de cada elemento que se mueva y se detiene un rato a leer, considera que todo luce bien que los colores y dibujos incitan a seguir rebisando y es bastante cómodo, la manera de navegar es generica y se le hace facil entender todos los iconos y descripciones

Valentina - 25 años

Eficacia: Logró el objetivo
Eficiencia: 1:10 min
Observaciones: Valentina primero navega por el home revisando cada sección mientras realiza scroll, para luego volver y apretar el botón "¿Qué es TraslaWeb?". Pensó que la llevaría a otra página, por lo cual sintió cierta desilusión al ver que era parte del mismo scroll por el cual ya había pasado. Al llegar a la sección de "prácticas", le llama la atención el fondo estático y le gustaría ver un mayor aporte al slider que dice "Traslaweb-Patrones", que fuera algo tal vez más interactivo. Así como está, siente que no le aporta nada, además de que la velocidad es muy rápida. Navega fácilmente por la sección y le agrada que los textos sean breves y precisos, aparte de poder identificar ciertos patrones que ella ha presenciado en páginas web.

Susana - 63 años

Eficacia: Logró el objetivo
Eficiencia: 2:59
Observaciones: No es la primera sección que visita inicialmente, y por eso también la demora en llegar a esta. Logra navegar por la sección y reconocer ciertas prácticas que ha encontrado en sitios web, empieza a relatarme casos y ejemplos en donde no ha logrado sentirse segura en sitios web. Le interesa saber si con esta página puede averiguar si ciertos comportamientos de páginas son seguros o no.

persona - años

Eficacia:
Eficiencia:
Observaciones:

persona - años

Eficacia:
Eficiencia:
Observaciones:

Agustín - 15 años

Eficacia: logró completar la tarea
Eficiencia: se demora 2 segundos en llegar a la sección catálogo (no tiene dificultad en encontrar el botón superior) y se mantiene 37 segundos dentro de ésta
Observaciones: Las luces del contorno le incomodan menos aunque afirma que preferiría sacarlas (su dormitorio está completamente oscuro). Comenta que a pesar de eso le gusta mucho la combinación de colores y le agrada que el fondo sea oscuro. En todo momento en su rostro se ve una sonrisa revelando que lo que observa le parece bien. Sin embargo, en ningún momento hace click sobre algún archivo de la base de datos, solo pasa el cursor sobre éstas y comenta que le entretiene como se “expanden” las imágenes

Gonzalo - 71 años

Eficacia: logró completar la tarea
Eficiencia: se demora 2 segundos en llegar a la sección catálogo (no tiene dificultad en encontrar el botón superior) y se mantiene 94 segundos dentro de ésta
Observaciones: Lo primero que hace es apretar sobre la barra de “selecciona un tipo de patrón” aunque prefiere no hacer click sobre ninguno de ellos ya que dice aun no tener muy clara las diferencias. Posteriormente hace scroll y le llama la atención la cantidad de información que sigue apareciendo a lo largo del sitio. No abre ninguna de ellas, quizás la manera de mostrarse no le llama la atención. Dice que le parece cómodo que los ejemplos se iluminen levemente al dejar el cursor sobre éstas.

Emilia - 54 años

Eficacia: Logró completar la tarea.
Eficiencia: Demoró 2.33 minutos.
Observaciones: Para llegar al catálogo lo hace mediante el click al botón del menú superior. No le convence el carrusel de texto al inicio, y cree que el texto debiera ser de tamaño más grande. Al igual que el otro usuario, antes de ver el catálogo de patrones selecciona un tipo de patrón para probar. Al seleccionar uno lee su información y hace click en el botón de casiopea, comenta que lo hizo por mera curiosidad.

Bernardita - 26 años

Eficacia: Logró completar la tarea.
Eficiencia: Demoró 2.56 minutos.
Observaciones: No le agrada el carrusel de texto inicial, no se adapta a su vista y lo encuentra brusco. El botón de “ver todos” le confunde, al inicio no entiende su función y la pantalla no cambia nada cuando lo selecciona. Se dirige rápidamente a clickear el botón de “selecciona un tipo de patrón” y luego selecciona “tras la confusión”, observa a la brevedad algunos patrones y luego vuelve atrás. Le confunde un poco la interfaz pero eso ocurrió por no haber leído la información bajo el título. Selecciona un patrón pero no le nace ni leer su información ni clickear el botón de casiopea. Critica nuevamente el scroll tan extenso y cree que la información debería estar más condensada y más pequeña.

Elizabeth - 20 años

Eficacia: Logró completar la tarea.
Eficiencia: Demoró 3.46 minutos.
Observaciones: Se queja de que el encabezado es molesto ya que al bajar por la página este no se oculta y chocan con los demás elementos dentro del sitio. Nota que algunos recuadros de los casos no poseen imágenes y eso hace que pare un momento la actividad dentro de la página, pues le genera una discordancia. Comprende la explicación dada en cada caso. Después de entrar en la wiki Casiopea queda decepcionada pues esperaba que le dieran algún tipo de solución al caso.

Carlos - 57 años

Eficacia: Logró completar la tarea.
Eficiencia: Demoró 3.41 minutos.
Observaciones: No captó al principio cuál era el botón para seleccionar el tipo de patrón, se confundió con el botón ["Ver todo"]. Al momento de elegir el tipo de patrón le pareció confuso como seguir avanzando, sintió que la página tenía que moverse hacia los recuadros de los casos para que hubiera captado la idea, no fue muy intuitivo. Los textos le fueron claros al igual que las imágenes.

Rocio - 22 años

Eficacia: Logro completar la tarea con un poco de dificultad.
Eficiencia: Demoró 2 minutos.
Observaciones: El usuario accede a TraslaWeb desde su celular y queda impresionado por el diseño, ya que le parece profesional. Al hacer scroll, se encuentra con un texto en movimiento que le resulta molesto y distrae su atención, ya que no parece tener un fin claro. Continúa navegando y llega a los patrones desde el home y no desde el menú, le llama la atención el botón y decide hacer clic en el para explorar más y navega por el catálogo, encontrando interesante el efecto de luz de fondo en los casos. Sin embargo, siente que el diseño no es muy intuitivo, ya que no reconoce que los casos de estudio son botones y, por lo tanto, no sabe que puede hacer clic en ellos.

Ana - 28 años

Eficacia: Logro completar la tarea.
Eficiencia: Demoró 1.68 minutos.
Observaciones: Ana entra a la página de inicio y encuentra la interfaz un poco confusa pero atractiva a la vista, le parece llamativa la paleta de colores, sin embargo no puede comprender de inmediato de qué trata la página. Al indicarle que se dirija al catálogo, ella navega por la página de inicio, pero finalmente utiliza el menú de la parte superior para llegar a los "catálogos". Una vez allí, le gusta mucho la interacción de las luces detrás de los casos de estudio. Menciona que al hacer clic en uno y proceder a leerlo, al regresar, le gustaría que hubiese un botón de "volver" en lugar de la opción "ver todos".

Carolina - 30 años

Eficacia: Logró completar la tarea
Eficiencia: 4.23 segundos
Observaciones: Le gusta más que la sección de catálogo siente que es más ordenada y fácil de leer puesto que las letras están en blanco y no en beige, las imagenes que el presentan la incitan a leer y lee los ejmeplos completos antes de pasar a otro, le genera una sensación de impreción al conocer las tacticas de esta manera pero le acomoda y le causa más curiosidad. Le confunde el botón de ver todos puest ue no intuye que es para volver a ver los demás en la lista

Vicente - 24 años

Eficacia: Logró completar la tarea
Eficiencia: 7.53 segundos
Observaciones: Piensa que es más intuitiva puesto que la informaión es más directa, es bastante cómoda y llamativa, es interesante y los ejemplos de páginas lo hacen sentirse identificado, los colores son bastante dinamicos. Les fácil la lectura y siente que que los botones están bien colocados

Valentina - 25 años

Eficacia: No logró el objetivo
Eficiencia: 3:12
Observaciones: No entiende muy bien el contenido de la página, dice que no lo entiende y además encuentra la página muy oscura. Propone que pueda brillar un poco más o agregar algún elemento que te dé una instrucción de qué puedes hacer. No se logra percatar de que son elementos interactivos y se va rápidamente a otra sección.

Susana - 63 años

Eficacia: Logró el objetivo
Eficiencia: 0:39
Observaciones: Fue rápidamente a la primera sección por la cual navegó. De manera muy rápida entendió cómo era la interacción y pudo ir posteriormente a otra sección.

Susana Barrios

persona - años

Eficacia:
Eficiencia:
Observaciones:

persona - años

Eficacia:
Eficiencia:
Observaciones:

Agustín - 15 años

Eficacia: logró completar la tarea
Eficiencia: se demora 8 segundos en llegar a la sección cuéntanos (le cuesta encontrar la barra ya que se entrelaza con la base de datos) y se mantiene 44 segundos dentro de ésta
Observaciones: Se detiene un rato a observar los elementos que se mueven en el fondo. Luego avanza hacia abajo y llega al cuestionario en donde se detiene un rato a leer lo que aparece. Se le pregunta que pondría en cada parte y sus respuestas dan cuenta que entiende con claridad el propósito de cada casilla, sin embargo, considera preferible cambiar la frase de “link del sitio web” por alguna palabra que sea más clara para el usuario

Gonzalo - 71 años

Eficacia: logró completar la tarea
Eficiencia: se demora 16 segundos en llegar a la sección cuéntanos (le cuesta encontrar la barra ya que se entrelaza con la base de datos) y se mantiene 192 segundos dentro de ésta
Observaciones: Inicialmente no le queda del todo claro cuál es el propósito de ésta sección, se le explica el objetivo e inmediatamente se dirige a redactar un mensaje. Encuentra que el espacio es amplio (positivamente) y que los datos solicitados son precisos, sin embargo, al llegar a la parte del link se detiene pues no sabe qué poner. Recomienda especificar que se trata de algún sitio que contenga el patrón expuesto. Al enviar el cuestionario queda conforme con el resultado, pero como no entiende inglés, decide volver utilizando la barra del computador. Comenta que encuentra que el sitio es ordenado, le gustan los colores y los efectos, pero sobretodo que cada pantalla carga muy rápido.

Emilia - 54 años

Eficacia: Logró terminar la tarea.
Eficiencia: Demoró 1.24 minutos.
Observaciones: Para esta tarea, el usuario se dirige intuitiva y rápidamente al botón “cuéntanos” del menú superior. Luego se confunde y se da cuenta que no le daba mucha información el nombre, por lo que propone “¿te ha pasado?”. Completa sin problema el formulario y envía su respuesta.

Bernardita - 26 años

Eficacia: Logró terminar la tarea.
Eficiencia: Demoró 1.14 minutos.
Observaciones: Para esta tarea, el usuario se dirige intuitiva y rápidamente al botón “cuéntanos” del menú superior. Luego se confunde y se da cuenta que no le daba mucha información el nombre, por lo que propone “¿te ha pasado?”. Completa sin problema el formulario y envía su respuesta.

Elizabeth - 20 años

Eficacia: Logró terminar la tarea.
Eficiencia: Demoró 5.32 minutos.
Observaciones: Se queja de que el cursor desaparece al acercarlo a alguno de los recuadros de texto del formulario, dificultando la acción de redactar su experiencia. Encuentra el proceso fácil, se demora más que nada en redactar y encontrar la página del caso que quiere exponer, espera algún tipo de solución que pueda ofrecer TraslaWeb.

Carlos - 57 años

Eficacia: No logró completar la tarea.
Eficiencia: Demoró 1.54 minutos.
Observaciones: No pudo completar la tarea debido a que no pudo recordar ninguna página con algún patrón oscuro en concreto. Sin embargo igual interaccionó con el formulario y no tuvo problemas al momento de probar las casillas de texto.

Rocío - 22 años

Eficacia: Logro completar la tarea.
Eficiencia: Demoró 1.50 minutos.
Observaciones: Despliega el menú nuevamente desde su teléfono e intuye de inmediato que el título "Cuéntanos" está relacionado con el formulario. Al entrar en la página, menciona que rellenarlo es muy sencillo y le agrada que no sea complicado

Ana - 28 años

Eficacia: Logro completar la tarea.
Eficiencia: Demoró 1.04 minutos.
Observaciones: Ana, desde su computadora, asume que la opción "Cuéntanos" en el menú de barra es la página para realizar el formulario. Se dirige allí, pero menciona que el ícono de una tarjeta junto al formulario le hace pensar que podrían realizarle un cobro. Sin embargo, al empezar a rellenar el formulario, encuentra que es muy sencillo e intuitivo

Carolina - 30 años

Eficacia: Logró completar la tarea
Eficiencia: 10.86 segundos
Observaciones: No sabía que tenía que bajar para ver más contenido hatsa que tocó la rueda del mouse, siente que las letras que se mueven en ese caso llaman mucho la atención, siente que visualmente es más comoda la parte de abajo en la que aparece el formulario, tal vez este debería estar más arriba. Para ella no es tan intuitivo lo que significa el rellenar el formilario de opinió piensa que podría haber una descripción más detallada para saber por que, para que y hacia donde se dirige esa información, además de que los iconos de tarjetas a un lado le hacen pensar que le harán un cobro

Vicente - 24 años

Eficacia: Logró completar la tarea
Eficiencia: 2.60 segundos
Observaciones: Falta explicar que hay más pagina por recorrer puesto que solo se fijó gracias a la barra de scroll, opina que la información podría estar más compacta "tal vez podrían poner la descripción y al lado donde está esa bola poner el formulario" le gusta que los fondos sean negros puesto que le ayuda a descansar la vista. La sección se ve muy dispersa a sus ojos y con algunos elementos de sobra para algo que según su criterio debería no extenderse tanto o tener tanta ilustración. Más allá de eso siente que la información y el formulario son bastante faciles de comprender

Valentina - 25 años

Eficacia: Logró el objetivo
Eficiencia: 13 segundos
Observaciones: Logra llegar rápidamente a la sección y rellenar y enviar la información.

Susana Barrios - 63 años

Eficacia: Logró el objetivo
Eficiencia: 0:44
Observaciones: Me pregunta revisando la sección de ojopiojo si ella puede denunciar alguna página y rápidamente aprieta la sección "cuéntanos", cuya sección fue la que más interés le causó ya que podría realmente sentirse escuchada o validada si presenciaba nuevamente alguna mala práctica en algún sitio web.

persona - años

Eficacia:
Eficiencia:
Observaciones:

persona - años

Eficacia:
Eficiencia:
Observaciones:

Conclusiones de pruebas de Usuario

Después de llevar a cabo una serie de pruebas de usuario exhaustivas en el sitio web de Traslaweb, hemos compilado una amplia gama de conclusiones que arrojan luz sobre la experiencia de los usuarios y ofrecen una visión detallada de las áreas que requieren atención y mejora:

1.Estética Visual Atractiva:

Los usuarios han expresado una recepción positiva hacia la estética visual de Traslaweb. Los diseños atractivos y bien diseñados han demostrado ser un factor significativo para retener a los usuarios en el sitio, lo que sugiere que la presentación visual impacta positivamente en la experiencia del usuario.

2.Navegación Eficiente:

La elección de una navegación horizontal se ha mostrado como una opción acertada en términos de eficiencia y rapidez. Los usuarios han podido acceder a las tareas de manera accesible y han logrado completarlas con éxito. Este hallazgo subraya la importancia de una navegación intuitiva y fácil de usar para mejorar la experiencia del usuario.

3.Variedad de Interacciones:

La presencia de diversas interacciones en el sitio ha sido bien recibida por los usuarios. Estas diferentes formas de expresar el contenido han agregado valor a la experiencia del usuario, brindando variedad y enriqueciendo la interacción con el sitio.

4.Optimización de Textos:

Se ha identificado una oportunidad para mejorar la presentación de textos en el sitio. Si bien los textos actuales son concisos, existe la posibilidad de optimizarlos para una interacción más visual, lo que podría mejorar la legibilidad y la retención de información para los usuarios.

5.Recursos Distractivos:

Aunque la experiencia de navegación en general ha sido fluida, se ha observado la presencia de ciertos recursos que pueden resultar distractivos para los usuarios. Identificar y mitigar estos elementos ayudaría a mantener el enfoque del usuario en las tareas importantes y mejorar su experiencia en el sitio.

6.Mejora de Pantallas con Patrones Oscuros:

Se recomienda revisar y mejorar los ejemplos de pantallas con patrones oscuros en el sitio. La similitud entre estas pantallas puede causar confusión entre los usuarios, lo que afecta negativamente su capacidad para navegar de manera eficiente. Una diferenciación clara entre estas pantallas mejoraría la comprensión y la experiencia general del usuario.

7.Mejor Experiencia en Computadoras:

Se observa que Traslaweb ofrece mejores experiencias en computadoras en comparación con otros dispositivos. Esto se debe a que la plataforma logra interpretar de manera más efectiva las interacciones del usuario en entornos de escritorio. Es importante considerar esta disparidad en la experiencia entre dispositivos y buscar maneras de mejorar la usabilidad en dispositivos móviles y otros dispositivos alternativos.

8.Mejora del Lenguaje de los Botones:

Existe una oportunidad clara para mejorar el lenguaje utilizado en los botones del sitio. Un lenguaje más claro y directo puede guiar de manera más efectiva a los usuarios a través del proceso de navegación y mejorar la comprensión de las acciones disponibles. Esto incluye la claridad en las etiquetas de los botones y la consistencia en su uso a lo largo del sitio. Mediante la optimización del lenguaje de los botones, se puede facilitar significativamente la interacción del usuario y mejorar la experiencia general en Traslaweb.

9.Mejora de Categorías de Patrones Oscuros:

Se identifica la necesidad de mejorar la organización y claridad de las categorías de patrones oscuros en el sitio. Actualmente, la disposición de estas categorías puede resultar confusa para los usuarios, lo que dificulta la búsqueda y selección de los patrones deseados. Al reorganizar y clarificar estas categorías, se facilitará a los usuarios encontrar y utilizar los patrones oscuros de manera más eficiente, mejorando así la experiencia de diseño y personalización en Traslaweb.

En resumen, las pruebas de usuario han proporcionado una visión detallada de la experiencia de los usuarios en Traslaweb, destacando tanto los aspectos positivos como las áreas de mejora clave. Abordar estas áreas identificadas podría potenciar aún más la satisfacción y la eficiencia de los usuarios al interactuar con el sitio.