Diseño Digital - Sesión 02_merged (1) PDF

DISEÑO DIGITAL E. P. Publicidad y Multimedia Docente: Paola E. R. Meza Gómez  Primera Fase UNIDAD I Diseño Visual para UX (Experiencia de Usuario) a. Principios del diseño centrados en el usuario. b. Tipografía y Color en pantalla. c. Diseño de im...

DISEÑO DIGITAL E. P. Publicidad y Multimedia Docente: Paola E. R. Meza Gómez  Primera Fase UNIDAD I Diseño Visual para UX (Experiencia de Usuario) a. Principios del diseño centrados en el usuario. b. Tipografía y Color en pantalla. c. Diseño de imágenes, gráficos y elementos multimedia. d. MoodBoards: estructura, jerarquía, íconos, efectos visuales aplicados a piezas digitales  Primera Fase Resultado de Aprendizaje - Distingue el rol del diseño gráfico en el proceso de visualización relacionado a la experiencia de usuario e interfaz de usuario. - Utiliza las herramientas del software vectorial, de tratamiento de imágenes y de diagramación para diseñar gráficos y elementos multimedia. - Elabora propuestas gráficas considerando las necesidades de los usuarios, y en el alto nivel de satisfacción.  Primera Fase Objetivo de Aprendizaje Reconocer los diferentes conceptos sobre diseño visual y la experiencia de usuario. Diseño Centrado en el Usuario  Clientes Partes implicadas Equipo de diseño usuario  Diseño Centrado en el Usuario El diseño centrado en el usuario es una metodología que utiliza investigación y análisis para crear experiencias de usuario efectivas. ¿QUÉ ES? El diseño visual centrado en el usuario es un enfoque en el que la estética y la funcionalidad se unen para crear soluciones visuales que se adaptan a las necesidades, deseos y comportamientos de los usuarios. No se trata solo de hacer que algo se vea bien, sino de asegurarse de que lo que se vea bien también sea útil y agradable para los usuarios.  Principios del Diseño de Interfaz Centrado en el usuario Investigación de usuarios y análisis contextual: La base del Diseño centra en el Usuario, es comprender a fondo quiénes son los usuarios, cuáles son sus necesidades, y en qué contexto utilizarán la interfaz. Esto implica un análisis exhaustivo de los usuarios a través de entrevistas, encuestas, y observaciones directas para identificar patrones de comportamiento y expectativas​  Principios del Diseño de Interfaz Centrado en el usuario Diseño iterativo basado en pruebas : Diseño iterativo basado en pruebas: El diseño centrado en el usuario se apoya en un ciclo continuo de diseño, prototipado y pruebas con usuarios reales. Este enfoque iterativo permite realizar ajustes basados en la retroalimentación directa, mejorando progresivamente la usabilidad y la satisfacción del usuario. Este proceso iterativo asegura que el producto final sea refinado y verdaderamente centrado en el usuario.  Principios del Diseño de Interfaz Centrado en el usuario Accesibilidad y usabilidad: Un principio clave del UCD es garantizar que el sistema sea accesible para todos los usuarios, independientemente de sus capacidades físicas o cognitivas. Esto incluye la consideración de normas de accesibilidad y la evaluación continua de la usabilidad del producto en diferentes escenarios.​  Principios del Diseño de Interfaz Centrado en el usuario Simplicidad y eficiencia: El diseño debe enfocarse en simplificar la interacción del usuario con el sistema, reduciendo la carga cognitiva y facilitando la consecución de los objetivos del usuario de manera eficiente. Esto incluye la eliminación de complejidades innecesarias y la optimización de los flujos de trabajo).  Matriz de influencias de interés alto Defensores Promotores Rojo Mantener satisfechos Gestionar de cerca - poco interés - bajo apoyo PODER Apáticos Latentes bajo Supervisar Mantener informados Verde - colaboran bajo INTERÉS alto Matriz de influencias de interés 1. Alta Influencia, Alto Interés (Gestionar de Cerca): Descripción: Estas partes interesadas son cruciales para el proyecto debido a su gran interés y capacidad de influencia. Estrategia: Mantén una comunicación constante y detallada con ellos, involucrándolos en decisiones clave y asegurándote de que sus necesidades y expectativas sean atendidas. 2. Alta Influencia, Bajo Interés (Mantener Satisfechos): Descripción: Estas partes interesadas pueden influir significativamente en el proyecto, aunque no estén interesadas en los detalles diarios. Estrategia: Infórmales sobre los aspectos importantes del proyecto que puedan afectar sus intereses y asegúrate de que estén satisfechos con el progreso y las decisiones estratégicas. Matriz de influencias de interés 3.-Baja Influencia, Alto Interés (Mantener Informados): Descripción: Estas partes interesadas están muy interesadas en el proyecto, pero tienen poca capacidad de influencia. Estrategia: Proporciona actualizaciones regulares y detalladas para mantenerlos informados y asegúrate de que sus preocupaciones sean escuchadas y consideradas. 4.- Baja Influencia, Bajo Interés (Monitorear con Esfuerzo Mínimo): Descripción: Estas partes interesadas tienen tanto bajo interés como baja capacidad de influencia en el proyecto. Estrategia: Monitorea sus necesidades y preocupaciones con el mínimo esfuerzo necesario, manteniendo una comunicación básica para asegurarte de que están al tanto de los desarrollos importantes. Pasos para Crear una Matriz de Influencia- Interés 1. Identificar las Partes Interesadas: 2. Haz una lista de todas las partes interesadas relevantes para el proyecto. 3. Evaluar el Nivel de Influencia e Interés: 4. Evalúa cada parte interesada en términos de su capacidad para influir en el proyecto (alta o baja) y su nivel de interés en el proyecto (alto o bajo). 5. Ubicar a las Partes Interesadas en la Matriz: 6. Coloca cada parte interesada en el cuadrante correspondiente de la matriz 7. según su nivel de influencia e interés. Pasos para Crear una Matriz de Influencia- Interés 1. Desarrollar Estrategias de Gestión: Define estrategias de comunicación y gestión para cada cuadrante de la matriz, adaptadas a las características y necesidades de las partes interesadas en ese cuadrante. 2. Implementar y Revisar: Implementa las estrategias de gestión de partes interesadas y revísalas periódicamente para asegurarte de que siguen siendo efectivas Importancia de la Experiencia de Usuario 1 Valor al Usuario 2 Mejor Retención 3 Mayor Ingresos - confianza Mejorar la experiencia del Una navegación intuitiva Los clientes satisfechos y usuario aumenta su e interfaces amigables leales generan mayores satisfacción y lealtad a la hacen que los usuarios ingresos a largo plazo. marca. regresen y utilicen la Un diseño coherente y plataforma más a profesional transmite menudo. confianza en la calidad del producto. Importancia de la Experiencia de Usuario 4 Mejorada 5 Mejor interacción 6 Información Los usuarios se sienten Una interfaz intuitiva y Los elementos visuales más cómodos y visualmente atractiva bien diseñados ayudan a comprometidos cuando el facilita la navegación y el retener información de diseño se adapta a sus uso del producto.. manera más efectiva que preferencias y el texto simple necesidades. Aspectos para tomar en cuenta Imágenes impactantes y coherentes. Diseño de interfaz intuitivo. Jerarquía visual clara. Uso apropiado de colores y tipografía. Consistencia en la apariencia en todo el producto  Métodos de Investigación y Análisis de Usuario 1 2 3 4 Investigación del usuario Buyer persona Diseño Evaluación Usabilidad Comprender las Desarrollar Crear prototipos y Evaluar la eficacia necesidades, perfiles ficticios recibir del diseño a deseos y que representen retroalimentación través de pruebas con usuarios comportamient a los diferentes de los usuarios reales. os de los tipos de usuarios para realizar usuarios. mejoras continuas. Métodos de Investigación y Análisis de Usuario Observación 1 2 3 4 Foco en el Usuario Entrevista Observación Observación Foco en el Usuario Conversaciones Observar el Investigaciones de Utilizar los datos individuales para comportamiento campo en entornos recopilados para recopilar de los usuarios a donde se utilizan entender cómo se información sobre través de la los productos para utiliza el producto lo que las realización de entender cómo se y diseñar personas quieren y pruebas y comportan los soluciones necesitan. seguimiento del usuarios en centradas en el uso real del situaciones usuario. producto. cotidianas. Diseño de Interfaz Amigable y Accesible Usabilidad Accesibilidad Responsividad Facilitar la navegación al usuario Adaptar la interfaz para usuarios Diseñar interfaces que se con una interfaz intuitiva y bien con discapacidades visuales o adapten a cualquier dispositivo estructurada aumenta su motoras mejora la accesibilidad ofrece una mejor experiencia de satisfacción y reducir su y experiencia del usuario. usuario en diferentes frustración. plataformas. Pruebas de Usabilidad y Retroalimentación Pruebas de Usabilidad Retroalimentación Continuo Mejoramiento Realizar pruebas permite Recibir comentarios de los evaluar la efectividad y usuarios ayuda a La retroalimentación y eficiencia del diseño, entendender sus pruebas de usabilidad identificar problemas y necesidades y a hacer continuas permiten obtener retroalimentación cambios significativos en el mantener el diseño centrado para mejoras. diseño basados en en el usuario y mejorarlo evidencia. continuamente. Optimización Continua Basada en el Usuario 1 2 3 4 Supervisar los Analizar los Seguir las Feedback del Analytics Resultados Tendencias Usuario Observar las Utilizando los Siguiendo las Recopilando tendencias y datos de los tendencias de la sugerencias y comportamientos análisis es posible industria se solicitando de los usuarios encontrar áreas de pueden adaptar feedback permite ajustar y mejora y mejorar las interfaces a las directamente de optimizar el diseño la eficacia de la preferencias de los los usuarios, es continuamente. UX. usuarios. posible ajustar y personalizar las interfaces para satisfacer sus requirimientos. OBSERVAR IMPORTANTE Usuario INVESTIGACIÓN DE USUARIO consiga una MÁS PROFUNDA. interfaz adecuada. CENTRARSE EN DISEÑAR LA Los deseos del EXPERIENCIA DEL USUARIO. cliente y los deseos del usuario deben equilibrarse AYUDAR A LOS USUARIO A CONSEGUIR OBJETIVOS INDIVIDUALES. El cliente obtenga un retorno de su inversión. GRACIAS E. P. Publicidad y Multimedia Paola E. R. Meza Gómez [email protected] [email protected] EXPERIENCIA DE USUARIO E. P. Publicidad y Multimedia Docente: Paola E. R. Meza Gómez Experiencia de usuario  Clientes Partes implicadas Equipo de diseño usuario  Matriz de influencias de interés alto Rojo Mantener satisfechos Gestionar de cerca - poco interés - bajo apoyo PODER bajo Supervisar Mantener informados Verde - colaboran bajo INTERÉS alto OBSERVAR IMPORTANTE INVESTIGACIÓN DE USUARIO Usuario MÁS PROFUNDA. consiga una Los deseos del interfaz cliente y los deseos adecuada. CENTRARSE EN DISEÑAR LA EXPERIENCIA DEL USUARIO. del usuario deben El cliente equilibrarse obtenga un retorno de su AYUDAR A LOS USUARIO A CONSEGUIR OBJETIVOS inversión. INDIVIDUALES. Con nuestro diseño debemos alcanzar... 1 2 3 4 Efectividad Eficiencia Satisfacción Contexto Capacidad de un producto para Esfuerzo requerido por las Emocional En el cual el usuario realiza la conseguir de el los resultados personas Abastracto y subjetivo tarea. esperados – objetivos. Se relaciona con la interacción Hoy es el mundo y sus posibilidades Usuario Todos somos usuarios. Los diseñadores no son usuarios típicos. SABEN DEMASIADO No pueden ser objetivos Wood (2015) Características del USUARIO Todos tienen distinto niveles de experiencia. No todos tienen las mismas destrezas Tienen diferentes necesidades. Esperan cosas distintas de la interacción. Es conveniente personalizar al usuario. Wood (2015) USUARIO El usuario trabajo con sistemas mentales, los mismo que varían de un individuo a otro, en función de: Evolución del Individuo Aprendizaje  Reducir el enfoque a los usuarios principales …. esto no excluirá a los demás usuarios a menos que sea necesario – Permite centrarse  Franja de edad/etnia/experiencia/género/nivel de ingresos/idioma/nivel de estudios/localización/ocupación profesional/religión/ Pensar en el principal objetivo de uso Enumerar que necesita el sistema para que el usuario alcance su objetivo. Seleccionar un grupo con las características Preguntar al grupo y someterlo a una serie de métodos de investigación de usuarios Posición de los especialistas en el diseño de interfaz Wood (2015) ¿Para quién diseñamos? Posición de usuario en el diseño de interfaz Wood (2015) Antes de iniciar el diseño de interfaz ▹ El usuario tiene objetivos personales ▹ No son los mismos que tiene el programador, el diseñador, o el cliente. ▹ Busca un buen resultado a partir de su propia interacción. Wood (2015) Tipos de usuarios Usuarios Temporales y ocasionales tiene interacción con el sistema por un tiempo limitado → necesitan interfaz que los guíen Usuarios potenciales → utilizan el sistema por varias horas durante el día requieren de métodos abreviados para permitirles la interacción tan rápido como sea posible. Usuarios con discapacidades → Poder adaptarse Ivan Sommerville INTERFAZ Conceptos – Lenguaje de entrada para el usuario, un lenguaje de salida para el ordenador y un protocolo para la interacción. – Los aspectos del sistema con los que el usuario entra en contacto. – Superficie de contacto, entre el usuario y el ordenador. – Parte visual de las diferentes pantallas del programa  Atiende a todos los factores, tanto internos como externos del usuario y del sistema interactivo, que causen alguna sensación a quien esté, Experiencia de utilizando un sistema interactivo usuarios concreto en un determinado contexto de uso. (masi, Oliva y Granollers, 2011  20 Experiencia de usuario × Es un conjunto métodos aplicados al proceso de diseño de experiencias interactivas. × Anima al diseñador interactivo a hacer de la calidad del experiencia de los usuarios su principal preocupación.  21 UXD Un diseño solo triunfa cuando satisface las necesidades del cliente que lo ha encargado y proporciona una buena experiencia a los usuarios destinatarios.  23 Un producto debe ser × Bueno para el usuario × Considerar: × Lo que se puede lograr dentro de los limites de tiempo, presupuesto o la falta de otros recursos. × ESFUERZO EN EQUIPO  Limites de Lo que es tiempo bueno Presupuesto para el Presencia de usuario recursos 22  24 El esfuerzo del diseño × No se debe ver a simple vista × Requiere expertos en diferentes áreas × Personas que cuestionen GRACIAS E. P. Publicidad y Multimedia Paola E. R. Meza Gómez [email protected] [email protected] DISEÑO UI E. P. Publicidad y Multimedia Docente: Paola E. R. Meza Gómez  Primera Fase Resultado de Aprendizaje Distingue el rol del diseño gráfico en el proceso de visualización relacionado a la experiencia de usuario e interfaz de usuario. Utiliza las herramientas del software vectorial, de tratamiento de imágenes y de diagramación para diseñar gráficos y elementos multimedia. Elabora propuestas gráficas considerando las necesidades de los usuarios, y en el alto nivel de satisfacción.  Primera Fase Objetivo de Aprendizaje Identificar los elementos que participan en el diseño de interfaz (imágenes, gráficos, color, texto). DISEÑO UI = user interface ✗ Parte visible del software que permite permiten la comunicación entre un usuario y el sistema ✗ También es responsable de transformar las señales generadas por un aparato en señales comprensibles para el hombre. 5 Evolución de las interfaces de usuario 6 ✗ Una interfaz de usuario es un medio que permite a una persona comunicarse con un sistema digital, ✗ recibir ✗ ingresar ✗ darle instrucciones 7 ✗ "[...] generación es un grupo de personas que tienen la misma edad, aproximadamente viven un mismo periodo y comparten características culturales, educativas, económicas y sociales muy parecidas" (Amaya Guerra y Prado Maillard, 2017) 8 ✗ Los usuarios, pertenecientes a las nuevas generaciones, se caracterizan por un alto grado de contacto con las tecnologías, desarrollando ciertas características que, como afirma Vásquez- Cano (2015) , los usuarios poseen como: ✗ "Más autonomía. ✗ Mayor grado de interacción. ✗ Toma de decisiones elevada. ✗ Mayor colaboración y comunicación entre iguales gracias a las herramientas que ofrece la Web 2.0" (p.51). 9 Evolución de las interfaces de usuario 10 clasificación Por edad ▪ Generaciones Posibilidades de uso de tecnología ▪ El "novato" ▪ Cuando el usuario desconoce el entorno, carece de un modelo mental asentado de referencia, [...] ▪ El "experto concreto" ▪ [...] el usuario ha adquirido un modelo mental más afianzado, pero que no acostumbra a ser completamente correcto. [...] ▪ El "maestro" ▪ [...] el modelo mental ha cristalizado y recoge con elevada exactitud las relaciones funcionales entre los elementos. (Knapp Bjerén, 2002, p.330-334) 11 clasificación Por su relación con el sistema operativo ▪ Usuarios de iOS: “[...] dan mayor valor a la experiencia de usuario, se interesan por los detalles y tienen un perfil socioeconómico más alto [...], están más habituados a pagar por las aplicaciones. [...] amante de la consistencia” (p.41). ▪ Usuarios del Sistema Android: Al ser un sistema que permite ser modificado por los desarrolladores, por ser de código abierto. Los usuarios están “[...] más dispuestos a ideas nuevas, a aplicaciones que rompen paradigmas y que presentan alternativas para diferenciarse, lo cual a veces significa toparse con aplicaciones un poco caóticas” (p.41). ▪ Usuarios de Windows Phone: Los autores definen a estos usuarios como: “[...] usuarios amantes de la simplicidad que transmite su interfaz plana y despojada de lujos. [...] prefieren una buena experiencia a través de una navegación simple” (p.41). ▪ Javier Cuello y José Vittone (2013) 12 clasificación Por su participación en las comunidades ▪ Activos: Participan regularmente en las actividades y comunicaciones. Se siguen y se reconocen. [...] Lideres: [...] gran poder de influencia entre los miembros. [...] Moderadores: [...] lideres de segundo nivel. Ayudan a los primeros [refiriéndose a los líderes] de forma visible. [...] Habitualmente generan contenido y, de algún modo, validan el de los demás miembros. Contribuidores: Miembros que participan consumiendo y, sobre todo generando contenido. No tienen por qué ser intensivos pero permanecen activos regularmente y constituyen el núcleo de la comunidad. Trolls: [...] miembros que discrepan o incluso tratan de boicotear el funcionamiento normal de la comunidad para hacerse notar. [...] 13 clasificación Por su participación en las comunidades ✗ Pasivos: No colaboran activamente ni aportan contenidos pero su presencia, en algunos casos, justifica a los roles activos dando a la comunidad más representatividad. [...] suelen ser el colectivo más numeroso de la comunidad. (Somalo, 2011, p.55-56). 14 clasificación Por su participación en redes sociales ✗ a) los creadores, usuarios que hacen uso de diferentes herramientas 2.0 propias, para crear contenidos a través del cual tienen un alto grado de influencia en las redes sociales; ✗ b) los críticos, usuarios que crean contenidos pero desde herramientas 2.0 publicas, hacen uso de post, comentarios, y contribuyen en foros o wikipedia; ✗ c) los receptores, con menor actividad que los críticos; aportan contenidos por medio de post; son usuarios activos de feeds de RSS, información en la que se apoyan, son usuarios de "me gusta" y añaden tags o comentarios a videos, fotos, retweetean o websites; 15 clasificación Por su participación en redes sociales ✗ d) los joiners (adjuntadores), usuarios que mantienen actualizados su perfil y buscan relacionarse con blogueros populares, así también, buscan un lugar social agregándose a medios de comunicación, marcas o equipos de deportes; ✗ e) los espectadores, de los usuarios activos son los más numerosos, pero aun no han intervenido en las redes, suben pocos post o comentarios en su cuenta de Facebook; tiene un alto interés en la lectura de información o comentarios en blogs y foros, les gustan los videos y escuchan los podcast; ✗ f) inactivos, en este grupo están los usuarios online que no pueden ser considerados en las clasificaciones anteriores. (Liberos et al., 2013, p.413-414) 16 ¿Son de verdad las interfaces gráficas mejores que la línea de comandos? Opinión 17 Otros tipos de interfaz ✗ Interfaz de voz (VUI): Se trata de programas capaces de identificar e interpretar el habla. El ejemplo más claro que tenemos es el reciente auge de las inteligencias artificiales, como Siri, que se controlan por medio de la voz. ✗ Interfaz de texto: Se utiliza principalmente en el ámbito de la programación de sistemas operativos y es la evolución de la interfaz de línea de comando primitiva que usaban los primeros programas de computadora. 18 Otros tipos de interfaz ✗ Interfaz de voz (VUI): Se trata de programas capaces de identificar e interpretar el habla. El ejemplo más claro que tenemos es el reciente auge de las inteligencias artificiales, como Siri, que se controlan por medio de la voz. ✗ Interfaz de texto: Se utiliza principalmente en el ámbito de la programación de sistemas operativos y es la evolución de la interfaz de línea de comando primitiva que usaban los primeros programas de computadora. 19 Otros tipos de interfaz ✗ Interfaz natural: Se le llama así al tipo de interfaz que identifica e interpreta acciones naturales del ser humano, como movimientos y expresiones faciales. Un ejemplo de ello son los videojuegos con interfaz kinética. ✗ Interfaz cerebro-ordenador: Es el tipo de interfaz más innovadora que existe hasta el momento, y aunque aún no cuenta con muchas aplicaciones cotidianas, se está utilizando para controlar prótesis biónicas y dar instrucciones sencillas a un software por medio de las ondas cerebrales. 20 UX El trabajo del diseño y ux se divide en múltiples roles. 21 ROLES O TRABAJOS DENTRO DEL DISEÑO UX: Arquitecto de la Investigadora UX Redactor UX información UX designer Interfaz de usuario Diseñador de. movimiento 22 4 ETAPAS PRINCIPALES Investigación Organización Diseño Pruebas 23 GRACIAS E. P. Publicidad y Multimedia Paola E. R. Meza Gómez [email protected]