Editar Nuevo Proyecto: NodeUx

No tienes permiso para modificar esta página, por el siguiente motivo:

La acción que has solicitado está restringida a los usuarios del grupo: Usuarios.

Título:
Imagen:	Subir archivo
Tipo de Proyecto:	Proyecto de Taller Proyecto de Curso Proyecto de Tutoría Proyecto de Titulación Proyecto de Posgrado Proyecto Extracurricular Proyecto Propio Proyecto de Pregrado Anteproyecto de Titulación Proyecto de Financiamiento Externo o Fondo Concursable Importante: Si se trata de un proyecto de Investigación, hay que cambiar el tipo de plantilla editando directamente el código de esta página. Para esto hay un link en la cabecera EDITAR CÓDIGO. Desde cambiar de `{{Proyecto}}` a `{{Proyecto de Investigación}}` porque éstos tienen otros campos y particularidades especiales.
Palabras Clave:	todo en bajas, separadas por coma
Año de Inicio:
Año de Término:
Carreras Relacionadas:	Arquitectura Diseño Magíster Otra
Asignaturas Relacionadas:
Cursos Relacionados:
Profesor:
Alumnos:
PDF:
URL:
Posición:	Calcular coordenadas utilizando la dirección

Texto libre:

'''21 de mayo del 2024''' <h1 style="font-size: 35px; text-align: center; text-transform: uppercase; margin-left: 0%; margin-right: 0%; color: #0A5652; font-weight: bold;">Entrega Final</h1> <p style="display: flex; flex-direction: column; align-items: center; justify-content: center; width: full-width; height: 50px; background-color: white; color: #1C8F88; padding: 15px; font-size: 20px; font-family: Helvetica; font-variant: small-caps; text-align: center; line-height: 1.5;"> OFICINA <p style="display: flex; flex-direction: column; align-items: center; justify-content: center; width: full-width; height: 50px; background-color: #0A5652; color: white; padding: 15px; font-size: 20px; font-family: Helvetica; font-variant: small-caps; text-align: center; line-height: 1.5;"> ArchivaDocs [[Archivo:LOGOFICINARCHIVADOCS.png|thumb|left|800px|Logo 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. {| class="wikitable" ! Grupo ! Integrantes ! Tarea |- ! Look and feel |<ul><li>Paula Perez - Joel Henríquez - Bárbara Arriaza</li></ul> |<ul><li>Encargados de proyectar las ideas por medio del diseño gráfico implementado en la web, teniendo en consideración conceptos como legibilidad, adaptabilidad y uniformidad dentro de lo que prontamente sería la navegación</li></ul> |- ! Contenido |<ul><li>Josefa Maldonado - Josefa Antris - Benjamin Gonzalez</li></ul> |<ul><li>Toman el cargo de investigar y definir el contenido. Para ello trabajan con conceptos como la arquitectura de información, cuyo propósito busca organizar cada tema en su respectiva página para que luego, el grupo look and feel comience a elaborar propuestas de diseño. También son quienes redactan la materia.</li></ul> |- ! Código |<ul><li>Catalina López - Matías Morales - Karina Morales</li></ul> |<ul><li>Todo lo diseñado por look and feel, y redactado por el grupo de contenido, se lleva al lenguaje de código. De esta forma, por medio de reglas dadas por quien diseña, se permite una interpretación visual dentro de lo que sería nuestra web.</li></ul> |- ! Gestión | <ul><li>Catalina López - Josefa Maldonado</ul></li> | <ul><li>Receptores de información, ya sea de investigación a diseños de Wireframes. Se encargan de gestionar cada tarea para luego recopilar el contenido realizado por cada grupo. De esta forma se puede organizar y exponer por medio de la wiki y en clases.</ul></li> |- ! Difusión |<ul><li>Joel Henríquez - Josefa Antris</li></ul> |<ul><li>Encargados de la difusión de información respecto a la oficina ArchivaDocs y sitio Nodeux, por medio de redes sociales.</li></ul> |- |} <p style="display: flex; flex-direction: column; align-items: center; justify-content: center; width: full-width; height: 50px; background-color: white; color: #1C8F88; padding: 15px; font-size: 20px; font-family: Helvetica; font-variant: small-caps; text-align: center; line-height: 1.5;"> MEDIO DE DIFUSIÓN <p style="display: flex; flex-direction: column; align-items: center; justify-content: center; width: full-width; height: 50px; background-color: #0A5652; color: white; padding: 15px; font-size: 20px; font-family: Helvetica; font-variant: small-caps; text-align: center; line-height: 1.5;"> 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. '''<big>Historias</big>''' [[Archivo:Mediodedifusionhistoriasnodeux.png|240px]] [[Archivo:Mediodedifusionhistoriasnodeux2.png|240px]] [[Archivo:Mediodedifusionhistoriasnodeux3.png|240px]] '''<big>Posts</big>''' *'''¿Quiénes Somos?''' [[Archivo:Postnodeux1210524.png|240px]] [[Archivo:Postnodeux2210524.png|240px]] [[Archivo:Postnodeux3210524.png|240px]] *'''¿Qué es Nodeux?''' [[Archivo:Quéesnodeux210524.png|240px]] *'''¿Qué son los patrones Oscuros?''' [[Archivo:Quésonlospatronesoscurosnodeux210524.png|240px]] [[Archivo:Quésonlospatronesoscurosnodeux2210524.png|240px]] '''<big>Imágenes</big>''' [[Archivo:Imagenparapostnodeux210524.png|center|400px]] <hr style="width: 0%; clear:both;" /> <p style="display: flex; flex-direction: column; align-items: center; justify-content: center; width: full-width; height: 50px; background-color: white; color: #1C8F88; padding: 15px; font-size: 20px; font-family: Helvetica; font-variant: small-caps; text-align: center; line-height: 1.5;"> PROYECTO <p style="display: flex; flex-direction: column; align-items: center; justify-content: center; width: full-width; height: 50px; background-color: #0A5652; color: white; padding: 15px; font-size: 20px; font-family: Helvetica; font-variant: small-caps; text-align: center; line-height: 1.5;"> 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. <p style="display: flex; flex-direction: column; align-items: center; justify-content: center; width: full-width; height: 50px; background-color: #0A5652; color: white; padding: 15px; font-size: 20px; font-family: Helvetica; font-variant: small-caps; text-align: center; line-height: 1.5;"> 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. <p style="display: flex; flex-direction: column; align-items: center; justify-content: center; width: full-width; height: 50px; background-color: white; color: #1C8F88; padding: 15px; font-size: 20px; font-family: Helvetica; font-variant: small-caps; text-align: center; line-height: 1.5;"> ARQUITECTURA DE LA INFORMACIÓN [[Archivo:Arquitectura de información 14.05.24 Nodeux.png||center|800px]] <p style="display: flex; flex-direction: column; align-items: center; justify-content: center; width: full-width; height: 50px; background-color: #0A5652; color: white; padding: 15px; font-size: 20px; font-family: Helvetica; font-variant: small-caps; text-align: center; line-height: 1.5;"> Material Gráfico '''<big>Doble Diamante</big>''' [[Archivo:Doblediamanetnodeuxetapas.png|center|400px]] '''<big>¿Cómo diseñar una solución?</big>''' [[Archivo:Comodiseñarunasolucion21 05 24.png|center|600px]] '''<big>Tipos de diseño</big>''' [[Archivo:Tiposdediseño21 05 24.png|center|600px]] '''<big>Diseñar una solución</big>''' [[Archivo:Diseñar una solución NODEUX.png|center|400px]] '''<big>¿Quiénes Somos?</big>''' [[Archivo:Quiénes Somos (Metas y Servicios) NODEUX.png|center|400px]] '''<big>Campo Laboral</big>''' [[Archivo:REFERENCIA NODEUX.png|center|400px]] '''<big>Patrones</big>''' [[Archivo:Ejemplopatrones210524.png|center|800px]] '''<big>Ventajas de utilizar Patrones</big>''' [[Archivo:Mapa Ventajas por la Aplicación de Patrones210524.png|center|600px]] <p style="display: flex; flex-direction: column; align-items: center; justify-content: center; width: full-width; height: 50px; background-color: #0A5652; color: white; padding: 15px; font-size: 20px; font-family: Helvetica; font-variant: small-caps; text-align: center; line-height: 1.5;"> Wireframes '''<big>Interfaz Computador</big>''' {{#widget:YouTube|id=pe0Xqy9CdNg}} https://youtu.be/pe0Xqy9CdNg <hr style="width: 0%; clear:both;" /> '''<big>Interfaz Móvil</big>''' {{#widget:YouTube|id=4nTKo9r6aXo}} https://youtu.be/4nTKo9r6aXo <p style="display: flex; flex-direction: column; align-items: center; justify-content: center; width: full-width; height: 50px; background-color: #0A5652; color: white; padding: 15px; font-size: 20px; font-family: Helvetica; font-variant: small-caps; text-align: center; line-height: 1.5;"> Links Página Web y Repositorio '''<big>Link Página Web</big>''' http://nodeuxarchivadocs.com/ '''<big>Link Repositorio</big>''' https://github.com/LGCatalina/NodeUx.git <p style="display: flex; flex-direction: column; align-items: center; justify-content: center; width: full-width; height: 50px; background-color: #0A5652; color: white; padding: 15px; font-size: 20px; font-family: Helvetica; font-variant: small-caps; text-align: center; line-height: 1.5;"> Funcionalidad Interacciones de la Web {{#widget:YouTube|id=Oy9ORxavk5o}} https://youtu.be/Oy9ORxavk5o?feature=shared <p style="display: flex; flex-direction: column; align-items: center; justify-content: center; width: full-width; height: 50px; background-color: white; color: #1C8F88; padding: 15px; font-size: 20px; font-family: Helvetica; font-variant: small-caps; text-align: center; line-height: 1.5;"> PAUTA <p style="display: flex; flex-direction: column; align-items: center; justify-content: center; width: full-width; height: 50px; background-color: #0A5652; color: white; padding: 15px; font-size: 20px; font-family: Helvetica; font-variant: small-caps; text-align: center; line-height: 1.5;"> 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? <p style="display: flex; flex-direction: column; align-items: center; justify-content: center; width: full-width; height: 50px; background-color: #0A5652; color: white; padding: 15px; font-size: 20px; font-family: Helvetica; font-variant: small-caps; text-align: center; line-height: 1.5;"> Respuesta de usuarios '''1er Usuario''' {| class="wikitable" ! 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. |<ul><li>“Me parece sencilla de visualizar, al no estar saturada de información como… visual? facilita la concentración de la información”. </li></ul> <ul><li>“Me gusto esta interacción en la sección de patrones oscuros, la encuentro útil y facilita como el entenderlo. Eso sí siento que falta algo que indique que voy a comenzar a interactuar con el contenido…”</li></ul> |- |} <hr style="width: 0%; clear:both;" /> '''Análisis de navegación Paula Hofflinger''' [[Archivo:TablaPix PAULA NODEUX.png|center|600px]] '''2do Usuario''' {| class="wikitable" ! 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. | <ul><li>“En mmm… la categoría de manipulación emocional, La interacción me recuerda a las “típicas cadenas de WhatsApp” ajaja, es interesante ver como con estas interacciones como que comparo y recuerdo que las he visto en algún lado”</li></ul> <ul><li>“Siento que falta avisar que va a ser un punto interactivo, me tomó por sorpresa el que funcionara así como que estoy experimentando uno, me resulta útil ya que muestra claro cómo funcionan.”</li></ul> <ul><li>“me gusto la simpleza y que no haya saturación de información y colores ya que no me distrae y me concentro en la información”</li></ul> |- |} <hr style="width: 0%; clear:both;" /> '''Análisis de navegación Sofía Gonzalez''' [[Archivo:TablaPix SOFIA NODEUX.png|center|600px]] '''3ro Usuario''' {| class="wikitable" ! 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. | <ul><li>“A ver, quiero ver en que funcionan estos otros botones, AH! ¡Tienen Instagram! que cool ajjaja”</li></ul> <ul><li>“Me gusta los altos contrastes que hay en la pagina me ayudan a visualizar con mayor facilidad y me gustan los colores”</li></ul> <ul><li>“Ay pero a mi si me importan los niños pobres… estas cosas me dan cargo de conciencia claramente es un ejemplo de manipulación”</li></ul> |- |} <hr style="width: 0%; clear:both;" /> '''Análisis de navegación Javiera Gaete''' [[Archivo:Mapa pixJaviera NODEUX.png|center|600px]] '''4to Usuario''' {| class="wikitable" ! 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. | <ul><li>“No se me hizo complicado encontrar una tarea, pero pude haberla hecha un poco más rápido si hubiera menos adornos, hubiera sido 3 segundos más rápido.”</li></ul> |- |} <hr style="width: 0%; clear:both;" /> '''Análisis de navegación Ignacio Herrera''' [[Archivo:Mapa pixIgnacio NODEUX.png|center|600px]] '''5to Usuario''' {| class="wikitable" ! 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. | <ul><li>“Todo es encontrable”</li></ul> <ul><li>“es clara con los conceptos y dónde está la información”</li></ul> <ul><li>“me contextualiza”</li></ul> |- |} <hr style="width: 0%; clear:both;" /> '''Análisis de navegación Angel Pizarro''' [[Archivo:Mapa pixAngel NODEUX.png|center|600px]] <p style="display: flex; flex-direction: column; align-items: center; justify-content: center; width: full-width; height: 50px; background-color: #0A5652; color: white; padding: 15px; font-size: 20px; font-family: Helvetica; font-variant: small-caps; text-align: center; line-height: 1.5;"> 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 <div class='mw-collapsible mw-collapsed' id='mw-customcollapsible-1s'> <h1 style="font-size: 35px; text-align: center; text-transform: uppercase; margin-left: 0%; margin-right: 0%; color: #0A5652; font-weight: bold;">Proceso de Proyecto</h1> <p style="display: flex; flex-direction: column; align-items: center; justify-content: center; width: full-width; height: 50px; background-color: #0A5652; color: white; padding: 15px; font-size: 20px; font-family: Helvetica; font-variant: small-caps; text-align: center; line-height: 1.5;"> Entregas de taller <p style="display: flex; flex-direction: column; align-items: center; justify-content: center; width: full-width; height: 50px; background-color: white; color: #1C8F88; padding: 15px; font-size: 20px; font-family: Helvetica; font-variant: small-caps; text-align: center; line-height: 1.5;"> 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. <p style="display: flex; flex-direction: column; align-items: center; justify-content: center; width: full-width; height: 50px; background-color: #0A5652; color: white; padding: 15px; font-size: 20px; font-family: Helvetica; font-variant: small-caps; text-align: center; line-height: 1.5;"> Carta Gantt https://docs.google.com/spreadsheets/d/1HGFQwcin82xwIfjm6yL3wv6TVq6TnDfeyuQ7x0h1jNo/edit?usp=sharing {{#widget:Google Spreadsheet |key=1HGFQwcin82xwIfjm6yL3wv6TVq6TnDfeyuQ7x0h1jNo |width=100% |height=500 }} '''26 de abril del 2024''' <p style="display: flex; flex-direction: column; align-items: center; justify-content: center; width: full-width; height: 50px; background-color: white; color: #1C8F88; padding: 15px; font-size: 20px; font-family: Helvetica; font-variant: small-caps; text-align: center; line-height: 1.5;"> PLANTEAMIENTO DE PROPUESTA <p style="display: flex; flex-direction: column; align-items: center; justify-content: center; width: full-width; height: 50px; background-color: #0A5652; color: white; padding: 15px; font-size: 20px; font-family: Helvetica; font-variant: small-caps; text-align: center; line-height: 1.5;"> 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 . <hr style="width: 0%; clear:both;" /> <p style="display: flex; flex-direction: column; align-items: center; justify-content: center; width: full-width; height: 50px; background-color: white; color: #1C8F88; padding: 15px; font-size: 20px; font-family: Helvetica; font-variant: small-caps; text-align: center; line-height: 1.5;"> PRIMERA ETAPA <p style="display: flex; flex-direction: column; align-items: center; justify-content: center; width: full-width; height: 50px; background-color: #0A5652; color: white; padding: 15px; font-size: 20px; font-family: Helvetica; font-variant: small-caps; text-align: center; line-height: 1.5;"> Caso de estudio '''<big>DESCRIPCIÓN DEL DISEÑO</big>''' '''¿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. '''<big>ÁREAS DEL DISEÑO DE INTERACCIÓN</big>''' '''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 '''<big>CAMPO LABORAL</big>''' '''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. '''<big>DARK PATTERNS / PATRONES OSCUROS</big>''' '''¿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. '''<big>CASOS DE ESTUDIO</big>''' '''Instagram''' [[Archivo:Instagramcasodeestudioprimerapropuesta.png|izquierda|600px]] <hr style="width: 0%; clear:both;" /> '''Hubspot''' [[Archivo:Hubspotcasodeestudioprimerapropuesta.png|izquierda|600px]] <hr style="width: 0%; clear:both;" /> <p style="display: flex; flex-direction: column; align-items: center; justify-content: center; width: full-width; height: 50px; background-color: #0A5652; color: white; padding: 15px; font-size: 20px; font-family: Helvetica; font-variant: small-caps; text-align: center; line-height: 1.5;"> Doble Diamante [[Archivo:Mapa diamante Propuesta1 NODEUX.png|center|600px]] <hr style="width: 0%; clear:both;" /> <p style="display: flex; flex-direction: column; align-items: center; justify-content: center; width: full-width; height: 50px; background-color: #0A5652; color: white; padding: 15px; font-size: 20px; font-family: Helvetica; font-variant: small-caps; text-align: center; line-height: 1.5;"> Arquitectura de la información [[Archivo:Arquitectura de informaciónPROPUESTA1 NODEUX.png|center|600px]] <hr style="width: 0%; clear:both;" /> <p style="display: flex; flex-direction: column; align-items: center; justify-content: center; width: full-width; height: 50px; background-color: white; color: #1C8F88; padding: 15px; font-size: 20px; font-family: Helvetica; font-variant: small-caps; text-align: center; line-height: 1.5;"> SEGUNDA ETAPA <p style="display: flex; flex-direction: column; align-items: center; justify-content: center; width: full-width; height: 50px; background-color: #0A5652; color: white; padding: 15px; font-size: 20px; font-family: Helvetica; font-variant: small-caps; text-align: center; line-height: 1.5;"> Material Gráfico '''LOGO''' [[Archivo:logotiponeooo.jpeg|center|200px]] '''PALETA DE COLORES''' [[Archivo:paleta de colores neo 5.jpg|center|200px]] <p style="display: flex; flex-direction: column; align-items: center; justify-content: center; width: full-width; height: 50px; background-color: #0A5652; color: white; padding: 15px; font-size: 20px; font-family: Helvetica; font-variant: small-caps; text-align: center; line-height: 1.5;"> Prototipado <p style="display: flex; flex-direction: column; align-items: center; justify-content: center; width: full-width; height: 50px; background-color: #A3D7D8; color: #0A5652; padding: 15px; font-size: 20px; font-family: Helvetica; font-variant: small-caps; text-align: center; line-height: 1.5;"> Wireframe Móvil <table style="width: 100%;"> <tr> <td style="width: 33.33%; padding: 20px; vertical-align: top; text-align; left"> [[File:maqueta neo 3.jpg|150px|center]] </div> '''<big>HOME</big>''' </td> <td style="width: 33.33%; padding: 20px; vertical-align: top;"> [[File:Ui Uxmaquetaneo2.0.png|150px|center]] </div> '''<big>DISEÑO UX Y UI</big>''' </td> <td style="width: 33.33%; padding: 20px; vertical-align: top;"> [[File:Perfilmaqueta neo 1.png|150px|center]] </div> '''<big>PERFIL</big>''' </td> </tr> </table> <table style="width: 100%;"> <tr> <hr style="width: 0%; clear:both;" /> <table style="width: 100%;"> <tr> <td style="width: 33.33%; padding: 20px; vertical-align: top; text-align; left"> [[File:Pruebamaquetaneodiseño.png|150px|center]] </div> '''<big>DARK PATTERNS</big>''' </td> <td style="width: 33.33%; padding: 20px; vertical-align: top;"> [[File:maqueta neo 5.jpg|150px|center]] </div> '''<big>DARK PATTERNS</big>''' </td> <td style="width: 33.33%; padding: 20px; vertical-align: top;"> [[File:Comunidad Postsmaqueta neo 6.png|150px|center]] </div> '''<big>EXPERIENCIAS</big>''' </td> </tr> </table> <table style="width: 100%;"> <tr> <p style="display: flex; flex-direction: column; align-items: center; justify-content: center; width: full-width; height: 50px; background-color: #A3D7D8; color: #0A5652; padding: 15px; font-size: 20px; font-family: Helvetica; font-variant: small-caps; text-align: center; line-height: 1.5;"> Wireframe web <table style="width: 100%;"> <tr> <td style="width: 33.33%; padding: 20px; vertical-align: top; text-align; left"> [[File:Home2maquetawebneo3.png|300px|center]] </div> '''<big>HOME</big>''' </td> <td style="width: 33.33%; padding: 20px; vertical-align: top;"> [[File:pagina web neo 1.jpg|300px|center]] </div> '''<big>DISEÑO UX Y UI</big>''' </td> <td style="width: 33.33%; padding: 20px; vertical-align: top;"> [[File:pagina web neo 2.jpg|300px|center]] </div> '''<big>PERFIL</big>''' </td> </tr> </table> <table style="width: 100%;"> <tr> <hr style="width: 0%; clear:both;" /> <table style="width: 100%;"> <tr> <td style="width: 33.33%; padding: 20px; vertical-align: top; text-align; left"> [[File:pagina web neo 4.jpg|300px|center]] </div> '''<big>DARK PATTERNS</big>''' </td> <td style="width: 33.33%; padding: 20px; vertical-align: top;"> [[File:pagina web neo 5.jpg|300px|center]] </div> '''<big>COMUNIDAD</big>''' </td> <td style="width: 33.33%; padding: 20px; vertical-align: top;"> [[File:Comunidad 2.0maqueta webneo 5.png|300px|center]] </div> '''<big>EXPERIENCIAS</big>''' </td> </tr> </table> <table style="width: 100%;"> <tr> <hr style="width: 0%; clear:both;" /> <p style="display: flex; flex-direction: column; align-items: center; justify-content: center; width: full-width; height: 10px; background-color: #1C8F88; color: #1C8F88; padding: 15px; font-size: 20px; font-family: Helvetica; font-variant: small-caps; text-align: center; line-height: 1.5;"> <hr style="width: 0%; clear:both;" /> '''30 de abril del 2024''' <p style="display: flex; flex-direction: column; align-items: center; justify-content: center; width: full-width; height: 50px; background-color: white; color: #1C8F88; padding: 15px; font-size: 20px; font-family: Helvetica; font-variant: small-caps; text-align: center; line-height: 1.5;"> INVESTIGACIÓN <p style="display: flex; flex-direction: column; align-items: center; justify-content: center; width: full-width; height: 50px; background-color: #0A5652; color: white; padding: 15px; font-size: 20px; font-family: Helvetica; font-variant: small-caps; text-align: center; line-height: 1.5;"> 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. <table style="width: 100%;"> <tr> <td style="width: 33.33%; padding: 20px; vertical-align: top; text-align; left"> [[File:Pregunta1NODEUXENCUESTA.png|400px|center]] </div> ¿Cómo te desenvuelves con la tecnología? * La pregunta intenta conectar con el desenvolvimiento del usuario de manera general con la tecnología. Podemos observar, que dentro de las 30 personas que respondieron la encuesta, un 84,2% se desenvuelve bien o muy bien. Cabe recalcar además, que, la mayoría de respuestas recibidas corresponden a personas de un rango de edad entre los 19 a 26 años, solo 1 persona de 40 años respondió la encuesta, perteneciendo al grupo de “Más o menos”, lo cual, no la aleja mucho de las categorías anteriormente mencionadas. </td> <td style="width: 33.33%; padding: 20px; vertical-align: top;"> [[File:Pregunta3NODEUXENCUESTA.png|400px|center]] </div> Respecto a los métodos de aprendizaje, usted se considera una persona: * Para tener en cuenta el desarrollo y enfoque de nuestra página, nos interesamos por conocer los métodos de aprendizaje más comunes, o con los cuales es más factible poder trabajar, pensando en que nuestra perspectiva a exponer, es la búsqueda de información e interacción de usuario - servicio, y viceversa. Como se observa, la mayoría de las personas indica que su manera de aprender es visual, mientras que en segundo lugar, queda la opción “De todas un poco” y en un tercero “Auditiva”. Esto nos sirve para poder comprender que, si bien las personas pueden interaccionar con diferentes estímulos o materias de enseñanza pero, dentro de lo general, se puede dar más énfasis al material visual y auditivo, más que a los otros, permitiendo, en un caso hipotético, que los usuarios, mantengan una navegación más activa al sustentar su curiosidad por el contenido y la forma en la que es expuesta la información. </td> </tr> </table> <table style="width: 100%;"> <tr> <hr style="width: 0%; clear:both;" /> <table style="width: 100%;"> <tr> <td style="width: 33.33%; padding: 20px; vertical-align: top;"> [[File:Pregunta4NODEUXENCUESTA.png|400px|center]] </div> Cuándo ingresas a una página web o app, ¿qué es lo primero que llama tu atención? * Dentro de las 5 opciones, en orden jerárquico, empezando por la más seleccionada, tenemos: organización, elementos gráficos, colores, elementos de información y logo. El resultado mantiene relación con las respuestas del enunciado anterior puesto que, los aspectos seleccionados, dentro de las primeras opciones, son más bien visuales. A través de la interfaz, existen interacciones auditivas, lectoras, visuales, y kinésicas (pensando en la extensión de esta capacidad) y que, a la hora de ingresar a una página o aplicación, nos podemos llevar distintas sorpresas refiriéndonos al tipo de exposición del contenido el cual estamos consumiendo o por consumir, pero, a pesar de esto, todo sigue siendo visual, e indagando más en la organización (que está dentro de las primeras opciones escogidas) queda claro qué, si se utilizan variados elementos ya sean gráficos, descriptivos, etc., nuestra prioridad debe ser la buena organización para entregar una buena experiencia y satisfacción al usuario. </td> <td style="width: 33.33%; padding: 20px; vertical-align: top;"> [[File:Pregunta5NODEUXENCUESTA.png|400px|center]] </div> Cuándo buscas páginas web o apps de contenido informático, ¿qué es lo que esperas dentro de estás? </td> </tr> </table> <table style="width: 100%;"> <tr> <hr style="width: 0%; clear:both;" /> <table style="width: 100%;"> <tr> <td style="width: 33.33%; padding: 20px; vertical-align: top;"> [[File:Pregunta6NODEUXENCUESTA.png|400px|center]] </div> Al considerar tu tiempo y experiencia de navegación, cuando ingresas a una página/aplicación de tu interés, ¿Qué situaciones o aspectos son los que mantienen una atención constante en él, sin tomar en cuenta el pasar del tiempo? * Navegación fluida es lo que más se espera y logra captar la atención de los usuarios dentro de las páginas ya sean informativas o de otro asunto; mientras que el buen contenido, sigue en un mismo rango de valor, de acuerdo a los resultados de ambos gráficos. Vinculando las observaciones anteriores, el material visual sigue siendo algo primordial, con la diferencia de que ahora, podemos incluir otro aspecto que nos es útil, que es la materia interactiva dentro de una interfaz. </td> <td style="width: 33.33%; padding: 20px; vertical-align: top;"> [[File:Pregunta7NODEUXENCUESTA.png|400px|center]] </div> ¿Cuáles son las aplicaciones, interfaces y juegos que sueles utilizar a menudo? * Redes sociales son las apps más mencionadas dentro de esta pregunta, lo cuál nos parece interesante puesto que las redes sociales se suelen distinguir de otras aplicaciones ya que el contenido es rápido, actualizado y de mayor alcance. Es un contenido que si bien es cierto, no tiene curación de contenido pero de todas formas, los usuario deciden ocuparlas. Un punto importante que nos es relevante dentro de nuestra investigación, es el porqué las personas permanecen de forma prolongada dentro de ellas. Las preguntas que surgen son, ¿cuáles son los patrones?, ¿qué es lo que los atrae?, ¿los usuarios deciden o caen?, ¿qué es lo interesante? Luego, en cuarto lugar, tenemos youtube. Podemos destacar que su contenido, al igual que Pinterest, es visual - auditivo, conceptos que se repiten de igual forma en plataformas como Instagram, Whatsapp y Tiktok. </td> </tr> </table> <table style="width: 100%;"> <tr> <hr style="width: 0%; clear:both;" /> <table style="width: 100%;"> <tr> <td style="width: 33.33%; padding: 20px; vertical-align: top;"> [[File:Pregunta8NODEUXENCUESTA.png|400px|center]] </div> ¿Hay alguna acción en tu celular o computador que te mantenga atento? </td> <td style="width: 33.33%; padding: 20px; vertical-align: top;"> [[File:Pregunta9NODEUXENCUESTA.png|400px|center]] </div> ¿Conoces el término “Dark Patterns” (Patrones Oscuros)? Si tu respuesta fue sí, ¿Podrías mencionar uno? * Lo difícil de hacer un reclamo en Uber * cuando te piden suscribirte a plataformas mientras las estas ocupando y no te avisan antes que debes suscribirte * Aceptar las cookies o formularios personales antes de seguir leyendo un artículo * Redes sociales, varias páginas de Google en general, casi en todo piden un registro * Anuncios, propagandas, preguntas escondidas? * Cuando una aplicación necesite pagar o cancelar una suscripción para recolectar mas información. </td> </tr> </table> <table style="width: 100%;"> <tr> <hr style="width: 0%; clear:both;" /> <p style="display: flex; flex-direction: column; align-items: center; justify-content: center; width: full-width; height: 50px; background-color: #0A5652; color: white; padding: 15px; font-size: 20px; font-family: Helvetica; font-variant: small-caps; text-align: center; line-height: 1.5;"> 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. <p style="display: flex; flex-direction: column; align-items: center; justify-content: center; width: full-width; height: 50px; background-color: #0A5652; color: white; padding: 15px; font-size: 20px; font-family: Helvetica; font-variant: small-caps; text-align: center; line-height: 1.5;"> 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. <hr style="width: 0%; clear:both;" /> <p style="display: flex; flex-direction: column; align-items: center; justify-content: center; width: full-width; height: 50px; background-color: white; color: #1C8F88; padding: 15px; font-size: 20px; font-family: Helvetica; font-variant: small-caps; text-align: center; line-height: 1.5;"> PROPUESTA DE CONTENIDO <p style="display: flex; flex-direction: column; align-items: center; justify-content: center; width: full-width; height: 50px; background-color: #0A5652; color: white; padding: 15px; font-size: 20px; font-family: Helvetica; font-variant: small-caps; text-align: center; line-height: 1.5;"> Arquitectura de la información [[Archivo:Arquitectura de información2jpgNODEUX.jpg|center|800px]] <hr style="width: 0%; clear:both;" /> <p style="display: flex; flex-direction: column; align-items: center; justify-content: center; width: full-width; height: 50px; background-color: #0A5652; color: white; padding: 15px; font-size: 20px; font-family: Helvetica; font-variant: small-caps; text-align: center; line-height: 1.5;"> 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. {{#widget:P5js |url = https://editor.p5js.org/matias.morales.j/sketches/PJ-BVS0Qc |width = 500 |height =500 }} <hr style="width: 0%; clear:both;" /> '''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. {{#widget:P5js |url = https://editor.p5js.org/matias.morales.j/sketches/KdbeuzLrK |width = 500 |height =500 }} <hr style="width: 0%; clear:both;" /> <p style="display: flex; flex-direction: column; align-items: center; justify-content: center; width: full-width; height: 50px; background-color: white; color: #1C8F88; padding: 15px; font-size: 20px; font-family: Helvetica; font-variant: small-caps; text-align: center; line-height: 1.5;"> LOOK AND FEEL '''DECISIONES''' [[Archivo:Paleta WebNODEUX.png|550px|miniaturadeimagen|izquierda|Paleta web]] 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. <hr style="width: 0%; clear:both;" /> [[Archivo:Paleta oficinaNODEUX.png|550px|miniaturadeimagen|izquierda|Paleta oficina]] 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. <hr style="width: 0%; clear:both;" /> <p style="display: flex; flex-direction: column; align-items: center; justify-content: center; width: full-width; height: 50px; background-color: #0A5652; color: white; padding: 15px; font-size: 20px; font-family: Helvetica; font-variant: small-caps; text-align: center; line-height: 1.5;"> Prototipo y Wireframes '''VIDEO''' {{#widget:YouTube|id=8mx6c0ltHqY}} https://youtu.be/8mx6c0ltHqY?si=cwLgc0RA9OqpsSbm <hr style="width: 0%; clear:both;" /> '''WIREFRAMES''' <table style="width: 100%;"> <tr> <td style="width: 33.33%; padding: 20px; vertical-align: top; text-align; left"> [[File:DiseñoUXUIintropaginaweb2.png|400px|center]] </div> '''<big>DISEÑO UX Y UI</big>''' </td> <td style="width: 33.33%; padding: 20px; vertical-align: top;"> [[File:ComunidadWIREFRAME2.png|400px|center]] </div> '''<big>COMUNIDAD</big>''' </td> <td style="width: 33.33%; padding: 20px; vertical-align: top;"> [[File:Comunidad 2WIREFRAME2.png|400px|center]] </div> '''<big>COMUNIDAD</big>''' </td> </tr> </table> <table style="width: 100%;"> <tr> <hr style="width: 0%; clear:both;" /> <table style="width: 100%;"> <tr> <td style="width: 33.33%; padding: 20px; vertical-align: top; text-align; left"> [[File:PatronesWIREFRAME2.png|400px|center]] </div> '''<big>DARK PATTERNS</big>''' </td> <td style="width: 33.33%; padding: 20px; vertical-align: top;"> [[File:Patrones 2WIREFRAME2.png|400px|center]] </div> '''<big>DARK PATTERNS</big>''' </td> <td style="width: 33.33%; padding: 20px; vertical-align: top;"> [[File:PerfilWIREFRAME2.png|400px|center]] </div> '''<big>PERFIL</big>''' </td> </tr> </table> <table style="width: 100%;"> <tr> '''03 de mayo del 2024''' <p style="display: flex; flex-direction: column; align-items: center; justify-content: center; width: full-width; height: 50px; background-color: white; color: #1C8F88; padding: 15px; font-size: 20px; font-family: Helvetica; font-variant: small-caps; text-align: center; line-height: 1.5;"> PLANTEAMIENTO DE CONTENIDO <p style="display: flex; flex-direction: column; align-items: center; justify-content: center; width: full-width; height: 50px; background-color: #0A5652; color: white; padding: 15px; font-size: 20px; font-family: Helvetica; font-variant: small-caps; text-align: center; line-height: 1.5;"> Avance del 3 de mayo '''<big>Decisiones</big>''' 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. '''<big>Patrones estudiados</big>''' * 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 <p style="display: flex; flex-direction: column; align-items: center; justify-content: center; width: full-width; height: 50px; background-color: white; color: #1C8F88; padding: 15px; font-size: 20px; font-family: Helvetica; font-variant: small-caps; text-align: center; line-height: 1.5;"> ELABORACION DE MATERIAL GRAFICO '''<big>Propuestas de Animaciones</big>''' [[Archivo:Cuadro de busqueda.gif|center|400px]] [[Archivo:Eliminar notificaciones emergentes.gif|center|400px]] <hr style="width: 0%; clear:both;" /> '''<big>Primer Prototipo</big>''' https://www.figma.com/proto/AY0tvoBCpZls9i15F2q7QH/Figma-Web?type=design&node-id=73-415&t=EWNzC1GWVWr0Yduo-0&scaling=scale-down&page-id=0%3A1&starting-point-node-id=73%3A415&show-proto-sidebar=1 {{#widget:YouTube|id=_T0wES5oQyE}} https://youtu.be/_T0wES5oQyE?si=cF81A_3JGcG_8wC8 '''07 de mayo del 2024''' <p style="display: flex; flex-direction: column; align-items: center; justify-content: center; width: full-width; height: 50px; background-color: white; color: #1C8F88; padding: 15px; font-size: 20px; font-family: Helvetica; font-variant: small-caps; text-align: center; line-height: 1.5;"> ELABORACIÓN DE LA WEB <p style="display: flex; flex-direction: column; align-items: center; justify-content: center; width: full-width; height: 50px; background-color: #0A5652; color: white; padding: 15px; font-size: 20px; font-family: Helvetica; font-variant: small-caps; text-align: center; line-height: 1.5;"> Arquitectura de contenido [[Archivo:Arquitectura de Información ListaNODEUX.png|center|800px]] <hr style="width: 0%; clear:both;" /> <p style="display: flex; flex-direction: column; align-items: center; justify-content: center; width: full-width; height: 50px; background-color: #0A5652; color: white; padding: 15px; font-size: 20px; font-family: Helvetica; font-variant: small-caps; text-align: center; line-height: 1.5;"> Redacción de contenido '''<big>Análisis de usuario</big>''' {| class="wikitable" ! !! 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. || |} <hr style="width: 0%; clear:both;" /> '''<big>Organización de contenidos</big>''' <pdf width='1000' height='1000'>File:Nodeux Contenido.pdf</pdf> <hr style="width: 0%; clear:both;" /> <p style="display: flex; flex-direction: column; align-items: center; justify-content: center; width: full-width; height: 50px; background-color: white; color: #1C8F88; padding: 15px; font-size: 20px; font-family: Helvetica; font-variant: small-caps; text-align: center; line-height: 1.5;"> LOOK AND FEEL <p style="display: flex; flex-direction: column; align-items: center; justify-content: center; width: full-width; height: 50px; background-color: #0A5652; color: white; padding: 15px; font-size: 20px; font-family: Helvetica; font-variant: small-caps; text-align: center; line-height: 1.5;"> Prototipo {{#widget:YouTube|id=kqlOgFDCIwM}} https://youtu.be/kqlOgFDCIwM?si=8pUYuYB3IxbvfMT2 https://www.figma.com/proto/AY0tvoBCpZls9i15F2q7QH/Figma-Web?type=design&node-id=289-335&t=im1g8MU9cv4vfOFo-0&scaling=scale-down&page-id=273%3A2&starting-point-node-id=289%3A335 '''10 de mayo del 2024''' <p style="display: flex; flex-direction: column; align-items: center; justify-content: center; width: full-width; height: 50px; background-color: white; color: #1C8F88; padding: 15px; font-size: 20px; font-family: Helvetica; font-variant: small-caps; text-align: center; line-height: 1.5;"> ELABORACIÓN DE LA WEB <p style="display: flex; flex-direction: column; align-items: center; justify-content: center; width: full-width; height: 50px; background-color: #0A5652; color: white; padding: 15px; font-size: 20px; font-family: Helvetica; font-variant: small-caps; text-align: center; line-height: 1.5;"> Arquitectura de contenido [[Archivo:Arquitecturadeinformación10.05.png|center|800px]] <p style="display: flex; flex-direction: column; align-items: center; justify-content: center; width: full-width; height: 50px; background-color: white; color: #1C8F88; padding: 15px; font-size: 20px; font-family: Helvetica; font-variant: small-caps; text-align: center; line-height: 1.5;"> LOOK AND FEEL <p style="display: flex; flex-direction: column; align-items: center; justify-content: center; width: full-width; height: 50px; background-color: #0A5652; color: white; padding: 15px; font-size: 20px; font-family: Helvetica; font-variant: small-caps; text-align: center; line-height: 1.5;"> Prototipo {{#widget:YouTube|id=q7NDErRTgBI}} https://youtu.be/q7NDErRTgBI?si=oWGJ0sAHYCQV2_Ul '''<big>Link editable figma</big>''' https://www.figma.com/file/FfLnyw33ZZPN8Z2WH3Y5YN/NodeUX-(Con-Scroll)?type=design&node-id=22-3352&mode=design&t=Yq77g3F1qQhMw1lW-0 '''<big>Link visualización figma</big>''' https://www.figma.com/proto/FfLnyw33ZZPN8Z2WH3Y5YN/NodeUX-(Con-Scroll)?type=design&node-id=2-6950&t=Yq77g3F1qQhMw1lW-0&scaling=min-zoom&page-id=0%3A1&starting-point-node-id=2%3A6950 <p style="display: flex; flex-direction: column; align-items: center; justify-content: center; width: full-width; height: 50px; background-color: #0A5652; color: white; padding: 15px; font-size: 20px; font-family: Helvetica; font-variant: small-caps; text-align: center; line-height: 1.5;"> Interacciones {{#widget:YouTube|id=AzKGuNWJaf0}} https://youtu.be/AzKGuNWJaf0?feature=shared <hr style="width: 0%; clear:both;" /> '''14 de mayo del 2024''' <p style="display: flex; flex-direction: column; align-items: center; justify-content: center; width: full-width; height: 50px; background-color: white; color: #1C8F88; padding: 15px; font-size: 20px; font-family: Helvetica; font-variant: small-caps; text-align: center; line-height: 1.5;"> ELABORACIÓN DE LA WEB <p style="display: flex; flex-direction: column; align-items: center; justify-content: center; width: full-width; height: 50px; background-color: #0A5652; color: white; padding: 15px; font-size: 20px; font-family: Helvetica; font-variant: small-caps; text-align: center; line-height: 1.5;"> Arquitectura de contenido [[Archivo:Arquitectura de información 14.05.24 Nodeux.png||center|800px]] <p style="display: flex; flex-direction: column; align-items: center; justify-content: center; width: full-width; height: 50px; background-color: #0A5652; color: white; padding: 15px; font-size: 20px; font-family: Helvetica; font-variant: small-caps; text-align: center; line-height: 1.5;"> Contenido <pdf width='1000' height='1000'>Archivo:Desglose contenido Nodeux AI.pdf</pdf> <p style="display: flex; flex-direction: column; align-items: center; justify-content: center; width: full-width; height: 50px; background-color: #0A5652; color: white; padding: 15px; font-size: 20px; font-family: Helvetica; font-variant: small-caps; text-align: center; line-height: 1.5;"> Iconografía <table style="width: 100%;"> <tr> <td style="width: 33.33%; padding: 20px; vertical-align: top; text-align; left"> [[File:Quiénes Somos (Metas y Servicios) NODEUX.png|400px|center]] </div> '''<big>Quienes Somos</big>''' </td> <td style="width: 33.33%; padding: 20px; vertical-align: top;"> [[File:REFERENCIA NODEUX.png|400px|center]] </div> '''<big>Campo Laboral</big>''' </td> </tr> </table> <table style="width: 100%;"> <tr> <p style="display: flex; flex-direction: column; align-items: center; justify-content: center; width: full-width; height: 50px; background-color: white; color: #1C8F88; padding: 15px; font-size: 20px; font-family: Helvetica; font-variant: small-caps; text-align: center; line-height: 1.5;"> LOOK AND FEEL <p style="display: flex; flex-direction: column; align-items: center; justify-content: center; width: full-width; height: 50px; background-color: #0A5652; color: white; padding: 15px; font-size: 20px; font-family: Helvetica; font-variant: small-caps; text-align: center; line-height: 1.5;"> Prototipo '''<big>Computador</big>''' {{#widget:YouTube|id=_oAjLkTu2v4}} https://youtu.be/_oAjLkTu2v4?si=Q2yM4HkAR1MWI8Hl '''<big>Link Figma</big>''' https://www.figma.com/proto/FfLnyw33ZZPN8Z2WH3Y5YN/NodeUX-(Con-Scroll)?node-id=336-5391&t=MvlFs1nhlJfNdyod-0&scaling=scale-down&page-id=0%3A1&starting-point-node-id=336%3A5391&show-proto-sidebar=1&disable-default-keyboard-nav=1&hide-ui=1 <hr style="width: 0%; clear:both;" /> '''<big>Móvil</big>''' {{#widget:YouTube|id=3kPHlEXSXxw}} https://youtu.be/3kPHlEXSXxw?si=obKh633Jf8EsbXXx '''<big>Link Figma</big>''' https://www.figma.com/proto/FfLnyw33ZZPN8Z2WH3Y5YN/NodeUX-(Con-Scroll)?node-id=277-150&t=iAyFGPfRDniCqaLj-0&scaling=scale-down&page-id=2%3A8545&starting-point-node-id=277%3A150 <hr style="width: 0%; clear:both;" /> <p style="display: flex; flex-direction: column; align-items: center; justify-content: center; width: full-width; height: 50px; background-color: #0A5652; color: white; padding: 15px; font-size: 20px; font-family: Helvetica; font-variant: small-caps; text-align: center; line-height: 1.5;"> 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. '''<big>Maquetación Claro</big>''' [[Archivo:Claro1NODEUXinstagram.png|240px]] [[Archivo:Claro2NODEUXinstagram.png|240px]] [[Archivo:Claro3NODEUXinstagram.png|240px]] [[Archivo:Claro4NODEUXinstagram.png|240px]] '''<big>Maquetación Oscuro</big>''' [[Archivo:Oscuros1NODEUXinstagram.png|240px]] [[Archivo:Oscuros2NODEUXinstagram.png|240px]] [[Archivo:Oscuros3NODEUXinstagram.png|240px]] [[Archivo:Oscuros4NODEUXinstagram.png|240px]] '''<big>Perfil de Instagram</big>''' [[Archivo:PerfildeinstagramNODEUX.png|center|400px]] <hr style="width: 0%; clear:both;" /> '''17 de mayo del 2024''' <p style="display: flex; flex-direction: column; align-items: center; justify-content: center; width: full-width; height: 50px; background-color: white; color: #1C8F88; padding: 15px; font-size: 20px; font-family: Helvetica; font-variant: small-caps; text-align: center; line-height: 1.5;"> ELABORACIÓN DE LA WEB <p style="display: flex; flex-direction: column; align-items: center; justify-content: center; width: full-width; height: 50px; background-color: #0A5652; color: white; padding: 15px; font-size: 20px; font-family: Helvetica; font-variant: small-caps; text-align: center; line-height: 1.5;"> Iconografía <table style="width: 100%;"> <tr> <td style="width: 33.33%; padding: 20px; vertical-align: top; text-align; left"> [[File:Tipos de diseño NODEUX .png|400px|center]] </div> '''<big>Tipos de Diseño</big>''' </td> <td style="width: 33.33%; padding: 20px; vertical-align: top;"> [[File:Comodiseñarunasolucion21 05 24.png|400px|center]] </div> '''<big>¿Cómo conocer al usuario?</big>''' <tr> <td style="width: 33.33%; padding: 20px; vertical-align: top; text-align; left"> [[File:Diseñar una solución NODEUX.png|400px|center]] </div> '''<big>Diseñar una solución</big>''' </td> </tr> </table> <table style="width: 100%;"> <tr> <p style="display: flex; flex-direction: column; align-items: center; justify-content: center; width: full-width; height: 50px; background-color: white; color: #1C8F88; padding: 15px; font-size: 20px; font-family: Helvetica; font-variant: small-caps; text-align: center; line-height: 1.5;"> LOOK AND FEEL <p style="display: flex; flex-direction: column; align-items: center; justify-content: center; width: full-width; height: 50px; background-color: #0A5652; color: white; padding: 15px; font-size: 20px; font-family: Helvetica; font-variant: small-caps; text-align: center; line-height: 1.5;"> Prototipo '''<big>Computador</big>''' {{#widget:YouTube|id=drIpsYEAsl8}} https://youtu.be/drIpsYEAsl8 '''<big>Link Figma</big>''' https://www.figma.com/proto/FfLnyw33ZZPN8Z2WH3Y5YN/NodeUX-Con-Scroll?node-id=0-1&viewport=429%2C91%2C0.02&t=NaSVpudVaX19WfAG-0&scaling=scale-down&starting-point-node-id=336%3A5391&show-proto-sidebar=1 <hr style="width: 0%; clear:both;" /> '''<big>Móvil</big>''' {{#widget:YouTube|id=A57FyXjHwJM}} https://youtu.be/A57FyXjHwJM '''<big>Link Figma</big>''' https://www.figma.com/proto/FfLnyw33ZZPN8Z2WH3Y5YN/NodeUX-Con-Scroll?node-id=2-8545&viewport=442%2C-338%2C0.08&t=NaSVpudVaX19WfAG-0&scaling=scale-down&starting-point-node-id=277%3A150 <hr style="width: 0%; clear:both;" /> '''<big>LINKOGRAFÍA / ENLACES</big>''' * 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 </div>

Resumen:

Esta es una edición menor

Vigilar esta página

Cancelar