El botón de los 300 millones de dólares. Qué es la usabilidad/UX y por qué debo preocuparme por ella
3 recomendaciones1,654 vistas
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.
![
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](https://image.slidesharecdn.com/parcbit-dec2013-jordi-sanchez-boton-300-millones-131210084639-phpapp02/85/El-boton-de-los-300-millones-de-dolares-Que-es-la-usabilidad-UX-y-por-que-debo-preocuparme-por-ella-18-320.jpg)
El botón de los 300 millones de dólares. Qué es la usabilidad/UX y por qué debo preocuparme por ella
- 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
- 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
- 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
- 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
- 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
- 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
- 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
- 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
- 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
- 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
- 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