ux e ecommerce - cursos de verano upv/ehu

#EcommerceEHU @bubalie

El poder de Mr. Google IV

UX y Usabilidad para e-commerce

#EcommerceEHU


Como mejorar la Experiencia de compra en

nuestros Ecommerce a través de buenas

practicas de experiencia de usuario y

usabilidad


Tesco Homeplus Virtual Subway Store in South Korea

https://www.youtube.com/watch?v=fGaVFRzTTP4

https://www.youtube.com/watch?v=fGaVFRzTTP4


ALDO Virtual Store - Lionel-Groulx

https://www.youtube.com/watch?v=4ABVUOXHkxo

https://www.youtube.com/watch?v=4ABVUOXHkxo


http://jeffsuderman.com/the-wow-factor-increasing-employee-engagement

Conseguir una experiencia “wow”, una experiencia de compra online

memorable!


Tener un buen producto no es suficiente…

Es necesario crear una experiencia de compra óptima y diferenciadora


Los productos son perecederos pero las experiencias son memorables

Vínculo emocional fidelidad + diferenciación


Birchbox


Una buena UX se traduce en mejoras en:

1. La satisfacción y fidelización de los clientes

2. Eficiencia y productividad del sito web

3. Ratios de conversión y ROI


El usuario es la base estratégica de un Ecommerce que funciona

Optimizar la relación con el cliente y comprender los insights de este es

clave.


Pero no es fácil….- uno de cada cuatro consumidores abandonan la

visita tras aterrizar en la home/landing page

- solo un 20% escoge productos y los mete en su carrito de la compra

- y aquellos que lo hacen, un 60% lo dejan abandonado sin pasar por caja


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

http://www.youtube.com/watch?v=3Sk7cOqB9Dk&list=PLC34DC3AFD26EF033&index=2&feature=plpp_video


Elementos clave para una buena UX


1. Página de inicio

2. Navegación

3. Páginas de categorías

4. Páginas de producto

5. Carrito de la compra, checkout y registro

6. Asistencia en compra / servicio al cliente

7. Trato exclusivo y personal

8. Confianza y credibilidad

Elementos clave


Elementos clave

Página de inicio1


¡Primer contacto con la tienda!

La primera impresión es la que vale!

50 milisegundos

Diseño claro y ordenado confianza

Página de inicio1


Reconocimiento, propuesta de valor y diferenciación

– Qué vendemos?

– Cuales son las ventajas de comprar en nuestro sitio web?

– Quienes somos?

Página de inicio1


Página de inicio1

Optimizar el “hero area”

– Imágenes o vídeos gran formato o pantalla completa

– Textos cortos

– 1 o 2 llamadas a la acción

– Gran carga visual y poder comunicativo


Página de inicio1

https://www.dollarshaveclub.com/

Dollar Shave Club


Página de inicio1


Más pautas…– Sistema de navegación eficiente

– Carga rápida

– Buscador eficiente

– Contenido jerarquizado

– Mensajes más importantes en base a cada tipo de usuario

– Personalizar la experiencia

– Elementos sociales Confianza

– Generar “brand content”

Página de inicio1


Elementos clave

Navegación2


La «encontrabilidad (findability)» de los productos es una de las claves de cualquier

tienda online.

Si no pueden encontrarlo, no pueden comprarlo!

Problemas de navegación y encontrabilidad de productos abandonos inmediatos y perjudican a la marca.

Si los usuarios no encuentran lo que buscan, no volverán….

Navegación2


Simplifica tu navegación primaria

Navegación2


Crea páginas de las categorías principales

Navegación2


Ubica la misma sub-categoría en múltiples categorías principales si es necesario

Navegación2


Incluye una categoría o un filtro de “novedades”

Navegación2


Sugiere productos alternativos y complementarios en las páginas de producto

Navegación2


Lista los ítems visitados/vistos recientemente

Navegación2


Enlaza las imágenes contextuales a los productos mostrados

Navegación2


Elementos clave

Páginas de listado de

productos

3


Para aumentar nuestros ratios de conversión, debemos optimizar nuestro proceso de venta y este comienza en las

páginas de categorías y listados


productos

3



productos

3

Proceso de compra: embudo de conversión


Ver y navegar productos de forma fácil e intuitiva pagina de producto

– Grid View y List View

– Ordenar y filtrar productos


productos

3


Grid View y List View:

Páginas de listado de productos3


Ordenar productos:



Filtrar productos:



Elementos clave

Páginas de producto 4


Una pagina de producto muy visual, social y personalizada puede incrementar la conversión en

hasta un 50%, mejorar el pedido medio en un 30% y reducir las devoluciones en hasta un 30%.

Página de decisión de compra!



– Imagen potente del producto

– Funcionalidades de realidad aumentada

– Título descriptivo y claro

– Subtítulo, refuerzo

– Descripción detallada, características

– Llamada a la acción “Añadir al Carrito”

– Precio, visible y enfatizado, mejor con descuento

– Transparencia con la política de gastos de envío y devolución



– Indicar las ofertas especiales, gastos de envío gratuitos y demás promociones

– Contenido social integrado

– Ratings y Reviews

– Venta cruzada

– Recomendaciones personalizadas

– Breadcumbs o migas de pan



Elementos clave

Carrito de la compra,

checkout y registro5


«Un pago o “check-out” simple, sin sorpresas y con posibilidad de reservar online y recoger en tienda puede reducir la tasa de carritos abandonados en

hasta un 50%»

¡Importancia crítica en la tasa de abandonos y el ratio de conversión final!

Carrito, checkout y registro5



http://digital.kpmgblogs.es/wp-content/uploads/sites/3/2013/06/Razones-abandonar-carrito-KPMG-Digital.jpg

http://digital.kpmgblogs.es/wp-content/uploads/sites/3/2013/06/Razones-abandonar-carrito-KPMG-Digital.jpg


CARRITO: «Soft add to cart»

– Un carrito que muestre a los usuarios que contiene sin tener que ir a otra página.

– Generar un dialogo/feedback al añadir un producto

– Flexibilidad al usuario: ir al producto, eliminar, etc.

– Indicar nº de ítems.

– Página carrito: flexible y eficiente, incentivar check-out



CHECK OUT:

– Aislar el check-outminimizar distracciones

– Estructurar el proceso un pocos pasos y mostrar pasos/ «single-page checkout process”

– Múltiples opciones de pago y transparencia con gastos de envío

– Certificaciones de seguridad en el pago

– Final del proceso: viralización positiva y estimular la repetición con incentivos

– Confirmación online y vía email de la compra



REGISTRO:

- No obligar al registro: inhibidor de compra / uso como «invitado».

- Pedir la información justa: maximizar auto-completar: registro con perfil social; en EEUU el 30% permiten el registro con Facebook Conect.



Elementos clave

Asistencia en compra6


Una asistencia en la compra avanzado puede mejorar la conversión en hasta un 30%

Mucha influencia en el llenado de carritos, el pedido medio y las posibles devoluciones!



– Buena navegación

– Buscador: resultados precisos, autocompletar, sugerencias.

– Acceso rápido a:

– mi cuenta

– mi carrito

– mi lista de deseos

– Ayuda:

– Atención al cliente en tiempo real: Chats, asistentes, call

center….

– Buscador de tiendas

– Servicio de personal shopper




http://digital.kpmgblogs.es/wp-content/uploads/sites/3/2013/06/Dependiente-o-Shopping-Assistant-KPMG-Digital.jpg

http://digital.kpmgblogs.es/wp-content/uploads/sites/3/2013/06/Dependiente-o-Shopping-Assistant-KPMG-Digital.jpg


Elementos clave

Trato exclusivo y personal7


Premiar la fidelidad, un trato exclusivo y una experiencia social son claves para estimular la repetición y el valor del cliente en su ciclo

de vida con la marca

Modelo comercial que sepa fidelizar a sus clientes: no solo captación!



Trabajar el ciclo de vida de un cliente y desarrollar las capacidades de «engagement»:

- Premiar la fidelidad: bonos, descuentos, etc.

- Generar una sensación de exclusividad (trato VIP)

- Crear una experiencia social y efecto comunidad

“Area VIP” virtual que da acceso a servicios y ofertas exclusivas.



Elementos clave

Confianza y credibilidad8


Transmitir confianza, credibilidad y seguridad:– Experiencia de usuario y diseño visual

– Información sobre la compañía

– Información de producto detallada

– Respeto de información de los usuarios

– Indicadores de credibilidad

– Transparencia en Precio y costes

Confianza y credibilidad8


Tendencias 2016


La continua innovación tecnológica genera nuevas disrupciones y nuevos

retos para las marcas


Big data y análisis predictivoDesarrollo de unas capacidades analíticas avanzadas para conocer a nuestros

clientes, anticiparnos a sus necesidades, sorprenderles positivamente y generarles experiencias únicas.


Big data y análisis predictivo


Experiencia personalizada multicanal (CRM,Customer relationship Management):

centralizar la información


Entender las necesidades del usuario para ofrecer una UX perfecta,

personalización


Mobile/Responsive design


Material design y el diseño en « cards »


Branded content


Story telling


Pago con móvil y medios de pago alternativos


Social Selling


Realidad aumentada

IKEA 2016 Catalogue: Augmented Reality

https://www.youtube.com/watch?v=vDNzTasuYEw


Beacon Technology


Realidad virtualThe Topshop Virtual Reality Experience AW14

https://www.youtube.com/watch?v=lUal_Lrhec0


Magic mirrors and virtual dressing

Ebay magic mirror

https://www.youtube.com/watch?v=6G3JIyG_GeY


Virtual dressing

https://www.youtube.com/watch?v=HmYIjI4DxkE#t=23

Shopping - Probador virtual Cisco

https://www.youtube.com/watch?v=HmYIjI4DxkE#t=23


Tech Trends in Retail: Robots, Virtual Fitting Rooms / Virtual reality shopping -

Retail's Big Show 2016 in New York

http://ktla.com/2016/01/20/new-tech-trends-in-retail/

http://ktla.com/2016/01/20/new-tech-trends-in-retail/


¡Gracias!

Virginia AguirreConsultora y Formadora en Estrategia digital, UX y Usabilidad

- Twitter: @bubalie

- Mail: [email protected]

- Linkedin: http://es.linkedin.com/in/uxvirginiaaguirre

https://twitter.com/bubalie

mailto:[email protected]

http://es.linkedin.com/in/virginiaaguirre


Bibliografía


- E-Commerce User Experience Nielsen Norman Group http://www.nngroup.com/reports/ecommerce-user-experience/ This series includes 13 reports on specific topics and presents 884 design guidelines based on our usability research.

- 20 of the Very Best E-Commerce Web Sites - Awwards http://www.awwwards.com/20-of-the-very-best-e-commerce-web-sites.html

- Ux Magazine: Shopping Cart Usability Why a simple, honest checkout sequence (usually) wins: http://uxmag.com/articles/shopping-cart-usability

- The Intro Guide to Ecommerce Website User Experience http://onlinebusiness.volusion.com/articles/intro-guide-ecommerce-user-experience/#sthash.dNVwANlf.dpuf

- 21 examples of user experience innovation in ecommerce https://econsultancy.com/blog/64491-21-examples-of-user-experience-innovation-in-ecommerce#i.c895x53kecokx4

- Creating the Best e-Commerce User Experience (UX) | Something Digital http://www.slideshare.net/somethingdigitl/creating-the-best-ecommerce-user-experience-ux-something-digital

Bibliografía

http://www.nngroup.com/reports/ecommerce-user-experience/

http://www.awwwards.com/20-of-the-very-best-e-commerce-web-sites.html

http://uxmag.com/articles/shopping-cart-usability

http://onlinebusiness.volusion.com/articles/intro-guide-ecommerce-user-experience/#sthash.dNVwANlf.dpuf

https://econsultancy.com/blog/64491-21-examples-of-user-experience-innovation-in-ecommerce#i.c895x53kecokx4


- Creating the Best e-Commerce User Experience (UX) | Something Digital http://www.slideshare.net/somethingdigitl/creating-the-best-ecommerce-user-experience-ux-something-digital

- Ecommerce UX: 3 Design Trends to Follow and 3 to Avoid – NN/g http://www.nngroup.com/articles/e-commerce-usability/

- Increasing eCommerce Conversion Rates: Category Page http://uxmovement.com/navigation/increasing-ecommerce-conversion-rates-category-page/

- http://www.uxbooth.com/articles/10-ux-features-missing-on-top-e-commerce-sites/

- Ecommerce: 16 consejos para una homepage eficaz: http://www.samueldiosdado.com/09/ecommerce-16-recomendaciones-para-una-homepage-eficaz

- Consejos para optimizar la hompage de un Ecommerce: http://www.kleversoft.com/consejos-para-optimizar-la-hompage-de-un-ecommerce

Bibliografía

http://www.slideshare.net/somethingdigitl/creating-the-best-ecommerce-user-experience-ux-something-digital

http://www.nngroup.com/articles/e-commerce-usability/

http://uxmovement.com/navigation/increasing-ecommerce-conversion-rates-category-page/

http://www.uxbooth.com/articles/10-ux-features-missing-on-top-e-commerce-sites/

http://www.samueldiosdado.com/09/ecommerce-16-recomendaciones-para-una-homepage-eficaz

http://www.kleversoft.com/consejos-para-optimizar-la-hompage-de-un-ecommerce


- E-Commerce: la página de producto perfecta: http://www.brainsins.com/es/blog/ecommerce-pagina-producto/102089

- Consejos para la optimización de la página de producto de tu tienda online: http://www.kleversoft.com/consejos-para-la-optimizacion-de-la-pagina-de-producto-de-tu-tienda-online

- La página de producto perfecta: http://www.genteecommerce.com/la-pagina-de-producto-perfecta-2/

- 5 claves para darle a tus clientes una experiencia de compra ‘wow’: http://www.trevinocreativo.com/blog/5-claves-para-darle-a-tus-clientes-una-experiencia-de-compra-wow

- Qué es, y qué no es, una Experiencia de Compra Memorable: http://www.puromarketing.com/76/14695/experiencia-compra-memorable.html

Bibliografía

http://www.brainsins.com/es/blog/ecommerce-pagina-producto/102089

http://www.kleversoft.com/consejos-para-la-optimizacion-de-la-pagina-de-producto-de-tu-tienda-online

http://www.genteecommerce.com/la-pagina-de-producto-perfecta-2/

http://www.trevinocreativo.com/blog/5-claves-para-darle-a-tus-clientes-una-experiencia-de-compra-wow

http://www.puromarketing.com/76/14695/experiencia-compra-memorable.html


- 105 Ecommerce UX Tips: How to Seduce Visitors to Buy: https://selfstartr.com/ecommerce-user-experience/

- eCommerce UX Design: http://ecommerceuxdesign.com/

- 10 pillars for a successful eCommerce user experience: http://www.ux-lady.com/10-pillars-of-a-successful-ecommerce-user-experience/

- 25 excellent UX examples from ecommerce sites: https://econsultancy.com/blog/66731-25-excellent-ux-examples-from-ecommerce-sites/

- 4 UX Design Best Practices for a Killer eCommerce Site; http://www.rightmixmarketing.com/website-design/ux-design-best-practices-for-ecommerce-site/

- 6 Retailers Revolutionizing The Online Shopping Experience: https://www.americanexpress.com/us/small-business/openforum/articles/online-shopping-revolutionary-retailers/

- u-Commerce, el usuario como base estratégica del negocio digital: http://elblogdeecommerce.com/2016/05/17/u-commerce-el-usuario-como-base-estrategica-del-negocio-digital/

Bibliografía

https://selfstartr.com/ecommerce-user-experience/

http://ecommerceuxdesign.com/

http://www.ux-lady.com/10-pillars-of-a-successful-ecommerce-user-experience/

https://econsultancy.com/blog/66731-25-excellent-ux-examples-from-ecommerce-sites/

http://www.rightmixmarketing.com/website-design/ux-design-best-practices-for-ecommerce-site/

https://www.americanexpress.com/us/small-business/openforum/articles/online-shopping-revolutionary-retailers/

http://elblogdeecommerce.com/2016/05/17/u-commerce-el-usuario-como-base-estrategica-del-negocio-digital/


Tendencias

- 11 eCommerce Design Trends to Watch in 2016: http://blog.lemonstand.com/2016-ecommerce-design-trends/

- 9 eCommerce design trends to embrace in 2016: http://www.webdesignerdepot.com/2016/01/9-ecommerce-design-trends-to-embrace-in-2016/

- 7 Ecommerce Trends to Watch in 2016: http://blog.usabilla.com/7-ecommerce-trends-to-watch-in-2016/

- Top Ecommerce Trends to Watch in 2016: http://www.euroitgroup.com/ecommerce-trends-2016/

- Big Data in e-Commerce: http://fr.slideshare.net/divanteltd/big-data-in-e-commerce

Bibliografía

http://blog.lemonstand.com/2016-ecommerce-design-trends/

http://www.webdesignerdepot.com/2016/01/9-ecommerce-design-trends-to-embrace-in-2016/

http://blog.usabilla.com/7-ecommerce-trends-to-watch-in-2016/

http://www.euroitgroup.com/ecommerce-trends-2016/

http://fr.slideshare.net/divanteltd/big-data-in-e-commerce

ux e ecommerce - cursos de verano upv/ehu

Marketing