Marketing online – Cómo vender en la redExperiencia de usuario y usabilidadVirginia Aguirre: @bubalie#bizbak2012
Empecemos por imaginar….
… cómo sería un proceso de compra online    llevado a la vida “física/offline”.    http://www.youtube.com/watch?v=3Sk7cOqB...
Y ahora hablemos de lo que    constituye la base de todo:¡El Diseño centrado en el usuario!
El Diseño Centrado en el Usuario (UCD)Es una filosofía de diseño que pretendecrear: Experiencias que van más allá de los ...
El Diseño Centrado en el Usuario (UCD)Se basa en las necesidades e intereses del usuario,haciendo énfasis en la usabilidad...
El Diseño Centrado en el Usuario (UCD)Diseñar con el usuario final permanentemente         en el centro de la atención.Cad...
El Diseño Centrado en el Usuario (UCD)El objetivo es diseñar un sitio web de forma que sususuarios puedan servirse de el c...
Y esto…   … ¿cómo lo          hacemos?
¿Sacamos la bola de cristal?.... ;P
El Diseño Centrado en el Usuario (UCD)Con un enfoque desde el inicio, recogiendo datosde manera estructurada, sistemática ...
El Diseño Centrado en el Usuario (UCD)De Hitz Kareaga
También es necesario contextualizarel momento actual…
La web 2.0 y los medios sociales forman parte denuestras vidas, están para quedarse y han cambiadola forma en que trabajam...
El acceso multiplataforma y la difusión de lossmartphones y tablets no tiene marcha atrás.
Las personas colaboran e intercambian informaciónde forma ágil.
Los mercados se convierten en conversaciones yahora hablamos de reputación online.
También hay que hablar del consumidor de nuevageneración, informado, inteligente, productor deinformación que ya no cree e...
¡Estamos ante un nuevo        escenario!   ¡Con nuevas formas decomunicarnos, relacionarnos, experimentar y compartir!
Cambios dramáticos en la realidad del marketing        http://www.youtube.com/watch?v=Mc0ggyHcQBk&list=PL0ECF8CE3B1D178C  ...
¡Ahora más que nunca lo que  importa son las personas!
Un nuevo enfoque centrado en laconstrucción de actividades alrededor de las   personas, así como la generación de  experie...
- Generar nuevas formas de relacionarnos con  nuestros usuarios, clientes, consumidores.- Buscar nuevas formas de transmit...
¿Y qué conseguimos si generamos      experiencias positivas?           ¡Engagement!¡La vinculación de los usuarios con tu ...
¡En este contexto laexperiencia de usuario cobra   una nueva dimensión!
Las personas somos clientes, consumidores y                usuarios…      Y cómo tal, tenemos experiencias     con las mar...
DesignforusersKris Colvin
¿Pero qué es la experiencia de           usuario?
¿Qué es la experiencia de usuario?      La sensación, sentimiento y       satisfacción del usuario…      …respecto a un pr...
¿Qué es la experiencia de usuario? Conjunto de percepciones y sensaciones que desarrolla un usuario durante su relación e ...
¿Qué es la experiencia de usuario?
¿Qué es la experiencia de usuario?Hoy en día, la experiencia de usuario online vamás allá de mi sitio web corporativo, int...
¿Qué es la experiencia de usuario?Una experiencia positiva de usuario está en directarelación con una percepción positiva ...
¿Qué es la experiencia de usuario?  Objetivos de su diseño:  - Homogeneización de las iniciativas online.  - Proyección de...
¿Qué es la experiencia de usuario? Nuestro sitio web es…  …el reflejo de nuestra marca en internet,  nuestro principal esc...
¿Qué es la experiencia de usuario?La experiencia de usuario online empieza con lapercepción de la marca y todo cuanto haya...
¿Qué es la experiencia de usuario?
¿Qué es la experiencia de usuario?
¿Qué es la experiencia de usuario?
¿Qué es la experiencia de usuario?Volvo:SeguridadCuadradoFamilias  más agresivos…StatusAlto precio
¿Qué es la experiencia de usuario?
¿Qué es la experiencia de usuario?Concepto global que depende de numerosos factores: - Utilidad y valor del producto/servi...
¿Qué es la experiencia de usuario?  La usabilidad o “facilidad de uso” es una de lasfacetas fundamentales que forma parte ...
¿Qué es la experiencia de usuario?Los elementos de la experiencia de usuario -Jesse James Garret “Lo que no contaba era qu...
¿Qué es la experiencia de usuario?                        Diseño visual                    Diseño de interfaz:            ...
¿Qué es la experiencia de usuario?  La rueda de la experiencia del usuario - Francisco Tosete  Herranz
¿Qué es la experiencia de usuario?  La rueda de la experiencia del usuario - Francisco  Tosete Herranz  Disciplinas vincul...
¿Qué es la experiencia de usuario?Las facetas de la experiencia de usuario Peter Morville • Semantic Studios • Autor “Info...
¿Qué es la experiencia de usuario?
¿Qué es la experiencia de usuario?UtilidadSistemas útiles aplicando el conocimiento del medio.DeseabilidadA través del val...
¿Qué es la experiencia de usuario?Encontrabilidad Capacidad de un objeto de ser localizado: buscadores/SEO + mecanismos in...
¿Y la Usabilidad…?
UsabilidadLa clave de un sitio usable es quequien navega por él consiga: - Entender su estructura. - Realizar     con     ...
Usabilidad      http://www.youtube.com/watch?v=VP_WHckrAX0
Usabilidad             “La usabilidad se basa en no             molestar ni hacer pensar en             exceso al navegant...
UsabilidadDefinición informalUsabilidad se define coloquialmente como facilidad deuso, ya sea de una página web, una aplic...
Usabilidad      Atributos  ¿Consigo realizar lacomprar correctamente?                                  ¿Cuánto tardo en   ...
Usabilidad Eficacia: Relacionado con el número de errores que comete el usuario en la consecución de una tarea. Eficiencia...
Usabilidad Satisfacción de uso: Percepción del usuario respecto a la dificultad de acometer la tarea. Relacionado con que ...
Usabilidad y conversión
Usabilidad y conversión¿Y qué conseguimos si creamos un sitio web usable?       ¡Mejorar nuestros ratios de conversión!   ...
Usabilidad y conversiónLa tasa de conversión es el porcentaje de visitantes queejecuta la acción: rellenan un formulario, ...
Usabilidad y conversiónEjemplo, una tienda online: - Objetivo: vender por Internet. - Factor de conversión: cantidad de ve...
Usabilidad y conversiónLas acciones de Marketing online, la publicidad y demáspromociones y actividades que lanzamos dirig...
Técnicas y herramientas
Técnicas y herramientas          1                          2                        3   Indagación y             Arquitec...
Técnicas y herramientas1   Indagación y captación de insights    - Toma de requisitos.    - Recogida de información subjet...
Técnicas y herramientas1   Indagación y captación de insights    - Encuestas: online rápidas y asequibles- según      proy...
Técnicas y herramientas1   Indagación y captación de insights
Técnicas y herramientas1   Indagación y captación de insights
Técnicas y herramientas1   Indagación y captación de insights
Técnicas y herramientas1       Indagación y captación de insights    -    ¡Google!    -    Google alerts: monitorización r...
Técnicas y herramientas1   Indagación y captación de insights
Técnicas y herramientas1   Indagación y captación de insights
Técnicas y herramientas1   Indagación y captación de insights
Técnicas y herramientas1   Indagación y captación de insights
Técnicas y herramientas1   Indagación y captación de insights
Técnicas y herramientas2   Arquitectura de la información y diseño de interacción:    -   Técnica “Personas”.    -   Card ...
Técnicas y herramientas
Técnicas y herramientas 2 Arquitectura de la información y diseño de interacción: Técnica Personas
Técnicas y herramientas 2 Arquitectura de la información y diseño de interacción                                    Card s...
Técnicas y herramientas 2 Arquitectura de la información y diseño de interacción                                          ...
Técnicas y herramientas 2 Arquitectura de la información y diseño de interacción
Técnicas y herramientas    Arquitectura de la información y diseño de 2 interacción:
Técnicas y herramientas 2 Arquitectura de la información y diseño de interacción                                Diagrama d...
Técnicas y herramientas 2 Arquitectura de la información y diseño de interacción                                          ...
Técnicas y herramientas 2 Arquitectura de la información y diseño de interacción
Técnicas y herramientas 2 Arquitectura de la información y diseño de interacción
Técnicas y herramientas 2 Arquitectura de la información y diseño de interacción
Técnicas y herramientas 2 Arquitectura de la información y diseño de interacción
Técnicas y herramientas 2 Arquitectura de la información y diseño de interacción
Técnicas y herramientas 2 Arquitectura de la información y diseño de interacción
Técnicas y herramientas 2 Arquitectura de la información y diseño de interacción
Técnicas y herramientas 3 Medición y evaluación de experiencia de usuario y usabilidad       -   Inspección heurística por...
Técnicas y herramientas 3 Medición y evaluación de experiencia de usuario y usabilidad En 1990 Jakob Nielsen hizo un Evalu...
Técnicas y herramientas 3 Medición y evaluación de experiencia de usuario y usabilidadTest de usuario
Técnicas y herramientas 3 Medición y evaluación de experiencia de usuario y usabilidad
Técnicas y herramientas 3 Medición y evaluación de experiencia de usuario y usabilidad
Técnicas y herramientas 3 Medición y evaluación de experiencia de usuario y usabilidad                                    ...
Técnicas y herramientas 3 Medición y evaluación de experiencia de usuario y usabilidad            Reconocimiento y recuerdo
Técnicas y herramientas 3 Medición y evaluación de experiencia de usuario y usabilidad
Aplicación: metodología de diseño UX Fase 1 – INVESTIGACION Y           Fase 2 – ESTRATEGIA,             Fase 3 –DESARROLL...
Los principios heurísticos de usabilidad
Principios de usabilidad- Son teóricos pero flexibles.- En cada caso concreto (objetivo, usuario y  contexto) la aplicació...
Principios de usabilidad          ¿Se comunica de manera inmediata y clara el1         propósito, objetivo y funciones de ...
Principios de usabilidad
Principios de usabilidad
Principios de usabilidad           ¿Se ofrecen al usuario mecanismos y referencias2          claras que le permitan orient...
Principios de usabilidad                    Al pulsar el botón se sustituye                    por una barra de progreso  ...
Principios de usabilidad
Principios de usabilidad
Principios de usabilidad         ¿La página se adecua a los objetos mentales del3        usuario, su lógica de la informac...
Principios de usabilidad
Principios de usabilidad
Principios de usabilidad          ¿El sitio web permite al usuario interactuar con4         el de manera fácil y productiv...
Principios de usabilidad
Principios de usabilidad          ¿Tiene el usuario control y libertad sobre la5         interfaz?          ¿Se han evitad...
Principios de usabilidad          ¿Se mantiene la consistencia en las diferentes          páginas/secciones, etc. del siti...
Principios de usabilidad               http://www.somosflow.com/desktop/
Principios de usabilidad               http://www.weshootbottles.com/
Principios de usabilidad7         ¿El sitio web trata de prevenir posibles errores?- ¿Se mantiene informado al usuario de ...
Principios de usabilidad                          Hacer más relevante la                          acción primaria para evi...
Principios de usabilidad
Principios de usabilidad          ¿La interfaz facilita y optimiza el acceso y la8         interacción de los usuarios con...
Principios de usabilidad
Principios de usabilidad
Principios de usabilidad           ¿El sitio ofrece información y un diseño9          minimalista? ¿Se ha evitado el uso d...
Principios de usabilidad
Principios de usabilidad
Principios de usabilidad          ¿ Los mensajes de error ayudan a los usuarios10        a reconocer, diagnosticar y soluc...
Principios de usabilidad
Principios de usabilidad
Principios de usabilidad
Principios de usabilidadVía Luis Villa @maguissohttp://www.grancomo.com/        http://www.rollingstones.com/404
Principios de usabilidad           ¿ En caso de que sea necesario, se ofrece una11         sección de ayuda y documentació...
Principios de usabilidad
Caso práctico
Caso práctico UX en Shopping Online: Blanco Vs. H&M Intuitivamente , Andrea Cantú: http://www.intuitivamente.com/2012/01/3...
Beneficios de aplicar técnicas de UX yUsabilidad
Beneficios de aplicar técnicas de UX yUsabilidad - Refuerzo de la imagen de marca: Mejoras en la   percepción del usuario ...
Beneficios de aplicar técnicas de UX yUsabilidad - Reducción de costes en servicios de soporte/atención al   cliente: - pr...
Bibliografía y referencias
Bibliografía y referencias Libros: - No me hagas pensar. Steve Krug - El diseño de las cosas cotidianas. Donald. A Norman ...
Bibliografía y referencias Arquitectura de la información: No sólo usabilidad: http://www.nosolousabilidad.com - Arquitect...
Bibliografía y referencias Arquitectura de Información y Diseño Centrado en el Usuario - Juan David Saab:  http://www.slid...
Bibliografía y referencias Experiencia de usuario y social media: - Marco Gallen ¿Cómo aprovechar las redes sociales para ...
Bibliografía y referencias Experiencia de usuario y social media: - Simple Line Design - User Experience and Social Media ...
Bibliografía y referencias Usabilidad – Conversión - SEO Colombia - Usabilidad: Factores de conversión y su importancia   ...
¡Gracias!- Twitter: @bubalie / @theSocialUX- Mail: virginia@thesocialexperience.es- Linkedin: http://es.linkedin.com/in/vi...
Cursos de verano UPV/EHU - Marketing online, Experiencia de usuario y  usabilidad por Virginia Aguirre - The Social Experi...
Cursos de verano Bizbak UPV/EHU: Marketing Online: Experiencia de usuario (UX) y usabilidad
Cursos de verano Bizbak UPV/EHU: Marketing Online: Experiencia de usuario (UX) y usabilidad
Cursos de verano Bizbak UPV/EHU: Marketing Online: Experiencia de usuario (UX) y usabilidad
Cursos de verano Bizbak UPV/EHU: Marketing Online: Experiencia de usuario (UX) y usabilidad
Cursos de verano Bizbak UPV/EHU: Marketing Online: Experiencia de usuario (UX) y usabilidad
Upcoming SlideShare
Loading in...5
×

Cursos de verano Bizbak UPV/EHU: Marketing Online: Experiencia de usuario (UX) y usabilidad

654

Published on

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

  • Be the first to like this

No Downloads
Views
Total Views
654
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
25
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Cursos de verano Bizbak UPV/EHU: Marketing Online: Experiencia de usuario (UX) y usabilidad

  1. 1. Marketing online – Cómo vender en la redExperiencia de usuario y usabilidadVirginia Aguirre: @bubalie#bizbak2012
  2. 2. Empecemos por imaginar….
  3. 3. … cómo sería un proceso de compra online llevado a la vida “física/offline”. http://www.youtube.com/watch?v=3Sk7cOqB9Dk&list=PLC34DC3AFD26EF033 &index=2&feature=plpp_video
  4. 4. Y ahora hablemos de lo que constituye la base de todo:¡El Diseño centrado en el usuario!
  5. 5. El Diseño Centrado en el Usuario (UCD)Es una filosofía de diseño que pretendecrear: Experiencias que van más allá de los productos o servicios. Un ambiente que se conecte a nivel emocional con el usuario. Juicy Salif Philippe Starck
  6. 6. El Diseño Centrado en el Usuario (UCD)Se basa en las necesidades e intereses del usuario,haciendo énfasis en la usabilidad y comprensióndel producto: - Habilidades y necesidades del usuario. - Contexto de uso. - Tareas que va realizar. http://www.orangeaura.com/websites-and-people- what-needs-to-be-considered/usability-accessibility/
  7. 7. El Diseño Centrado en el Usuario (UCD)Diseñar con el usuario final permanentemente en el centro de la atención.Cada etapa del proceso de diseño y desarrollo de unproyecto web debería considerar al usuario finalmediante: - Actividades que lo involucren. - Técnicas que permitan tener una clara percepción de sus necesidades y preferencias.
  8. 8. El Diseño Centrado en el Usuario (UCD)El objetivo es diseñar un sitio web de forma que sususuarios puedan servirse de el con un mínimo deestrés y un máximo de eficiencia.
  9. 9. Y esto… … ¿cómo lo hacemos?
  10. 10. ¿Sacamos la bola de cristal?.... ;P
  11. 11. El Diseño Centrado en el Usuario (UCD)Con un enfoque desde el inicio, recogiendo datosde manera estructurada, sistemática y objetiva,hacia:  los usuarios internos y externos.  las tareas que han de realizar con el producto.
  12. 12. El Diseño Centrado en el Usuario (UCD)De Hitz Kareaga
  13. 13. También es necesario contextualizarel momento actual…
  14. 14. La web 2.0 y los medios sociales forman parte denuestras vidas, están para quedarse y han cambiadola forma en que trabajamos, vivimos, aprendemos,nos comunicamos, nos divertimos…
  15. 15. El acceso multiplataforma y la difusión de lossmartphones y tablets no tiene marcha atrás.
  16. 16. Las personas colaboran e intercambian informaciónde forma ágil.
  17. 17. Los mercados se convierten en conversaciones yahora hablamos de reputación online.
  18. 18. También hay que hablar del consumidor de nuevageneración, informado, inteligente, productor deinformación que ya no cree en la publicidad. http://likeiknowit.wordpress.com/2008/05/19/micro-interactions/
  19. 19. ¡Estamos ante un nuevo escenario! ¡Con nuevas formas decomunicarnos, relacionarnos, experimentar y compartir!
  20. 20. Cambios dramáticos en la realidad del marketing http://www.youtube.com/watch?v=Mc0ggyHcQBk&list=PL0ECF8CE3B1D178C 3&index=8&feature=plpp_video
  21. 21. ¡Ahora más que nunca lo que importa son las personas!
  22. 22. Un nuevo enfoque centrado en laconstrucción de actividades alrededor de las personas, así como la generación de experiencias e interacciones positivas.
  23. 23. - Generar nuevas formas de relacionarnos con nuestros usuarios, clientes, consumidores.- Buscar nuevas formas de transmitir mensajes.- Potenciar la interacción del consumidor con la marca a través de una experiencia directa.- Conectar con el consumidor a través de la red.
  24. 24. ¿Y qué conseguimos si generamos experiencias positivas? ¡Engagement!¡La vinculación de los usuarios con tu marca!
  25. 25. ¡En este contexto laexperiencia de usuario cobra una nueva dimensión!
  26. 26. Las personas somos clientes, consumidores y usuarios… Y cómo tal, tenemos experiencias con las marcas, sus productos y sus servicios….Se generan micro interacciones con diferentes facetas de la marca.
  27. 27. DesignforusersKris Colvin
  28. 28. ¿Pero qué es la experiencia de usuario?
  29. 29. ¿Qué es la experiencia de usuario? La sensación, sentimiento y satisfacción del usuario… …respecto a un producto… …resultado de interactuar con el producto y su proveedor: la marca.
  30. 30. ¿Qué es la experiencia de usuario? Conjunto de percepciones y sensaciones que desarrolla un usuario durante su relación e interacción con los elementos de tu identidad digital, y en concreto con tu sitio web…
  31. 31. ¿Qué es la experiencia de usuario?
  32. 32. ¿Qué es la experiencia de usuario?Hoy en día, la experiencia de usuario online vamás allá de mi sitio web corporativo, integrando mipresencia en los diferentes medios y canales 2.0,pasando estos a conformar junto a nuestro sitioweb, nuestra presencia en Internet.Creándose así una identidad digital ygenerando una experiencia de usuarioglobal.
  33. 33. ¿Qué es la experiencia de usuario?Una experiencia positiva de usuario está en directarelación con una percepción positiva de la marca.E branding / Branding 2.0 / UX 2.0 / Experienciassociales /Conexión emocional / Micro Interacciones.
  34. 34. ¿Qué es la experiencia de usuario? Objetivos de su diseño: - Homogeneización de las iniciativas online. - Proyección de marca única y homogénea. - Una experiencia de usuario global satisfactoria.
  35. 35. ¿Qué es la experiencia de usuario? Nuestro sitio web es… …el reflejo de nuestra marca en internet, nuestro principal escaparate, nuestras oficinas centrales en internet!!!
  36. 36. ¿Qué es la experiencia de usuario?La experiencia de usuario online empieza con lapercepción de la marca y todo cuanto haya en unsitio web forma parte de la experiencia de usuario. http://www.benzinsider.com/2008/05/mercedes-benz-brand-perception-tag-cloud/
  37. 37. ¿Qué es la experiencia de usuario?
  38. 38. ¿Qué es la experiencia de usuario?
  39. 39. ¿Qué es la experiencia de usuario?
  40. 40. ¿Qué es la experiencia de usuario?Volvo:SeguridadCuadradoFamilias  más agresivos…StatusAlto precio
  41. 41. ¿Qué es la experiencia de usuario?
  42. 42. ¿Qué es la experiencia de usuario?Concepto global que depende de numerosos factores: - Utilidad y valor del producto/servicio. - Respuesta a las necesidades y expectativas de los usuarios. - Contenidos y servicios ofrecidos. - Transmisión de valores de marca. - Creatividad. - Diseño visual. - Usabilidad/ Arquitectura de la información consistente / Navegación eficiente. - Facilidad de aprendizaje y recuerdo.
  43. 43. ¿Qué es la experiencia de usuario? La usabilidad o “facilidad de uso” es una de lasfacetas fundamentales que forma parte de la UX. ¡Pero no lo es todo!
  44. 44. ¿Qué es la experiencia de usuario?Los elementos de la experiencia de usuario -Jesse James Garret “Lo que no contaba era que diez años después, aún hubiera tanta gente que tuviera que ser educada (al respecto)". • Adaptive Path: http://www.adaptivepath.com/ • Acuñador término “AJAX”
  45. 45. ¿Qué es la experiencia de usuario? Diseño visual Diseño de interfaz: información + navegación Diseño de interacción Arquitectura de información Especificaciones funcionales Necesidades de contenidos Necesidades de usuario Objetivos
  46. 46. ¿Qué es la experiencia de usuario? La rueda de la experiencia del usuario - Francisco Tosete Herranz
  47. 47. ¿Qué es la experiencia de usuario? La rueda de la experiencia del usuario - Francisco Tosete Herranz Disciplinas vinculadas: ‐ Usabilidad. ‐ Accesibilidad. ‐ Diseño de información y diseño gráfico. ‐ Buscabilidad (Findabiliby). ‐ Arquitectura de la Información. ‐ Diseño de Interacción.
  48. 48. ¿Qué es la experiencia de usuario?Las facetas de la experiencia de usuario Peter Morville • Semantic Studios • Autor “Information architecture”. • Acuñador término “Findability”
  49. 49. ¿Qué es la experiencia de usuario?
  50. 50. ¿Qué es la experiencia de usuario?UtilidadSistemas útiles aplicando el conocimiento del medio.DeseabilidadA través del valor de la imagen, de la identidad, de la marcaValorOfrecer valor para el usuarioCredibilidad Generar confianza
  51. 51. ¿Qué es la experiencia de usuario?Encontrabilidad Capacidad de un objeto de ser localizado: buscadores/SEO + mecanismos internos.Usabilidad La facilidad de uso es fundamental, pero es una faceta más.AccesibilidadAcceso universal a la web
  52. 52. ¿Y la Usabilidad…?
  53. 53. UsabilidadLa clave de un sitio usable es quequien navega por él consiga: - Entender su estructura. - Realizar con satisfacción aquello que pretendía realizar.
  54. 54. Usabilidad http://www.youtube.com/watch?v=VP_WHckrAX0
  55. 55. Usabilidad “La usabilidad se basa en no molestar ni hacer pensar en exceso al navegante (Krug) y en hacerle fácil y grata la experiencia en el sitio web.”
  56. 56. UsabilidadDefinición informalUsabilidad se define coloquialmente como facilidad deuso, ya sea de una página web, una aplicacióninformática o cualquier otro sistema que interactúe conun usuario.Formal (ISO/IEC):Usabilidad es la efectividad, eficiencia ysatisfacción con la que un productopermite alcanzar objetivos específicos ausuarios específicos en un contexto de usoespecífico.
  57. 57. Usabilidad Atributos ¿Consigo realizar lacomprar correctamente? ¿Cuánto tardo en Eficacia Eficiencia ¿Cometo algún error o realizar la todo sale bien a la compra? primera? Satisfacción ¿Me ha parecido difícil? ¿Me he quedado con buena sensación? ¿Repetiré y recomendaré esta web?
  58. 58. Usabilidad Eficacia: Relacionado con el número de errores que comete el usuario en la consecución de una tarea. Eficiencia: Relacionado con el tiempo empleado por el usuario para la consecución de la tarea.
  59. 59. Usabilidad Satisfacción de uso: Percepción del usuario respecto a la dificultad de acometer la tarea. Relacionado con que el sitio web sea subjetivamente agradable. Por satisfacción se entiende la ausencia de incomodidad y la actitud positiva en el uso del producto.
  60. 60. Usabilidad y conversión
  61. 61. Usabilidad y conversión¿Y qué conseguimos si creamos un sitio web usable? ¡Mejorar nuestros ratios de conversión! En los procesos de nuestro sitio web: registros, compras, descargas, etc.
  62. 62. Usabilidad y conversiónLa tasa de conversión es el porcentaje de visitantes queejecuta la acción: rellenan un formulario, se suscriben(newsletter, feeds, canales 2.0, etc.) , descargan un demo, etc.Sitio web usable  - Alcanzar la máxima conversión de los visitantes que llegan a mi sitio web. - Convertirlos en el objetivo para el que fue diseñado el sitio.
  63. 63. Usabilidad y conversiónEjemplo, una tienda online: - Objetivo: vender por Internet. - Factor de conversión: cantidad de ventas que consiga a través de la página web. Los incrementos en los factores de conversión se logran generalmente a través de mejoras en la usabilidad de un sitio web.Pero depende de emociones, motivaciones, grados de receptividad del usuario o y factores externos.
  64. 64. Usabilidad y conversiónLas acciones de Marketing online, la publicidad y demáspromociones y actividades que lanzamos dirigen tráfico anuestro sitio web:  Llevar a los usuarios encontrar contenidos de calidad y atractivos, que satisfaga sus necesidades y expectativas.  Crear páginas de aterrizaje (landing page) con una buena UX/usabilidad, contenidos atractivos y claras llamadas a la acción.  Testear, testear, testear, testear, testear, testear….: Test A/B – multivariante.
  65. 65. Técnicas y herramientas
  66. 66. Técnicas y herramientas 1 2 3 Indagación y Arquitectura de la Medición y captación de Información y Diseño evaluación de UX y insights de interacción usabilidad- Entrevistas. - Personas y escenarios. - Inspección- Focus group. heurística. - Card sorting.- Encuestas online. - Test de usuario. - Árboles de contenidos.- Monitorización Web - Analítica web. - Diagramas de flujo y 2.0 / redes sociales. procesos clave. - Herramientas online de testeo. - Prototipado
  67. 67. Técnicas y herramientas1 Indagación y captación de insights - Toma de requisitos. - Recogida de información subjetiva. - Preguntar y observar a los usuarios: - Experiencias. - Expectativas. - Necesidades. - Frustraciones. - Grado de satisfacción. - Contexto de uso, etc.
  68. 68. Técnicas y herramientas1 Indagación y captación de insights - Encuestas: online rápidas y asequibles- según proyecto. - Entrevistas: stakeholders, usuarios, entender procesos internos, etc. - Focus group (grupos de discusión): reacciones producto, servicio, concepto, publicidad, idea, etc. - Web 2.0 y redes sociales: Investigación de tendencias, mercado, consumidor, etc.
  69. 69. Técnicas y herramientas1 Indagación y captación de insights
  70. 70. Técnicas y herramientas1 Indagación y captación de insights
  71. 71. Técnicas y herramientas1 Indagación y captación de insights
  72. 72. Técnicas y herramientas1 Indagación y captación de insights - ¡Google! - Google alerts: monitorización resultados sobre un determinado tema http://www.google.es/alerts - Google Insights for search: tendencias de búsqueda http://www.google.com/insights/search - Google Blogs: blogs. http://www.google.es/blogsearch - Technorati: blogs. http://technorati.com - Touchgraph seo: relaciones en google. http://www.touchgraph.com/seo - Samepoint: monitotización SSMM. http://www.samepoint.com - How sociable: monitotización SSMM. http://www.howsociable.com/ - Addict-o-matic: monitorización SSMM http://addictomatic.com/ - Facebook Instant: búsquedas facebook. http://www.fbinstant.net/ - Topsy: Monitorización twitter (ahora tb Google +) http://topsy.com - Twitter Search: búsquedas en twitter. https://twitter.com/#!/search-home
  73. 73. Técnicas y herramientas1 Indagación y captación de insights
  74. 74. Técnicas y herramientas1 Indagación y captación de insights
  75. 75. Técnicas y herramientas1 Indagación y captación de insights
  76. 76. Técnicas y herramientas1 Indagación y captación de insights
  77. 77. Técnicas y herramientas1 Indagación y captación de insights
  78. 78. Técnicas y herramientas2 Arquitectura de la información y diseño de interacción: - Técnica “Personas”. - Card sorting. - Árboles de contenidos. - Diagramas de flujo y procesos clave. - Prototipado (wireframes) navegables, baja-alta fidelidad.
  79. 79. Técnicas y herramientas
  80. 80. Técnicas y herramientas 2 Arquitectura de la información y diseño de interacción: Técnica Personas
  81. 81. Técnicas y herramientas 2 Arquitectura de la información y diseño de interacción Card sorting
  82. 82. Técnicas y herramientas 2 Arquitectura de la información y diseño de interacción Arbol de contenidos (blueprints) - AI
  83. 83. Técnicas y herramientas 2 Arquitectura de la información y diseño de interacción
  84. 84. Técnicas y herramientas Arquitectura de la información y diseño de 2 interacción:
  85. 85. Técnicas y herramientas 2 Arquitectura de la información y diseño de interacción Diagrama de flujo – diseño de interacción
  86. 86. Técnicas y herramientas 2 Arquitectura de la información y diseño de interacción Prototipado (wireframes)
  87. 87. Técnicas y herramientas 2 Arquitectura de la información y diseño de interacción
  88. 88. Técnicas y herramientas 2 Arquitectura de la información y diseño de interacción
  89. 89. Técnicas y herramientas 2 Arquitectura de la información y diseño de interacción
  90. 90. Técnicas y herramientas 2 Arquitectura de la información y diseño de interacción
  91. 91. Técnicas y herramientas 2 Arquitectura de la información y diseño de interacción
  92. 92. Técnicas y herramientas 2 Arquitectura de la información y diseño de interacción
  93. 93. Técnicas y herramientas 2 Arquitectura de la información y diseño de interacción
  94. 94. Técnicas y herramientas 3 Medición y evaluación de experiencia de usuario y usabilidad - Inspección heurística por experto. - Test de usuario. - Análisis de clicks (clicktale, clickheat...) - Predicción de atención visual (attentionwizard.com) - Testeos de reconocimiento y recuerdo (5 second test...)
  95. 95. Técnicas y herramientas 3 Medición y evaluación de experiencia de usuario y usabilidad En 1990 Jakob Nielsen hizo un Evaluación heurística estudio sobre alrededor de 250 problemas típicos de usabilidad. Los heurísticos son buenas prácticas que nacen como respuesta a los problemas más comunes de los usuarios. Concluyo que podían agruparse en 11 categorías: 11 principios heurísticos.
  96. 96. Técnicas y herramientas 3 Medición y evaluación de experiencia de usuario y usabilidadTest de usuario
  97. 97. Técnicas y herramientas 3 Medición y evaluación de experiencia de usuario y usabilidad
  98. 98. Técnicas y herramientas 3 Medición y evaluación de experiencia de usuario y usabilidad
  99. 99. Técnicas y herramientas 3 Medición y evaluación de experiencia de usuario y usabilidad Análisis de clicks
  100. 100. Técnicas y herramientas 3 Medición y evaluación de experiencia de usuario y usabilidad Reconocimiento y recuerdo
  101. 101. Técnicas y herramientas 3 Medición y evaluación de experiencia de usuario y usabilidad
  102. 102. Aplicación: metodología de diseño UX Fase 1 – INVESTIGACION Y Fase 2 – ESTRATEGIA, Fase 3 –DESARROLLO E ANALISIS CONCEPTO Y DISEÑO IMPLANTACION Entrevistas internas E-branding: objetivos, Desarrollo sitio web stakeholders: diagnostico posicionamiento, KW SEO, estra. Seguimiento UX situación, necesidades, de contenidos objetivos internos, etc.. Test de usuario sobre sitio en Estrategia de presencia en desarrollo : BETA/ producción + Sector: Benchmarking medios sociales ajustes competencia, buenas prácticas y tendencias. Contenidos, servicios y Implantación funcionalidades sitio web Definición PO / segmentos y priorización Actualización catalogación contenidos Detección necesidades: Implantaci Monitorización / encuestas online / focus / Card sorting ón Analítica entrevistas… Árbol de contenidos Técnica personas Prototipado navegable de baja Evaluación experto sitio web fidelidad Ajustes Consultoría SEO Test de usuario sobre prototipo Catalogación contenidos y de baja fidelidad servicios Diseño visual
  103. 103. Los principios heurísticos de usabilidad
  104. 104. Principios de usabilidad- Son teóricos pero flexibles.- En cada caso concreto (objetivo, usuario y contexto) la aplicación del principio puede variar.- Su extrapolación y comprensión permiten resolver cualquier casuística concreta.- Vienen del análisis factorial de unos 250 problemas de usabilidad concretos (Jakob Nielsen).- Los subheurísticos son aplicaciones concretas, observables, de los heurísticos.
  105. 105. Principios de usabilidad ¿Se comunica de manera inmediata y clara el1 propósito, objetivo y funciones de la página? - ¿El propósito u objetivo del sitio web es claro y obvio? ¿Con un simple vistazo a se sabe para qué sirve? - ¿Se muestra de forma clara qué contenidos y servicios / funcionalidades y acciones ofrece el sitio?
  106. 106. Principios de usabilidad
  107. 107. Principios de usabilidad
  108. 108. Principios de usabilidad ¿Se ofrecen al usuario mecanismos y referencias2 claras que le permitan orientarse fácilmente (dónde están y qué están haciendo)? ¿Se mantienen informados a los usuarios acerca de lo que está ocurriendo? - Títulos: páginas, secciones, página o del paso (en un proceso) - Ubicación de la página dentro de la estructura de información - Rutas de navegación / migas de pan. - Proceso: número de paso y pasos restantes - Vínculos claramente identificables. - Feedback : una acción en proceso /realizado con éxito o no.
  109. 109. Principios de usabilidad Al pulsar el botón se sustituye por una barra de progreso Mensajes de feedback al finalizar una tarea La fortaleza de la contraseña se muestra en tiempo real
  110. 110. Principios de usabilidad
  111. 111. Principios de usabilidad
  112. 112. Principios de usabilidad ¿La página se adecua a los objetos mentales del3 usuario, su lógica de la información, su terminología y lenguaje? ¿La informacion se muestra en un orden lógico y natural?- Estructura y presentación de la información comprensible vs interna de la organización.- Metáforas e iconos.- Nivel de conocimientos expuesto en la página vs user.- Palabras, frases y conceptos familiares. No utiliza jergas ni tecnicismos.- Lenguaje claro y sencillo, una idea por párrafo.- Disposición de la información es asequible y de lectura rápida.- Información estructurada con títulos, negritas y viñetas.
  113. 113. Principios de usabilidad
  114. 114. Principios de usabilidad
  115. 115. Principios de usabilidad ¿El sitio web permite al usuario interactuar con4 el de manera fácil y productiva?- Ver y seleccionar mejor que recordar y escribir.- ¿Toda la información necesaria para la interacción se encuentra en la página? (La página no requiere recordar información de páginas previas para interactuar con ella.)- ¿Es fácil reencontrar información previamente encontrada?- Iconos que refuercen textos/contenidos.- Información previamente seleccionada para evitar la petición de información de nuevo.
  116. 116. Principios de usabilidad
  117. 117. Principios de usabilidad ¿Tiene el usuario control y libertad sobre la5 interfaz? ¿Se han evitado las acciones intrusivas que lo limiten?- Evitar el inicio automático de inician acciones no ordenadas explícitamente por el usuario.- Animaciones no controladas por el usuario.- Salida de la página, del proceso o de la estructura de información: desconectar, cancelar, inicio, etc.- Vínculo que permite volver a la página de inicio.- En caso de ser un proceso de varios pasos: posibilidad de volver al paso/s anteriores.
  118. 118. Principios de usabilidad ¿Se mantiene la consistencia en las diferentes páginas/secciones, etc. del sitio?6 ¿Se siguen los estándares "de facto“: la estructuración páginas, buscador, logo, etc.?- ¿Las etiquetas de los vínculos tienen los mismos nombres que los títulos de las páginas a las que se dirigen?- ¿Las mismas acciones llevan a los mismos resultados?- ¿La misma información (texto) se expresa de la misma forma en toda la página?- ¿La información esta organizada y es mostrada de manera similar en cada página?- ¿Las áreas de navegación, herramientas de búsqueda, controles , etc. siguen los estándares comunes de mercado?
  119. 119. Principios de usabilidad http://www.somosflow.com/desktop/
  120. 120. Principios de usabilidad http://www.weshootbottles.com/
  121. 121. Principios de usabilidad7 ¿El sitio web trata de prevenir posibles errores?- ¿Se mantiene informado al usuario de lo que ocurre en el sitio/aplicación? Por ejemplo, si el usuario tiene que esperar hasta que se termine una operación, la página debe mostrar un mensaje indicándole lo que está ocurriendo y qué debe esperar.- ¿Se dan ejemplos o proporciona ayuda sobre cómo introducir información en campos problemáticos?- Priorizar la selección de información en campos dónde podrían darse errores de escritura.
  122. 122. Principios de usabilidad Hacer más relevante la acción primaria para evitar que la gente no se equivoque. Otros ejemplos pueden ser poner el foco automáticamente el cajetín de búsqueda o los auto-recomendadores evitan también errores tipográficos en las búsquedas.
  123. 123. Principios de usabilidad
  124. 124. Principios de usabilidad ¿La interfaz facilita y optimiza el acceso y la8 interacción de los usuarios con el sistema? Flexibilidad y eficiencia de uso- ¿La página no requiere volver a escribir la información ya solicitada en páginas anteriores?- ¿Es posible repetir una acción ya realizada anteriormente de manera sencilla?- ¿Cuando es pertinente la página permite al usuario personalizar acciones frecuentes?- ¿Se utilizan mecanismos eficientes de relleno/validación de campos de formulario?
  125. 125. Principios de usabilidad
  126. 126. Principios de usabilidad
  127. 127. Principios de usabilidad ¿El sitio ofrece información y un diseño9 minimalista? ¿Se ha evitado el uso de elementos irrelevantes?- ¿El texto es fácil de ojear, está bien organizado y las frases no son demasiado largas?- ¿Las fuentes son legibles y tienen un tamaño suficiente?- ¿Las fuentes usan colores con suficiente contraste con el fondo?- ¿La información es corta, concisa y precisa?- ¿Cada elemento de información se distingue del resto y no se confunde con otros?
  128. 128. Principios de usabilidad
  129. 129. Principios de usabilidad
  130. 130. Principios de usabilidad ¿ Los mensajes de error ayudan a los usuarios10 a reconocer, diagnosticar y solucionar errores?- ¿Los mensajes de error informan del error de manera comprensible y no alarmista, están escritos en lenguaje común y no con códigos o lenguaje técnico?- ¿Los mensajes de error dan soluciones o sugerencias para solucionar el presente error?- ¿Informan de la causa del error de manera que se pueda evitar su repetición en el futuro?- ¿La situación de error permite, de una forma evidente, volver a la situación anterior al error?
  131. 131. Principios de usabilidad
  132. 132. Principios de usabilidad
  133. 133. Principios de usabilidad
  134. 134. Principios de usabilidadVía Luis Villa @maguissohttp://www.grancomo.com/ http://www.rollingstones.com/404
  135. 135. Principios de usabilidad ¿ En caso de que sea necesario, se ofrece una11 sección de ayuda y documentación orientada a la resolución de problemas del usuario?- ¿la sección de ayuda es visible y fácil de encontrar?- ¿Se ofrece ayuda contextual en tareas complejas?- ¿La documentación de ayuda está orientada a los objetivos y necesidades del usuario (generalmente a la resolución de problemas)?- ¿La documentación de ayuda utiliza ejemplos y explicaciones cortas?- ¿La página dispone de un apartado de preguntas frecuentes.
  136. 136. Principios de usabilidad
  137. 137. Caso práctico
  138. 138. Caso práctico UX en Shopping Online: Blanco Vs. H&M Intuitivamente , Andrea Cantú: http://www.intuitivamente.com/2012/01/31/ux-en- shopping-online
  139. 139. Beneficios de aplicar técnicas de UX yUsabilidad
  140. 140. Beneficios de aplicar técnicas de UX yUsabilidad - Refuerzo de la imagen de marca: Mejoras en la percepción del usuario (producto y proveedor). - Incremento de las ventas en sitios de comercio electrónico: Reducción de la tasa de abandonos en carritos de la compra. - Fidelización de clientes: Aumento de la tasa de conversión de visitantes a clientes. - Reducción de costes de desarrollo: Detección los posibles problemas en fases tempranas.
  141. 141. Beneficios de aplicar técnicas de UX yUsabilidad - Reducción de costes en servicios de soporte/atención al cliente: - problemas  - consultas. - Aumento de las tasas de conversión (procesos finalizados): registros, formularios, compras online, etc. - Reducción de los costes de aprendizaje y formación: curvas de aprendizaje + controladas. - Optimización de procesos laborales en intranets: Reducción tiempos de ejecución de tareas  aumento de la productividad.
  142. 142. Bibliografía y referencias
  143. 143. Bibliografía y referencias Libros: - No me hagas pensar. Steve Krug - El diseño de las cosas cotidianas. Donald. A Norman - El diseño emocional. Donald A. Norman - Revista de estrategia e Interacción: www.capire.info - Juan Carlos Camus: www.usando.info - Jorge Barahona: www.jbarahona.com - Jesse Jame Garret : http://blog.jjg.net/ - Nacho Gil -Fundamentos para el diseño de la experiencia de usuario online: http://www.slideshare.net/nachogil/elementos-de-la-experiencia- de-usuario-online-0103
  144. 144. Bibliografía y referencias Arquitectura de la información: No sólo usabilidad: http://www.nosolousabilidad.com - Arquitectura de Información: análisis histórico-conceptual - Rodrigo Ronda León. - Revisión de técnicas de arquitectura de información - Rodrigo Ronda León. - Diseño de Arquitecturas de Información: Descripción y Clasificación - Yusef Hassan Montero y Ana Núnez Peña. Métodos de arquitectura de la información - Mauricio Candamil Llano http://www.slideshare.net/maocandamil/metodos-arquitectura-de- informacion Hipertexto. Net http://www.hipertext.net/web/pag206.htm#3
  145. 145. Bibliografía y referencias Arquitectura de Información y Diseño Centrado en el Usuario - Juan David Saab: http://www.slideshare.net/juansaab/arquitectura-de-informacin-y-dcu- diseo-centrado-en-el-usuario Arquitectura de información y su relación con el diseño estratégico - Omar Sosa Tzec: http://www.slideshare.net/Tzek/diseno-estratgico-y-arquitectura-de- informacin Entregables en un proceso de Arquitectura de Información - Astrolabio, agencia web http://www.slideshare.net/astromario/arquitectura-de-informacin- entregables
  146. 146. Bibliografía y referencias Experiencia de usuario y social media: - Marco Gallen ¿Cómo aprovechar las redes sociales para mejorar la experiencia de usuario? : http://marcogallen.com/blog/usabilidad/%C2%BFcomo-aprovechar-las- redes-sociales-para-mejorar-la-experiencia-de-usuario - Roberto Igarza - experiencia de usuario: cómo las redes sociales amplifican el descontento: http://robertoigarza.wordpress.com/2009/08/10/experiencia-de-usuario- como-las-redes-sociales-amplifican-el-descontento - UX Matters - The Social Buzz: Designing User Experiences for Social Media: http://www.uxmatters.com/mt/archives/2009/06/the-social-buzz- designing-user-experiences-for-social-media.php - UX Magazine - The evolved user experience: using social media technologies to drive ux design and product strategy: http://uxmag.com/strategy/the-evolved-user-experience
  147. 147. Bibliografía y referencias Experiencia de usuario y social media: - Simple Line Design - User Experience and Social Media Integration: http://www.simplelinedesign.co.uk/blog/user-experience-and-social- media-integration - Joanna Pineda - Creating an Integrated, Layered User Experience Across Your Social Media Pages: http://www.thematrixfiles.net/blog/creating-an- integrated-layered-user-experience-across-your-social-media-pages - Bob Murray - Social Media Within A User Experience Team: http://blog.redweb.com/2010/04/01/social-media-within-a-user- experience-team - Javier Varela – Social Media Plan: http://www.slideshare.net/javiervarela/social-media-plan-javier-varela- jornadas - Jerome Nadel: Digital UX Strategy: http://www.slideshare.net/JeromeNadel/DigitalUXStrategyvFinalreduced
  148. 148. Bibliografía y referencias Usabilidad – Conversión - SEO Colombia - Usabilidad: Factores de conversión y su importancia http://www.seocolombia.com/blog/usabilidad-factores-de-conversion-y-su- importancia - OptimizaClick - Conversión y usabilidad web http://www.optimizaclick.com/conversion-web - David Martin Morales - Usabilidad y Métricas enfocadas a la Conversión (Editato) http://marketing-on-line.blogspot.com/2009/06/usabilidad-y-metricas.html - Iván Serrano - Cómo diseñar correctamente una Landing Page: las mejores prácticas y ejemplos http://www.ivoserrano.com/diseno-web/como-disenar-correctamente-una- landing-page-las-mejores-practicas-y-ejemplos
  149. 149. ¡Gracias!- Twitter: @bubalie / @theSocialUX- Mail: virginia@thesocialexperience.es- Linkedin: http://es.linkedin.com/in/virginiaaguirre- Web: www.thesocialexperience.es- Facebook: www.facebook.com/socialexperience
  150. 150. Cursos de verano UPV/EHU - Marketing online, Experiencia de usuario y usabilidad por Virginia Aguirre - The Social Experience se encuentra bajo unaLicencia Creative Commons Atribución-NoComercial-CompartirIgual 3.0 Unported.
  1. A particular slide catching your eye?

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

×