Curso Diseño UI - 14. Claves Para un Buen Diseño UI

Summary

En esta lección, se discute cómo crear un diseño de interfaz de usuario efectivo, enfocándose en el equilibrio entre los objetivos de negocio y usuarios. Se resalta la importancia de que cada pantalla tenga un propósito claro y sea útil. Se aboga por la claridad en el diseño y advierte contra la obsesión con la estética a expensas de la funcionalidad. Además, se menciona la estandarización y la reutilización de patrones de diseño para mejorar la experiencia del usuario. Finalmente, se describen los niveles de calidad de una interfaz: funcional, confiable, fácil de usar y placentera.

Takeaways

• 😀 Diseñar una buena interfaz gráfica de usuario (GUI) requiere equilibrar los objetivos del negocio y los del usuario.
• 🎯 Cada pantalla diseñada debe tener un objetivo claro y permitir al usuario realizar una acción útil.
• 📏 Es fundamental lograr claridad en el diseño; evitar pantallas sobrecarregadas para facilitar la interacción del usuario.
• 🚫 No te enamores de tu diseño; recuerda que debe satisfacer las necesidades de los usuarios y el negocio, no solo tus preferencias creativas.
• 🔄 Estar abierto a cambios es crucial; los diseños deben adaptarse a los resultados y análisis de la experiencia del usuario.
• 📚 La estandarización y la reutilización de componentes son esenciales para mejorar la eficiencia en el diseño de interfaces.
• 📈 Conocer y aplicar patrones de diseño y sistemas de diseño ayuda a crear interfaces más efectivas y agradables para los usuarios.
• 🛠 Una buena interfaz debe ser funcional, cumpliendo con las necesidades del usuario y del negocio.
• 🔒 La confiabilidad es el siguiente nivel; la interfaz debe ser predecible y fiable para el usuario.
• 🏆 La facilidad de uso eleva la experiencia del usuario, minimizando el esfuerzo cognitivo necesario para interactuar con la aplicación.
• 🎉 La placentera es la culminación de un diseño de interfaz; debe ser agradable y gratificante para el usuario más allá de la funcionalidad.

Q & A

¿Qué es el primer punto clave mencionado en el video para diseñar una buena interfaz gráfica de usuario?

El primer punto clave es tener un equilibrio entre los objetivos del usuario y los objetivos del negocio. Esto significa que los diseñadores deben encontrar la manera de satisfacer tanto las necesidades del cliente que solicitó el diseño como las del usuario final que interactúa con la aplicación o sitio web.

¿Cuál es la importancia de que cada pantalla tenga un objetivo claro en el diseño de interfaces gráficas de usuario?

Cada pantalla debe tener un objetivo claro para que el usuario pueda realizar una acción útil y directa. Esto evita que las pantallas estén sobrecarregadas o estén solo por relleno, lo que mejoraría la experiencia del usuario al interactuar con la aplicación o sitio web.

¿Por qué es importante la claridad en el diseño de interfaces gráficas de usuario?

La claridad es crucial porque permite que los usuarios utilicen la aplicación de manera intuitiva y directa, sin interrupciones ni la necesidad de parar a pensar qué hacer. Esto se logra al mantener las pantallas simples y claras.

¿Qué significa 'no te enamores de tu interfaz' en el contexto del diseño de interfaces gráficas de usuario?

Esto significa que los diseñadores no deben aferrarse a su propia visión creativa o estética si no satisface las necesidades del negocio o del usuario. Deben estar dispuestos a realizar cambios si los datos o el análisis demuestran que la interfaz necesita mejoras para cumplir con sus objetivos.

¿Qué es la estandarización del diseño y por qué es importante en el diseño de interfaces gráficas de usuario?

La estandarización del diseño implica crear documentación y elementos reutilizables dentro de la interfaz, lo que facilita la consistencia y eficiencia en el trabajo del diseñador. Esto se logra conociendo y utilizando patrones de diseño y sistemas de diseño, como bibliotecas de componentes.

¿Cuáles son los posibles resultados de una buena interfaz gráfica de usuario según el video?

Los posibles resultados de una buena interfaz gráfica de usuario son que sea funcional, confiable, fácil de usar y, en el mejor de los casos, placentera. Esto significa que no solo cumple con las necesidades básicas del usuario y del negocio, sino que también genera confianza y placer en el uso de la aplicación o sitio web.

¿Qué es lo que el video sugiere como el nivel más básico de una interfaz gráfica de usuario bien diseñada?

El nivel más básico es que la interfaz sea funcional, es decir, que cumpla con lo que el usuario necesita hacer y satisfaga las necesidades del negocio.

¿Cuál es la diferencia entre una interfaz gráfica de usuario que es 'confiable' y una que es 'fácil de usar' según el video?

Una interfaz confiable es aquella que funciona de la manera esperada y genera confianza en el usuario, mientras que una interfaz fácil de usar es aquella que permite al usuario realizar acciones sin tener que pensar en cómo hacerlo, es decir, con un esfuerzo cognitivo mínimo.

¿Qué sugiere el video sobre cómo los diseñadores deben abordar los cambios en sus diseños de interfaz gráfica de usuario?

El video sugiere que los diseñadores deben estar abiertos a realizar cambios en sus diseños basados en datos y análisis, y no solo en su preferencia personal o creatividad. Esto es fundamental para mejorar la eficacia y la experiencia del usuario.

¿Cómo se relaciona el placer en el uso de una interfaz gráfica de usuario con la confiabilidad y facilidad de uso según el video?

El placer en el uso de una interfaz gráfica de usuario es un nivel adicional que se puede alcanzar después de que la interfaz sea funcional, confiable y fácil de usar. El placer puede provenir de elementos como animaciones, selección de colores y tipografías que evoquen sensaciones positivas y aumenten la satisfacción del usuario.

Outlines

00:00

🎨 Diseño de Interfaz Gráfica: Equilibrio entre Usuario y Negocio

En el primer párrafo se discute la importancia de encontrar un equilibrio entre los objetivos del usuario y los del negocio en el diseño de interfaces gráficas de usuario (GUI). Como diseñadores, es fundamental atender a dos clientes: el negocio que solicita el diseño y el usuario final que interactúa con él. El objetivo es satisfacer las necesidades del negocio, como aumentar suscriptores o ventas, sin comprometer la experiencia del usuario, que busca realizar acciones específicas de manera rápida y sencilla. Se enfatiza la necesidad de que cada pantalla tenga un propósito claro dentro del proceso de negocio y no solo por estética o completitud.

05:01

📱 Claridad y Objetividad en el Diseño de Pantallas

El segundo párrafo enfatiza la claridad y la objetividad en el diseño de pantallas. Cada pantalla debe tener un propósito definido y permitir al usuario realizar una acción útil. Se argumenta que es mejor tener múltiples pantallas simples que una sola pantalla sobrecargada, lo que contribuye a una experiencia de usuario más intuitiva y directa. Además, se advierte a los diseñadores no enamorarse de su trabajo, ya que esto puede dificultar el proceso de cambios y mejoras basados en datos y necesidades de los usuarios. Se sugiere que los cambios en el diseño deben ser justificados por análisis y resultados concretos, y no solo por preferencias personales.

10:01

🛠 Estandarización y Reutilización en el Diseño de Interfaces

El tercer párrafo aborda la importancia de la estandarización y reutilización en el diseño de interfaces. Se menciona la utilidad de conocer patrones de diseño y sistemas de diseño que incluyan bibliotecas de componentes para mejorar la eficiencia y la fluidez en la interacción del usuario. Se enfatiza que el diseño debe ser funcional, confiable, fácil de usar y, en el mejor de los casos, placentero. Se describe una 'escalera' de calidad en el diseño, donde la funcionalidad es el primer paso, seguida de confiabilidad, facilidad de uso y, finalmente, placentería. Se subraya que cada nivel de calidad en el diseño debe ser alcanzado secuencialmente, y se invita a los diseñadores a seguir esta 'escalera' en su carrera profesional.

Keywords

💡Diseño de interfaz gráfica de usuario (GUI)

El diseño de interfaz gráfica de usuario (GUI) se refiere al proceso de creación de interfaces visuales para dispositivos digitales, como computadoras, teléfonos móviles y aplicaciones. En el video, se enfatiza la importancia de equilibrar los objetivos del negocio con las necesidades de los usuarios finales para lograr un diseño efectivo. Un buen diseño GUI debe ser tanto funcional como agradable visualmente, facilitando la interacción del usuario con la aplicación o sitio web.

💡Equilibrio entre objetivos

El equilibrio entre objetivos implica la capacidad del diseñador de satisfacer tanto las necesidades del negocio que solicita el diseño como las del usuario final. Esto se menciona en el video como un punto clave, ya que el diseño debe ser tanto atractivo para el usuario como efectivo para lograr los objetivos comerciales, como aumentar las ventas o suscriptores.

💡Pantalla con un objetivo

Cada pantalla del diseño debe tener un propósito claro dentro del proceso de negocio. En el video, se sugiere que cada pantalla debe contribuir a un paso específico del proceso de usuario, como un proceso de compra, y no simplemente existir por completitud o por capricho del diseñador.

💡Claridad

La claridad es un aspecto fundamental en el diseño de interfaces, ya que permite a los usuarios interactuar con la aplicación de manera intuitiva y sin interrupciones. El video enfatiza que es preferible tener múltiples pantallas simples en lugar de una pantalla sobrecargada, para evitar la confusión del usuario.

💡No enamorarse del diseño

Este concepto advierte a los diseñadores contra la tendencia de aferrarse a su trabajo por razones estéticas o personales, en lugar de centrarse en la eficacia y la satisfacción de los usuarios. El video subraya que los cambios en el diseño son comunes y necesarios para mejorar la experiencia del usuario, y que los diseñadores deben estar abiertos a ello.

💡Estandarización del diseño

La estandarización implica la creación de patrones y componentes reutilizables en el diseño, lo que facilita la consistencia y la eficiencia en el trabajo del diseñador. En el video, se menciona que conocer y aplicar patrones de diseño y sistemas de diseño es crucial para crear interfaces que cumplan con las expectativas de los usuarios.

💡Funcionalidad

Una interfaz gráfica de usuario debe ser funcional, es decir, debe cumplir con las necesidades básicas de los usuarios y del negocio. El video describe la funcionalidad como el primer nivel de un buen diseño, donde la aplicación o sitio web cumple con su propósito principal.

💡Confiabilidad

La confiabilidad se refiere a la capacidad de una interfaz de ganar la confianza del usuario al ser predecible y consistente en su funcionamiento. El video sugiere que una interfaz confiable va más allá de la funcionalidad, permitiendo que el usuario tenga una experiencia coherente y sin sorpresas negativas.

💡Facilidad de uso

Una interfaz fácil de usar es aquella que permite que los usuarios realicen acciones sin tener que pensar mucho sobre cómo hacerlo. El video describe este nivel de diseño como uno donde el esfuerzo cognitivo del usuario es mínimo, y la interacción se convierte en algo casi intuitivo.

💡Placentera

Una interfaz placentera es aquella que no solo es funcional, confiable y fácil de usar, sino que también proporciona una experiencia agradable y emocionalmente satisfactoria al usuario. El video menciona que este nivel de diseño puede incluir elementos como animaciones agradables o una selección de colores que evoquen sensaciones positivas.

Highlights

Importancia del equilibrio entre objetivos de usuario y negocio

Necesidad de satisfacer a dos clientes: el negocio y el usuario final

Objetivos del negocio vs objetivos del usuario

Cada pantalla debe tener un objetivo claro y ser útil

Diseño de pantallas que respondan a pasos de un proceso de negocio

Evitar pantallas innecesarias que no contribuyen al proceso

Claridad en el diseño para una mejor experiencia de usuario

Preferencia por múltiples pantallas simples sobre una sola pantalla compleja

Importancia de no enamorarse de la propia interfaz

Diseño centrado en necesidades de negocio y usuarios, no en satisfacción personal

Aceptación de cambios basados en análisis y resultados de la interfaz

Estandarización del diseño a través de documentación y reutilización de elementos

Conocimientos de patrones de diseño para mejorar la experiencia del usuario

Uso de sistemas de diseño y bibliotecas de componentes para eficiencia

Funcionalidad como criterio básico de una buena interfaz gráfica de usuario

Confiabilidad como nivel superior en la calidad de diseño de interfaces

Facilidad de uso como objetivo adicional para la interfaz gráfica de usuario

Placentería como la cima de la evolución en el diseño de interfaces

Es necesario alcanzar cada nivel de calidad en secuencia: funcional, confiable, fácil de usar y placentero

Transcripts

en esta lección hablaremos acerca de

algunos puntos clave para generar un

buen diseño higüey o un buen diseño de

interfaz gráfica de usuario este vídeo

va a ser en esencia una recopilación de

los consejos que hemos visto dentro de

este curso porque ya estamos terminando

bien entonces el primer punto es tener

un equilibrio entre los objetivos del

usuario y los objetivos del negocio qué

quiere decir esto que como diseñadores

nosotros tenemos que dar solución a dos

clientes en particular al cliente

directo de nosotros es decir a quien nos

solicitó hacer este diseño y este

cliente este negocio que nos solicitó

realizar nuestro diseño y white tiene

ciertos objetivos quiere conseguir más

suscriptores quiere conseguir más ventas

quiere conseguir una cosa y

nosotros debemos trabajar para conseguir

ese objetivo particular pero por otro

lado tenemos que mantener equilibrio

entre conseguir este objetivo y

conseguir el objetivo del usuario final

es decir quién va a visitar el sitio

quién va a usar la aplicación y esta

persona tiene sus propios objetivos ya

sea comprar un objeto ya sea

y enterarse de cierta noticia ya sea

leer cierto contenido ya sea aprender

cierta cosa cada en cada caso vas a

tener un objetivo específico pero lo

ideal es que nosotros como diseñadores

de interfaces gráficas de usuario

encontremos el equilibrio entre

satisfacer las necesidades del negocio y

permitir a nuestros usuarios finales

hacer aquello que vienen a hacer a esta

aplicación o sitio web de la forma más

rápida y sencilla posible

clave número 2 que cada pantalla tenga

un objetivo y te permita hacer algo útil

debemos procurar que cada pantalla que

nosotros diseñamos tenga un objetivo

dentro del proceso del negocio es decir

si lo que estamos diseñando está con el

objetivo o si la aplicación o la

interfaz que estamos diseñando existe

con el objetivo de realizar un proceso

de compra por lo tanto nuestra cada una

de las pantallas que diseñamos debe

responder a uno de los pasos de este

proceso de compra no deberíamos tener

pantallas que estén sólo por relleno o

que estén sólo para satisfacer que

nosotros queríamos tener una pantalla

que se muestre de color azul por ejemplo

cada pantalla debe tener un objetivo

claro y debe responder a un punto dentro

del proceso de en el cual está

atravesando este usuario al usar la

aplicación obviamente puede haber

pantallas que su objetivo es únicamente

estético o que su objetivo es únicamente

comunicacional pero eso tiene que estar

aquí tiene que estar justificado de

acuerdo a los objetivos planteados ya

sea por el negocio oa las necesidades

que los usuarios tengan pero no

queríamos tener pantallas que están ahí

solo porque si cada una debería tener su

objetivo claro y debería permitirle

hacer algo útil al usuario que está

interactuando con nuestra aplicación o

nuestro sitio web punto número 3 es muy

importante tener claridad y esta

claridad nosotros la gráfica hemos

previamente al decir esta frase de que

es mucho más conveniente tener 100

pantallas simple que una sola pantalla

muy sobrecargada porque el usuario

finalmente no va a saber qué hacer

dentro de esta pantalla que está

sobrecargada y le va a hacer mucho más

sentido ir paso por paso por cada una de

las pantallas así que es importante

sumar claridad a nuestros diseños tener

una máxima claridad porque esto va a

ayudar a que los usuarios trabajen con

nuestra aplicación de manera mucho más

intuitiva y mucho más directa sin tener

interrupciones y sin tener que detenerse

a pensar que hacer es mucho más fácil

que ingrese a una pantalla en donde le

dice una instrucción un campo de texto y

un botón de enviar obviamente esta es

una sobre simplificación pero

que tengamos pantallas simples y muy

claras de cómo se usa un cuarto punto y

esto no lo hemos mencionado

anteriormente pero es súper importante

no te enamores de tu interfaz

lo que estás diseñando lo que estás

creando al hacer interfaces gráficas de

usuario como decíamos en el primer punto

es tratar de satisfacer las necesidades

del negocio y de los usuarios finales no

necesariamente satisfacer tu búsqueda

creativa no necesariamente satisfacer tu

búsqueda artística hay otras instancias

para eso y es perfecto que busques tu

propia satisfacción en esos en esos

lugares pero si diseño es una una

interfaz diseñas una serie de pantallas

que el resultado es muy bello pero

realmente no ayuda a satisfacer la

necesidad de los usuarios esas pantallas

necesariamente tienen y deben cambiar

para satisfacer a que el problema que se

nos encargó satisfacer al momento de

crear estas interfaces por lo tanto si

te aferras y te enamoras de tu interfaz

te va a doler mucho cuando te piden

hacer cambios

y en este caso a diferencia de otros

ámbitos del diseño las solicitudes de

cambio no nacen solamente de que a

alguien se le ocurrió hoy hagamos un

cambio pongamos el logo más grande en el

caso del diseño igual muchas veces los

cambios vienen justificados por estudios

por análisis por resultados que la misma

aplicación que en la misma interfaz se

está generando por lo tanto no tienes

como argumentar que no cambien no no que

no lo cambiemos porque yo digo que está

bien así si te dicen que después de

aplicar ciertos colores o después de

aplicar cierta tipografía o algún cambio

de diseño la cantidad de gente que se

suscribió por ejemplo se redujo

considerablemente no hay más opción que

cambiar y probar algo diferente esto no

quiere decir que lo diferente que vamos

a hacer pueda ser igual o más bello que

lo que hiciste anteriormente pero si

estás enamorado o enamorada de tu

interfaz te va a costar mucho que este

proceso de aplicar cambios y mejoras a

una interfaz ya diseñada y por último

quiero recordarte lo importante que es

la estandarización del diseño

que es crear cierta documentación o

crear elementos que puedan reutilizar

dentro de tu interfaz y para eso nos van

a resultar de suma utilidad conocer los

patrones de diseño y familiarizarnos con

patrones de diseños con patrones de

diseño generales que nos van a hacer que

nuestra aplicación en nuestro sitio web

responda de mejor forma a las

expectativas que los usuarios tienen al

usar una al usar nuestra plataforma y

además que conozcamos acerca del uso de

sistemas de diseño que incluyen

bibliotecas de componentes porque van a

hacer que nuestro trabajo que nuestro

que nuestro esfuerzo a la hora de

diseñar se enfoque principalmente en lo

más general en cómo hacer una fluidez de

mejor manera con nuestro usuario en

lugar de estar gastando tiempo cada en

cada ocasión diseñando el color de un

botón definiendo la tipografía porque si

estamos trabajando en una en una

aplicación en un sitio web que ya existe

lo ideal es que eso ya lo tengamos

asumido ya lo sepamos de antemano y

simplemente nos enfoquemos

y dar solución a las necesidades y ahora

sí para terminar creo que es importante

hablar de cuáles son las posibles o

cuáles son los posibles resultados de

una buena interfaz gráfica de usuario

en esencia toda interfaz

debe cumplir con un criterio básico y es

que sea funcional si haces un trabajo

relativamente bueno tu aplicación tu

sitio web que diseñas te va a ser por lo

menos funcional es decir va a cumplir

con aquello que el que el usuario

necesita hacer y va a satisfacer las

necesidades del negocio va a ser

funcional ahora si haces un trabajo un

poquito mejor si vas un poquito más allá

con tu diseño puedes llegar a un punto

en donde no solamente la interfaz sea

funcional sino que además sea confiable

es decir que esté diseñada de tal forma

y al momento de usarla el usuario

encuentra que funciona también que

desarrolle una confianza que sepa que al

usar esta aplicación al usar este sitio

web va

vas a poder predecir que admira se

guardó mira hizo lo que tenía que hacer

hizo lo que se supone que tenía que

ocurrir entonces el usuario va a empezar

a confiar en esta aplicación entonces

primer primer nivel de un buen diseño y

white es funcional si haces un trabajo

un poquito mejor va a ser funcional y

confiable pero si haces un trabajo más

allá todavía si le pones más talento

todavía vas a llegar a un punto en donde

la interfaz no solamente va a ser

funcional y confiable sino que además va

a ser fácil de usar ya no solamente el

usuario va a poder predecir que la

interfaz hace lo que dice que va a hacer

sino que lo hace de una forma tan fácil

que el usuario ni siquiera tiene que

sentarse a pensar cómo hacer aquella

acción que tiene que hacer tiene

siquiera va a tener que gastar tiempo

gastar esfuerzo cognitivo en pensar

dónde tengo que apretar ahora dónde

tengo que hacer clic qué es lo que tenía

que ingresar acá tu interfaz

si llegas a este punto va a ser tan

fácil de usar que el usuario casi que ni

siquiera va a tener que pensar

va a ser una interfaz funcional va a ser

confiable y va a ser fácil de usar

ahora si eres una persona que ya alcanzó

la iluminación va a decir es una persona

que ya estás en la superficie en la

escala evolutiva de los diseñadores

igual vas a poder agregar a esta esta

lista de cualidades que tu interfaz sea

placentera es decir ya es funcional ya

es confiable ya es fácil de usar y

además le le produce placer a las

personas que utilizan esta interfaz y

porque le produce placer bueno quizás le

produce placer porque te pusiste ciertas

animaciones quizás le produce placer por

la belleza por la selección de colores

porque usa este tipo grafías que evocan

ciertas sensaciones y que sumado a la

facilidad de uso y sumado a la

confiabilidad que produce esta interfaz

la persona al utilizarlo siente siente

placer al utilizarlo siente dopamina y

esto es algo que las

las redes sociales por ejemplo saben

saben manejar de muy buena manera cuando

una interfaz cuando alguien te pone like

por ejemplo eso le da cierto placer a

las personas y no sé si a ti te pasa

pero hay ciertas aplicaciones o ciertos

sitios web que cuando se hace scroll y

hay una animación bonita tú dices qué

bonito es una es una sensación

placentera y si llegas a cierto punto de

calidad con tus interfaces vas a poder

producir esa sensación placentera pero

es importante que sepas que esto es una

escalera no puedes llegar a uno sin el

otro primero su interfaz tiene que ser

funcional si llegas ahí estás bien estás

a un nivel profesional puedes además

hacer que sea confiable eso quiere decir

que estás yendo un poquito más allá lo

cual es excelente tiene que ser fácil de

usar lo cual le suma un pasito extra a

esto y si a todo esto le pones la guinda

encima de la torta además puedes

producir interfaces placenteras pero no

te digo que no puedes hacer algo

placentero si antes no es funcional

confiable y fácil de usar esos son los

dos elementos esenciales espero que este

concepto te quede claro

y sepas cuál es la escalera por la que

tienes que ir subiendo en tu carrera

como diseñador de interfaces de usuario

bien eso es todo por ahora nos vemos en

la próxima y última lección en donde te

voy a dejar una tarea para la casa