GUÍA DE EXPERIENCIA DE USUARIO TEMA 1 - GUÍA DE ESTILOS ¿Qué es la guía de estilos? Una guía de estilo es un manual que define la identidad de tu marca, sus colores, tipografías o el tono en el que te vas a dirigir a tus clientes. En resumen, todos los elementos necesarios para construir una imagen sólida. ¿Qué pasa si no tengo una? Lo más probable es que tu web acabe siendo una mezcla de elementos sin coherencia entre ellos. Características ● Las guías de estilo proporcionan la información necesaria para continuar un proyecto digital. ● Estas pautas tienen como objetivo mantener la congruencia e integridad del diseño del sitio, sin importar quién esté a cargo de su administración. Otra de sus funciones es ayudar a los desarrolladores a comprender cómo debe verse el sitio, aun cuando ya ha pasado tiempo desde su implementación inicial. ● Para lograr estos objetivos, este entregable debe cumplir con cuatro reglas básicas: ser intuitivo, sencillo, informativo y compatible con los estándares de CSS. Las guías de estilo de diseño web consideran los siguientes elementos: ● Paleta cromática Muestra los colores principales del sitio con todas sus posibles variaciones, ya sean patrones o tonos sólidos. Las referencias deben incluir el código de color exacto e información relevante para su aplicación, como los porcentajes de saturación y luminosidad, cuando estos son necesarios. ● Tipografías Es un listado de los tipos de fuentes presentes en el diseño web. Además, explica todas las normas que regirán el uso de estas tipografías en el sitio, incorporando nombres, tamaños, estilos y colores. Es conveniente adjuntar imágenes que ilustren todos estos detalles para evitar confusiones. ● Iconografía Los iconos son otro elemento web común en la gran mayoría de proyectos, ya sea en menor o mayor medida. En algunos casos, se emplean sólo como enlace a otras plataformas o elemento decorativo en algunos botones. ● Estilos de botones y/o elementos de navegación Define el uso combinado de las tipografías con la paleta cromática. Debe mostrar cómo se verán los botones y enlaces, considerando los usos con y sin texto, en hover, selección e inactividad. También se describen las aplicaciones en los elementos de navegación, mostrando el diseño de las flechas de desplazamiento, breadcrumbs, menús y submenús.. ● Imágenes Esta sección indica todos los tamaños y proporciones de imágenes usados en el sitio y cómo conviven dentro del diseño. Además, muestra los efectos o variaciones que puedan tener en sus distintas aplicaciones, especificando si se trata de una galería, foto destacada, uso en el footer u otros. ● Otros Cada sitio es distinto, por lo que siempre incluimos un apartado adicional para entregar los detalles de elementos específicos. Por ejemplo, explicamos las características de los bloques de autor, calendarios, gráficos, tablas y/o fichas, cuando estos existen. TEMA 2 - MATERIAL DESIGN ¿Qué es el material design? Material Design hace referencia a un estilo de diseño planteado por Google. El Material Design fue anunciado el 25 de junio del 2014 en la conferencia Google I/O . Características ● Anteriormente las aplicaciones para Android no brillaban por su atractivo. Funcionaban bien, pero Google no logró convencer a muchos desarrolladores para que se esforzaron en cuidar el diseño de sus creaciones y apostar por interfaces más limpias, intuitivas... Había excepciones, pero costaba encontrar apps que funcionaran y además fueran bonitas. ● Google se puso firme con este asunto y en esa época a la vez que anunciaba Android Lollipop 5.0 presentó Material Design: una normativa que buscaba unificar el diseño de las aplicaciones a la vez que ofrecer ayudas y guías a los desarrolladores para facilitar tal propósito. Lo que empezó como una proposición honesta terminó siendo un éxito. ● Google puso a disposición de todos los interesados una guía sobre el Material Design para que otros diseñadores se animen a implementarlo en aplicaciones móviles y sitios web. Esta guía se irá actualizando conforme el Material Design vaya evolucionando. La gran desventaja es que este manual sólo se encuentra disponible en inglés. Objetivos del Material Design ● Crear un lenguaje visual que combine los principios de un buen diseño y las posibilidades que traen las nuevas tecnologías. ● Crear un sistema que posibilite una experiencia uniforme en diferentes plataformas y dispositivos. Para ello se debe tener en cuenta las directrices de diseño para móviles como pantallas táctiles, control de voz, etc. De esta manera, el Material Design apunta a ser un estilo de diseño que mejore la experiencia de usuario en diversos dispositivos y que se encuentre en un cambio constante conforme avanzan las nuevas tecnologías. Los 3 principios del Material Design 1-. Lo material como una metáfora ● Lo material está unido a la realidad. De esta manera, lo material se fusiona con el espacio y el movimiento, está ligada a la realidad táctil, por ello se puede integrar con la tecnología y al mismo tiempo abre puertas a la creatividad e imaginación. ● Las superficies y bordes de lo material entregan pistas visuales basadas en la realidad. El uso de atributos familiares ayuda al usuario a entender las posibilidades de cada elemento de la interfaz. La flexibilidad de lo material crea nuevas oportunidades que reemplazan aquellas impuestas por el mundo físico, pero al mismo tiempo sigue esas mismas reglas. ● Los principios de la luz, superficie y el movimiento son claves para transmitir cómo los objetos existen e interactúan uno con el otro. Un manejo de luz realista ayuda a dividir espacios e indicar movimiento. 2-. Llamativo e intencional ● Los elementos visuales deben ser guiados por los conceptos de la teoría del diseño tales como el uso del color, los espacios en blanco, el sistema de rejillas, etc. Todos estos elementos ayudan a determinar la jerarquía y lectura visual. ● Una paleta de colores creada a la medida, imágenes de calidad, tipografía de gran tamaño y un correcto uso de los espacios en blanco permiten la creación de una interfaz gráfica en donde el usuario puede disfrutar de la experiencia. Al destacar las acciones que puede tomar el usuario se habilita una funcionalidad única en donde el usuario tiene a su disposición diversas pistas que le permiten entender la interfaz de manera inmediata. 3-. El movimiento otorga significado ● Si bien las animaciones tienen la capacidad de captar la atención de los usuarios, es importante que éstas no interrumpan la experiencia de usuario de ninguna forma. Asimismo, es importante que exista cohesión entre las animaciones y la propia esencia del sitio web o aplicación. ● Para Google, el movimiento refuerza el papel del usuario como el actor principal y el que dirige dichos movimientos. Las acciones del usuario tienen el poder de cambiar el diseño y todas ellas se realizan en un solo entorno. Es así que los elementos de la interfaz son presentados al usuario sin interferir con la experiencia de usuario, incluso cuando dichos elementos se transforman y reorganizan. Material Design y Diseño Flat Aunque el Material Design tiene cierto parecido con el diseño flat, presenta algunas diferencias. La principal es el uso de sombras en algunos elementos. Estas sombras son ligeras e intentan darle profundidad a ciertos componentes. Se suele comparar con una hoja de papel sobre una superficie, pues al haber una fuente de luz, presenta sombras ligeras. De esta manera, a pesar de que se emplean formas simples, se intenta imitar el 3D en entornos digitales. Sin embargo, es sólo una aproximación ligera al realismo, pues el uso de gradientes y otros elementos que simulan en el realismo no se encuentran presentes en el Material Design. Sobre el layout El layout típico del Material Design se ve inspirado en proyectos impresos. Como es usual, se crea un sistema de rejillas, porcentajes y otros componentes matemáticos que influyen en la correcta ubicación de los elementos. De esta manera, el layout delimita claramente las diversas áreas que componen la interfaz. Esta es una característica deseada no sólo para el usuario sino también para el diseñador, pues puede decidir más acertadamente dónde colocar los elementos que serán interactivos. Sobre los colores y la tipografía Los colores del Material Design son llamativos y vibrantes, de acuerdo al segundo principio que conforma este estilo. Se suelen emplear colores vibrantes sobre fondos opacos, de esta manera se genera un contraste bastante atractivo. También se acentúan las sombras, componente importante del Material Design. En cuanto a las tipografías, se toman ciertas pautas del diseño y se hace uso de fuentes sencillas sans serif. También es común hacer uso de dichas fuentes en gran tamaño, para hacerlas vistosas a pesar de ser simples. TEMA 3 - FLAT DESIGN ¿Qué es el flat design? Es un tipo de estética para el diseño de interfaces que se viene utilizando mucho desde hace décadas en el desarrollo web. Se caracteriza por el uso de colores claramente diferenciables, planos y muy vivos. Formas geométricas que proporcionan orden en la estructura. Tamaños tipográficos grandes y mensajes simples y directos. Con esto se consigue una clara compresión y una fácil interacción por parte del usuario. De igual forma, implementan botones y modos de interacción que sean intuitivos y les faciliten la navegación a los usuarios. Origen Si no su creador en estas cuestiones nunca está claro “quién fue el primero”, posiblemente el iniciador y potenciador del flat design haya sido Microsoft. Principios Aspectos principales para identificar el flat design. • Colores. • Tipografías. • Tamaños y espacios vacíos. Ejemplos • Logotipo de Google • Logotipo de Instagram. • Elementos simples y efectos discretos. • Expansión y hábitat del flat design. TEMA 4 - MOCKUP ¿Qué es el Mockup? Es un fotomontaje a través del cual los diseñadores gráficos pueden presentar sus propuestas a los clientes. Es un modelo o un prototipo que se utiliza para exhibir o probar un diseño. ¿Para qué sirve? Un diseñador puede analizar y mostrar cómo avanza su trabajo. De este modo, si es necesario realizar cambios, dichas modificaciones se establecen antes de la presentación de la versión final del producto. Sirve para que el cliente pueda previsualizar el resultado de un sitio web, un folleto, un catálogo, etc. Funcionalidad ● Para presentar las propuestas del diseño de logos. ● Para presentar las propuestas en el diseño web y el diseño de Apps. ● Presentar trabajos de una forma profesional. ● Ahorro de costos de impresión y montaje. ● Fácil uso en varios diseños. ● Apreciar cómo será el resultado antes de que se proceda al cierre de las tareas del diseñador. Ventajas y Desventajas ● Permite ahorrar gastos al diseñador. ● El cliente gastos. ● Necesitas saber cómo usar el software. también ahorra ● Ayudan a ver la realidad. ● La revisión y adaptación del proyecto es más rápida ● Es muy importante que lo realices con profesionales del área que sepan lo que hacen. TEMA 5 - WIREFRAMES ¿Qué es el wireframes? Un wireframe, también conocido como un esquema de página o plano de pantalla, es una guía visual que representa la estructura esquelética de un sitio web. Los wireframes se crean con el propósito de organizar los elementos para que estos lleven a cabo mejor su propósito particular. El propósito generalmente es ser informado por un objetivo de negocio y una idea creativa. El esquema de página representa el diseño de la página o la disposición de los contenidos del sitio web, incluyendo elementos de la interfaz y los sistemas de navegación y cómo funcionan en conjunto. ¿Cómo se hace un wireframe de una página web? El wireframe puede ser elaborado por el desarrollador web o el diseñador, o puede surgir del trabajo conjunto de ambos. En todo caso, es necesario que el profesional que lo realice tenga amplios conocimientos de diseño UX y diseño UI para que la navegabilidad de la página sea buena. Debe reflejar los siguientes elementos: ● Bloques de contenido. Aunque el texto todavía esté en fase de producción, debe marcarse el espacio que ocupará. ● Bloques de imágenes u otro contenido multimedia. Espacio reservado para logos, bloques de vídeo, galería de imágenes, banners, el footer… ● Formularios de contacto. ● Elementos de navegación. Elementos que redirigen a otros lugares, como botones de llamada a la acción (también llamados ‘Call to action’ o CTAs), banners, menús, grupos de enlaces, iconos de redes sociales… ● Sistemas de búsqueda ● Retícula. La retícula es la subdivisión de la superficie del wireframe en campos o espacios más reducidos, a modo de reja. Esto ayudará a situar los elementos en el lugar que les corresponde, a la hora de realizar el diseño final, y a establecer los márgenes y los bordes. TEMA 6 - HERRAMIENTAS DE DISEÑO DE INTERFACES ¿En qué consiste? El diseño de interfaz es básicamente el diseño visual. Hasta este punto, el diseñador de interacción UX ha trabajado el diseño racional mapa de clases y wireframes del producto o servicio digital, y ahora ha llegado el momento de avanzar con el diseño emocional. Hay distintos elementos que entran en juego para construir relaciones emocionales con los usuarios: colores, tipografías, recursos gráficos, imágenes, videos, etc Las herramientas facilitan el diseño de elementos de interfaz de usuario y la actualización de herramientas de flujo de trabajo en tiempo de ejecución en función de las especificaciones del usuario. Herramientas de diseño de interfaces son: ● Balsamiq ● Framer X ● InVision ● Mockup Builder ● Sketch ● Material Design Color ● HotGloo ● Font Awesome ● Figma ● The Noun Project ● Adobe XD ● Uplabs TEMA 7 - MÉTODOS PARA EL DISEÑO DE INTERACCIÓN ¿Qué son los métodos para el diseño de interacción? El diseño de interacción se enfoca en la interacción entre el usuario y el producto, generalmente softwares como aplicaciones o sitios web. Su principal misión es planificar y desarrollar todos los elementos que permiten la interacción con el producto a través de la interfaz. El objetivo final es crear productos funcionales que permitan al usuario hacer lo que desea de la manera más intuitiva y sencilla posible. El diseño de interacción se enfoca específicamente en proyectar la manera en que el usuario debe interactuar con cada uno de los elementos. Es un campo complejo pues no solo implica el diseño visual de esos elementos sino también los flujos que se producen en el sistema para responder a las interacciones del usuario. Por esa razón, un especialista en diseño de interacción debe trabajar con conceptos como la arquitectura de la información o los casos de uso. En sentido general, el diseño de interacción opera en diferentes niveles: Conceptual: ya que ayuda a definir cómo serán los productos digitales teniendo en cuenta el contexto en el que serán usados. Conductual: ya que describe cómo debe comportarse el producto, tanto de manera general como en los casos de uso específicos. Interfaz: ya que incluye estrategias eficaces para organizar, navegar y transmitir la información necesaria para usar el producto. ¿Para qué sirve el Diseño de Interacción? Hay muchos elementos sobre los que los responsables de diseños de interacción pueden trabajar. Desde juegos virtuales, aplicaciones, sitios web, sistemas bancarios o cualquier otro proyecto en el que sea necesario crear un entorno lo más interactivo posible para satisfacer las preferencias de los usuarios. Los mayores beneficios de invertir en un equipo enfocado en Diseño de Interacción están en los atributos que aporta al proyecto. Gracias a disponer de un diseñador de interacción, se puede garantizar que se creará un producto final fácil de usar, que resultará útil, efectivo y que maximizará las posibilidades de que los usuarios se involucren. Las cinco dimensiones del diseño de interacción Es la suma de todas las que generan una mejor inyección entre el usuario y la interfaz. 1. Palabras 2. Representación visual 4. Tiempo 5. Comportamiento 3. Espacio ¿Cómo visualizamos el diseño de interacción? ● Diagramas de flujo ● Wireframes ● Partituras de interacción TEMA 8 - MODELOS DE NAVEGACIÓN ¿Qué es Modelo De Navegación? Los sistemas de navegación son los elementos de una interfaz que permiten la navegación por las diferentes secciones y páginas que componen el sitio web. Generalmente se presentan como menús formados por diferentes opciones, con las que el usuario puede interaccionar; al hacer click sobre cada una ellas son cargada una página o sección de la misma diferente. ¿Para qué se necesita un Sistema de Navegación? Los sistemas de navegación son una pieza de vital importancia para la experiencia del usuario de nuestro sitio web. Su aparente sencillez es lo que hace que a menudo olvidemos su importancia y descuidemos su elaboración. Todo buen sistema de navegación debe satisfacer al menos los siguientes objetivos: ● Establecer un modo de ir de un sitio a otro dentro de la web. La navegación debe ser CLARA, concisa, consistente y fácilmente identificable dentro de la página. No se puede olvidar que también debe ser transparente: nadie debe ser consciente de que hay un sistema de navegación o de que está usándolo. ● Comunicar al usuario la relación entre el contenido que está visualizando y la navegación del sitio. Debemos permitir que el usuario sepa en todo momento dónde se encuentra, hacia dónde puede ir desde este punto y que partes del sitio que ha visitado ya. ● Reflejar la arquitectura del sitio que subyace al sistema de navegación. Debemos diferenciar la navegación global, la navegación local o subsecciones y la navegación contextual. ● Permitir volver a la página de inicio rápidamente. En un sitio web la página de inicio sirve como punto de partida y como lugar al que volver cuando nos encontramos perdidos, por eso debe ser sencillo ir a este punto desde cualquier parte del sitio. Elementos de los sistemas de navegación: ● Barra de menús ● Site Maps Tipos de Navegación: ● Navegación jerárquicos ● Sistemas De Navegación Globales ● Sistemas De Navegación Locales ● Sistemas De Navegación Específicos.
