INTRODUCCIONA UI Y UX
DCG. EDGAR TORRES
Docente
TEMA
1
2
¿QUE ES UX?
El diseño de Experiencia de Usuario (UX)
es el proceso de crear productos,
sistemas o servicios que proporcionen
experiencias significativas y relevantes a
los usuarios. Involucra todo el proceso de
adquisición e integración del producto, lo
que incluye aspectos de marca, diseño,
usabilidad y funcionalidad. Una gran
parte del diseño UX es hacer que el
producto final resulte funcional para
proporcionar una experiencia positiva,
Objetivo: Crear experiencias relevantes.
eficiente y satisfactoria para el usuario Productos: Facil - Intuitivo - Valor = Usuarios
felices. User Centric: Entender necesidades
y problemas y como el producto resuleve
estas areas.
¿QUE ES UX?
Aspectos clave del diseño UX:
Investigación de usuarios: comprender las necesidades,
comportamientos y motivaciones de los usuarios a través de
diversos métodos como entrevistas, encuestas y pruebas de
usabilidad.
Arquitectura de la información: organizar y estructurar el
contenido de una manera intuitiva y fácil de usar.
Wireframing y prototipado: crear representaciones de baja y alta
fidelidad del producto para probar y refinar conceptos.
Pruebas de usabilidad: evaluar el producto probándolo con
usuarios reales para identificar problemas y mejorar la
experiencia general.
¿QUE ES UX?
Diseño de interacción: diseñar los aspectos interactivos de un producto,
como botones, transiciones y animaciones, para asegurar que sean
intuitivos y mejoren la experiencia del usuario.
Diseño visual: asegurar que el producto sea estéticamente agradable y
refleje la identidad de la marca.
Accesibilidad: asegurarse de que el producto pueda ser usado por
personas con una amplia gama de habilidades y discapacidades.
¿QUE ES UX?
Objetivos del diseño UX:
Facilidad de uso: asegurarse de que los usuarios puedan realizar sus tareas
con el mínimo esfuerzo.
Eficiencia: permitir que los usuarios completen las tareas rápidamente.
Satisfacción: asegurar que los usuarios tengan una experiencia positiva y se
sientan bien al usar el producto.
Accesibilidad: hacer que el producto pueda ser usado por personas con
diversas habilidades y discapacidades.
Compromiso: mantener a los usuarios interesados y comprometidos con el
producto.
PRINCIPIOS DE USABILIDAD Y HEURISTICA
1Visibilidad del estado del sistema: el
usuario debería saber que está pasando
en cada interacción con el producto
(cargando, guardando, errores). Debe
recibir un feedback del estado del
producto.
2Relación producto y mundo real: El
usuario no debería tener dudas al
momento de interactuar con el sistema,
se le debe brindar toda la información
para que pueda operar el sistema.
3Control y libertad del usuario: El
usuario debe poder cancelar o salir de un
proceso, sin finalizarlo y sin
compromisos.
21
PRINCIPIOS DE USABILIDAD Y HEURISTICA
4Consistencia: En el diseño de los bloques
visuales del flujo del sistema, tratar de
llevar un patrón en todos los elementos del
sistema. 5Prevención de errores: Proveer
instrucciones claras de lo que se espera
que el usuario realice dentro de nuestro
producto.
6Reconocer antes de recordar: Entregar
información valiosa al usuario y ademas
proveer una forma en que el usuario
pueda revisarla cuando la necesite sin
acudir a su memoria. 7Flexibilidad y
eficiencia de uso: Entregar una interfaz
capaz de satisfacer a usuarios
avanzados y no avanzados. Permitir el uso
del producto sin necesidad de
22
conocimientos especializados.
PRINCIPIOS DE USABILIDAD Y HEURISTICA
8- Diseño estético y minimalista: no
saturar d e contenid o a l
usuario , m o s t r a r únicamente el
contenido relevante para cada vista o
cada acción que el usuario ha decidido
acceder. No poner elementos que
distraigan al usuario del objetivo de la
vista. 9- ayudar al usuario a reconocer
y corregir errores: Dar información al
usuario de lo q u e e s t a
generand o errore s o
inconsistencias en el sistema.
10- Ayuda y documentación: Detectar
las dudas mas comunes de los
usuarios a la hora de usar nuestro
producto y proveer información que
pueda resolverlas de manera
inmediata. 23
PRINCIPIOS DE GESTALT Y UX
Gestalt: es una corriente psicológica que nació en Alemania a
inicios del siglo 20, y explica principios de cómo el humano
percibe su entorno.
Principio de semejanza: Tendemos a agrupar elementos que son
similares aunque no estén juntos. Podemos relacionar forma,
tamaño, color.
Principio de proximidad: Si vemos elementos alineados de forma
ordenada y en un mismo espacio, los tendemos a ver como un
grupo.
Principio de continuidad: Si vemos elementos dispuestos en
línea o curva de forma ordenada, los vamos a ver como si
estuvieran agrupados.
17
LEYES UX
Ley de Fitt: Se parece al principio de proximidad. El tiempo
que lleva llegar a un objetivo tiene que ver con el tamaño y la
distancia del mismo. Por ejemplo: el boton Enviar de un
formulario debe estar cerca de los demás elementos, para que el
usuario sepa qué acción debe realizar.
Ley de Hick: Cuantas más opciones tenga el usuario, más dificil
le será tomar una desición.
Ley de Jakob: A los usuarios les gusta usar cosas que ya saben
usar y que ya sabe como van a funcionar. Podemos lograrlo
usando mejores prácticas y estándares de la industria.
Ley de Miller: El ser humano puede recordar hasta 7 (±2)
elementos en su memoria a corto plazo.
19
Qué es el diseño UI
El diseño de Interfaz de Usuario (UI) se enfoca en
los aspectos visuales e interactivos de la interfaz
de un producto. Implica determinar la apariencia
y el comportamiento del producto, incluidos el
diseño, los colores, la tipografía y los elementos
interactivos, para asegurar que sea visualmente
atractivo y fácil de usar. El diseño UI se encarga
de crear elementos visuales e interactivos de un
producto para lograr una experiencia de usuario
atractiva, intuitiva y cohesiva.
11
Aspectos clave del diseño UI:
Diseño visual: crear la estética general del producto,
que incluye esquemas de colores, tipografía, imágenes
e iconografía. Esto garantiza que la interfaz sea
visualmente atractiva y refleje la identidad de la marca.
Diseño y composición: organizar elementos en la
pantalla de manera clara y lógica. Esto incluye el
espaciado, la alineación y el uso de cuadrículas para
crear una interfaz equilibrada y fácil de navegar.
11
Elementos interactivos: diseñar botones, deslizadores,
formularios y otros componentes interactivos que los
usuarios utilizan. Estos elementos deben ser intuitivos y
responsivos.
Consistencia: asegurar que el diseño sea consistente en
todo el producto. Esto incluye mantener estilos, colores
y comportamientos uniformes para proporcionar una
experiencia cohesiva.
Accesibilidad: diseñar interfaces que sean accesibles
para usuarios con diferentes habilidades. Esto incluye
considerar factores como el contraste, el tamaño de
fuente y la navegación por teclado.
11
Retroalimentación y capacidad de respuesta: proporcionar
retroalimentación visual a los usuarios cuando interactúan
con los elementos. Esto incluye efectos de desplazamiento,
indicadores de carga y mensajes de error para mantener a
los usuarios informados sobre el estado de sus acciones.
11
Objetivos del diseño UI:
Atractivo estético: crear interfaces visualmente
atractivas que reflejen la identidad de la marca.
Usabilidad: garantizar que los usuarios puedan
interactuar fácilmente con la interfaz y realizar sus
tareas sin confusión.
Consistencia: mantener un lenguaje de diseño
uniforme en todo el producto para proporcionar una
experiencia de usuario sin fisuras.
Accesibilidad: diseñar interfaces que puedan utilizar
personas con diversas habilidades y discapacidades.
11
Compromiso: hacer que la interfaz sea atractiva
y agradable de usar para alentar a los usuarios a
interactuar con el producto
11
CONCEPTOS DE DISEÑO
La retícula es un elemento de composición que tiene toda
publicación, es una regla invisible para el espectador, pero
visible para quien diseña. Es una base sobre la que se puede
trabajar y donde aplicar los elementos que componen la
publicación: columnas, páginas, etc.
11
CONCEPTOS DE DISEÑO
Dentro del diseño de interfaces las retículas tienen varias partes.
La principal es la columna, que son alineaciones verticales
donde podemos acomodar nuestro contenido. El margen que es
el espacio que existe al borde de la página o alrededores y el
contenido.
Los medianiles son separaciones entre las columnas.
¿Por qué es importante utilizar
una retícula?
• Porque nos ayuda a
tener estructura diseño en el
permite y
ordenada
alinear nos
nuestros elementos.
• Nos de
ayuda a tener
claridad manera
y consistencia.
• Nos ayuda a poder
trabajar en
diferentes dispositivos.
12
CONCEPTOS DE DISEÑO
¿Qué es la retícula en diseño web?
La retícula es una herramienta compositiva que tiene como
finalidad ajustar la posición de los diferentes elementos que
componen la página que estás diseñando. Gracias a su uso,
dotarás a tus diseños de una estructura interna armónica y
visualmente agradable.
• Habitualmente, el número de
Columnas
columnas
suele ser de doce. Esto es debido a
que otorga una gran versatilidad
compositiva al archivo.
Padding
• El Padding (relleno) es una
propiedad que establece un espacio
entre el borde de la columna y el
contenido englobado dentro de
esta.
Gutter Width
• El Gutter Width es el espacio que
dejamos entre las columnas. 13
CONCEPTOS DE DISEÑO: TIPOGRAFIAS
En diseño UX no podemos utilizar más de 2 tipografías, por lo que
es importante escoger la mejor para nuestro proyecto y de
preferencia que tenga una buena familia tipográfica. Como en
este caso Roboto
14
CONCEPTOS DE DISEÑO: TIPOGRAFIAS
Existen 2 tipos principales de tipografía SERIF y SANS SERIF.
Serif se caracteriza por tener tipografías con remates en sus
finales y que se usan para contextos de mucha formalidad.
Sans Serif se caracterizan por no tener remates, ser más
geométricas y
modernas. Son las más usadas ya que cumplen muy bien su
función de comunicar modernidad y seriedad.
15
CONCEPTOS DE DISEÑO: RECOMENDACIONES
1. Se deben usar un máximo de 3 tipografías o 1 sola con una
variedad de estilos en su familia, también debemos
asegurarnos que sean legibles en todos los tamaños y tener
en cuenta un ancho de columna correcto, se recomienda
máximo 66 caracteres por columna y buen interlineado.
2. Un fórmula para obtener un interlineado adecuado es:
utilizar 1 +
20%. Si tienes una tipografía del tamaño de 10pt el
interlineado sería de 12pt.
3. Contraste de color: hay que tener un buen contraste para
que todo sea, no bien, sino ¡perfectamente legible a la
vista!
16
PRINCIPIOS DE GESTALT Y UX
Gestalt: es una corriente psicológica que nació en Alemania a
inicios del siglo 20, y explica principios de cómo el humano
percibe su entorno.
Relación de figura-fondo: Tenemos una figura o el foco principal
de la atención del usuario, y el fondo que lo percibimos pero no
tiene la misma jerarquía o relevancia. Nos permite mostrar
diferentes planos de profundidad y ordenar de manera
jerárquica el contenido.
Principio de cierre (o cerramiento): Cuando vemos una imagen
incompleta, nuestro cerebro automáticamente la llena. Nos
ayuda en iconografía.
18
UX (User Experience) e UI (User Interface) son
dos términos que a menudo se usan
indistintamente, pero que en realidad significan
cosas muy diferentes. Entonces, ¿cuál es la
diferencia entre los dos?
Por ejemplo: ¿Cómo es de fácil el proceso de
pago al comprar online? , ¿Tu aplicación de
banca online te facilita la administración de tu
dinero?
La clave del diseño de UX es crear experiencias
fáciles, eficientes, relevantes y agradables para
el usuario.
Un diseñador de UI pensará en iconos y botones,
tipografía y esquemas de color, espaciado,
imágenes y diseño receptivo. También en
elementos que aportan feedback y dinamismo
como los efectos de sonido o el movimiento.
Diferencias entre UX y
UI
Comparar UX y UI es casi como comparar
manzanas y naranjas. El diseño de la interfaz de
usuario es creativo, visual e innovador. Por otro
lado, UX se basa más en análisis, optimización,
organización y estructura de los datos a
implementar. Sin uno u otro, el proyecto no se
puede completar. Los dos se complementan y
son necesarios para cualquier proyecto digital -
nueva web, desarrollo de aplicaciones móvil etc.
diferencias entre los dos:
El diseño de UX se trata de identificar y resolver los
problemas de los usuarios mientras el diseño de la interfaz
de usuario se trata de crear interfaces interactivas intuitivas
y estéticamente agradables.
El diseño de UX suele ser lo primero en el proceso de desarrollo del
producto, seguido de la interfaz de usuario. El diseñador de UX
traza los esquemas básicos del viaje del usuario; luego, el
diseñador de la interfaz de usuario lo completa con elementos
visuales e interactivos.
La experiencia de usuario puede aplicarse a cualquier tipo de
producto,
servicio o experiencia. La interfaz de usuario es específica para
productos y experiencias digitales.
Responsabilidades de un diseñador UX
Mejora la calidad de la interacción entre un usuario y un servicio,
empresa o producto.
Se centra en cómo se siente el usuario, lo que experimenta y
facilita una experiencia agradable.
Proporciona análisis de la competencia e investigación de
usuarios. Crea una estrategia para el producto.
Crea wireframes y prototipos.
Ejecuta el producto coordinándose con diseñadores y
desarrolladores de UI.
Realiza un seguimiento de los objetivos y de la integración para
impulsar el
producto hasta su finalización.
Responsabilidades de un diseñador UI
Considera cada parte de los elementos visuales o interactivos que
encontrará el usuario.
Piensa en iconos, tipografía, colores, botones, imágenes e incluso
sonido y movimiento.
Guía al usuario a través del producto visualmente.
Proporciona análisis de clientes e investigación de diseño.
Crea una buena marca y desarrolla gráficos para contar una
historia. Asegura que el diseño tenga consonancia con la
marca.
Crea prototipos de UI, así como interactividad y animación si
corresponde.
Garantiza que el producto se adapte a todos los tamaños de
pantalla y dispositivos.
Implementa el producto con el desarrollador.
