UX UI Design Basics Online - Diseño de interacción

UXER School by SNGULAR

24 Mar 201903:34

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

00:00

🎨 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

El diseño de interacción es un componente esencial en la creación de una buena experiencia de usuario. Se refiere a la fase donde se estructuran las funcionalidades y se diseñan las interfaces de usuario, pasando de un diseño estratégico a contenidos de interacción ya pensados. En el guion, se destaca como el 'esqueleto' que sostiene la 'piel' del diseño visual, siendo fundamental para que los usuarios puedan interactuar con el producto digital de manera efectiva.

💡Experiencia de usuario

La experiencia de usuario (UX) es el núcleo de una buena interacción con un producto digital. Se refiere a cómo los usuarios perciben y responden a la usabilidad, claridad, eficiencia y satisfacción que ofrece el diseño del producto. En el video, se menciona que el diseño de interacción es 'el corazón' de una buena experiencia de usuario, lo que indica su importancia en el diseño de productos digitales.

💡Arquitectura de información

La arquitectura de información es la definición de la estructura de contenidos de un producto digital. Se trata de un trabajo que, aunque no es visible para el usuario final, es crucial para que estos puedan encontrar y navegar por el contenido de manera eficiente. En el guion, se describe como el primer paso en el módulo de diseño de interacción, donde se aprende a elegir entre distintos niveles jerárquicos y a trabajar en la organización de las funciones.

💡Progressive disclosure

El progressive disclosure es un concepto clave mencionado en el guion que se refiere a la técnica de mostrar solo la información esencial al usuario en el momento adecuado, minimizando la sobrecarga cognitiva. Se utiliza para mejorar la usabilidad y la experiencia del usuario al proporcionar información de manera progresiva y contextual.

💡Tri testing

El tri testing es una técnica de validación que se menciona en el guion. Se trata de un método de pruebas comparativas donde se presentan tres versiones de un diseño (una correcta y dos con errores) y se pide a los usuarios que las revisen. Esto ayuda a identificar y corregir problemas de usabilidad de manera efectiva.

💡Wireframe

Un wireframe es una representación esquemática de la estructura de una interfaz de usuario, que se utiliza para planificar la organización y la jerarquía de los elementos en una pantalla antes de pasar al diseño visual. En el guion, se menciona como un 'gran output' de la fase de diseño de interacción, siendo esencial para definir la estructura y los contenidos de las interfaces de usuario.

💡Flujos y modelo de navegación

Los flujos y el modelo de navegación son conceptos clave en el diseño de interacción que se mencionan en el guion. Se refieren a cómo los usuarios se desplazan y interactúan con un producto digital para alcanzar sus objetivos. Es fundamental dominar herramientas como los sitemap y site close para definir estos flujos y modelos de navegación.

💡Prototipos

Los prototipos son versiones iniciales de un diseño que se crean para simular y probar la funcionalidad y la experiencia de usuario de un producto antes de su desarrollo final. Aunque no se mencionan explícitamente en el guion, son un paso fundamental en el proceso de diseño de interacción mencionado, permitiendo a los diseñadores validar y iterar sus diseños.

💡Patrones de diseño

Los patrones de diseño son soluciones reutilizables a problemas de diseño comunes que se aplican en la creación de interfaces de usuario. En el guion, se menciona el poder de los patrones de diseño y los antipatrones, que son prácticas a evitar, para mejorar la usabilidad y la experiencia del usuario en los productos digitales.

💡Guías de diseño

Las guías de diseño son conjuntos de reglas, directrices y prácticas estandarizadas que se utilizan para garantizar la consistencia y la calidad en la creación de productos digitales. En el guion, se menciona que los diseñadores deben estar familiarizados con estas guías, que son la base de los productos digitales más utilizados.

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.