Escuela de

Arquitectura
y Diseño

Estrategias de Comunicación Web

Profesora: María Luisa Santos

5. Usabilidad, patrones y tendencias

en diseño web

© María Luisa Santos

 María Luisa Santos
Online Business and UX Consultant

Associate Professor

mlsantos@unav.es

@wila_

http://www.linkedin.com/in/mluisasantos

© María Luisa Santos

 I.
Usabilidad: diseño
centrado en el usuario

© María Luisa Santos

 Do you speak human?
http://doyouspeakhuman.com
© María Luisa Santos
 Usabilidad: definición
“es la capacidad de un sistema o producto para ser
utilizado de manera simple y efectiva por el
usuario al que está destinado, en la ejecución de
tareas específicas, dentro de un contexto dado”
(Jakob Nielsen, 1993)

© María Luisa Santos

 Un sistema usable es…
•  Fácil de aprender: ¿Cómo de fácil es ejecutar las
tareas básicas la primera vez que se utiliza?
•  Eficiente: Una vez aprendido a usar, ¿Cómo de rápido
pueden llevarse a cabo las tareas?
•  Fácil de recordar: Cuando se vuelve a usar tras un
tiempo, ¿cómo de fácil es recordar cómo usarlo y
realizar las tareas correctamente?
•  Evita los errores: ¿Cuántos errores cometen los
usuarios? ¿Son errores graves? ¿Permite el sistema
solucionar los errores cometidos?
•  Satisfactorio: ¿Cómo de agradable es utilizar el
diseño?
Jakob Nielsen: https://www.nngroup.com/articles/usability-101-introduction-to-usability/

© María Luisa Santos

 Usabilidad: principios
1.  Simplicidad
2.  Consistencia
3.  Contraste
4.  Eficiencia
5.  Predictabilidad
6.  Feedback

© María Luisa Santos

 1. Simplicidad

© María Luisa Santos

 2. Consistencia

© María Luisa Santos

 3. Contraste

© María Luisa Santos

 4. Eficiencia

© María Luisa Santos

 5. Predictabilidad

© María Luisa Santos

 6. Feedback

© María Luisa Santos

 II.
Patrones de diseño
multidispositivo

© María Luisa Santos

 Diseñando para distintos
dispositivos

© María Luisa Santos

 ProblemA #1

Diferentes tamaños de pantalla

© María Luisa Santos

 ProblemA #1

Diferentes tamaños de pantalla

© María Luisa Santos

 ProblemA #2

Diferentes resoluciones de pantalla

© María Luisa Santos

 ProblemA #2

Diferentes resoluciones de pantalla

© María Luisa Santos

 ProblemA #3

Diferentes Sistemas Operativos

© María Luisa Santos

 ProblemA #4

Táctil vs. Teclado y ratón

© María Luisa Santos

 ¿Qué
podemos
hacer?

Utilizar…
© María Luisa Santos
 Diseño basado en patrones
!  Es más familiar para
los usuarios
!  Ayuda a navegar y a
convertir
!  Es más usable

at r o n e s
P si t ivo
i spo
multid

© María Luisa Santos

 Diseño mobile first
!  Es más fácil de
adaptar a los
distintos
dispositivos
!  Cada vez es más
familiar para los
usuarios

Hagamos
r e s p on s ive
diseño ero en
o p ri m
pensand
móvil

© María Luisa Santos

 Patrones
solomode
Maquetación
© María Luisa Santos
 Maquetación: jerarquía clara

© María Luisa Santos

 Maquetación: jerarquía clara

© María Luisa Santos

 Maquetación: jerarquía clara

© María Luisa Santos

 Maquetación: jerarquía clara

© María Luisa Santos

 Patrones de
Sistema de
solomo
navegación
© María Luisa Santos
 Sistema de navegación: elementos familiares

© María Luisa Santos

Menú
 Sistema de navegación: elementos familiares

© María Luisa Santos

Calendario
 Sistema de navegación: elementos familiares

© María Luisa Santos

Slider
 Sistema de navegación: elementos familiares

© María Luisa Santos

Fixed and mobile tabs
 Sistema de navegación: elementos familiares

© María Luisa Santos

“Hamburguer menu”
 Patrones de
CTAs
Llamadas a la acción

© María Luisa Santos

 Ctas: llamadas a la acción

© María Luisa Santos

 Ctas: llamadas a la acción

© María Luisa Santos

 Ctas: llamadas a la acción

© María Luisa Santos

 Ctas: llamadas a la acción

© María Luisa Santos

 Patrones
solomode
Texto: copys
© María Luisa Santos
 Copys: Sugerentes

© María Luisa Santos

 Copys: simpáticos y amistosos

© María Luisa Santos

 Copys: simpáticos y amistosos

© María Luisa Santos

 Copys: que promueven la acción

© María Luisa Santos

 Copys: claros y comprensibles

¡¡ Así no !!

© María Luisa Santos

 Copys: claros y comprensibles

© María Luisa Santos

 Copys: QUE FOMENTEN el clic

© María Luisa Santos

 Copys: que eviten errores

© María Luisa Santos

 Copys: para buscadores ¡ seo !

© María Luisa Santos

 III.
Tendencias de diseño
web en 2019/20

© María Luisa Santos

 Tendencias de diseño web 2019/20
1.  Tipografía grande y con serifa
2.  Paletas B/N
3.  Formas naturales, orgánicas
4.  Animación y Glitch art
5.  Micro interacciones
6.  Composición asimétrica
7.  Vídeo integrado
8.  Minimalismo
9.  Navegación amigable para móvil
10. Diversidad

© María Luisa Santos

 1. Tipografía grande y con serifa

© María Luisa Santos

 1. Tipografía grande y con serifa

© María Luisa Santos

 2. B/N con un color de contraste

© María Luisa Santos

 2. B/N con un color de contraste

© María Luisa Santos

 3. Formas naturales orgánicas

© María Luisa Santos

 3. Formas naturales orgánicas

© María Luisa Santos

 4. Animaciones y glitch art

© María Luisa Santos

 4. Animaciones y glitch art

© María Luisa Santos

 5. Micro interacciones

© María Luisa Santos

 5. Micro interacciones

© María Luisa Santos

 6. Composición asimétrica

© María Luisa Santos

 6. Composición asimétrica

© María Luisa Santos

 7. Vídeo integrado

© María Luisa Santos

 7. Vídeo integrado

© María Luisa Santos

 8. Minimalismo

© María Luisa Santos

 8. Minimalismo

© María Luisa Santos

 9. Navegación móvil para el pulgar

© María Luisa Santos

 9. Navegación móvil para el pulgar

© María Luisa Santos

 10. Diversidad

© María Luisa Santos

 10. Diversidad

© María Luisa Santos