Page 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/
Page 2
‣ Experiencia de Usuario
‣ Usabilidad y Diseño de Interacción
‣ Aplicaciones prácticas
Índice
Page 3
¿Qué es la Experiencia de Usuario?
Page 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)
Page 8
¿Quiénes hacen Experiencia de Usuario?
Page 10
Cuando la Experiencia no se diseña
Page 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
Page 13
Mejorando la Experiencia de Usuario
Incorporando a los usuarios
Page 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)
Page 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:
Page 17
Técnicas de User Research
Page 18
Pruebas con usuarios
• Cuantificar eficiencia y eficacia.
• Encontrar problemas • Validar usabilidad de una
interfaz.
• Se hace con 6 usuarios.
Page 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
Page 20
Eye tracking
• Observar movimiento de los ojos del usuario
• Identificar áreas de interés • Información cuantitativa
Page 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
Page 22
Usabilidad aplicada
Ejemplos y aplicaciones prácticas
Page 23
No me hagas pensar!
Don’t Make me think!
- Steve Krug, 2014
Page 24
¿Cómo se completa este form?
Page 25
Recorrido de la vista
Botón del chat bloquea botones de enviar y de cancelar
Page 26
Scroll infinito! En algunos casos, tipear 2 o 4 dígitos es más rápido
Page 27
¿Y este?
¿Realmente necesitan todos estos datos?
Page 29
Pedir sólo lo indispensable
1 columna = lectura vertical
Acciones claras en los botones: “Crear cuenta” , “Suscribirme al newsletter”
Page 30
Proveer indicadores de lugar: en qué paso está, qué sección de la página, etc.
Proveer feedback y ayudas
Page 31
¿Cómo funciona la promo?
Page 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?
Page 33
Recomendaciones:
Presentar la información en orden, como proceso. Eliminar ambigüedad
Page 36
¿Dónde está el botón para cerrar?
Acá hay un Banner que NADIE mira
Pedir demasiados datos para un newsletter (TyC??)
Page 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
Page 39
Mover la suscripción a un lugar en donde no interrumpa la navegación. Ofrecer un regalo a cambio.
Page 40
Basta de banners!
Page 41
Lo que la página muestra...
Page 42
Lo que el usuario ve...
Page 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…
Page 47
Dejar una sola promoción, que visualmente no parezca un banner. Proveer indicios visuales de que hay más contenido haciendo scroll
Page 49
banner
¿quién tiene tiempo de leer esto?
Page 50
¿Qué dice en el menú superior? ¿Y en el footer?
Los textos están en font-size 10px y color gris claro.
Page 53
Mejorar la legibilidad: font-size 16px para el cuerpo contraste entre texto y fondo de 3.5:1
http://webaim.org/resources/contrastchecker/
Page 54
No me hagas buscar
Page 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.
Page 56
El MEGA-menú
Se despliega hacia abajo, generando scroll
¿Le presto atención al menú o a las promos?
Page 57
El menú duplicado Recargo desde mi cuenta…
Page 58
El menú duplicado …o desde la tienda?
Page 60
Usar Mega Menú sólo cuando la cantidad de categorías sea elevada y su taxonomía bien conocida
Page 61
Usar menú simple por categoría principal en el header Agregar links a todas las sub-categorías en el footer
Page 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/