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.