10-diciembre-2013

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

Usabilidad/UX
·
Jordi Sánchez
@jordisan
3
Ingeniero en Informática
 Máster en Interacción Persona-Ordenador


10 años en entidad financiera
 5 años en proyectos ...
10-dic-2013

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

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

Usabilidad/UX
·
Jordi Sánchez
@jordisan


Les Luthiers – Entreteniciencia Familiar http://www.youtube.com/wa...
Usabilidad: el grado en que un producto puede ser
utilizado por los usuarios para lograr sus propósitos
con efectividad, e...
Productos fáciles de usar
 “No me hagas pensar”


10-dic-2013

Usabilidad/UX
·
Jordi Sánchez
@jordisan


Don’t make me ...
Experimento Shiv y Fedorikhin, Stanford, 1999
1. Recordar número (2 ó 7 dígitos)
2. Elegir entre ensalada fruta / tarta ch...
10-dic-2013

Usabilidad/UX
·
Jordi Sánchez
@jordisan
13


Ahorro en costes de desarrollo.





Mejora la eficacia y eficiencia en las tareas.




Importante en aplicaciones...
10-dic-2013

Usabilidad/UX
·
Jordi Sánchez
@jordisan
15


"The rule of thumb in many usability-aware organizations
is that the cost-benefit ratio for usability is $1 : $10$100. ...


"In Jared Spool's study of 15 large commercial sites,
users could only find information 42% of the time even
though the...




“Luckily, current usability ROI is so stupendously
big (spend 10% to gain 83%) that it can decrease much
more and st...
10-dic-2013

Usabilidad/UX
·
Jordi Sánchez
@jordisan
19



Analítica web => Muchos usuarios que iniciaban el
proceso de compra no completaban la transacción
Formulario de pago ...


En un popular sitio de comercio electrónico (¿BB?), los
usuarios seleccionaban sus productos, y cuando
deseaban confirm...



45% de los clientes se habían registrado múltiples veces
Hasta 160.000 peticiones de contraseña al día




De ellos...


Prueba de una campaña de e-mail (test A/B)


Recibir consejos sobre cómo usar el producto

10-dic-2013

Usabilidad/UX
...
10-dic-2013



Ford to upgrade MyFord Touch in 250,000 vehicles after taking heat for glitches and design
http://www.wash...
10-dic-2013

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

Usabilidad/UX
·
Jordi Sánchez
@jordisan
26


La mala: no hay trucos mágicos



La buena: no hay trucos mágicos

10-dic-2013

Usabilidad/UX
·
Jordi Sánchez
@jordisa...


Muchas veces hay pocos recursos, sólo para
evaluar la usabilidad de algo ya desarrollado



Discount Usability / Guerr...
Inspección sistemática de una interfaz por parte
de expertos….
… para comprobar si la interfaz cumple o no
determinados pr...
10-dic-2013

Usabilidad/UX
·
Jordi Sánchez
@jordisan


10 Usability Heuristics for User Interface Design http://www.nngro...
10-dic-2013

Usabilidad/UX
·
Jordi Sánchez
@jordisan
31


Una técnica evaluación: testeo con usuarios







Pasos:
1.
2.
3.
4.
5.
6.



Observar a usuarios (representativo...


Ejemplo: usabilidad de Joomla!




Tarea: cambiar aspecto de un sitio web
recién instalado

Infraestructura:




De...
Bocetos de interfaces de modo rápido para
evaluarlas / modificarlas / descartarlas
 Soportes posibles: papel, PowerPoint,...
10-dic-2013

Usabilidad/UX
·
Jordi Sánchez
@jordisan
35
Analista

Usuario (o no)

Está
claro

No es lo que necesito
No lo encuentro
No lo entiendo
En realidad …

10-dic-2013

1. ...


Múltiples técnicas en todas las etapas.






Evaluación de expertos; prototipado; casos de uso; …
Internamente, o ...
Lean startup
 Metodologías ágiles
 Lean UX









Eficiencia; poca “burocracia”
Centrado en el usuario / client...
10-dic-2013

Usabilidad/UX
·
Jordi Sánchez
@jordisan


http://www.youtube.com/watch?v=9wQkLthhH KA

40
10-dic-2013

Usabilidad/UX
·
Jordi Sánchez
@jordisan
41



Objetivo: que cualquiera tenga acceso a la web,
independientemente de sus habilidades o situación.
Relacionada con la...




Mejora el posicionamiento en buscadores (SEO)




y además…
textos alternativos; identificar idioma;
documentos bi...
10-dic-2013

Usabilidad/UX
·
Jordi Sánchez
@jordisan
44


No requieren
grandes inversiones



Habitualmente dan
muy buenos
resultados



Pueden significar
la diferencia entre:...


No se pueden aplicar todas las técnicas en cada
proyecto




Adaptarse a objetivos, necesidades, recursos, aspectos c...
10-dic-2013

Usabilidad/UX
·
Jordi Sánchez
@jordisan
47
10-diciembre-2013

Jordi Sánchez
jordisan.net
@jordisan
Upcoming SlideShare
Loading in...5
×

El botón de los 300 millones de dólares. Qué es la usabilidad/UX y por qué debo preocuparme por ella

840

Published on

Conceptos como "experiencia de usuario" (UX) y "usabilidad" están cada día más presente en los medios de comunicación, casi siempre asociados a nuevos lanzamientos tecnológicos: dispositivos, páginas web, etc. Pero… ¿a qué se refieren exactamente? ¿Debo preocuparme de que mi web o mi producto sea “usable”?

Durante la ponencia se mostrará, de una manera clara y con ejemplos prácticos, qué es la usabilidad, cómo se consigue, y qué beneficios se pueden obtener de ella. Veremos, por ejemplo, cómo las técnicas de usabilidad pueden llevar a un cambio de un simple botón en un formulario web y aumentar los ingresos de una empresa en 300 millones de dólares anuales.

Published in: Technology
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
840
On Slideshare
0
From Embeds
0
Number of Embeds
5
Actions
Shares
0
Downloads
8
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

El botón de los 300 millones de dólares. Qué es la usabilidad/UX y por qué debo preocuparme por ella

  1. 1. 10-diciembre-2013 Jordi Sánchez jordisan.net @jordisan
  2. 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. 3. 10-dic-2013 Usabilidad/UX · Jordi Sánchez @jordisan 3
  4. 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. 5. 10-dic-2013 Usabilidad/UX · Jordi Sánchez @jordisan 5
  6. 6. 10-dic-2013 Usabilidad/UX · Jordi Sánchez @jordisan 8
  7. 7. 10-dic-2013 Usabilidad/UX · Jordi Sánchez @jordisan  Les Luthiers – Entreteniciencia Familiar http://www.youtube.com/watch?v=9tS-OyggjCE 9
  8. 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. 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. 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. 11. 10-dic-2013 Usabilidad/UX · Jordi Sánchez @jordisan 13
  12. 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. 13. 10-dic-2013 Usabilidad/UX · Jordi Sánchez @jordisan 15
  14. 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. 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. 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. 17. 10-dic-2013 Usabilidad/UX · Jordi Sánchez @jordisan 19
  18. 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. 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. 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. 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. 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. 23. 10-dic-2013 Usabilidad/UX · Jordi Sánchez @jordisan 25
  24. 24. 10-dic-2013 Usabilidad/UX · Jordi Sánchez @jordisan 26
  25. 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. 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. 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. 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. 29. 10-dic-2013 Usabilidad/UX · Jordi Sánchez @jordisan 31
  30. 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. 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. 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. 33. 10-dic-2013 Usabilidad/UX · Jordi Sánchez @jordisan 35
  34. 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. 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. 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. 37. 10-dic-2013 Usabilidad/UX · Jordi Sánchez @jordisan  http://www.youtube.com/watch?v=9wQkLthhH KA 40
  38. 38. 10-dic-2013 Usabilidad/UX · Jordi Sánchez @jordisan 41
  39. 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. 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. 41. 10-dic-2013 Usabilidad/UX · Jordi Sánchez @jordisan 44
  42. 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. 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. 44. 10-dic-2013 Usabilidad/UX · Jordi Sánchez @jordisan 47
  45. 45. 10-diciembre-2013 Jordi Sánchez jordisan.net @jordisan
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×