Diseño de interfaces Fundamentos de UI y UX

1. INTRODUCCIONA UI Y UX
Phd(c). Richard Mendoza
Docente

2. 2
TEMA 1

4. 4
Jakob Nielsen Alan Cooper Steve Krug

5. La experiencia de usuario, o UX por 'User
Experience', como disciplina, se aplicó
tradicionalmente a los sistemas
informáticos y en particular al diseño de
páginas web pero, hoy, se ve ampliada a
otros campos del diseño. La razón es que,
una vez que tomamos como una
«experiencia» casi cualquier producto o
servicio, estos comienzan a «diseñarse»
buscando la máxima satisfacción del
consumidor, que pasa a ser un «usuario»
que transita por dichas experiencias.
¿QUE ES UX?
Objetivo: Crear experiencias relevantes.
Productos: Facil - Intuitivo - Valor = Usuarios felices.
User Centric: Entender necesidades y problemas y
como el producto resuleve estas areas.

6. Esta metodología encuentra soluciones a problemas de diseño y
administración tomando en cuenta el punto de vista del ser humano.
Típicamente, el diseño centrado en el humano observa al problema
dentro de su contexto, usando la perspectiva del ser humano para guiar
el proceso de diseño. Esto incluye la lluvia de ideas, conceptualización,
desarrollo e implementación de la solución. Empieza con el análisis de
las necesidades del usuario. Una vez que se identifican, se desarrollan
varias soluciones para satisfacerlas. Tras el proceso de desarrollo, se
hace la implementación de una de las soluciones. El diseño centrado en
el humano es un proceso iterativo.
DISEÑO CENTRADO EN EL HUMANO

7. Siguiendo con la referencia del ISO 9241-210:2010 tenemos lo
siguiente:
1. El diseño se basa en el entendimiento explícito de los usuarios,
tareas y ambientes.
2. Los usuarios están involucrados durante el diseño y desarrollo.
3. El diseño es impulsado y refinado por la evaluación centrada en el
usuario.
4. El proceso es iterativo.
5. El diseño contempla la experiencia completa del usuario.
6. El equipo de diseño incluye habilidades y perspectivas
multidisciplinarias.
DISEÑO CENTRADO EN EL HUMANO(DCH)

8. La norma ISO define un ciclo de desarrollo que comienza planificando el
proceso de Diseño Centrado en las Personas, y a partir de ahí pasa por
cuatro etapas principales:
Comprender y especificar el contexto de uso
Especificar los requisitos de usuario y negocio
Producir soluciones de diseño
Evaluar diseños frente a requisitos
CICLO DCH

9. Design thinking: Tim Brown, CEO de
IDEO, define design thinking como “un
enfoque de la innovación centrado en las
personas que se basa en el conjunto de
herramientas del diseñador para integrar
las necesidades de las personas, las
posibilidades de la tecnología y los
requisitos para el éxito de negocio”.
Organiza las actividades en torno a tres
fases: Inspiración, Ideación e
Implementación.
OTROS ENFOQUES
https://designthinking.ideo.com/

10. Doble diamante: Un proceso de diseño
para la innovación desarrollado por el
Design Council del Reino Unido y
estructurado en 4 pasos: Descubrir,
Definir, Desarrollar y Entregar.
OTROS ENFOQUES
Design sprint de Google Ventures: Se
trata de una aproximación rápida al
diseño que trata de abordar un
problema y darle solución a través
cuatro etapas: Ideación, Construcción,
Lanzamiento y Aprendizaje.
https://www.designcouncil.org.uk/news-opinion/what-framework-
innovation-design-councils-evolved-double-diamond
https://www.gv.com/sprint/

11. Esta metodología encuentra soluciones a problemas de diseño y
administración tomando en cuenta el punto de vista del ser humano.
Típicamente, el diseño centrado en el humano observa al problema
dentro de su contexto, usando la perspectiva del ser humano para guiar
el proceso de diseño. Esto incluye la lluvia de ideas, conceptualización,
desarrollo e implementación de la solución. Empieza con el análisis de
las necesidades del usuario. Una vez que se identifican, se desarrollan
varias soluciones para satisfacerlas. Tras el proceso de desarrollo, se
hace la implementación de una de las soluciones. El diseño centrado en
el humano es un proceso iterativo.
DESIGN THINKING

12. 12
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.
CONCEPTOS DE DISEÑO

13. 13
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.
CONCEPTOS DE DISEÑO
¿Por qué es importante utilizar
una retícula?
• Porque nos ayuda a tener
estructura en el diseño y nos
permite alinear de manera
ordenada nuestros elementos.
• Nos ayuda a tener claridad y
consistencia.
• Nos ayuda a poder trabajar en
diferentes dispositivos.

14. 14
¿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.
CONCEPTOS DE DISEÑO
Columnas
• Habitualmente, el número de 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.

15. 15
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
CONCEPTOS DE DISEÑO: TIPOGRAFIAS

16. 16
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.
CONCEPTOS DE DISEÑO: TIPOGRAFIAS

17. 17
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!
CONCEPTOS DE DISEÑO: RECOMENDACIONES

18. 18
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.
PRINCIPIOS DE GESTALT Y UX

19. 19
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.
PRINCIPIOS DE GESTALT Y UX

20. 20
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.
LEYES UX

22. 22
1- Visibilidad 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.
2- Relació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.
3- Control y libertad del usuario: El usuario
debe poder cancelar o salir de un proceso, sin
finalizarlo y sin compromisos.
PRINCIPIOS DE USABILIDAD Y HEURISTICA

23. 23
4- Consistencia: En el diseño de los bloques
visuales del flujo del sistema, tratar de llevar un
patrón en todos los elementos del sistema.
5- Prevención de errores: Proveer instrucciones
claras de lo que se espera que el usuario realice
dentro de nuestro producto.
6- Reconocer 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.
7- Flexibilidad y eficiencia de uso: Entregar una
interfaz capaz de satisfacer a usuarios
avanzados y no avanzados. Permitir el uso del
producto sin necesidad de conocimientos
especializados.
PRINCIPIOS DE USABILIDAD Y HEURISTICA

24. 24
8- Diseño estético y minimalista: no saturar
de contenido al usuario, mostrar
ú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
que esta generando errores 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.
PRINCIPIOS DE USABILIDAD Y HEURISTICA

25. 25