Usabilidad en el Comercio Electrónico

043c384b3b9e96d9e89c1c46a8d2cc6b?s=47 Rapp Colombia
October 30, 2013

Usabilidad en el Comercio Electrónico

043c384b3b9e96d9e89c1c46a8d2cc6b?s=128

Rapp Colombia

October 30, 2013
Tweet

Transcript

  1. None
  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”    
  4. None
  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  
  9. None
  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?  
  22. None
  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  
  64. None
  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.      
  69. None
  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  

  80. None
  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/    
  84. None
  85. None