Principios de Diseño de Interfaz de Usuario y Usabilidad

Clase 12 de 33 • Curso de CX Research y UX Testing

Contenido del curso

Conocer el mundo del UX testing y User Research

Investigar usuarios para detectar oportunidades de producto

Hacer UX Testing para tomar mejores decisiones de diseño de interfaces

CX Research para lograr una mayor lealtad

Investigar de forma profunda, acotada, enfocada, práctica y accionable

Tomar examen

Resumen

Para que nuestras interfaces respondan y solucionen correctamente los problemas de los usuarios debemos ser consistentes:

Los links no pueden parecer texto ni tampoco al revés.
¿Los usuarios pueden distinguir el botón más importante? ¿Pueden distinguir qué es y qué no es un botón?
¿Los usuarios tienen respuestas de la interfaz cada vez que ejecutan alguna acción?
La interfaz debe ser tan simple que los usuarios no puedan equivocarse. Pero, si se equivocan, ¿pueden devolverse o resolver el error?
¿Las palabras resultan familiares para todos los usuarios? Evita las palabras que solo se entienden en la empresa.

Comentarios

Juan Castro

teacher•

:rocket: ¿Qué hace un investigador de Experiencias de Usuario (UX)?

David Leal

student•

gracias

Sandra Milena Bernal Sarmiento

student•

Gracias

Dani Landa

student•

¿Cuales son los conceptos clave de UX?

Consistencia
Mantener patrones de diseño ya conocidos
Elementos interactivos obvios de usar
Identificación fácil de los botones principales
El usuario visualiza y entiende la respuesta de sus actos
- Cada movimiento que el usuario hace recibe una respuesta de la interfaz
Facilidad de retroceder y cancelar en caso de errores
Todo el poder y libertad al usuario
Palabras fáciles de entender

Felipe Bernardo González Barranco

student•

Y la cantidad de sitios que hay con un UX horrible, ojala vieran esta clases para que los arreglaran

Cristian José Torres Montes

student•

Link para descargar el libro "Psicología de los objetos cotidianos" de Don Norman

¿El lenguaje interactivo resulta consistente para los usuarios?

"Un link no se puede parecer a un texto… y un texto no se puede parecer a un link" -Enrique Stanziola

¿Los elementos interactivos resultan obvios en todos los casos?

"El diseño es un acto de comunicación entre el diseñador y el usuario, donde toda la comunicación proviene de la apariencia del objeto, el cual necesita explicarse por sí mismo” -Don Norman

¿Los usuarios distinguen el botón principal con facilidad?

“La visibilidad indica unas distinciones cruciales. Gracias a ella podemos distinguir el salero del pimentero” -Don Norman

¿El usuario visualiza y entiende la respuesta de cada acción que hace?

"El usuario debe recibir una retroalimentación completa y consistente acerca de los resultados de sus actos" -Don Norman

¿La interfaz resulta simple de tal forma que nadie se equivoca?
Y en caso de equivocarse, ¿resulta sencillo y ameno salir del error?

"El diseñador debe suponer que se van a cometer todos los errores posibles y realizar su diseño con objeto de reducir al mínimo la posibilidad de error" -Don Norman

¿Los usuarios tienen todo el tiempo el control sobre la interfaz?

Todo es una dialéctica de poder.

¿Las palabras resultan familiares para todos los usuarios?

La interfaz debería evitar las palabras que solo se conocen dentro de la empresa.

Tania Sosa

student•

¡Hola Cristian! 😄

Muchas gracias por el aporte. 👌

¡Nunca pares de aprender! 💚

Alfredo Martínez García

student•

yo tuve ese pensamiento con ADO, dije, por qué le ponen sencillo, deberían poner de ida y de regreso

Dani Villalon

student•

La empresa para la que trabajaba se empeñaba en usar las nomenclaturas internas de los productos como parte de identidad de la compañía. Esto provocaba que a nivel directivo quedara muy cool pero a nivel funcional horas y horas de explicaciones y formación a clientes. Lo peor de todo es que aun continúan haciéndolo. Me parece muy acertado aparcar a un lado el ego empresarial y usar nombres más sencillos para que los usuarios puedan entenderlos. El diseño empieza en el usuario.

Bryan C. Orellana

student•

¿Los modelos mentales son iguales que los conceptos mentales?

Diego Perdomo

student•

Que buena pregunta. Honestamente no lo tenía muy claro, así que me puse a investigar y encontré este artículo que resuelve tu duda al 100%.

Espero que te sea útil :)

Enrique A. Estrada

student•

Básicamente en base al diseño el modelo mental es incluir en el diseño lo que se requiera para que la gente entienda completamente lo que puede hacer con ese producto o servicio.

Platzi Team

student•

Consistencia en el Diseño de la Interfaz

Diferenciación Clara entre Links y Texto:
- Problema: Los usuarios pueden confundirse si no saben qué es un enlace y qué es solo texto.
- Solución: Asegúrate de que los enlaces se destaquen visualmente (por ejemplo, usando un color diferente y subrayado) para que no se mezclen con el texto normal.
Identificación del Botón más Importante:
- Pregunta: ¿Los usuarios pueden distinguir el botón más importante? ¿Pueden distinguir qué es y qué no es un botón?
- Solución: Usa colores contrastantes, tamaños y ubicaciones estratégicas para resaltar el botón más importante. Los botones deben parecer botones, con bordes, sombras o efectos de hover (cambio al pasar el ratón por encima) para diferenciarlos claramente del texto.
Respuestas de la Interfaz a las Acciones del Usuario:
- Pregunta: ¿Los usuarios reciben respuestas de la interfaz cada vez que ejecutan alguna acción?
- Solución: Proporciona feedback inmediato a los usuarios. Por ejemplo, después de hacer clic en un botón, muestra una animación de carga, un mensaje de confirmación, o un cambio visual que indique que la acción se está procesando.
Simplicidad y Gestión de Errores:
- Principio: La interfaz debe ser tan simple que los usuarios no puedan equivocarse.
- Solución: Diseña interfaces intuitivas y fáciles de usar, con instrucciones claras y elementos bien organizados.
- Pregunta: Pero, si se equivocan, ¿pueden devolverse o resolver el error?
- Solución: Implementa opciones de deshacer y mensajes de error útiles. Los mensajes de error deben ser claros y ofrecer soluciones o pasos para corregir el error. Incluye opciones de navegación como botones de “Atrás” y “Cancelar” para que los usuarios puedan corregir sus acciones fácilmente.
Uso de Lenguaje Familiar:
- Pregunta: ¿Las palabras resultan familiares para todos los usuarios? ¿Evitas las palabras que solo se entienden en la empresa?
- Solución: Usa un lenguaje claro y universal que sea comprensible para todos los usuarios, no solo para los empleados de la empresa. Evita jerga técnica y términos internos. Realiza pruebas de usabilidad con usuarios reales para asegurarte de que el lenguaje utilizado sea entendido correctamente.

Ejemplo de Implementación:

Supongamos que estamos diseñando una interfaz para una aplicación de creación de páginas web. Aquí hay un ejemplo de cómo aplicar estos principios:

Links vs. Texto:
- Enlaces como “Ver más detalles” estarán en azul y subrayados, mientras que el texto normal estará en negro sin subrayado.
Botón más Importante:
- El botón “Publicar Página” será grande y verde, situado en la parte superior derecha de la pantalla, mientras que otros botones serán más pequeños y de colores neutros.
Respuestas de la Interfaz:
- Al hacer clic en “Publicar Página”, aparecerá una barra de progreso y luego un mensaje que diga “Página publicada con éxito”.
Simplicidad y Gestión de Errores:
- La interfaz tendrá un diseño limpio con etiquetas claras. Si un usuario intenta publicar sin completar un campo obligatorio, aparecerá un mensaje que diga “Por favor, complete todos los campos obligatorios” y destacará los campos incompletos en rojo. Habrá un botón de “Deshacer” para revertir la última acción.
Uso de Lenguaje Familiar:
- En lugar de términos técnicos como “deploy”, utilizaremos “publicar”. Las instrucciones y mensajes serán revisados para evitar jerga técnica y asegurar que son fáciles de entender para cualquier usuario.

Resumen

Para que nuestras interfaces sean efectivas, deben ser consistentes en diseño y funcionalidad. Los enlaces deben ser claramente diferenciables del texto normal, los botones importantes deben destacarse, y la interfaz debe proporcionar respuestas claras a las acciones del usuario. Además, debe ser simple y fácil de usar, con mecanismos para manejar errores, y utilizar un lenguaje que sea familiar y comprensible para todos los usuarios.

Dani Landa

student•

En cuanto a la experiencia de redondo y sencillo - Recordé que he visto paginas que ya usan 'ida' o 'ida y vuelta' :)

Mago Jiménez

student•

pondría "sólo ida"

John Werner Pacherres Gonzales

student•

me dicen sencillo y me imagino si tiene cambio de u billete grande

Mago Jiménez

student•

jajaja! yo hubiera sido la del baño luego uno piensa en mil cosas para saber cual puede encajar.

Migrant Cyborg

student•

Soy un Link, y yo un texto

Raúl Beristain Álvarez

student•

El error del juego tenía que ser en México.

David Leal

student•

Esta clase vale oro :)

Miguel Angel García Ramírez

student•

¿Qué pasa si la interfaz no responde?

Cuando una interfaz no ofrece retroalimentación inmediata, rompe la ilusión de un diálogo y genera ansiedad. Es como hablarle a una persona que te mira fijamente sin parpadear ni responder; inmediatamente te preguntas: "¿Me escuchó? ¿Dije algo mal?".

En el mundo digital, si un usuario envía un formulario o añade un producto al carrito y la pantalla se queda estática, su instinto natural será presionar el botón varias veces más. Esto no solo frustra a la persona, sino que puede causar errores graves en el sistema, como cobros duplicados o envíos múltiples.

Para evitarlo, siempre debes incluir microinteracciones. Un simple cambio de estado (el botón dice "Cargando..."), un spinner de carga, o una notificación tipo toast en la esquina confirmando el éxito de la acción, le aseguran al usuario que su orden fue recibida y está siendo procesada.

Katia Hernández Vázquez

student•

Algo que normalmente sucede (como en el ejemplo de comprar el ticket del bus) es que cuando llegas con estos hallazgos la primer pregunta es: ¿cuántas personas tuvieron ese problema, uno de cuántos? Se debe considerar el % de acuerdo a la proporción de la muestra o de qué manera uno puede saber que realmente es un tema al qué hay que ponerle atención.

Paula Elizabeth Llumiquinga Guevara

student•

CONCEPTOS CLAVE DE UX

El lenguaje debe ser interactivo y guardar consistencia con los patrones mentales.
Los elementos interactivos deben ser fáciles de usar y explicar por sí mismo.
Si existen botones, deben tener apariencias distintas para poder sugerir su usabilidad, a donde guían o incluso para que sirven.
El usuario debe poder obtener resultados de sus actividades dentro de la app.
La interfaz debe ser fácil de usar para que no se cometa errores, sin embargo, en caso de haber errores debe existir una forma de corrección sencilla.
El usuario necesita tener el poder sobre la interfaz.
El lenguaje para la comunicación (palabras que se usan) deben ser fácilmente identificables y de uso general. Es necesario tener en cuenta la lingüística y las palabras/ expresiones comunes y que son familiares al contexto que se va aplicar.

Benjamin Edilfonso

student•

Diseño de Interfaz de Usuario (UI): La UI se ocupa de cómo se presenta la información y se interactúa con ella en una interfaz. Un buen análisis de la UI implica evaluar la usabilidad, la estética y la coherencia visual para crear una experiencia agradable y efectiva.

Pedro Isaac Aguilar

student•

Excelente clase! ... Con esta fundamentación de conceptos de análisis UX según las citas de Don Norman en su libro "La Psicología de los Objetos Cotidianos" me han dado muchas ganas de leerlo.

Brian ⠀

student•

Increíble clase.

Bryan C. Orellana

student•

Evita usar palabras que solo conoces tú.

Principios de Diseño de Interfaz de Usuario y Usabilidad

Conocer el mundo del UX testing y User Research

Investigación de Usuarios: Entender Circunstancias para Mejorar Productos

Retos en la Investigación de Usuarios para Productos Digitales

Investigar usuarios para detectar oportunidades de producto

User Research y Testing: Entender y Mejorar Experiencias de Usuario

Estructuración de Objetivos en Investigación de Usuario

Técnicas para Entrevistas Individuales Efectivas

Elaboración de Reportes de Investigación de Usuarios

Detección de Problemáticas para Innovación Efectiva

Optimización de la Técnica de Personas en Investigación de Usuarios

Entrevistas para Análisis de Proyecto Empresarial

Hacer UX Testing para tomar mejores decisiones de diseño de interfaces

Conceptos clave en UX: Modelos mentales y dialéctica de poder

Evaluación de Usabilidad en Plataformas Digitales