UX UI Design Basics Online - Diseño de interacción
Summary
TLDREl diseño de interacción es una etapa crucial en la experiencia de usuario, donde se define la estructura y contenidos de productos digitales. Este módulo enseña a crear una arquitectura de información, elegir entre niveles jerárquicos y usar herramientas para validar la estructura. Aprenderás conceptos clave como el 'progressive disclosure' y técnicas de validación como el 'tree testing'. Además, explorarás flujos de navegación, creación de wireframes y cómo diseñar micro interacciones. Se profundiza en patrones y antipatrones de diseño, y se repasan guías de diseño para crear interfaces de usuario efectivas.
Takeaways
- 🎯 El diseño de interacción es crucial para la experiencia de usuario y es el núcleo de una buena experiencia digital.
- 🏗️ La arquitectura de información es la base de la estructura de contenidos y es fundamental para que los usuarios encuentren lo que buscan.
- 🔍 Aprender a elegir entre distintos niveles jerárquicos y trabajar el gamut de funciones es esencial para una arquitectura de información efectiva.
- 🛠️ Se deben utilizar herramientas del mercado para presentar y validar una sólida arquitectura de información.
- 📊 El concepto de 'progressive disclosure' es fundamental para minimizar la carga cognitiva del usuario.
- 🔄 Técnicas como el A/B testing y el card sorting son útiles para validar la dirección y la estructura del diseño.
- 🗺️ Es necesario dominar herramientas como sitemap, site close o wireframe para definir los flujos y el modelo de navegación del producto.
- 🔗 La definición de flujos y modelos de navegación es esencial para permitir que los usuarios alcancen sus objetivos.
- 📝 El wireframe es un componente clave que define la estructura, jerarquías y contenidos de las interfaces de usuario.
- 🧩 Se deben analizar y diseñar todos los componentes de interacción, desde los menús de navegación hasta las micro interacciones.
- 🎨 Un buen diseñador no es solo creativo sino que también se basa en conocimientos previos y en la aplicación de principios y leyes de diseño universales.
Q & A
¿Qué es el diseño de interacción y por qué es clave en la experiencia de usuario?
-El diseño de interacción es una fase crucial en la experiencia de usuario, considerada como el corazón de una buena experiencia. Es donde el concepto comienza a tomar forma y estructura en un producto digital, pasando de funcionalidades válidas a contenidos de interfaces de interacciones bien pensados.
¿Cuál es la diferencia entre el diseño visual y el diseño de interacción según el guion?
-El diseño visual es comparado con la piel, mientras que el diseño de interacción es el esqueleto. El diseño visual es lo que se ve, pero el diseño de interacción es lo que sostiene y permite que el diseño funcione adecuadamente.
¿Qué es la arquitectura de información y por qué es importante?
-La arquitectura de información es la definición de la estructura de contenidos de un producto, esencial para que los usuarios puedan encontrar y acceder a los contenidos deseados. A pesar de no ser visible, es clave para la navegabilidad y la experiencia del usuario.
¿Qué herramientas se mencionan para presentar y validar una gran arquitectura de información?
-Se mencionan herramientas como los sitemap, site close y wireframe para definir y validar la arquitectura de información.
¿Qué técnicas se utilizan para minimizar la carga cognitiva del usuario?
-Se menciona el uso del 'progressive disclosure', que esencialmente minimiza la carga cognitiva al mostrar solo la información esencial y ocultar detalles adicionales hasta que sean necesarios.
¿Qué son los flujos y el modelo de navegación y por qué son importantes?
-Los flujos definen las rutas que los usuarios toman para completar tareas, mientras que el modelo de navegación es la estructura que permite moverse dentro del producto. Son importantes para que los usuarios alcancen sus objetivos de manera eficiente.
¿Qué es un wireframe y cuál es su importancia en el diseño de interacción?
-Un wireframe es una representación esquemática de la estructura y jerarquías de contenidos de una interfaz de usuario. Es importante porque define cómo se organiza y se presenta la información en la interfaz.
¿Qué son los patrones de diseño y cómo contribuyen al diseño de interacción?
-Los patrones de diseño son soluciones probadas y reutilizables para problemas comunes en la interacción de usuario. Ayudan a los diseñadores a crear interfaces más eficientes y efectivas sin tener que reinventar la rueda.
¿Qué son los anti patrones y cómo afectan el diseño de interacción?
-Los anti patrones son prácticas de diseño que generalmente resultan en una mala experiencia de usuario. Conocerlos ayuda a los diseñadores a evitarlos y mejorar la interacción en sus productos.
¿Cómo se puede inspirar y aprender sobre el diseño de interacción utilizando ejemplos prácticos?
-Mediante la observación y análisis de ejemplos prácticos de diseño de interacción en diferentes tipos de proyectos, como aplicaciones web, móviles, wearables, etc., se puede aprender sobre los principios y técnicas efectivas en el diseño de interacción.
Outlines
🎨 Diseño de Interacción: Fundamentos y Herramientas
El primer párrafo introduce el diseño de interacción como una fase crucial en la experiencia de usuario, destacando su importancia en dar forma y estructura a un producto digital. Se menciona que, al igual que la piel y el esqueleto en un ser vivo, el diseño visual y el diseño de interacción son fundamentales para el funcionamiento del producto. Se enfatiza la necesidad de trabajar en la arquitectura de información, que define la estructura de contenidos y es esencial para que los usuarios encuentren lo que buscan. Se aprenderá a elegir entre niveles jerárquicos, a trabajar en la jerarquía de funciones y a utilizar herramientas para presentar y validar una sólida arquitectura de información. También se mencionan conceptos clave como el 'progressive disclosure' para minimizar la sobrecarga cognitiva y técnicas de validación como el 'tree testing' o 'card sorting'. Además, se anticipa la exploración de flujos y modelos de navegación, y la creación de wireframes y mockups para definir la estructura y jerarquías de contenidos en las interfaces de usuario.
Mindmap
Keywords
💡Diseño de interacción
💡Experiencia de usuario
💡Arquitectura de información
💡Progressive disclosure
💡Tri testing
💡Wireframe
💡Flujos y modelo de navegación
💡Prototipos
💡Patrones de diseño
💡Guías de diseño
Highlights
El diseño de interacción es una fase clave en la experiencia de usuario.
Es el corazón de una buena experiencia y donde tu concepto comienza a tomar forma.
El diseño de interacción pasa de funcionalidades válidas a contenidos de interfaces de interacciones.
El diseño visual es la piel, mientras que el diseño de interacción sería el esqueleto.
La arquitectura de información es la definición de la estructura de contenidos del producto.
Es importante elegir entre distintos niveles jerárquicos para trabajar el gamut de las funciones.
Utilizar herramientas para presentar y validar una gran arquitectura de información es fundamental.
Progressive disclosure es un concepto clave para minimizar la carga cognitiva.
Técnicas como el tri-testing y el card sorting ayudan a validar la dirección.
Definir flujos y el modelo de navegación del producto es esencial.
Herramientas como los sitemap, site close o wireframe son importantes para la navegación.
El wireframe define la estructura y jerarquías de los contenidos de las interfaces de usuario.
Los diseñadores no son genios o artistas, sino que necesitan una base de conocimiento previa.
Se enseñarán los principios y leyes universales de diseño en este módulo.
Los patrones y anti patrones de diseño son parte de los recursos que se proporcionarán.
Las guías de diseño son fundamentales para los productos digitales más utilizados.
Aprenderás a aterrizar el diseño estratégico en un producto digital siguiendo un proceso profesional.
El módulo se adapta a cualquier tipo de proyecto, ya sea web, móvil, wearable o otro.
Transcripts
[Música]
o la uses el diseño de interacción es
una fase clave entre la experiencia de
usuario es el corazón de una buena
experiencia es la fase donde tu concepto
empieza a tomar forma y estructura de
producto digital donde pasas de
funcionalidades válidas en el diseño
estratégico a contenidos de interfaces
de interacciones ya pensadas para el
mundo excitante podríamos decir que si
el diseño visual es la piel el diseño de
interacción sería el esqueleto donde
debe sustentarse el isr lo primero que
trabajarás en este módulo es lo que se
conoce como arquitectura de información
que simplificando lo mucho es la
definición de la estructura de
contenidos de nuestro producto podríamos
decir que ese trabajo ingrato que no se
ve porque está detrás de las pantallas
pero que es clave para que los usuarios
puedan encontrar aquellos gustos aquí
aprenderás a elegir entre los distintos
niveles jerárquicos a trabajar el gaming
de las funciones para que sea efectivo y
por supuesto a utilizar las herramientas
disponibles en el mercado
para que puedas presentar y validar una
gran arquitectura de información
además conocerás conceptos clave como el
progressive microsoft esencial para
minimizar la carga de política y
técnicas como el tri testing o el cart
short y que nos ayudarán a validar
nuestra directora angular diseñar la
interacción de forma profesional implica
también definir los flujos y el modelo
de navegación de tu producto para ello
tendrás que dominar herramientas como
los sitemap site close o wild cloud que
permiten definir cómo se navega con el
producto hasta lograr los objetivos del
usuario después de pasar por la
arquitectura de información y la
navegación empezarás a familiarizarte
con el otro gran output de la fase de
diseña diferentes el wireframe elsewhere
es el que define la estructura y
jerarquías y contenidos de los
interfaces de usuario aquí descubrirá su
importancia dentro del proceso de diseño
profesional y las distintas herramientas
que se pueden utilizar para llevarlos a
cabo
también diseccionar hemos todos y cada
uno de los componentes de interacción
que puede tener una interfaz
desde los más comunes como podría ser
los menús de navegación hasta los más
pequeños como las micro interacciones
pasando por los modelos de scrolling por
la paginación en definitiva todo lo
necesario para definir la interacción de
un producto vídeo y bueno muchos os
estaréis planteando y cómo empieza a
diseñar me pongo directamente a esbozar
lo que se me pasa por la cabeza al
contrario de lo que se pueda pensar un
buen diseñador integración no es un
genio o una artista que está
constantemente redefiniendo la
interacción de sus productos
todo diseñador necesita una base de
conocimiento previa para saber
enfrentarse a diseñadores
en este módulo os daremos una visión
global de todos los recursos que
necesita un buen diseñador como parte de
esa caja de recursos que os daremos
dominar 'aces' los principios y leyes
universales de diseño descubriréis el
poder incluso oscuro a veces del diseño
con los patrones y anti patrones con
células turísticas de usabilidad más
importantes y haréis un repaso por las
guías de diseño en las que se basan los
productos digitales más utilizados
además todo esto lo aprenderemos
utilizando ejemplos prácticos nos
inspirará en resumen en este módulo
aprenderás a aterrizar el diseño
estratégico ya en un producto digital
siguiendo un proceso profesional de
diseño y orientado a cualquier tipo de
proyecto bien sea web apunte digestivo
responsible wearable o lo que sea muchas
gracias
[Música]
Browse More Related Video
Curso Diseño UI - 14. Claves Para un Buen Diseño UI
Rapid Prototyping: Sketching | Google for Startups
Xamarin.Forms Grid Visual Studio Community 2019
Curso Diseño UI - 9 Elementos de una Interfaz
Curso Diseño UI - 11 Principio UI: Reglas de Usabilidad
Curso de Android con Java: LinearLayout verticales y horizontales
5.0 / 5 (0 votes)