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