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

ALDO Virtual Store - Lionel-Groulx
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

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 producto4

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 registro
5

«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

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-out  minimizar 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

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 predictivo
Desarrollo 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 virtual
The 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

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/

¡Gracias!
Virginia Aguirre
Consultora y Formadora en Estrategia digital, UX
y Usabilidad
- Twitter: @bubalie
- Mail: virginia.aguirre@gmail.com
- Linkedin: http://es.linkedin.com/in/uxvirginiaaguirre

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

- 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

- 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

- 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

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

Ux e ecommerce - Cursos de verano UPV/EHU

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Andere mochten auch

Andere mochten auch (16)

Ähnlich wie Ux e ecommerce - Cursos de verano UPV/EHU

Ähnlich wie Ux e ecommerce - Cursos de verano UPV/EHU (20)

Mehr von Virginia Aguirre

Mehr von Virginia Aguirre (9)

Ux e ecommerce - Cursos de verano UPV/EHU