El botón de los 300 millones de dólares
45
Jordi Sánchez jordisan.net @jordisan
-
Upload
betabeers -
Category
Technology
-
view
764 -
download
2
description
Charla UI/UX Betabeers Palma X en Palma Activa.
Transcript of El botón de los 300 millones de dólares
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)
Conclusiones
31-oct-2013
Usabilidad/UX
·
Jordi Sánchez
@jordisan
2
31-oct-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 de usabilidad/accesibilidad
Freelance usabilidad/UX; front-end
Proyectos personales:
UCDmanager (Drupal) http://ucdmanager.net
Apps Windows 8
Blog http://jordisan.net/blog
…
31-oct-2013
Usabilidad/UX
·
Jordi Sánchez
@jordisan
4
31-oct-2013
Usabilidad/UX
·
Jordi Sánchez
@jordisan
5
31-oct-2013
Usabilidad/UX
·
Jordi Sánchez
@jordisan
8
Les Luthiers – Entreteniciencia Familiar http://www.youtube.com/watch?v=9tS-OyggjCE
31-oct-2013
Usabilidad/UX
·
Jordi Sánchez
@jordisan
9
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
31-oct-2013
Usabilidad/UX
·
Jordi Sánchez
@jordisan
10
Productos fáciles de usar
“No me hagas pensar”
Don’t make me think: http://www.sensible.com/buythebook.html
31-oct-2013
Usabilidad/UX
·
Jordi Sánchez
@jordisan
11
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! 31-oct-2013
Usabilidad/UX
·
Jordi Sánchez
@jordisan
12
Heart and Mind in Conflict: the Interplay of Affect and Cognition in Consumer Decision Making
http://www.jstor.org/stable/10.1086/209563
31-oct-2013
Usabilidad/UX
·
Jordi Sánchez
@jordisan
13
Ahorro en costes de desarrollo.
Los problemas se detectan antes.
Menos costes de formación.
Mejora la eficacia y eficiencia en las tareas.
Importante en aplicaciones internas e Intranets.
Mejora las ventas.
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).
31-oct-2013
Usabilidad/UX
·
Jordi Sánchez
@jordisan
14
31-oct-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. 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)
The ROI of Usability http://www.upassoc.org/usability_resources/usability_in_the_real_world/roi_of_usability.html
31-oct-2013
Usabilidad/UX
·
Jordi Sánchez
@jordisan
16
"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 re-
launch that traffic to the Shop IBM online store
increased 120 percent, and sales went up 400
percent." (Battey, 1999)
The ROI of Usability http://www.upassoc.org/usability_resources/usability_in_the_real_world/roi_of_usability.html
31-oct-2013
Usabilidad/UX
·
Jordi Sánchez
@jordisan
17
“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)
Usability ROI Declining, But Still Strong http://www.useit.com/alertbox/roi.html
31-oct-2013
Usabilidad/UX
·
Jordi Sánchez
@jordisan
18
31-oct-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 (reconstrucción):
"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.”
Expedia on how one extra data field can cost $12m http://www.silicon.com/management/sales-and-
marketing/2010/11/01/expedia-on-how-one-extra-data-field-can-cost-12m-39746554/
Name
Company
Address
Muchos usuarios particulares
ponían el nombre de su banco…
… y la dirección de su banco
31-oct-2013
Usabilidad/UX
·
Jordi Sánchez
@jordisan
20
En un popular sitio de comercio electrónico (¿BB?), los
usuarios seleccionaban sus productos, y cuando
deseaban confirmar la compra…
Los usuarios nuevos guardarían sus datos para posteriores compras
Los usuarios registrados no tendrían que volver a introducir sus
datos
Pero…
The $300 Million Button http://www.uie.com/articles/three_hund_million_button
Email Address
Password
Login Register
Forgot Password
“¿Por qué tengo que registrarme? Sólo quiero comprar”
“No recuerdo si ya me registré antes”
“¿Qué dirección de correo electrónico puse?”
31-oct-2013
Usabilidad/UX
·
Jordi Sánchez
@jordisan
21
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:
“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
Email Address
Password
Login Register
Forgot Password
Email Address
Password
Login
Continue
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
31-oct-2013
Usabilidad/UX
·
Jordi Sánchez
@jordisan
22
Prueba de una campaña de e-mail (test A/B)
Recibir consejos sobre cómo usar el producto
How One Check Box Lowered Conversions by 17% http://www.georgesaines.com/?p=352
31-oct-2013
Usabilidad/UX
·
Jordi Sánchez
@jordisan
23
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-after-
taking-heat-for-glitches-and-design/2011/11/06/gIQAY4MNtM_story.html
31-oct-2013
Usabilidad/UX
·
Jordi Sánchez
@jordisan
24
31-oct-2013
Usabilidad/UX
·
Jordi Sánchez
@jordisan
25
31-oct-2013
Usabilidad/UX
·
Jordi Sánchez
@jordisan
26
La mala: no hay trucos mágicos
La buena: no hay trucos mágicos
31-oct-2013
Usabilidad/UX
·
Jordi Sánchez
@jordisan
27
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
31-oct-2013
Usabilidad/UX
·
Jordi Sánchez
@jordisan
28
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:
1. Determinar objetivos y alcance de la evaluación.
2. Selección de las heurísticas a utilizar.
3. Evaluación y detección de problemas por parte de los
expertos.
4. Puesta en común. Informe y recomendaciones. 31-oct-2013
Usabilidad/UX
·
Jordi Sánchez
@jordisan
29
31-oct-2013
Usabilidad/UX
·
Jordi Sánchez
@jordisan
30
31-oct-2013
Usabilidad/UX
·
Jordi Sánchez
@jordisan
31
Una técnica evaluación: testeo con usuarios 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)
Pasos: 1. Planificar el test
2. Preparar tareas y material
3. Preparar lugar de la prueba
4. Reclutar usuarios
5. Realizar la prueba
6. Analizar los resultados y presentar informe
31-oct-2013
Usabilidad/UX
·
Jordi Sánchez
@jordisan
32 Usability Testing http://www.usability.gov/methods/test_refine/learnusa/index.html
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
31-oct-2013
Usabilidad/UX
·
Jordi Sánchez
@jordisan
33
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)
Prototipos en diseño web http://www.alzado.org/articulo.php?id_art=109
31-oct-2013
Usabilidad/UX
·
Jordi Sánchez
@jordisan
34
31-oct-2013
Usabilidad/UX
·
Jordi Sánchez
@jordisan
35
No es lo que necesito
No lo encuentro
No lo entiendo
En realidad …
Está
claro
Usuario (o no) Analista
1. Requisitos 3. Entrega 2. Desarrollo
31-oct-2013
Usabilidad/UX
·
Jordi Sánchez
@jordisan
36
Múltiples técnicas en todas las etapas.
Evaluación de expertos; prototipado; casos de uso; …
Internamente, o asesoramiento externo.
Multidisciplinar
Iterativo
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
31-oct-2013
Usabilidad/UX
·
Jordi Sánchez
@jordisan
37
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
31-oct-2013
Usabilidad/UX
·
Jordi Sánchez
@jordisan
39 The Lean Startup http://theleanstartup.com/
http://www.yout
ube.com/watch?
v=9wQkLthhHKA 31-oct-2013
Usabilidad/UX
·
Jordi Sánchez
@jordisan
40
31-oct-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 usabilidad pero referido a
situaciones menos habituales:
usuarios con discapacidad;
dispositivos/plataformas poco comunes;
contexto determinado
Técnica: evaluación de accesibilidad
Automática + manual
Beneficios
maximizar los posibles usuarios/clientes
seguir estándares facilita el desarrollo y mantenimiento
por imagen pública
…
Web Accessibility Initiative (WAI) http://www.w3.org/WAI/
31-oct-2013
Usabilidad/UX
·
Jordi Sánchez
@jordisan
42
y además…
Mejora el posicionamiento en buscadores (SEO)
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
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
31-oct-2013
Usabilidad/UX
·
Jordi Sánchez
@jordisan
43
31-oct-2013
Usabilidad/UX
·
Jordi Sánchez
@jordisan
44
No requieren
grandes inversiones
Habitualmente dan
muy buenos
resultados
Pueden significar
la diferencia entre:
el éxito y el fracaso
tú y tu competencia
31-oct-2013
Usabilidad/UX
·
Jordi Sánchez
@jordisan
45
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
31-oct-2013
Usabilidad/UX
·
Jordi Sánchez
@jordisan
46
31-oct-2013
Usabilidad/UX
·
Jordi Sánchez
@jordisan
47
Jordi Sánchez
jordisan.net @jordisan
