Usabilidad en el Comercio Electrónico

2. Orden  del  día   •   Conceptos  Básicos   •   Entendiendo  el  consumidor  digital     •   Diseñando  para  el  consumidor  digital     •   Checklist     •   Casos  propios     •   Conclusiones   •   Retroalimentación    
3. Memorias  del  curso:   “Diseño  Centrado  en  la   experiencia  del   consumidor”    
5. USABILIDAD:   Es  la  facilidad  con  que  las  personas  pueden  u<lizar  una   herramienta  par<cular  o  cualquier  otro  objeto  con  el  fin  de   alcanzar  un  obje<vo  concreto.     En  lo  digital,  la  usabilidad  se  refiere  a  la  claridad  y  la   elegancia  con  que  se  diseña  la  interacción  de  un  sistema,   soDware,  aplicación,  si<o  web.    
6. Usability  means  making  sure   something  works  well,  and  that  a   person  of  average  ability  or  experience   can  use  it  for  its  intended  purpose   without  ge;ng  hopelessly  frustrated.   Steve  Krug   Don’t  make  me  think  
7. EXPERIENCIA  DE  USUARIO:   Conjunto  de  factores  y  elementos  relaJvos  a  la  interacción  del   usuario,  con  un  entorno  o  disposi<vo,  cuyo  resultado  es  la   generación  de  una  percepción  posi<va  o  nega<va.     La  experiencia  de  usuario  depende  no  sólo  de  los  factores  relaJvos   al  diseño  sino  además  de  aspectos  rela<vos  a  las  emociones,   sen<mientos,  construcción  y  transmisión  de  la  marca,  confiabilidad   del  producto,  etc.  
8. "In  our  first  year  we  didn't  spend  a  single   dollar  on  adverAsing...  the  best  dollars   spent  are  those  we  use  to  improve  the   customer  experience.”   Jeff  Bezos,  Fundador  de  amazon.com   hMp://www.bezosexpedi<ons.com  
10. Todo  el  que  usa  y  aprovecha  servicios  en  línea,  impliquen  o   no  gasto  de  dinero.       Por  defecto,  no  lo  podemos  ver,  escuchar  ni  saber  como  es,   qué  quiere,  sus  hábitos.       CONOCIENDO  AL  CONSUMIDOR  
11. CONOCIENDO  AL  CONSUMIDOR   Su  idea  es  siempre  buscar  información,  no  darla.    Ya  sea   para  consumir  o  compar<r.     Todos  esperan  las  cosas  de  la  manera  más  obvia,  más   explicito  y  menos  intui<vo.           Si  no  encuentran  rápido  lo  que  buscan,  se  van.  “el  si'o  no   funciona”      
12. ¿Conocemos  a  los   usuarios  que  consumen   nuestro  productos?  
13. MODELO  DE   COMPORTAMIENTO   DEL  CONSUMIDOR   Qué  componentes  influyen  a  la  hora  de  evaluar  el   comportamiento  de  un  usuario  en  línea.  
14. MODELO  DE  COMPORTAMIENTO  DEL   CONSUMIDOR  
15. MODELO  DE  COMPORTAMIENTO  DEL   CONSUMIDOR   Nuevas  variables,  relacionadas  con  la  capacidades  Wsicas  y   tecnológicas  de  la  organización  para  responder  frente    las   necesidades  del  usuario.       Este  comportamiento  afecta  directamente  la  relación  con  la   marca  /  organización,  ya  que  la  relación  es  completamente   directa,  cercana,  y  permanente.    
16. ¿Esto  para  qué  nos  sirve  a  la   hora  de  diseñar  un  siJo  web?   Para  saber  a  quién  le  hablamos  y  sobre  todo,  cómo  
17. Cómo  diseño  para  gente  de  esa  zona  del   mundo?  
18. ¿Cómo  comunico  los  mismo  en  estos  países?  
19. ¿Cómo  diseño  una   interfaz  para  un  siJo   que  vende  productos  de   este  Jpo?     ¿cómo  me  preparo  para   tener  la  capacidad  de   responder?  
20. ¿Cómo  convenzo  al  usuario  que  escoge  la  mejor  opción?  
21. ¿Aprovechamos  el   conocimiento  que  tenemos  de   los  usuarios  para  darle  una   mejor  experiencia?  
23.   Preceptos  básicos:     Las  personas  esperan  una  experiencia  total   Las  personas  esperan  tener  total  autonomía   Las  personas  esperan  personalización     Las  personas  esperan  ubicuidad   Las  personas  quieren  información   Las  personas  esperan  eficacia.  Que  funcione     Principios  del  diseño  de  interacción   hMp://galinus.com/es/ar<culos/principios-­‐diseno-­‐de-­‐ interaccion.html#interfaces-­‐explorables  
24. ¿Qué  es  lo  que  quiero  que  el  usuario  haga  o   logre  en  mi  si'o?   ¿Qué  es  lo  más  importante?  
25. “No  consideramos  todos     los  elementos     de  la  experiencia,     solo  aquellos  más  obvios”   Colin  Shaw  -­‐  Customer  Experience  (2012)  
26. ¿QUÉ  ES  LO  MÁS   IMPORTANTE?   ¿Qué  hay  en     slide  5  y  6?     ¿Esperamos   realmente  a  ver   todos  los  slide  o   entramos  buscando   lo  que  nos  interesa?  
27. ¿QUÉ  ES  LO  MÁS   IMPORTANTE?   ¿Dónde  están   los  productos?     ¿Cuál  es  y  dónde   encuentro  el   producto  que  más   interesa  ofrecer?  
28. PROCESO  DE  DISEÑO  
29. CALL  TO  ACTION   Son  botones  que  incitan  a  la   acción,  pueden  ser:   -­‐  Precios   -­‐  Fotos  e  imágenes   -­‐  Puntos  de  contacto   -­‐  Espacio  de  acceso  o  registro   -­‐  Carrito  de  compras     Debe  asegurar:   Llamar  la  atención     y  dirigir  a  la  gente  
30. CALL  TO  ACTION  
31. MANEJO  DE  PRECIOS   Los  precios  deben  ser  visibles  
32. MANEJO  DE  PRECIOS  
33. MANEJO  DE  IMAGENES   1.  Uso  de  imágenes  con   intención  para  reforzar  la   información.   2.  Las  personas  somos   muy  visuales.   3.  Se  deben  usar   imágenes  de  personas   interactuando  con  el   producto.   4.  En  móvil  las  personas   tratan  de  hacer  Tap  en  las   imágenes  y  no  en  los   textos.  
34. MANEJO  DE  IMAGENES  
35. MANEJO     DE  IMAGENES   Mapa  de  calor     de  Eye-­‐Tracking  de  las   personas    interactuando   con  los  productos  
36. PUNTOS  DE  CONTACTO   -­‐  Las  personas  necesitan   formas  de  ayuda  digitales  y   reales     -­‐  Mostrar  las  sucursales  inspira   confianza     -­‐  Las  polí<cas  de  compra  y   devolución  son  indispensables   así  nadie  las  lea  
37. PUNTOS  DE  CONTACTO  
38. PUNTOS  DE  CONTACTO   Mejor  si  se  presenta  todo  junto  al  momento  de  la  compra  
39. DISEÑO  DE  PÁGINAS  DE  PRODUCTOS     Y  PROMOCIONES   1  .Iden<ficando  rápidamente  la  promoción   2  .Redacción  de  la  información  y  detalles  “técnicos”   3  .Venta  cruzada  /  Cross  selling   4.  Personalización   5  .Call  to  ac<on    
40. DISEÑO     DE  PÁGINAS     DE  PRODUCTOS     Y  PROMOCIONES   Todo  puede     ser  una  promoción.   El  “secreto”  es  como  la   planteamos  
41. DISEÑO     DE  PÁGINAS     DE  PRODUCTOS     Y  PROMOCIONES   ¿Este  es  el  producto  que   necesito?  
42. DISEÑO     DE  PÁGINAS     DE  PRODUCTOS     Y  PROMOCIONES   Información  para   “humanos”  
43. “Lo  que  decidimos  que  queremos     con  frecuencia  no  es     realmente  lo  que  queremos”     Colin  Shaw  -­‐  Customer  Experience  (2012)  
44. INFORMACIÓN     Y  DETALLES   Comparar  y  buscar   razones  para   convencerse  de  su   compra  
45. INFORMACIÓN     Y  DETALLES   Comparar  y  buscar   razones  para   convencerse  de  su   compra  
46. INFORMACIÓN     Y  DETALLES   Los  comentarios  y   opiniones  de  otras   personas  son  más  ú<les   si  se  evalúan  criterios   específicos  en  lugar  de   “estrellitas  o  bolitas”  
47. VENTA  CRUZADA   Complementar  y  ayudar  al  usuario  en  la  compra  ofreciendole   una  experiencia  total.    
48. PERSONALIZACIÓN   Las  personas  esperan  ser  únicas  con  algo  que  es  solo  para  ellos.  
49. DISEÑO  DE   CATÁLOGOS     EN  MÓVILES   Metáforas  y  analogías     con  la  realidad  
50. DISEÑO  DE   CATÁLOGOS     EN  MÓVILES   Metáforas  y  analogías     con  la  realidad  
51. DISEÑO  DE   CATÁLOGOS     EN  MÓVILES   Objetos  de  información  
52. DISEÑO  DE   CATÁLOGOS     EN  MÓVILES   Lista  de  productos  
53. DISEÑO  DE  CARRITO   DE  COMPRAS  Y   CHECK-­‐OUT   1.  Mostrar  un  resumen  de  los   arxculos  elegidos   2.  Proporcionar  enlaces  para   ver  detalles  del  arxculo   3.  Capacidad  de  modificar  la   can<dad  a  comprar   4.  Call  to  ac<on  para  hacer  el   proceso  de  check-­‐out  en   cualquier  momento  
54. ELEMENTOS  DE  DISEÑO   COMPLEMENTARIOS   1.  Wish  list   2.  Iden<dad  propia  ¿Debemos  llamarle  carrito?   3.  Mesas  de  regalos  /  Compras  “cerradas”   4.  El  call  to  ac<on  no  necesariamente  debe  conducir  al  proceso  de  check  out    
55. El  carrito  de  compras  puede  ser  un  Call  to  ac<on  que  invite  a  conocer  más  productos  
56. ¿Qué  pasa  si  el  producto  no  está  disponible?  
57. ¿Qué  pasa  si  el  producto  no  está  disponible?  
58. ELEMENTOS  DE  DISEÑO  BÁSICOS     EN  UN  PROCESO  DE  CHECK-­‐OUT   1.  Las  personas  no  quieren  procesos  de  captura  largos,   recapturas  y  formularios  complejos   2.  La  mensajería  es  “otro  producto”   3.  Diseñar  una  interfaz  de  cierre  y/o  confirmación   4.  El  proceso  debe  ser  lineal   5.  Debe  ser  claro  dónde  empieza  y  como  con<núa   6.  Proveer  ayudas  contextuales  
59. ELEMENTOS  DE  DISEÑO  BÁSICOS     EN  UN  PROCESO  DE  CHECK-­‐OUT   Proceso  lineal  
60. ELEMENTOS  DE  DISEÑO  BÁSICOS     EN  UN  PROCESO  DE  CHECK-­‐OUT   Ayudas  contextuales  
61. ELEMENTOS  DE  DISEÑO  BÁSICOS     EN  UN  PROCESO  DE  CHECK-­‐OUT   La  mensajería  es  otro  producto  
62. ELEMENTOS  DE  DISEÑO  BÁSICOS     EN  UN  PROCESO  DE  CHECK-­‐OUT   Pedir  la  menor  can<dad  de  información  posible  
63. ELEMENTOS  DE  DISEÑO  BÁSICOS     EN  UN  PROCESO  DE  CHECK-­‐OUT   El  cierre  y  confirmación  de  compra  
65. En  el  día  a  día,  podemos   llegar  a  definir  un  esquema   de  diseño  para  replicar.       Como  primer  paso,   estamos  empezando  a   basarnos  en  un  checklist   que  se  ha  construido.    
66. Inicio     •  Slides?  máximo  3     •  Desde  el  principio,  mostrar  los  criterios  bajo  los  que  puedo   encontrar  el  producto   •  la  información  que  no  <ene  que  ver  con  los  productos  no   es  la  más  relevante.     •  evidenciar  ofertas  y  promociones   •  Call  to  ac<on   •  Social  Media:  Entrada  y  no  salida.     •  Responsive     CHECKLIST  
67. Detalle  de  producto   •  Somos  visuales:  Usar  imágenes,  más  de  una.  Detalles   •  Descripciones  en  lenguaje  claro.     •  Proximidad  y  relevancia  a  llamados  a  la  acción.     •  Qué  hacer  si  el  producto  está  agotado?     •  Venta  Cruzada   •  Calificar  el  producto,  no  solo  un  criterio.     CHECKLIST  
68. CHECKLIST   Proceso  de  pago     •  Pedir  La  menor  información  posible   •  Formas  de  pago  visible   •  Información  de  envio   •  Cómo  evitar  dejar  el  carrito  “abandonado”?   •  Formas  de  ayuda:  Enlace  a  formulario,   u<lidades  de  ayuda.      
70. Autoevaluémonos,  para   detectar  aciertos,  y  errores,   que  significan  oportunidades   de  mejorar  
71. Caso  Kiero  /  Aprendizaje  –  nuevo  detalle  de  producto  
72. Caso  Kiero  
73. Caso  Kiero  
74. Caso  UNE  /  Oportunidad  –  nuevo  flujo  
75. El  jueves  lo  definimos  
76. Caso  Bancolombia:  Bussines  Gold  /  aprendizaje  
77. Caso  Bancolombia:  Bussines  Gold  /  aprendizaje  
78. Caso  Terpel  -­‐  Gazel  
79. Caso  Terpel  -­‐  Gazel  
81. •  Diseñar  en  función  del  usuario  y  no  de  lo  que  se  necesita,  lo   que  se  necesita  se  da  por  hecho,  pensar  en  objeJvos,   experiencia,  más  que  en  alcances  funcionales.     •  El  usuario  espera  una  experiencia  que  sea  más  allá  de  la   pantalla.  Diseñar  para  la  experiencia,  no  para  la  pantalla.     hMp://www.nngroup.com/ar<cles/cross-­‐channel-­‐consistency/   •  Tener  en  cuenta  cosas  como:  Todo  producto  puede  conver<rse   en  promoción.    Saber  responder:  qué  muestro  si  no  hay   productos?    
82. •  Ayudas.  Siempre  informar  al  usuario  de  los  recursos  que  <ene   para  mejorar  su  experiencia.     •  Tenemos  pendiente:  Definir  criterio  de  conversiones.  qué   medimos?  cómo  lo  medimos?  Esto  se  define  por  cada  proyecto.     •  Nos  falta  pruebas,  pruebas  de  usabilidad,  formalizar  ese   proceso  y  hacerlo  rigurosamente.    
83. RECURSOS   A  con<nuación,  unos  enlaces  que  nos  sirven  como  referencia       •  hMp://galinus.com/es/ar<culos/principios-­‐diseno-­‐de-­‐ interaccion.html#interfaces-­‐explorables   •  hMp://www.nngroup.com/ar<cles/   •  hMp://www.hackdesign.org   •  hMp://alistapart.com/topics/user-­‐experience   •  hMp://uxdesign.smashingmagazine.com   •  hMp://wireframes.tumblr.com   •  hMp://www.uxlumen.com/test-­‐de-­‐usuarios-­‐de-­‐guerrilla-­‐12/   •  hMp://contentmarke<ngins<tute.com/2011/04/valuable-­‐content-­‐ checklist/   •  hMp://www.nngroup.com/ar<cles/which-­‐ux-­‐research-­‐methods/