Introducción a los conceptos de Experiencia de usuario y usabilidad.

1. INTRODUCCIÓN
A WEB DESIGN
USER EXPERIENCE
USABILIDAD
INTERFAZ DE USUARIO

2. ANTES DE EMPEZAR A
TRABAJAR
Equipos de trabajo
UX (User Experience) y UI (User Interface)
Usabilidad
Arquitectura de la información
Wireframing, sistema de columnas, modelo de cajas
Responsive design
Tendencias de diseño web
HTML (definición, etiquetas, doctype)
CSS (definición, propiedades, selectores)

3. EXPERIENCIA DE USUARIO
USER EXPERIENCE (UX)

4. #TODOSSOMOSUSUARIOS
¿QUÉ O QUIÉN ES EL
USUARIO?

5. UX
(EXPERIENCIA DE USUARIO)
Cómo se siente una persona sobre el uso de un
sistema o tecnología
Aspectos vivenciales, afectivos, significativos y
valiosos de la interacción humano-máquina y de
propiedad de producto
Percepciones de una persona de los aspectos
prácticos, como la utilidad, la facilidad de uso y
la eficiencia

6. LA EXPERIENCIA DE
USUARIO ES SUBJETIVA
Probablemente tú no eres el usuario final
Mientras menos te parezcas al usuario final más
trabajo de investigación deberás realizar
Lo que funciona para unos no funciona para otros
Cada producto necesita una visión única

7. LA EXPERIENCIA DE
USUARIO ES DINÁMICA
Cambia con el tiempo a medida que cambian las
circunstancias

8. ACTIVIDAD
Identifica una buena y una mala experiencia de
usuario en la vida cotidiana
Identifica una buena y una mala experiencia de
usuario en un sitio web

9. USABILIDAD

10. ¿QUÉ ES LA USABILIDAD?
Significa asegurarse que algo funcione bien:
Que una persona con capacidad y experiencia media
(o incluso por debajo de la media)
sea capaz de usar algo
(ya sea un sitio web,
un avión de combate o una puerta giratoria)
con el objetivo deseado
sin sentirse completamente frustrado.
Steve Krug
No me hagas pensar. Una aproximación a la usabilidad en la Web
Segunda Edición

11. La Usabilidad implica menor frustración y más
satisfacción para sus visitantes, además de una
mayor probabilidad de volver a verlos en otra
ocasión.
A la gente, en general, no le gusta sentirse
desconcertada cuando se pone a pensar en cómo
hacer Ias cosas.
Steve Krug
No me hagas pensar. Una aproximación a la usabilidad en la Web
Segunda Edición

12. ELEMENTOS DE USABILIDAD
Interfaz intuitiva
Consistencia en el diseño
Elementos básicos fácilmente localizables
Repetición de elementos
Llevar al usuario de la mano

13. Facilidad de aprendizaje
Eficiencia
Memorabilidad
Errores
Satisfacción
ELEMENTOS DE USABILIDAD

14. Facilidad de aprendizaje: La facilidad para el usuario
de llevar a cabo tareas básicas la primera vez que se
encuentra en el sitio
ELEMENTOS DE LA USABILIDAD

15. Eficiencia: Una vez que el usuario ha aprendido el
diseño, la rapidez con que pueden realizar tareas
ELEMENTOS DE LA USABILIDAD

16. Memorabilidad: Cuando el usuario vuelven al sitio
después de un período de no usarlo, la facilidad con
que pueden recordar cómo navegar y realizar tareas
ELEMENTOS DE LA USABILIDAD

17. Errores: Cuando el usuario comete errores, qué tan
graves son estos errores, y la facilidad con que
pueden recuperarse de éstos
ELEMENTOS DE LA USABILIDAD

18. Satisfacción: Qué agradable para usar es el diseño
ELEMENTOS DE LA USABILIDAD

19. ELEMENTOS DE USABILIDAD
Evitar saturación de información y elementos
Proporcionar una navegación clara
Poder navegar a cualquier parte del sitio desde
cualquier parte del sitio
Mientras que el contenido es único, la navegación
debe ser lo más simple, predecible e intuitiva
posible

20. INTERFAZ DE USUARIO
UI

21. ELEMENTOS DE
INTERFAZ DE USUARIO
Header
Footer
Body (Cuerpo o contenido)
Botones / Call to action
Menú de navegación
Carrusel / Slider
Formato de texto

23. EL CONTENIDO ES EL REY
El diseño debe adecuarse al contenido y no al revés
La distribución es la reina

24. NO ME HAGAS PENSAR
STEVE KRUG
https://www.dropbox.com/s/e9eomy6woh2e8j6/
no-me-hagas-pensar.pdf

25. ADRIANA ATZIMBA TIENDA MARTÍNEZ
atzimbatm@gmail.com