Este documento presenta una introducción a la usabilidad y la experiencia de usuario (UX) realizada por Jordi Sánchez. En primer lugar, define la usabilidad y distingue el concepto de UX. Luego, explica que la usabilidad es rentable porque mejora la eficiencia, las ventas y la satisfacción de los usuarios. Finalmente, resume varias técnicas clave para evaluar y mejorar la usabilidad, como la inspección heurística, los tests de usuario y el prototipado.

1. 10-diciembre-2013
Jordi Sánchez
jordisan.net
@jordisan

2. Presentación
Qué es la usabilidad
¿Es rentable? Algunos números
Casos concretos
Cómo se consigue
Accesibilidad (web)
Conclusiones
10-dic-2013
Usabilidad/UX
·
Jordi Sánchez
@jordisan
2

3. 10-dic-2013
Usabilidad/UX
·
Jordi Sánchez
@jordisan
3

4. Ingeniero en Informática
 Máster en Interacción Persona-Ordenador

10 años en entidad financiera
 5 años en proyectos de usabilidad/accesibilidad
 Freelance usabilidad/UX; front-end


Proyectos personales:




UCDmanager (Drupal) http://ucdmanager.net
Apps Windows 8
Blog http://jordisan.net/blog
…
10-dic-2013
Usabilidad/UX
·
Jordi Sánchez
@jordisan
4

5. 10-dic-2013
Usabilidad/UX
·
Jordi Sánchez
@jordisan
5

6. 10-dic-2013
Usabilidad/UX
·
Jordi Sánchez
@jordisan
8

7. 10-dic-2013
Usabilidad/UX
·
Jordi Sánchez
@jordisan

Les Luthiers – Entreteniciencia Familiar http://www.youtube.com/watch?v=9tS-OyggjCE
9

8. Usabilidad: el grado en que un producto puede ser
utilizado por los usuarios para lograr sus propósitos
con efectividad, eficiencia y satisfacción en un
determinado contexto de uso.





Efectividad: ¿Pueden los usuarios hacer lo que quieren
hacer?
Eficiencia: ¿Pueden hacerlo con poco
esfuerzo/memoria/etc.?
Satisfacción: ¿Cuál es la percepción de los usuarios
acerca de la facilidad de uso del producto?
Contexto: ¿De qué situación estamos hablando?
UX (User eXperience); ¿es lo mismo?




Tener en cuenta la experiencia global del usuario = satisfacción
Al final, una buena experiencia se consigue con aplicaciones usables
Depende
International standards for HCI and usability: http://www.usabilitynet.org/tools/r_international.htm
10-dic-2013
Usabilidad/UX
·
Jordi Sánchez
@jordisan
10

9. Productos fáciles de usar
 “No me hagas pensar”

10-dic-2013
Usabilidad/UX
·
Jordi Sánchez
@jordisan

Don’t make me think: http://www.sensible.com/buythebook.html
11

10. Experimento Shiv y Fedorikhin, Stanford, 1999
1. Recordar número (2 ó 7 dígitos)
2. Elegir entre ensalada fruta / tarta chocolate
Resultados:
2 dígitos => 42% chocolate
7 dígitos => 63% chocolate
¡Carga cognitiva!

Heart and Mind in Conflict: the Interplay of Affect and Cognition in Consumer Decision Making
http://www.jstor.org/stable/10.1086/209563
10-dic-2013
Usabilidad/UX
·
Jordi Sánchez
@jordisan
12

11. 10-dic-2013
Usabilidad/UX
·
Jordi Sánchez
@jordisan
13

12. 
Ahorro en costes de desarrollo.



Mejora la eficacia y eficiencia en las tareas.


Importante en aplicaciones internas e Intranets.
Mejora las ventas.




Los problemas se detectan antes.
Menos costes de formación.
Los clientes tienen menos problemas a la hora de
comprar.
Menos clientes descontentos que abandonan.
Más clientes nuevos.
Incrementa la satisfacción de los usuarios.

Menos problemas legales (reclamaciones).
10-dic-2013
Usabilidad/UX
·
Jordi Sánchez
@jordisan
14

13. 10-dic-2013
Usabilidad/UX
·
Jordi Sánchez
@jordisan
15

14. 
"The rule of thumb in many usability-aware organizations
is that the cost-benefit ratio for usability is $1 : $10$100. Once a system is in development, correcting a
problem costs 10 times as much as fixing the same
problem in design. If the system has been released, it
costs 100 times as much relative to fixing in
design." (Gilb, 1988)

"The magnitude of usability improvements is usually
large. This is not a matter of increasing use by a few
percent. It is common for usability efforts to result in a
hundred percent or more increase in traffic or
sales." (Nielsen, July 1999)
10-dic-2013
Usabilidad/UX
·
Jordi Sánchez
@jordisan

The ROI of Usability http://www.upassoc.org/usability_resources/usability_in_the_real_world/roi_of_usability.html
16

15. 
"In Jared Spool's study of 15 large commercial sites,
users could only find information 42% of the time even
though they were taken to the correct home page before
they were given the test tasks." (Nielsen, October 1998)

"IBM's Web presence has traditionally been made up of a
difficult-to-navigate labyrinth of disparate subsites, but
a redesign made it more cohesive and user-friendly. The
company said in the month after the February 1999 relaunch that traffic to the Shop IBM online store
increased 120 percent, and sales went up 400
percent." (Battey, 1999)
10-dic-2013
Usabilidad/UX
·
Jordi Sánchez
@jordisan

The ROI of Usability http://www.upassoc.org/usability_resources/usability_in_the_real_world/roi_of_usability.html
17

16. 

“Luckily, current usability ROI is so stupendously
big (spend 10% to gain 83%) that it can decrease much
more and still be a favorable proposition for business
executives.” (Nielsen, 2008)
Pero eso es en entornos ya maduros y con
experiencia en temas de usabilidad:

“During the last decade, the share of project resources
allocated to usability has held steady at around 10% in
those enlightened companies that include usability in
their design lifecycle.” (Nielsen, 2008)
10-dic-2013
Usabilidad/UX
·
Jordi Sánchez
@jordisan

Usability ROI Declining, But Still Strong http://www.useit.com/alertbox/roi.html
18

17. 10-dic-2013
Usabilidad/UX
·
Jordi Sánchez
@jordisan
19

18. 

Analítica web => Muchos usuarios que iniciaban el
proceso de compra no completaban la transacción
Formulario de pago (reconstrucción):
Name
Company
Muchos usuarios particulares
ponían el nombre de su banco…
Address
… y la dirección de su banco

"After we realised that we just went onto the site and deleted that
field - overnight there was a step function [change], resulting in
$12m of profit a year, simply by deleting a field.”
10-dic-2013

Expedia on how one extra data field can cost $12m http://www.silicon.com/management/sales -andmarketing/2010/11/01/expedia-on-how-one-extra-data-field-can-cost-12m-39746554/
Usabilidad/UX
·
Jordi Sánchez
@jordisan
20

19. 
En un popular sitio de comercio electrónico (¿BB?), los
usuarios seleccionaban sus productos, y cuando
deseaban confirmar la compra…
Email Address
“¿Por qué tengo que registrarme? Sólo quiero comprar”
Password
“No recuerdo si ya me registré antes”
Login
Register
“¿Qué dirección de correo electrónico puse?”
Forgot Password



Los usuarios nuevos guardarían sus datos para posteriores compras
Los usuarios registrados no tendrían que volver a introducir sus
datos
Pero…
10-dic-2013
Usabilidad/UX
·
Jordi Sánchez
@jordisan

The $300 Million Button http://www.uie.com/articles/three_hund_million_button
21

20. 

45% de los clientes se habían registrado múltiples veces
Hasta 160.000 peticiones de contraseña al día


De ellos, el 75% no finalizaban su compra después.
Solución:
Email Address
Continue
Password
Login
Register
Forgot Password


You do not need to create an
account to make purchases on
our site. Simply click Continue
to proceed to checkout. To
make your future purchases
even faster, you can create an
account during checkout
Email Address
Password
Login
Forgot Password
“The number of customers purchasing went up by 45%. The extra
purchases resulted in an extra $15 million the first month. For the
first year, the site saw an additional $300,000,000”
The $300 Million Button http://www.uie.com/articles/three_hund_million_button
10-dic-2013
Usabilidad/UX
·
Jordi Sánchez
@jordisan
22

21. 
Prueba de una campaña de e-mail (test A/B)

Recibir consejos sobre cómo usar el producto
10-dic-2013
Usabilidad/UX
·
Jordi Sánchez
@jordisan

How One Check Box Lowered Conversions by 17% http://www.georgesaines.com/?p=352
23

22. 10-dic-2013

Ford to upgrade MyFord Touch in 250,000 vehicles after taking heat for glitches and design
http://www.washingtonpost.com/business/technology/ford-to-upgrade-myford-touch-in-250000-vehicles-aftertaking-heat-for-glitches-and-design/2011/11/06/gIQAY4MNtM_story.html
Usabilidad/UX
·
Jordi Sánchez
@jordisan
24

23. 10-dic-2013
Usabilidad/UX
·
Jordi Sánchez
@jordisan
25

24. 10-dic-2013
Usabilidad/UX
·
Jordi Sánchez
@jordisan
26

25. 
La mala: no hay trucos mágicos

La buena: no hay trucos mágicos
10-dic-2013
Usabilidad/UX
·
Jordi Sánchez
@jordisan
27

26. 
Muchas veces hay pocos recursos, sólo para
evaluar la usabilidad de algo ya desarrollado

Discount Usability / Guerrilla Usability
(Jakob Nielsen):
Técnicas que ofrecen buenos resultados con pocos
recursos:
 Evaluación heurística (revisión de experto)



Tests de usuario
Prototipado
Guerrilla HCI: Using Discount Usability Engineering to Penetrate the Intimidation Barrier
http://www.useit.com/papers/guerrilla_hci.html
10-dic-2013
Usabilidad/UX
·
Jordi Sánchez
@jordisan
28

27. Inspección sistemática de una interfaz por parte
de expertos….
… para comprobar si la interfaz cumple o no
determinados principios de usabilidad (las
“heurísticas”).


Pasos:





Determinar objetivos y alcance de la evaluación.
Selección de las heurísticas a utilizar.
Evaluación y detección de problemas por parte de los
expertos.
Puesta en común. Informe y recomendaciones.
Wezstudio: Estudio de usabilidad: Imaginarium http://www.wezstudio.com/blog/estudio-de-usabilidadimaginarium-1/
10-dic-2013
Usabilidad/UX
·
Jordi Sánchez
@jordisan
29

28. 10-dic-2013
Usabilidad/UX
·
Jordi Sánchez
@jordisan

10 Usability Heuristics for User Interface Design http://www.nngroup.com/articles/ten-usability-heuristics/
30

29. 10-dic-2013
Usabilidad/UX
·
Jordi Sánchez
@jordisan
31

30. 
Una técnica evaluación: testeo con usuarios




Pasos:
1.
2.
3.
4.
5.
6.

Observar a usuarios (representativos) mientras realizan
tareas típicas con la aplicación (lo que hacen, NO lo que
opinan)
Hablan en voz alta sobre lo que están haciendo
No son necesarios muchos usuarios (típicamente 5)
Planificar el test
Preparar tareas y material
Preparar lugar de la prueba
Reclutar usuarios
Realizar la prueba
Analizar los resultados y presentar informe
Usability Testing http://www.usability.gov/methods/test_refine/learnusa/index.html
10-dic-2013
Usabilidad/UX
·
Jordi Sánchez
@jordisan
32

31. 
Ejemplo: usabilidad de Joomla!


Tarea: cambiar aspecto de un sitio web
recién instalado
Infraestructura:


Desde un simple ordenador y alguien tomando notas en papel (en un
entorno tranquilo y cómodo)….
… hasta un laboratorio de usabilidad con:







Dos habitaciones (pruebas y observación)
Cámaras de vídeo y micrófonos
Grabación de la pantalla del usuario
Espejos unidireccionales
Eyetracker
…
La tecnología ayuda, pero NO es lo más importante

Habitualmente tras una evaluación de experto

Vídeos usabilidad Joomla! Day 2010 http://www.youtube.com/view_play_list?p=9B9CF01C59E8E1D9
10-dic-2013
Usabilidad/UX
·
Jordi Sánchez
@jordisan
33

32. Bocetos de interfaces de modo rápido para
evaluarlas / modificarlas / descartarlas
 Soportes posibles: papel, PowerPoint, Visio,
Axure, HTML …



Importante: rápido, manejable, descartable
Nivel de detalle variable (high/low fidelity)

Mejor si no tiene aspecto de producto “acabado” (ej.,
sin colores)
10-dic-2013
Usabilidad/UX
·
Jordi Sánchez
@jordisan

Prototipos en diseño web http://www.alzado.org/articulo.php?id_art=109
34

33. 10-dic-2013
Usabilidad/UX
·
Jordi Sánchez
@jordisan
35

34. Analista
Usuario (o no)
Está
claro
No es lo que necesito
No lo encuentro
No lo entiendo
En realidad …
10-dic-2013
1. Requisitos
2. Desarrollo
3. Entrega
Usabilidad/UX
·
Jordi Sánchez
@jordisan
36

35. 
Múltiples técnicas en todas las etapas.




Evaluación de expertos; prototipado; casos de uso; …
Internamente, o asesoramiento externo.
Multidisciplinar
Iterativo
10-dic-2013

UsabilityNet: Methods table http://usabilitynet.org/tools/methods.htm

En busca del Diseño Centrado en el Usuario (DCU) http://www.nosolousabilidad.com/articulos/dcu.htm
Usabilidad/UX
·
Jordi Sánchez
@jordisan
37

36. Lean startup
 Metodologías ágiles
 Lean UX







Eficiencia; poca “burocracia”
Centrado en el usuario / cliente
Lanzar prototipos rápidamente para obtener feedback
Iterativo
Trabajo colaborativo
The Lean Startup http://theleanstartup.com/
10-dic-2013
Usabilidad/UX
·
Jordi Sánchez
@jordisan
39

37. 10-dic-2013
Usabilidad/UX
·
Jordi Sánchez
@jordisan

http://www.youtube.com/watch?v=9wQkLthhH KA
40

38. 10-dic-2013
Usabilidad/UX
·
Jordi Sánchez
@jordisan
41

39. 

Objetivo: que cualquiera tenga acceso a la web,
independientemente de sus habilidades o situación.
Relacionada con la usabilidad pero referido a
situaciones menos habituales:




Técnica: evaluación de accesibilidad


usuarios con discapacidad;
dispositivos/plataformas poco comunes;
contexto determinado
Automática + manual
Beneficios




maximizar los posibles usuarios/clientes
seguir estándares facilita el desarrollo y mantenimiento
por imagen pública
…
10-dic-2013
Usabilidad/UX
·
Jordi Sánchez
@jordisan

Web Accessibility Initiative (WAI) http://www.w3.org/WAI/
42

40. 

Mejora el posicionamiento en buscadores (SEO)


y además…
textos alternativos; identificar idioma;
documentos bien estructurados; …
Por normativa legal

Web de administraciones
públicas (o con financiación pública;
o “de especial interés”) deben
cumplir nivel mínimo de accesibilidad
10-dic-2013

High Accessibility Is Effective Search Engine Optimization http://www.alistapart.com/articles/accessibilityseo

Referencia sobre legislación española relacionada con la accesibilidad web
http://olgacarreras.blogspot.com/2005/01/referencia-sobre-legislacin-espaola.html
Usabilidad/UX
·
Jordi Sánchez
@jordisan
43

41. 10-dic-2013
Usabilidad/UX
·
Jordi Sánchez
@jordisan
44

42. 
No requieren
grandes inversiones

Habitualmente dan
muy buenos
resultados

Pueden significar
la diferencia entre:



el éxito y el fracaso
tú y tu competencia
Shuttleworth: Open-source desktops need a facelift http://www.zdnet.com/shuttleworth-open-source-desktopsneed-a-facelift-3039486974/
10-dic-2013
Usabilidad/UX
·
Jordi Sánchez
@jordisan
45

43. 
No se pueden aplicar todas las técnicas en cada
proyecto


Adaptarse a objetivos, necesidades, recursos, aspectos críticos, …
Pero para empezar…


Contratar/formar personal especializado
Integrar usabilidad en el proceso de desarrollo

Subconjunto (mínimo) de técnicas:





Roles de usuarios; personas (“quién”)
Casos de uso (“qué”)
Prototipado de interfaces (“cómo”)
Evaluación (heurística/pruebas con usuarios)
UCDmanager http://ucdmanager.net
10-dic-2013
Usabilidad/UX
·
Jordi Sánchez
@jordisan
46

44. 10-dic-2013
Usabilidad/UX
·
Jordi Sánchez
@jordisan
47

45. 10-diciembre-2013
Jordi Sánchez
jordisan.net
@jordisan