Presentación visual para una clase sobre Usabilidad y aplicaciones en sitios web. Experiencia de Usuario, Buenas y malas prácticas. Dictada como parte del curso de Publicidad e internet Universidad del Salvador, 08 de noviembre de 2016

1. Publicidad e Internet
Universidad del Salvador, 08 de Noviembre de 2016
Natalia Petit
Interaction Designer
@NattsPetit
Usabilidad Aplicada.
Presentación bajo licencia Creative Commons Atribución 2.5 Argentina
https://creativecommons.org/licenses/by/2.5/ar/

2. ‣ Experiencia de Usuario
‣ Usabilidad y Diseño de Interacción
‣ Aplicaciones prácticas
Índice

3. ¿Qué es la Experiencia
de Usuario?

6. “el resultado de las percepciones y respuestas de
una persona por el uso y uso anticipado de un
producto, sistema o servicio.”
ISO 9241-210:2010
(Ergonomics of human-system interaction — Part 210:
Human-centred design for interactive systems)

8. ¿Quiénes hacen
Experiencia de Usuario?

10. Cuando la Experiencia
no se diseña

12. “Mensaje” de error
La app muestra un
Mensaje de error vacío
La ayuda de la app te
manda a la página web
La página web web te manda a
la app

13. Mejorando la
Experiencia de Usuario
Incorporando a los usuarios

14. “La usabilidad de una interfaz es una medida
de la efectividad, eficiencia y satisfacción con
la cual determinados usuarios pueden alcanzar
determinados objetivos en un entorno particular
con dicha interfaz.”
ISO/IEC 9241-11:1997
(Ergonomics of human-system interaction — Part 11)

15. Usabilidad

16. Porcentaje de tareas exitosas
realizadas por el usuario sin
ayuda externa.
Costo de la realización de las
tareas exitosas (se puede medir
por errores, tiempo, páginas
vistas, etc)
Nivel de satisfacción de los
usuarios en el uso de la
interfaz, se mide con un
cuestionario estándar (SUS)
La usabilidad
se mide:

17. Técnicas de
User Research

18. Pruebas con usuarios
• Cuantificar eficiencia y
eficacia.
• Encontrar problemas
• Validar usabilidad de una
interfaz.
• Se hace con 6 usuarios.

19. Card Sorting
• Para arquitectura de
información, estructura de
navegación
• Cuando no hay una
taxonomía definida
• Hay términos similares que
no se pueden agrupar

20. Eye tracking
• Observar movimiento de
los ojos del usuario
• Identificar áreas de interés
• Información cuantitativa

21. A/B testing
• Testear variaciones
mínimas en el diseño del
sitio.
• Evaluar el impacto en la
confianza al usar ciertos
logos de seguridad

22. Usabilidad aplicada
Ejemplos y aplicaciones prácticas

23. No me hagas pensar!
Don’t Make me think!
- Steve Krug, 2014

24. ¿Cómo se completa este form?

25. Recorrido de la vista
Botón del chat bloquea botones de
enviar y de cancelar

26. Scroll infinito!
En algunos casos, tipear 2 o 4 dígitos
es más rápido

27. ¿Y este?
¿Realmente necesitan
todos estos datos?

28. Recomendaciones

29. Pedir sólo lo indispensable
1 columna = lectura vertical
Acciones claras en los botones:
“Crear cuenta” , “Suscribirme al
newsletter”

30. Proveer indicadores de
lugar: en qué paso está, qué
sección de la página, etc.
Proveer feedback y ayudas

31. ¿Cómo funciona la promo?

32. ¿Sólo funciona si tengo $40 $50 o
$60 de crédito?
¿y si tengo $41 de crédito? Se
multiplican $40 o $41?
Para multiplicar: ¿uso el crédito
que tenía o tengo que cargar?
¿y puedo multiplicar crédito que
ya tenía multiplicado de antes?

33. Recomendaciones:
Presentar la información en orden, como proceso.
Eliminar ambigüedad

34. No me molestes

36. ¿Dónde está el botón para cerrar?
Acá hay un Banner que NADIE mira
Pedir demasiados datos para
un newsletter (TyC??)

37. Interacciones que el usuario no espera:
- Es un botón
- Oscila de lado a lado cuando pasas el
puntero (perdiendo foco y dificultando el
click)
- Sirve para enviar mails de invitación

38. Recomendaciones

39. Mover la suscripción a un lugar en donde no interrumpa la navegación.
Ofrecer un regalo a cambio.

40. Basta de banners!

41. Lo que la página muestra...

42. Lo que el usuario ve...

43. ¿Alcanzaste a leer la promo de los martes?
¿te la perdiste? Son “apenas” 13
slides en una animación sin parar.
Siempre podes esperar a que
vuelva…

46. Recomendaciones

47. Dejar una sola promoción, que visualmente no parezca un banner.
Proveer indicios visuales de que hay más contenido haciendo scroll

48. No me hagas leer

49. banner
¿quién tiene tiempo de leer esto?

50. ¿Qué dice en el menú superior?
¿Y en el footer?
Los textos están en font-size 10px
y color gris claro.

52. Recomendaciones

53. Mejorar la legibilidad:
font-size 16px para el cuerpo
contraste entre texto y fondo de 3.5:1
http://webaim.org/resources/contrastchecker/

54. No me hagas buscar

55. El menú Sorpresa!
Vas a hacer click en solutions y zas!
SORPRESA! Más decisiones que tomar!
¿Ahora cuál elijo? Se ven todas iguales…
Bueno, la primera.

56. El MEGA-menú
Se despliega hacia
abajo, generando scroll
¿Le presto atención al menú
o a las promos?

57. El menú duplicado Recargo desde mi cuenta…

58. El menú duplicado …o desde la tienda?

59. Recomendaciones

60. Usar Mega Menú sólo cuando la cantidad de categorías
sea elevada y su taxonomía bien conocida

61. Usar menú simple por categoría principal en el header
Agregar links a todas las sub-categorías en el footer

62. ¿Preguntas?

63. KRUG, Steve - “No me hagas pensar: una aproximación a la usabilidad
en la web” - Prentice Hall 2006
Recomendados:
www.goodui.org
http://uxmyths.com/
https://www.nngroup.com/articles/

64. Gracias.