NodeUx
| Título | NodeUx |
|---|---|
| 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) | Paula Victoria Perez Triviño, Josefa Antris, Matías Morales Jiménez, Josefa Maldonado, Catalina López Guerra, Bárbara Arriaza Araya, Joel Henríquez, Benjamin Gonzalez Fuenzalida, Karina Morales |
| Profesor | Herbert Spencer |
| URL | http://nodeuxarchivadocs.com/ |
21 de mayo del 2024
Entrega Final
OFICINA
ArchivaDocs
ArchivaDocs es una oficina compuesta por nueve estudiantes de Diseño pertenecientes a la escuela de Arquitectura y Diseño de la Pontificia Universidad Católica de Valparaíso.
Dentro de la oficina se distribuyen distintas tareas a realizar, donde, para que se lleven a cabo, se conforman grupos de trabajo los cuales están encargados de elaborar y concretar dichas tareas. De esta forma, se lleva adelante el proyecto Nodeux, página web la cual busca informar y dar a conocer contenido sobre el diseño y los patrones oscuros.
| Grupo | Integrantes | Tarea |
|---|---|---|
| Look and feel |
|
|
| Contenido |
|
|
| Código |
|
|
| Gestión |
|
|
| Difusión |
|
|
MEDIO DE DIFUSIÓN
Instagram
La manera en que se establece el orden y la expresión de información en páginas de instagram para industrias u organizaciones se vuelve una descripción ligera y sencilla de comprender para el usuario.
A través de esto, realizamos una expresión del motivo y propósito que se trata, usando normalmente frases o textos que se definen por párrafos de máximo 3 líneas, y haciendo uso de una gama de hashtags que van relacionados a la temática o género que abarca.
Haciendo uso de gráficas sencillas y lineales que muestran un contraste definido y una lectura directa para generar una directa atención del usuario.
Acompañado a esto vemos un trabajo sobre las gráficas, donde en el caso de establecimientos ya reconocidos y registrados para la población con el objetivo de dar a entender un asunto principal en los posts.
Historias
Posts
- ¿Quiénes Somos?
- ¿Qué es Nodeux?
- ¿Qué son los patrones Oscuros?
Imágenes
PROYECTO
Nodeux
Objetivo
Como objetivo, nuestra página busca interactuar con la comunidad de diseñadores (independiente de las áreas de especialidad) para que aquellos obtengan información en cuanto a las cualidades del diseño, específicamente de los patrones oscuros que se suelen utilizar dentro del pensamiento de diseño de una web.
Al ser una página informativa, dentro de los métodos de enseñanza se hace uso de ejemplos interactivos los cuales buscan captar la atención, aportando en el aprendizaje asociativo de los usuarios, por medio de las relaciones mediante el texto, la interacción, memoria y lo visual.
Contenido
1. Acerca de:
- ¿Quiénes somos?
Somos ArchivaDOCS, una oficina de Diseño enfocada en las áreas de Interacción y Servicio con la visión de la Escuela de Arquitectura y Diseño de la Pontificia Universidad Católica de Valparaíso, proveniente de Chile. Nuestro equipo consta de nueve diseñadores de carácter Gráfico, Industrial e Interacción con antecedentes de hasta cinco años de experiencia en el estudio y formación de las áreas anteriormente mencionadas.
2. ¿Qué es el diseño?
El diseño se define como una disciplina la cual se encarga de comunicar a través de diferentes elementos visuales/interactivos que mantienen relación entre usuario y servicio. Los diseños se distribuyen en distintas áreas, donde se mantiene el mismo propósito que es el responder a una problemática ya sea compuesta para poder ser parte del avance de un proyecto, empresa, producto, o para solucionar algún aspecto que dentro de la sociedad cause algún enigma.
Dentro de ellos existen valores estéticos que predominan dentro del lenguaje comunicativo y que dentro de la confección se rigen por patrones realizados especialmente con la intención de crear un orden en donde, lo que se quiere expresar sea legible y comprensible. En este contexto, existen productos que son construidos por el hombre en el que se consideran fundamentos contextuales, funcionales y socioculturales.
En la sociedad, las personas interactuamos constantemente con elementos creados, y adaptados mediante a bases de diseño, desde objetos físicos a espacios fabricados por medio de la digitalización, entre otros. Cada elemento que dispone de un uso corresponde a un diseño.
- Tipos de Diseño
Los diferentes diseños expuestos y utilizados en la sociedad, se desarrollan de acuerdo a problemáticas y observaciones que van surgiendo y que a través de procesos y cualidades distintivas, es que estos son funcionales y capaces de desenvolverse en ambientes donde estos son adaptables de acuerdo al contexto por el cual fue solicitado. Dentro de los contextos a considerar, el diseño se desenvuelve en diferentes áreas o “tipos”.
Diseño Industrial
Desde electrodomésticos, muebles, maquinaria, etc. El diseño industrial se encarga de diseñar objetos o productos funcionales donde su objetivo principal consiste en mejorar la calidad de vida y experiencia a través de la innovación y satisfacción respecto a las necesidades específicas dentro de diversos contextos, dando énfasis a lo seguro, accesible, inclusivo y amigable con el medio ambiente. Pueden colaborar con diferentes profesionales para llevar a cabo el proceso de diseño, desde principio a fin.
Diseño Gráfico
Dentro de las ramas del diseño gráfico, nos podemos introducir en disciplinas creativas donde, se combina la comunicación visual y el arte, de forma que ambos se complementan para transmitir mensajes y conceptos al público a través de imágenes, texto y otros elementos gráficos que componen un cuerpo o espacio que dispone el contenido a expresar. Los diseñadores gráficos se desenvuelven en el área editorial, de fotografía, ilustración, etc. y requieren de fundamentos principales como la teoría del color.
Diseño de Interacción
El diseño de interacción se destaca por su enfoque en la relación entre usuario y servicio, buscando generar experiencias digitales valiosas y gratificantes. Se prioriza la creación de interfaces intuitivas y eficientes para facilitar una navegación fluida y simple. Este tipo de diseño se observa principalmente en aplicaciones, páginas web y software, donde se emplean conceptos como casos de estudio o arquitectura de la información.
- Diseño UX/UI
Diseño UX
Diseño de Experiencia de Usuario (UX) toma por definición como todo aquel diseño (digital o físico) encargado de poder comprender y mantener una buena relación entre el usuario y el servicio/Interfaz. Por medio de este se puede observar cómo se desenvuelve el usuario con las diferentes propuestas, siendo parte de un desarrollo el cual da paso a la mejora en cuanto a calidad de la interacción, centrándose más que nada en la sensación de la experiencia.
Palabras clave: User Experience - Usabilidad - Navegación - Emociones del Usuario
Diseño UI
Diseño de Interfaz de usuario (UI) se relaciona con el área del diseño gráfico. Dentro del, se incluyen elementos los cuales son una guía que complementan la información, de manera que orientan al consumidor dentro de la navegación. En los elementos podemos encontrar la tipografía, logo, íconos, paleta de colores, botones, etc. Además, de forma no visible, podemos interiorizar en el uso de grillas que permiten que la información expuesta dentro de la interfaz, se lea de una forma legible.
Palabras clave: Gráfica - Interfaz - HTML - CSS - Javascript
- Investigación de Usuario
En el ámbito de la experiencia de usuario (UX), se desarrollan diversos procesos que contribuyen a los diseños finales en este campo. La investigación de usuario, es un proceso de observación que implica análisis y estudios que, por medio de estos, se conoce y comprende los comportamientos cruciales de los usuarios; todo con el fin general de esta área, que se basa en entregar una experiencia gratificante al usuario.
Etapas
A continuación, se muestra el modelo de doble diamante el cual toma 4 fases y las estructura para que de esta forma, facilite y ayude en la identificación de problemas, cuestionamientos que por consiguiente se puede lograr buscar soluciones mediante la diversidad de ideas y procesos investigativos. Estas 4 fases son: Descubrir - Definir - Desarrollar - Entregar.
¿Cómo conocer al Usuario?
En las primeras etapas del doble diamante, nos encontramos con la de descubrir y definir. Para exteriorizar, desde la fase de descubrir, es donde se recopila información mediante la investigación y observación. De esta forma conocemos el territorio tecnológico, social y económico. Dentro de los tipos de información, contamos con datos cuantitativos y cualitativos. Aquellos nos permiten desarrollar esta etapa generativa en la que nos encontramos, donde podemos ir desde entrevistas, encuestas, a estadísticas, feedbacks, etc.. De esta manera se explora y empatiza con los usuarios.
Diseñar una Solución
El segundo diamante refiere todo los objetivos de desarrollo por los cuales se somete la ideación de la solución a las problemáticas, observaciones, que surgen en una primera instancia. En esta fase se trabaja con prototipos y se realizan procesos evaluativos, repetitivos, para estudiar el funcionamiento y mejorar ideas. En este transcurso se involucran usuarios para obtener comentarios, y de esta forma asegurar que las soluciones son efectivas, viables y funcionales. Luego de ejecutar los últimos detalles, se realizan las últimas pruebas y ajustes finales para luego hacer entrega del servicio a los usuarios a quienes va dirigido. Posterior al lanzamiento, se hace un seguimiento al producto o servicio para garantizar que este cumpla con los objetivos propuestos.
3. Campo laboral:
El diseño de interacción, dentro de su campo laboral, ofrece un repertorio extenso de posibilidades profesionales. Dentro de las responsabilidades que incluye este diseño, podemos ver el cómo se confeccionan páginas intuitivas; considerando que, para que este pensamiento se lleve a cabo, pasamos por etapas como la investigación de usuario (Diseño UX), y que, siguiendo el proceso de desarrollo para un resultado final, podemos comprender que luego esta experiencia e información recae en procesos gráficos y por consiguiente es tratado por diferentes profesionales que suelen colaborar como equipo para garantizar que los productos sean funcionales y atractivos.
A continuación, se exponen 9 campos laborales en los cuales un diseñador de interacción se puede desenvolver.
- Diseñador UX/UI
El diseñador UX se dedica a optimizar el desarrollo de la experiencia del usuario en relación con el servicio proporcionado por el diseñador. Por otro lado, el diseñador UI se ocupa del aspecto visual y la interacción gráfica que el servicio puede otorgar, asegurándose de que sea atractivo y funcional. Ambos roles colaboran entre sí para garantizar que el producto final cumpla con los requisitos correspondientes.
- Investigador UX
El Investigador UX dirige el desarrollo del servicio según el estudio del comportamiento de los usuarios. Puede ser vital para el equipo al momento de evaluar casos de estudio e investigaciones de usuarios para el presente y la posteridad.
- Redactor UX
El redactor UX se encarga de redactar los textos del servicio, crea el hilo conductor del cual los usuarios se guían por medio de la lectura a través de la aplicación o sitio web.
- Líder de Diseño UX
El UX Lead es el encargado de diseñar las estrategias que llevarán a cabo la optimización de la experiencia del usuario respecto a los servicios de la empresa y sus sitios. Este rol consta de comprender estrategias de negocios y llevarlas a cabo para rendir un bien a las expectativas y necesidades de los usuarios.
- Arquitecto de la Información
El arquitecto de información organiza todos los datos y crea una estructura clave de la cual se desarrollará la aplicación, a través de estructuras que especifican cómo se desenvuelven y conectan todas las páginas. Se busca que esta estructura facilite la navegación por parte del usuario a favor de una experiencia óptima, certera y cómoda.
- Desarrollador web especializado en UX/UI
El desarrollador web diseña desde el código toda infraestructura del sitio en cuestión, empleando los conceptos UX / UI y sus atributos para que este contribuya a las necesidades de los usuarios. Es importante destacar que es necesario el aporte de la conceptualización previa del producto (Diseñada a partir de las áreas de trabajo UX / UI) para que el proceso del código de la aplicación o sitio web sea más llevadero.
- Consultor de UX/UI
El consultor UX / UI es aquel profesional con los conocimientos de estrategias de marketing y diseño necesarios para prevenir y encontrar fallos en el desarrollo web y hallar mejoras en aquellos factores que no están totalmente optimizados.
- Diseñador de Interacción
El profesional en el área del Diseño de Interacción o IxD planifica y desarrolla todos los componentes que tendrá a futuro el servicio web y el cómo será el comportamiento del usuario antes este. Está enfocado en el desempeño de la página y en el planteamiento de la interacción entre personas, interfaz y experiencia.
- Diseñador de Publicidad Digital y en Redes Sociales
El diseñador digital publicitario crea distintos componentes gráficos enfocados en la publicidad a través de las redes sociales. Los visuales deben ser efectivos en la elección de colores, tipografías, ilustraciones u otros atributos.
4. Patrones
Concepto aplicado por el arquitecto Cristopher Alexander para ser introducidos principalmente en el área de desarrollo de softwares, sin embargo, en la actualidad también abarca a otras disciplinas. Los patrones de diseño son elementos que complementan el estilo y estructura de una interfaz que tienden a generar dinámicas de interacción más atrayentes y llamativas para el usuario.
La función principal de los patrones, al menos dentro del diseño UI, consiste en estandarizar elementos de interfaz y ofrecer soluciones acertivas a los problemas comunes que se presentan dentro del diseño de una plataforma. Para su implementación hay que previamente delimitar tanto a la problemática recurrente de la plataforma y comprobar la aplicabilidad del patrón en diferentes circunstancias que rodeen esta problemática en la relación interfaz-usuario.
- Patrones Oscuros
Pese a que los patrones tengan el objetivo de potenciar la calidad de experiencia interfaz-usuario existe un área de patrones oscuros o Dark Patterns, estas a diferencia de los patrones estándares corresponden a técnicas del diseño de interfaces que priorizan los beneficios de los propietarios de la interfaz por sobre a las del usuario, realizando diseños que perjudican y dificultan la experiencia del usuario con el servicio mediante acciones forzadas, incómodas o que influyen en el comportamiento de la plataforma donde los usuarios acceden a interactuar con ellos de manera forzada o sin consentimiento explícito.
Estos patrones están diseñados para lograr objetivos particulares como lo sería aumentar las suscripciones a un servicio de manera inmediata y que pudiese generar mayores ingresos a los dueños o compañías de estas plataformas, no obstante, estos se generarían a costa de la satisfacción y confianza del usuario hacia el servicio e incluso del propietario a cargo.
El rol del diseñador en la implementación de estos patrones varía tanto de la ética profesional que tenga el diseñador como de las políticas de la empresa o propietario al cual trabaje el diseñador. El diseñador cumple un papel fundamental en la ejecución de la interfaz y por consiguiente, es responsable de cómo se presentan estos servicios y de cómo interactúa con los usuarios. Por lo tanto, es importante que los diseñadores tengan conciencia de estas técnicas interactivas y de sus consecuencias para el usuario como también del pensamiento crítico para considerar si es factible la implementación de estos elementos en sus interfaces.
Patrones de manipulación
Este tipo de patrón implementa elementos psicológicos y de desviación de la atención del usuario para que realice, de manera inconsciente u forzada, acciones dirigidas hacia él interés de las empresas por sobre las del usuario. Estos patrones se manifiestan mediante el uso de diseños confusos, engañosos y poco transparentes para la accesibilidad del usuario dentro de la plataforma.
Patrones de suscripción involuntaria
Este tipo de patrones se utilizan para la suscripción a servicios o productos mediante procesos automáticos o de vago consentimiento, aprovechándose de la falta de transparencia al presentar información sobre la plataforma y servicio.
Patrones de manipulación emocional
Estos patrones buscan influir en la toma de decisiones evocando las emociones de los usuarios. Se busca con ello motivar comportamientos y acciones beneficiosas mediante reacciones emotivas y el desarrollo de vínculos emocionales con el servicio.
Patrones de ocultación de información
Este tipo de patrón consiste en la aplicación de estrategias para limitar, ocultar o dificultar el acceso a información de utilidad para el usuario pero que podría no convenir para la empresa que el usuario conozca esta información.
Patrones de urgencia falsa
Este tipo de patrón se utiliza para presionar al usuario a realizar una acción rápida y poco reflexiva mediante una sensación artificial de oportunidad limitada. Estos patrones fomentan al usuario a la toma compulsiva de decisiones dentro la interfaz a expensas de la realización de acciones informadas y conscientes en la página y a largo plazo al posible arrepentimiento de usar el servicio ofrecido.
Patrones de oscurecimiento de la Privacidad
La ejecución de está categoría de patrones limita la visibilidad, el acceso y la comprensión de la forma en que se recopilan los datos personales del usuario. Se oculta información importante sobre las políticas de privacidad y se presenta poca transparencia sobre los usos y prácticas que tienen los propietarios de la plataforma con la información otorgada por los usuarios.
Patrones de Anuncios Disfrazados
Son estrategias que tienen la intención de que los usuarios realicen acciones involuntarias con anuncios camuflados como contenido normal o parte de la navegación. Para ello la plataforma presenta un formato de anuncios fácil de confundir, donde se confunden y mezclan la apariencia de los anuncios con el contenido.
5. Descripciones Página de Inicio
- Menú
UI
Diseño de interfaz de usuario elabora todo el material gráfico dentro de una página web, o pantalla la cual cumpla con el objetivo de guiar al usuario por medio de esta construcción y disposición de elementos.
UX
Diseño de experiencia de usuario nos traslada al mundo de la programación y pensamiento crítico que busca que la relación entre servicio y usuario sea satisfactoria.
Diseño
Dentro del diseño se concentran distintas problemáticas que proporcionan iniciar un proceso por el cual se desarrollan desgloses de posibilidades y soluciones que indagan distintas áreas.
Patrones Oscuros
Patrones oscuros o dark patterns, corresponden a interfaces diseñadas con intención de engañar predeterminadamente a usuarios con el objetivo de conseguir algún beneficio propio de alguna empresa.
Patrones
Para que un cuerpo gráfico logre transmitir su mensaje, este dispone elementos que se complementan y entregan un estructura visual clara y reconocible.
Campo Laboral
Campo laboral describe las diferentes oportunidades de empleo por las cuales uno como profesional del diseño de interacción se puede desenvolver.
- Descripciones introductorias
Tipos de diseño
Para comprender el diseño, debemos introducirnos en sus diferentes áreas de estudio que se encargan de dar forma a objetos ya sean físicos o digitales, entregando un aporte significativo a la sociedad.
Diseño UX/UI
Introducirnos en el diseño UX/UI es comprender el pensamiento previo a propuestas de diseño digitales que permiten la interacción entre el usuario y servicio.
Campo laboral
Con relación a los tipos de diseño, nos enfocamos en el área del diseño de interacción donde, damos a conocer diferentes oportunidades laborales que pueden ser de tú interés.
Investigación de Usuario
Dentro de lo que conocemos como Diseño UX, se desenvuelven aptitudes que interrogan al usuario con la finalidad de obtener respuestas que se desarrollan dentro de una próxima propuesta de solución.
6. Descripciones Introductorias dentro de la navegación
- Patrones
Manipulación
Desde aspectos psicológicos y diseños intencionados, los patrones de manipulación conducen al usuario a realizar acciones dentro de la página de manera involuntaria.
Manipulación emocional
Con finalidad de activar comportamientos y acciones beneficiosas para el servicio, se desarrolla la manipulación emocional que utiliza estas reacciones para generar un vínculo entre usuario y servicio.
Oscurecimiento de privacidad
Limitando la visibilidad y comprensión de datos personales, y ocultando detalles referentes a las políticas de privacidad y prácticas de los propietarios de la plataforma, es como funciona este patrón.
Ocultación de información
A favor de quien diseña y para quien se diseña, se manifiestan patrones que dificultan el seguimiento o acceso, se trate de alguna tarea a concretar ó alguna información.
Suscripción involuntarias
Aprovechándose de la poca transparencia dentro de las interfaces, surgen servicios que solicitan suscripciones, o que simplemente se dan procesos automáticos de vago conocimiento.
Urgencias falsas
Los usuarios son sometidos a tomar decisiones rápidas mediante a notificaciones de urgencias falsas impulsando a actuar de forma impulsiva y que a largo plazo provoque que el usuario se arrepienta.
Anuncios disfrazados
Dentro de las interacciones de páginas, se presentan anuncios disfrazados como parte del contenido regular que confunden al usuario e incitan a que ejecute alguna acción de forma involuntaria.
- Tipos de diseño
Diseño industrial
Área del diseño focalizada en el desarrollo de objetos funcionales que garantizan una mejor calidad de vida teniendo en consideración aspectos como la accesibilidad, inclusión, y compromiso con el medioambiente.
Diseño gráfico
Como extensión del lenguaje, el diseño gráfico por medio de elementos construidos en base a relaciones, de manera visual, se disponen espacios que su objetivo consiste en transmitir un mensaje.
Diseño de interacción
Enfocándose en la relación e interacción de usuario y producto, el diseño de interacción dispone experiencias digitales que se concentran en ser eficientes e intuitivas.
- Campos laborales
Diseñador UI/UX
Para llegar al producto final, se requiere de procesos de investigación que involucran el conocer del comportamiento del usuario para luego llegar a la solución con una mirada gráfica.
Investigador UX
Estudio, evaluación y análisis es como el investigador UX se desenvuelve en el área del diseño de interacción, siendo él, el encargado de guiar el desarrollo del servicio.
Redactor UX
Para que una interfaz tome sentido y cumpla con el objetivo a concretar, existe un redactor UX encargado de facilitar la navegación por vía de la lectura.
Líder de diseño UX
Combinando las necesidades de los clientes con los objetivos comerciales, UX Lead dirige el cómo mejorar la experiencia de los usuarios, servicios y sitios de la empresa.
Arquitecto de la información
Los diferentes títulos y contenidos distribuidos dentro de una página, son organizados por un arquitecto de la información. Buscando experiencias positivas e intuitivas.
Desarrollador web
Desarrollándose primeramente desde el diseño UX/UI, toda estructura prevista en estas áreas, se llevan al código, donde lo prototipado toma valor y se puede evaluar con mayor certeza.
Consultor de UI/UX
Desde el conocimiento de marketing y diseño, el Consultor de UX/UI detecta y mejora las fallas que pueden surgir dentro del sistema.
Diseñador de interacción
Centrándose en cómo interactúan los usuarios con él servicio web y optimizando la experiencia de la página, el diseñador de interacción proyecta y expone elementos y funcionalidades futuras.
Diseñador de publicidad digital
Desde la efectividad y lo atractivo, se desarrollan elementos visuales gráficos que se disponen en diferentes áreas donde la publicidad es más visible.
ARQUITECTURA DE LA INFORMACIÓN
Material Gráfico
Doble Diamante
¿Cómo diseñar una solución?
Tipos de diseño
Diseñar una solución
¿Quiénes Somos?
_NODEUX.png)
Campo Laboral
Patrones
Ventajas de utilizar Patrones
Wireframes
Interfaz Computador
Interfaz Móvil
Links Página Web y Repositorio
Link Página Web
Link Repositorio
https://github.com/LGCatalina/NodeUx.git
Funcionalidad Interacciones de la Web
https://youtu.be/Oy9ORxavk5o?feature=shared
PAUTA
Encuesta de Usabilidad
Objetivo
El siguiente test indaga en la usabilidad y accesibilidad de la página Nodeux diseñada por la oficina ArchivaDocs.
Se busca ver la interacción del usuario con el servicio, por medio de tareas dadas por quien entrevista para que luego, a través de los feedbacks y observación a las acciones, se comprenda si la web cumple con el objetivo de informar, de acuerdo al contenido asociativo diseñado como material gráfico que acompañan los escritos. Además, se comprende que, por medio de la observación, se puedan evaluar conceptos como, tiempo de navegación, actitudes, comprensión, etc.
Criterios a considerar antes y durante el estudio del usuario - servicio
- Se debe poner en contexto al usuario (explicar lo que se hará, y lo que está por ver)
- Advertir e insistir que no se evalúa al usuario, evaluamos la web
- Para el usuario, los propósitos deben quedar claros.
- Siempre grabar con consentimiento.
- No olvidar observar la gestualidad y acciones.
1. Tareas
- Buscar información sobre Diseño (Industrial - gráfico - interacción)
- Ir a la sección de campo laboral.
- Ir a la sección con información respecto a la oficina.
- Ir a la sección de Patrones Oscuros.
- Dentro de la sección de Patrones Oscuros, ingresar a una de las categorías.
- Encontrar las conexiones entre los conceptos
2. Preguntas para quien entrevista
2.1. El usuario mostró interés en el menú.
2.2. Los materiales gráficos ¿son de real aporte?
2.3. El usuario ¿logró navegar intuitivamente?
2.4. ¿Los juegos interactivos llamaron su atención?
2.5. ¿Logró comprender las interacciones?
2.6. ¿Se nota alguna actitud de complicación? (dentro de la navegación)
2.7. El usuario ¿se guía correctamente dentro de la página, relaciona conceptos?
2.8. El usuario ¿Frunce el ceño mientras ve la página?
2.9 ¿Existe alguna acción, elemento, etc. (dentro de la web) que provoca una buena reacción?
2.10. Acciones que fueron complicadas llevar a cabo.
2.11. ¿Cuál es el tiempo que demora para concretar una acción?
3. Preguntas para el usuario
3.1. ¿La página es legible?
3.2. ¿Fue complicado completar alguna tarea? ¿Cuál?
3.3. ¿Resultó útil el material gráfico?
3.4. En la sección patrones oscuros, respecto a los ejemplos interactivos ¿resultaron útiles? ¿se comprenden las referencias?
3.5. ¿Con qué te quedas? ¿Qué te llamó más la atención?
3.6. ¿La recomendarías?
Respuesta de usuarios
1er Usuario
| Usuarios | Edad / carrera | Eficacia | Eficiencia | Satisfacción | Citas |
|---|---|---|---|---|---|
| Paula Hofflinger | 20 / Arquitectura | Al navegar por la web, no presenta mayor problema en realizar las tareas solicitadas, se desenvuelve con simpleza, no le lleva mucho tiempo lograr los objetivos. Paula, dentro de los distintos usuarios, fue una de las únicas que comenzó a revisar la web mientras una de nuestras diseñadoras introducía la entrevista a realizar y el propósito de esta. Dentro de este uso previo comenta que se vio interesada. | Hace uso de inspeccionar con el cursor sin realizar muchos clicks hasta que se siente segura de que es la sección solicitada, el tiempo fue corto, demorándose 3 minutos en completar las actividades solicitadas. Realiza comentarios externos sobre comparativas con experiencias de taller, pero se enfoca en realizar las tareas concentrada y al terminar continúa navegando interesada en las secciones no mencionadas en dichas tareas. | Se vio interesada en el uso de la web, enfocada a utilizarla previamente al comienzo de la entrevista, desarrollando un uso simple y sencillo a su alcance. A su vez las tareas fueron realizadas en poco tiempo debido también a esta navegación previa. |
|
Análisis de navegación Paula Hofflinger
2do Usuario
| Usuarios | Edad / carrera | Eficacia | Eficiencia | Satisfacción | Citas |
|---|---|---|---|---|---|
| Sofía Gonzalez | 22 / Diseño industrial | Se mantiene atenta a las indicaciones de una de nuestras diseñadoras. Se toma el tiempo para escuchar y realizar preguntas, también toma pausas para leer y preguntar sobre el proyecto, viéndose interesada en la materia y en la oficina. | Realiza una cantidad elevada de clicks, se interesa por otros puntos mientras realiza las tareas tomando una mayor cantidad de tiempo de 10 min. Se pregunta mucho sobre la información presentada y decide resolver sus dudas sobre la materia con nuestra diseñadora, entablando un diálogo constante. | Sofía comenta que le gustaría tener mayor tiempo para poder sentarse a leer y experimentar las interacciones de la web. Ya que como estudiante de diseño se vio un poco descolocada al no saber de qué trataba la materia entregada. |
|
Análisis de navegación Sofía Gonzalez
3ro Usuario
| Usuarios | Edad / carrera | Eficacia | Eficiencia | Satisfacción | Citas |
|---|---|---|---|---|---|
| Javiera Gaete | 21 / Diseño gráfico | Escucha atenta pero al indicarle la tarea consulta altiro donde esta la sección de la tarea. Por lo cual nuestros diseñadores le comentan que es una tarea que debe encontrar ella pero que no se preocupe, se puede tomar el tiempo que necesite y no hay respuestas incorrectas. Se alegra mucho al completar las tareas por lo cual se le visualiza motivada a realizarlas. | Navega bastante con el cursor, realizando comentarios sobre los colores, los textos y las jerarquías. Se toma su tiempo para navegar por el home sin necesidad de realizar clicks a las secciones. Comenta que le llamó la atención el inicio y que se distrae con facilidad por lo cual le cuesta concentrarse en realizar las tareas. Aun así fue veloz y le tomó 5 min completar las actividades solicitadas. | Javiera comenta que le llamó mucho la atención el inicio, por lo cual le gusto igual la libertad de realizar las tareas sin presión así se enfocó también en los elementos que le atrajeron. Luego de terminar las tareas se dispuso a comentar cuales fueron los factores que le llamaron la atención generando un diálogo con nuestros diseñadores. |
|
Análisis de navegación Javiera Gaete
4to Usuario
| Usuarios | Edad / carrera | Eficacia | Eficiencia | Satisfacción | Citas |
|---|---|---|---|---|---|
| Ignacio Herrera | 22 / Diseño gráfico | Fue atentamente siguiendo las instrucciones de las actividades, donde llega a las áreas pedidas, con un apoyo ligero por parte de los diseñadores guías, incluyendo sus opiniones a medida en que realiza ese curso, teniendo un tiempo rápido en comparación a otros usuarios. | Ignacio navega la web de manera interesada, acotando como y cuanto demora en las acciones, siendo los espacios de click y threshold para la interacción, junto a su colorido comentario acerca de los patrones oscuros y como en verdad generan un impacto en su pensamiento, comentando a uno de los diseñadores “y tú hiciste esto!?”, comentando también el cómo el inicio da a entender que es un portal de navegación que se ve apenas llegar a la página, incitando al usuario a querer interactuar. | A lo largo del uso de la plataforma se ve como Ignacio agrega y comenta sobre el estilo sencillo de la página, brindando un camino directo para la información, junto al uso del material gráfico que mantiene este orden para poder terminar las actividades pedidas. |
|
Análisis de navegación Ignacio Herrera
5to Usuario
| Usuarios | Edad / carrera | Eficacia | Eficiencia | Satisfacción | Citas |
|---|---|---|---|---|---|
| Angel Pizarro | 20 / Diseño gráfico | Navega de manera fluida, pudiendo discernir los espacios y caminos para ir cursando las actividades, realizando un reconocimiento previo, comprendiendo de manera visual y con el uso de los contrastes y material gráfico reforzando estos, volviéndolos una línea directa para realizar las actividades. | Usa como apoyo el material gráfico y la línea visual para conseguir un orden que se manifiesta por medio de las actividades, con este orden es que sigue y puede ir explorando las distintas alternativas otorgadas para la navegación de la web. | Expresa una ligereza al usar la página, no se siente obstruido y por lo tanto puede ir ejecutando las acciones sin problema, comentando y agregando como usa las cosas y los elementos junto con sus propiedades que impulsan su uso. |
|
Análisis de navegación Angel Pizarro
Conclusión
Luego del estudio y síntesis de la información recopilada con 5 usuarios, se puede concluir que la web Nodeux cumple con su principal objetivo. Informa, comunica desde la simpleza y se considera un tanto dinámica a la vista puesto que contiene elementos atrayentes, como paleta de colores atractiva, iconos, material gráfico en general que permiten una fluidez dentro de la navegación, entendimiento y legibilidad.
Se considera además que, la sección “Patrones Oscuros”, puesto que la información es escrita y complementada con ejemplos interactivos, sí lograron complementarse mutuamente, mejorando la comprensión mediante el aprendizaje asociativo con el cual se buscaba trabajar. De acuerdo a la observación mientras se interactuaba con los usuarios de prueba, se mostraron conmovidos con este método, añadiendo comentarios positivos respecto a ello.
Además, dentro de los comentarios, se obtienen comentarios que contribuyen a la mejora de la página.
Proceso de Proyecto
Proceso de Proyecto
Entregas de taller
NODEUX
Como equipo, nos proponemos diseñar un foro que brinde a los usuarios un contexto completo sobre el campo del diseño de interacción. Este foro servirá como una plataforma para explorar los diversos patrones que existen dentro de este ámbito, centrándonos especialmente en los patrones oscuros y en cómo afectan la relación entre la interfaz y el usuario. nuestro objetivo es fomentar la discusión y el intercambio de ideas entre los usuarios y diseñadores, para que juntos podamos profundizar en este campo.
Carta Gantt
https://docs.google.com/spreadsheets/d/1HGFQwcin82xwIfjm6yL3wv6TVq6TnDfeyuQ7x0h1jNo/edit?usp=sharing
26 de abril del 2024
PLANTEAMIENTO DE PROPUESTA
Lluvia de ideas
Objetivos:
- Crear comunidad interactiva, enfocada al diseño de interacción
- Enfoque en el campo laboral que desenvuelva los black patterns
Primeras propuestas mencionadas en reuniones
- Patrones Oscuros.
- Foro el cual sea creado para estudiantes de diseño de interacción.
- Plataforma para mostrar a alumnos, diseñadores y trabajadores interesados en diseño de interacción, que materia de ha desarrollado en el presente taller.
- Página web donde se pueda interactuar, el tema principal a tratar seria acerca de aplicaciones web que estén hechas por desarrolladores y no pensadas por un diseñador (Comparativas de prototipos).
- Una página que siga la línea del sistema wiki, enfocada en el Diseño de interacción, creando entorno para mantenerte agregando y apoyando al contenido de diseñadores en esta área.
- Sitio web para explorar temas que abarque el diseño de interacción, área de difusión de información sobre estás materias.
- Tutoriales de información, reconociendo actualizaciones de sistemas y cómo utilizarlos crear una plataforma .
PRIMERA ETAPA
Caso de estudio
DESCRIPCIÓN DEL DISEÑO
¿Qué es el diseño?
El diseño corresponde a una disciplina de práctica y estudio enfocado en la interacción entre un usuario u persona, y un ambiente u elemento creado a mano del hombre donde aparte sé es considerado valores estéticos, funcionales, contextuales y socioculturales. El diseño como disciplina formalizada, responde a un constructo moderno.
Las personas de por sí interactúan a diario con elementos causados, creados y adaptados mediante bases del diseño, desde objetos físicos, como espacios construidos o entornos digitales entre otros, todo elemento creado con un motivo de usabilidad humana va correspondiendo en un elemento diseñado.
El diseño abarca una multiplicidad de áreas de disciplina y formación, sin embargo, independiente de la aplicación todas logran compartir un fundamento en común al seguir ciertas metodologías y un conjunto de nociones fundamentales que informan de sus enfoques.
¿Qué servicios presta el diseñador?
El diseñador está capacitado para analizar problemas concretos y holísticos, buscando comprender no sólo las problemáticas inmediatas sino también el sistema que llegó a crearlo. Los diseñadores abordan la solución desde una proyección ventajosa hacia el usuario final con el objetivo de optimizar las necesidades específicas y capacidades del individuo o grupo.
En la actualidad, los diseñadores en general trabajan bajo la idea u mentalidad de simplificar y de concretar (“Entre menos hay más”), de maximizar la economía en términos de recursos, de inversión y energía entre otros factores, mediante la creatividad e ingenuidad. Esta idea es central para el diseño. Considerando lo anterior, las habilidades y criterios que debe mantener un diseñador que más destacan serían las siguientes:
- Creatividad: los diseñadores dan uso de la creatividad y la innovación para el desarrollo de conceptos originales de diseño.
- Diseño de Software: El manejo para usar softwares de diseño asegura para los diseñadores una herramienta importante para desarrollar diseños finales para sus clientes de manera eficiente.
- Diseño Visual: Conociendo los principios fundamentales del diseño, tales como la jerarquización de la información y del espacio, les puede asegurar una claridad y visualización atrayente.
- Comunicación: Los diseñadores tienen grandes habilidades de comunicación para interactuar con colegas y clientes como para también presentar y hacer resaltar su trabajo.
- Gestión de tiempo: La capacidad de organizar sus tiempos ayuda a los diseñadores a trabajar en proyectos con plazos estrictos.
ÁREAS DEL DISEÑO DE INTERACCIÓN
Diseño UX
Diseño de Experiencia de Usuario (UX) toma por definición como todo aquel diseño (digital o físico) encargado de poder comprender y mantener una buena relación entre el usuario y el servicio/Interfaz. Por medio de este se puede observar cómo se desenvuelve el usuario con las diferentes propuestas, siendo parte de un desarrollo el cual da paso a la mejora en cuanto a calidad de la interacción, centrándose más que nada en la sensación de la experiencia.
Diseño UI
Diseño de Interfaz de usuario (UI) se relaciona con el área del diseño gráfico. Dentro del, se incluyen elementos los cuales son una guía que complementan la información, de manera que orientan al consumidor dentro de la navegación. En los elementos podemos encontrar la tipografía, logo, íconos, paleta de colores, botones, etc. Además, de forma no visible, podemos interiorizar en el uso de grillas que permiten que la información expuesta dentro de la interfaz, se lea de una forma legible.
Diseñar para el usuario
Como concepto principal, diseñar para el usuario comprende que, como enfoque principal, se centra en las necesidades de los usuarios. De esta forma, se entiende que, se ofrece un servicio que favorece con recursos en cuanto a las problemáticas que se puedan presentar, donde para ello, se realizan investigaciones que responden a los diseños, y se interactúa y comunica a través de estos, obteniendo respuestas que permiten incorporar los intereses y trabajar en ellos para que le público se sienta a gusto dentro de las interfaces. Para ello, existen etapas que van dentro de la investigación que por consiguiente, dan forma a este tipo de diseño:
- Entender el contexto del usuario
- Especificar los requerimientos del usuario
- Diseñar las soluciones
- Evaluar los resultados
CAMPO LABORAL
Diseñador UX/UI: Un profesional que combina diseño UX y UI para crear productos digitales exitosos en áreas como videojuegos, marketing digital o desarrollo web.
Investigador UX: Se centra en investigar y analizar la experiencia del usuario antes, durante y después del lanzamiento de productos digitales, utilizando entrevistas, pruebas de usabilidad y análisis de datos para mejorar la segmentación del público objetivo y proponer mejoras o nuevos productos.
Redactor UX: Se encarga del diseño del lenguaje utilizado en productos digitales, asegurando que esté alineado con la estrategia de contenidos de la empresa y mantenga la coherencia en tono, estilo y voz.
Líder de Diseño UX: Encargado de liderar equipos de diseño en todas las etapas del desarrollo de productos digitales, desde la conceptualización hasta el lanzamiento, siendo reservado para profesionales con experiencia y veteranía.
Arquitecto de la Información: Organiza los flujos y esquemas de navegación de sitios web o aplicaciones para que los usuarios encuentren fácilmente el contenido que necesitan, cumpliendo con los requisitos de la empresa y las limitaciones técnicas.
Desarrollador Web UX/UI: Un profesional polivalente en desarrollo web y diseño UX/UI, altamente valorado en la producción digital.
Consultor UX/UI: Asesora a clientes en la resolución de problemas de diseño, mejora de estrategias de comunicación digital y apoyo a otros profesionales para diversificar sus estrategias.
Diseñador de Interacción: Analiza la conexión entre el usuario y el producto para crear productos altamente funcionales y fáciles de usar. Diseñador de Publicidad Digital y en Redes Sociales: Crea anuncios atractivos para plataformas como Facebook, Instagram y Google Ads para atraer a la audiencia.
DARK PATTERNS / PATRONES OSCUROS
¿Qué son?
Dark Patterns o patrones oscuros, son técnicas de diseño de interfaz que de manera intencional, manipulan o engañan a los usuarios con el fin de poder buscar un beneficio propio, donde, para llevar a cabo esto, utilizan diseños que pueden ser un tanto incómodos para el usuario o que influencian en su comportamiento dentro de la web, y que a fin de cuentas, los usuarios acceden a interactuar con ellos sin darse cuenta. Estas técnicas pueden ser vistas en aplicaciones, páginas web, entre otros productos digitales.
Tipos
Confirmación engañosa: Esta categoría incluye interfaces que tienen botones de selección que parecen llevar a diferentes acciones, pero en realidad, una de las opciones suele destacarse más que las demás, lo que puede llevar al usuario a creer que es la mejor elección, aunque no lo sea necesariamente.
Suscripciones ocultas o difíciles de cancelar: Los usuarios pueden suscribirse a servicios o boletines informativos sin darse cuenta o sin entender completamente los términos de la suscripción. Además, cancelar estas suscripciones puede ser complicado y requerir varios pasos.
Ventanas emergentes engañosas: En esta sección se incluyen ventanas emergentes que imitan mensajes de error o advertencias del sistema para persuadir a los usuarios a realizar ciertas acciones, como hacer clic en anuncios o suscribirse a servicios.
Añadir automáticamente productos al carrito de compra: Algunos sitios web agregan productos al carrito de compra de los usuarios automáticamente, sin su consentimiento explícito, con la esperanza de que realicen la compra sin darse cuenta.
Contadores de escasez falsos: Se utiliza la presión temporal al mostrar contadores que indican que una oferta o descuento está a punto de expirar, aunque en realidad se reinician cada vez que se actualiza la página.
Ocultar opciones de privacidad: Se dificulta encontrar o entender las opciones de privacidad, como la configuración para controlar quién puede ver la información del usuario o cómo se utilizan sus datos personales.
Sobrecarga: Presentar demasiadas opciones puede generar fatiga en el usuario, que termina compartiendo más información personal de la deseada.
Ocultación: Diseñar la interfaz de tal manera que el usuario no piense en la protección de sus datos o que lo olvide.
Emocionar: Apelar a las emociones del usuario o utilizar efectos visuales para influir en sus decisiones.
Obstaculización: Poner obstáculos para que el usuario no pueda realizar ciertas acciones de manera sencilla.
Inconsistencia: Presentar un diseño inestable e inconsistente que dificulta al usuario realizar las acciones deseadas.
Enturbiar: Esconder o presentar de manera poco clara la información o las opciones de configuración de la privacidad.
CASOS DE ESTUDIO
Hubspot
Doble Diamante
Arquitectura de la información
SEGUNDA ETAPA
Material Gráfico
LOGO
PALETA DE COLORES
Prototipado
Wireframe Móvil
|
|
|
|
|
|
Wireframe web
|
|
|
|
|
|
30 de abril del 2024
INVESTIGACIÓN
Estudio del usuario
Para poder interiorizar en el flujo de la experiencia de los usuarios, realizamos una encuesta con un total de 12 preguntas las cuales se dividen en dos secciones. En la primera sección se centra en el conocimiento del usuario para comprender a qué tipos de usuarios nos estamos dirigiendo y, realizar un estudio más generalizado en cuanto a las capacidades de aprendizaje para tener en consideración como poder aplicar extensiones cognitivas de forma que nuestro proyecto pueda ser accesible e interesante. Luego, en la siguiente sección, nos focalizamos en el área de la navegación e interacción con apps/páginas, con la finalidad de entrar en un contexto dentro de la comparación de otras aplicaciones que, son utilizadas con frecuencia, para poder comprender las acciones que mantienen en constante interacción al usuario con la interfaz. La encuesta llegó a obtener 30 respuestas, y en base a aquellas es que se van construyendo gráficos donde se expresan los respectivos resultados.
|
|
|
|
|
|
|
|
Relación interfaz - usuario
Para crear una buena experiencia hay que pensar en el usuario y sus necesidades. La interfaz de usuario debe desarrollarse en conjunto con la experiencia de usuario para crear un verdadero efecto en quién interactúa con el sitio, en sus dolores y ganancias, en la frustración que provoca la confusión y el pensar mucho al momento de ser utilizada una app o página web, de esta manera se corre el riesgo de un posible usuario que desista, no por el desinterés incluso, sino por el lenguaje que nosotros como diseñadores entablamos con las personas que llegan a nuestro portal, grave es el error que podemos cometer si no conectamos un puente comunicativo certero para quienes nos leen o interactúan, es por ello que existe el “diseño centrado en el usuario”, una manera de conceptualizar la relación de nuestro proyecto y el UX para diseñar el UI a través de iteraciones enfocadas en las necesidades del usuario, logrando un reconocimiento de la marca por parte del público y un establecimiento de diálogo que se abre captando la atención e intereses de los usuarios.
Para lograr este acuerdo hay que realizar las siguientes etapas:
- Entender el contexto del usuario
- Especificar los requerimientos del usuario
- Diseñar las soluciones
- Evaluar los resultados.
Estudio de los patrones
ESTUDIO DE PATRONES OSCUROS RELACIONADOS AL JUEGO
Los patrones oscuros son elementos que se añaden intencionalmente a los juegos para dar al jugador una experiencia desfavorable pero beneficiosa para el desarrollador.
Los siguientes son algunos ejemplos de patrones oscuros en juegos:
Patrones sociales: Utilizan las relaciones sociales de los jugadores con amigos, familiares y otros.
Patrones psicológicos: Utilizan trucos psicológicos para ayudar a los jugadores a tomar malas decisiones, como impedir que abandonen un objetivo que casi está terminado o aprovechar el miedo a perder algo.
Patrones temporales: Ofrecen recompensas diarias para que los jugadores pasen más tiempo jugando de lo que podrían hacer de otra manera.
Estos patrones oscuros buscan prolongar el tiempo de juego y mantener a los jugadores "enganchados", lo que resulta en mayores ingresos para los desarrolladores, aunque a costa de una mala experiencia de juego.
EJEMPLOS DE PATRONES OSCUROS EN EL JUEGO
Patrones sociales
Invitación de amigos: Los juegos presionan con frecuencia a los jugadores para invitar a sus amigos y ofrecerles recompensas por hacerlo. Para aumentar la base de usuarios, esto aprovecha las relaciones sociales.
Competencia entre amigos: Los juegos pueden mostrar el progreso de los amigos para motivar a los jugadores a jugar más y superar a sus pares.
Patrones Psicológicos
Objetivos casi completados: Los juegos hacen que sea difícil abandonar una tarea que ya está casi terminada para que el jugador no pierda el progreso. Miedo a perderse: Si un jugador no juega con regularidad, los juegos tienen la impresión de que perderá contenido o recompensas.
Patrones Temporales
Recompensas diarias: Los juegos ofrecen recompensas por iniciar sesión todos los días, lo que promueve el hábito de jugar todos los días. Temporizadores y esperas: En algunos juegos, los jugadores deben esperar horas o días para completar ciertas tareas, a menos que paguen para acelerarlas.
Recompensas variables
Cajas de botín: Los juegos ofrecen recompensas aleatorias y de valor variable, lo que los hace adictivos.
Microtransacciones
Compras dentro del juego: Los jugadores pueden pagar dinero real por ventajas, aceleradores o contenido exclusivo en los juegos, lo que maximiza las ganancias.
ASPECTOS RELACIONADOS CON EL DISEÑO DE PÁGINAS WEB
Patrones sociales
- Crear botones y llamados a la acción que fomenten el intercambio de contenido en las redes sociales.
- Incorporar funciones para comparar resultados con amigos o listas de "mejores usuarios".
- Esquema de la pirámide social, obtienes una bonificación por invitar a tus amigos y luego tienen que invitar a sus amigos.
- Obligación social / gremios, para evitar decepcionar a tus amigos, estás obligado a jugar incluso en momentos en los que no quieres.
- Amigo Spam / Suplantación, el juego envía spam a tu lista de contactos o cuenta de redes sociales.
- Reciprocidad, Sentirse obligado a devolver un favor, compartir recursos, intercambiar un artículo, etc.
- Fomenta el comportamiento antisocial, el juego incentiva a los jugadores a mentir, engañar o apuñalar a otros jugadores para salir adelante.
- Miedo de perderse, si deja de jugar, se perderá algo o se quedará atrás y no podrá ponerse al día.
Patrones Psicológicos
- Crea formularios que hacen que sea más difícil abandonar una acción que casi está terminada.
- El uso de urgencia y escasez en el diseño para generar miedo a perder oportunidades.
- Valor invertido, habiendo gastado tiempo y dinero para mejorar tu estado en el juego, es difícil decidir dejar de jugar, porque significaría haber perdido todo ese tiempo.
- Logros / Progreso, los logros o los indicadores de progreso hacen difícil la renuencia a abandonar un objetivo parcialmente completado, lo que mantiene a los jugadores eganchados al juego.
- Completa la colección, la necesidad de recoger todos los artículos, logros o elementos coleccionables en un juego. Tiene un efecto similar al de los logros y el progreso.
- Ilusión de control, el videojuego engaña u oculta información para hacerte creer que eres mejor de lo que realmente eres.
- Recompensas Variables, como ya demostró el conductismo operante, las recompensas impredecibles o aleatorias son más adictivas que un cronograma predecible. Por lo que mantienen a los jugadores jugando por la posibilidad impredecible de una recompensa.
- Manipulaciones estéticas, preguntas engañosas que juegan con las emociones o nuestros deseos subconscientes.
- Optimismo y sesgos de frecuencia, sobreestimar la frecuencia de algo porque lo hemos visto recientemente o de manera memorable.
Patrones Temporales
- Crear notificaciones y recordatorios que promuevan el regreso a la página frecuente.
- En el diseño, se utilizan temporizadores y cuenta regresiva para crear una sensación de prisa.
- Tiempos concretos de juego, ser obligado a jugar de acuerdo con el horario del juego en lugar de con el horario del jugador.
- Recompensas diarias, alienta las visitas de regreso todos los días y lo castiga por perderse un día.
- Tareas, ser requerido para realizar tareas repetitivas y tediosas para avanzar.
- Anuncios, estar obligado a ver anuncios u obtener recompensas en el juego por ver anuncios.
- Videojuegos sin fin, imposible ganar o completar el juego. El videojuego no puede ser pausado o guardado para continuar después. El juego no te permite dejar de jugar cuando quieras.
- Espera para jugar, temporizadores en el juego que te hacen esperar arbitrariamente algo.
- Recompensas variables, un sistema con recompensas aleatorias basadas en puntos, niveles o logros. Utilizando "cajas de sorpresas" o promociones con premios que varían.
Microtransacciones:
- Crear opciones de compra o suscripción en la página web.
- Simplificar las transacciones mediante la incorporación de pasarelas de pago.
- Pagar para saltar, el videojuego te permite gastar dinero para evitar esperar a que caduque un temporizador. Por ejemplo comprando vidas para seguir jugando.
- Moneda Premium, el tipo de cambio entre dinero real y moneda del juego oculta el precio real de los artículos.
- Pagar para ganar (pay to win), los/as jugadores/as puede gastar dinero real para comprar algo que les da una ventaja en el juego.
- Escasez artificial, ofertas por tiempo limitado con urgencia innecesaria.
- Compras accidentales, facilitar el gasto accidental de dinero sin confirmación o la capacidad de deshacer o reembolsar la acción.
- Juegos de azar / cajas de botín, gastar dinero real para jugar un juego de azar por una recompensa.
- Devaluación, un artículo comprado permanentemente en el juego se vuelve menos valioso con el tiempo.
- Muro de pago, el juego se vuelve imposible, no se puede seguir jugando sin pago.
PROPUESTA DE CONTENIDO
Arquitectura de la información
Pruebas de desarrolladores para la pagina web
SECUENCIA INTERACTIVA PARA USUARIOS
- Como primera referencia para actividades del usuario al interactuar dentro de la plataforma, es la posibilidad de ir clickeando y haciendo visible diferentes tipos de información, siguiendo patrones visuales que mantengan la atención del usuario y lo motiven a quedarse dentro de la plataforma y seguir manteniendo el interés en ver que más se podrá encontrar en los otros wireframe.
PATRÓN DE SEGUIMIENTO DE USUARIO EN LA INTERFAZ
- Se pretende apelar a las emociones de los usuarios al ver efectos visuales que se formen según por donde movió el mouse, estas técnicas captan la atención al interactuar y manipulan al usuario al aumentar su interés de permanecer jugando en la plataforma.
LOOK AND FEEL
DECISIONES
A partir de un pensamiento basado en la psicología del color hallamos las cualidades que nos representan como oficina y proyecto, conceptos tales como la integración, la conexión, unión y la ética, llevándonos a una paleta con mayoría en azules y verdes, con eso es que llegamos a un punto medio, obviamente aproximándonos a los azules, siendo que estos predominan más en la representación de los conceptos, acabando con los siguientes colores.
De esta manera producimos una escala siguiendo la tonalidad, cambiando los valores y ajustando los espacios, no queremos un alto contraste entonces nos alejamos un tanto de los colores puros como negro y blanco, llegando a terminaciones que siguen manteniendo un buen puntaje al momento de ser llevados a una herramienta de contraste para la accesibilidad en plataformas web. Una vez confirmado que la paleta siga una buena evaluación pasamos a diagramar y mantener un uso de los espacios apropiados a la intención que queremos darle a la plataforma haciendo uso de los colores.
Prototipo y Wireframes
VIDEO
https://youtu.be/8mx6c0ltHqY?si=cwLgc0RA9OqpsSbm
WIREFRAMES
|
|
|
|
|
|
03 de mayo del 2024
PLANTEAMIENTO DE CONTENIDO
Avance del 3 de mayo
Decisiones
Como oficina se nos encargo el estudio de patrones de manera individual, cada diseñador tiene la tarea de investigar de 2 a 3 patrones específicos que están relacionados con las categorías que se proporcionaron en un documento de Excel de nuestra oficina. Se propuso además que cuando investiguemos estos patrones, pensemos en cómo sería la experiencia para el usuario en la página web y cómo podríamos convertir esos patrones en animaciones interactivas. Las tareas asignadas a cada grupo son cruciales para empezar a materializar, y que el proyecto avance de manera sólida.
Patrones estudiados
- Bait and switch
- Señales de urgencia y escazes
- Stirring
- Trampa “caza bobos”
- Botones de llamada a la acción (CTA)
- Las notificaciones emergentes y los contadores de tiempo
- Anuncio disfrazado
- Vergüenza de confirmación
- Falsa Escasez
- Notificaciones de actividad
- Sneak in basket - Rappi
- Escasez inducida por suscripción
- Contadores de tiempo falsos
- Costos ocultos
- Dificultad para gestionar una acción dentro de la página
- Consentimiento confuso en políticas de privacidad
- Accesibilidad compleja a Opt-Out
- Poca transparencia de recopilación de datos
- Continuidad forzada o suscripciones ocultas
- Obstáculos de comparación de precios
- Colarse en el carrito de comprás
ELABORACION DE MATERIAL GRAFICO
Propuestas de Animaciones
Primer Prototipo
07 de mayo del 2024
ELABORACIÓN DE LA WEB
Arquitectura de contenido
Redacción de contenido
Análisis de usuario
| Conceptos | A considerar | ||
|---|---|---|---|
| Visual | Dentro de lo visual, guiándonos por las aplicaciones elegidas, tenemos los siguientes conceptos, imágenes, elementos gráficos, pero primordialmente es la organización. El buen uso de estos puede entregar una buena experiencia al usuario. | ||
| Interacción | De acuerdo a las respuestas de la encuesta, las aplicaciones con mayor nivel de interacción contienen elementos interactivos, ya sea desde dar un like, poder compartir un post, subir contenido en diferentes formatos, etc. Esto entretiene al usuario, más aun si es sobre temas los cuáles son de su interés. | ||
| Auditivo | Los sonidos estimulan la manera de percibir lo visual. "La información visual influye en la percepción del sonido sin que la persona sea consciente de ello." | ||
| Curiosidad | La curiosidad se puede relacionar con el impacto, situándonos en nuestro proyecto, con la ayuda de elementos gráficos se pueden confeccionar aspectos poco comunes, o utilizar recursos básicos (desde dibujos hechos a mano a cosas digitales, entre otros ejemplos) y potenciarlos de manera que generen una reacción de impacto sobre lo que se está observando. | ||
| Fluidez | Contenidos dinámicos. |
Organización de contenidos
LOOK AND FEEL
Prototipo
10 de mayo del 2024
ELABORACIÓN DE LA WEB
Arquitectura de contenido
LOOK AND FEEL
Prototipo
https://youtu.be/q7NDErRTgBI?si=oWGJ0sAHYCQV2_Ul
Link editable figma
Link visualización figma
Interacciones
https://youtu.be/AzKGuNWJaf0?feature=shared
14 de mayo del 2024
ELABORACIÓN DE LA WEB
Arquitectura de contenido
Contenido
Iconografía
|
|
|
LOOK AND FEEL
Prototipo
Computador
https://youtu.be/_oAjLkTu2v4?si=Q2yM4HkAR1MWI8Hl
Link Figma
Móvil
https://youtu.be/3kPHlEXSXxw?si=obKh633Jf8EsbXXx
Link Figma
Inicio de difusión
La manera en que se establece el orden y la expresión de información en páginas de instagram para industrias u organizaciones se vuelve una descripción ligera y sencilla de comprender para el usuario.
A través de esto realizamos una expresión del motivo y propósito que se trata. usando normalmente frases o textos que se definen por párrafos de máximo 3 líneas, y haciendo uso de una gama de hashtags que van relacionados a la temática o género que abarca.
Haciendo uso de gráficas sencillas y lineales que muestran un contraste definido y una lectura directa para generar una directa atención del usuario.
Acompañado a esto vemos un trabajo sobre las gráficas, donde en el caso de establecimientos ya reconocidos y registrados para la población con el objetivo de dar a entender un asunto principal en los posts.
Maquetación Claro
Maquetación Oscuro
Perfil de Instagram
17 de mayo del 2024
ELABORACIÓN DE LA WEB
Iconografía
|
|
|
|
LOOK AND FEEL
Prototipo
Computador
Link Figma
Móvil
Link Figma
LINKOGRAFÍA / ENLACES
- https://www.gluo.mx/blog/que-es-diseno-ux-ui-y-cuales-son-sus-ventajas
- https://blog.hubspot.es/website/diseno-centrado-usuario
- https://www.iebschool.com/blog/diseno-centrado-en-el-usuario-analitica-usabilidad/
- https://mailchimp.com/es/resources/what-is-a-ux-designer/#:~:text=El%20papel%20de%20un%20UX,sea%20capaz%20de%20aportar%2C%20mejor
- https://unirfp.unir.net/revista/transformacion-digital/ux-designer/#:~:text=Como%20acabamos%20de%20ver%2C%20el,una%20app%20o%20una%20web.
- https://www.theicod.org/en/professional-design/what-is-design/what-is-design
- https://uk.indeed.com/career-advice/finding-a-job/what-does-a-designer-do
