UX/UI Aplicado al E-

Commerce
—

1 © Ast urias Corporación Universitaria

 UX/UI Aplicado al E-Commerce

Índice

1 Introducción ............................................................................................................................................................ 3
2 Buenas Prácticas Aplicadas a la UX/UI de una Tienda Online................................................. 4
3 Buenas Prácticas Aplicadas a la UX/UI en la Ficha de Producto ........................................... 7
4 Buenas Prácticas Aplicadas a la UX/UI en el Proceso de Compra ..................................... 11
5 Conclusiones ........................................................................................................................................................ 13
6 Bibliografía Esencial ......................................................................................................................................... 14
7 Bibliografía Recomendada ........................................................................................................................... 14

02 ASTURIAS CORPORACIÓN UNIVERSITARIA®

Not a Técnica preparada por Ast urias Corporación Universit aria . Su dif usión, reproducción o uso
t ot al o parcial para cual quier ot ro propósit o queda prohibida. Todos l os derechos reservados.
 UX/UI Aplicado al E-Commerce

Objetivos
 Conocer la importancia de una buena experiencia de usuario, usabilidad e interfaz de
la tienda online como parte de una tienda online.

 Entender la experiencia de usuario en dispositivos móviles como algo primario y

necesario en los tiempos actuales.

 Aprender a detectar errores de usabilidad, así como aportar soluciones para que no
produzcan rechazo en nuestros usuarios, y ayuden a mejorar las conversiones.

1 Introducción

Como veíamos en la clase número 1, las tiendas online o comercios electrónicos,

difieren en gran medida de las páginas web corporativas o aquellas que sólo presentan
una funcionalidad de pura consulta.

En todo comercio electrónico, ya sea venta de productos físicos, digitales o incluso

servicios, la interacción es algo fundamental desde el punto de vista del usuario.

La UX o experiencia de usuario es uno de los aspectos más olvidados dentro de la

creación de una tienda online. Si conseguimos hacer nuestra tienda más atractiva e
incluso más usable conseguiremos sin duda mejores resultados.

Pero en el comercio electrónico, no es suficiente con aportar una buena experiencia de

compra al usuario, que encuentre fácilmente los productos que busca o incluso que
pueda resolver sus dudas de inmediato. Aspectos como la atención al cliente, las
facilidades de pago, los tiempos de carga de la página y otros muchos detalles pueden
ayudarnos a mejorar la conversión.

En ese sentido, y una vez hemos optimizado todos estos aspectos, llega una siguiente
fase de trabajo muy ligada a esta UX/UI. Se trata del CRO o conversion rate
optimization. Con esta disciplina trataremos de persuadir a nuestro usuario, aportar
mejoras e incluso guiar al usuario dentro del proceso de compra con un solo objetivo:
aumentar las conversiones.

03 ASTURIAS CORPORACIÓN UNIVERSITARIA®

Not a Técnica preparada por Ast urias Corporación Universit aria . Su dif usión, reproducción o uso
t ot al o parcial para cual quier ot ro propósit o queda prohibida. Todos l os derechos reservados.

Hay que poner foco en atraer al usuario
con nuestra propuesta de valor y ponerle
las cosas muy sencillas para que se
quede.
04
UX/UI Aplicado al E-Commerce
2 Buenas Prácticas Aplicadas a la UX/UI de una Tienda
Online
En este apartado, vamos a visualizar todos los elementos básicos y necesarios para
construir una interfaz de usuario para una tienda online, así como todos aquellos
aspectos a nivel de UX que debemos tener en cuenta para generar la mejor experiencia
posible a nuestros clientes. Para ello, aquí se comparte una serie de recomendaciones
de gran valor dentro de la creación de páginas web, en este caso de tiendas online.
 La regla de los 3 segundos.
Como bien podemos observar en nuestro día a día, los clientes/usuarios,
disponemos de un tiempo muy limitado para realizar nuestras tareas. Esto, ha
creado una gran impaciencia a todos y cada uno de nosotros que provocan la
necesidad de una respuesta inmediata prácticamente en todo lo que hacemos.
Imaginemos que nos encontramos en la cola del supermercado, con sólo 2
personas por delante y la cajera/o debe abandonar por un momento su puesto
de trabajo para resolver una incidencia. Probablemente, si tan sólo llevamos un
producto, nuestra reacción sea abandonar la tienda y volver en otro momento e
incluso comprarlo en otro sitio.
Pues bien, esta es la sensación habitual que sufre un usuario cuando accede a
una tienda online o página web y tarda en cargar más de 3-5 segundos. Pero esto
no es todo, imaginemos que tras cargar esa página no somos capaces de
encontrar lo que buscamos, ni tan siquiera consiguen captar nuestra atención.
Efectivamente, como usuarios, abandonaremos esa tienda lo más rápido posible
con el objetivo de encontrar una respuesta a nuestra demanda.
Como podéis observar, es un problema bastante habitual y principalmente se
produce por una mala optimización técnica de la página así como por una falta
de orientación comercial de la página web.
Si observamos el ejemplo que tenemos a continuación y probáis a acceder a
dicha página web, observaréis que el tiempo de carga es realmente rápido, el
negocio que se promociona es claro y conciso e incluso se incluyen las llamadas
a la acción principales que deben mostrarse en la primera carga de pantalla. Se
muestra visible el menú de navegación, puedo buscar fácilmente productos en
el buscador, puedo consultar las promociones destacadas e incluso puedo
acceder a productos destacados.
ASTURIAS CORPORACIÓN UNIVERSITARIA®
Not a Técnica preparada por Ast urias Corporación Universit aria . Su dif usión, reproducción o uso
t ot al o parcial para cual quier ot ro propósit o queda prohibida. Todos l os derechos reservados.
 UX/UI Aplicado al E-Commerce

 Accesibilidad al catálogo (menús, filtros, buscador…)

Como hemos podido observar, el principal motivo de abandono de una tienda

online es que el usuario, no encuentra realmente lo que busca o no se capta su
atención lo suficiente como para invitarle a permanecer más tiempo dentro de la
página.

La creación de una tienda online es un proyecto realmente complejo para toda

aquella persona que desea emprender o realizar un proyecto de este tipo. Uno
de los puntos que más complejidad genera, es el hecho de organizar toda la
información existente o productos de una forma sencilla y útil para el usuario.
Pero, ¿qué ocurre cuando tenemos 10.000 o 20.000 referencias de productos?

La respuesta a esta pregunta es muy sencilla, debemos jerarquizar y agrupar. Si

agrupamos todos estos productos en diferentes familias, conseguiremos crear

05 ASTURIAS CORPORACIÓN UNIVERSITARIA®

Not a Técnica preparada por Ast urias Corporación Universit aria . Su dif usión, reproducción o uso
t ot al o parcial para cual quier ot ro propósit o queda prohibida. Todos l os derechos reservados.
 UX/UI Aplicado al E-Commerce

una estructura de página web teniendo como objetivo hacerla lo más amigable
posible.

De este modo, podremos generar un menú realmente sencillo para nuestros

usuarios los cuáles tendrán una manera fácil y sencilla de navegar por la web.

El etiquetado y atributos de los productos es algo de gran importancia. Nos

permite filtrar y acceder a productos muy concretos en función de su color,
características técnicas, tallas, acabados, etc… Es posible que un usuario no
conozca el nombre exacto o el modelo de zapatillas que desea, pero sin duda,
será más accesible si facilitamos su búsqueda mediante filtros.

06 ASTURIAS CORPORACIÓN UNIVERSITARIA®

Not a Técnica preparada por Ast urias Corporación Universit aria . Su dif usión, reproducción o uso
t ot al o parcial para cual quier ot ro propósit o queda prohibida. Todos l os derechos reservados.

La ficha de producto debe estar cuidada
al detalle, es nuestro principal escaparate.
07
UX/UI Aplicado al E-Commerce
Por último, debemos entender como busca nuestro cliente nuestro producto. Para ello,
es muy importante conocer a nuestro consumidor, utilizarle para realizar pruebas de
funcionamiento de la tienda online y adaptar el contenido para hacerlo más accesible.
El software de analítica web, como por ejemplo Google Analytics, o incluso las propias
plataformas de comercio electrónico como Prestashop, permiten conocer términos que
utilizan nuestros usuarios para buscar determinados productos. Esto, nos ayudará para
implementar mediante un buscador la posibilidad de acceder a cualquier producto de
nuestro catálogo.
3 Buenas Prácticas Aplicadas a la UX/UI en la Ficha de
Producto
La ficha de producto constituye uno de los pilares más importantes a tener en cuenta
dentro del diseño de una tienda online. Debemos tener presente que es la página
donde el usuario toma la primera decisión de compra y que por tanto debe estar
optimizada para tal acción. En esta página, debemos mostrar todas nuestras galas y
ofrecer al usuario información clara y concisa sobre el producto.
ASTURIAS CORPORACIÓN UNIVERSITARIA®
Not a Técnica preparada por Ast urias Corporación Universit aria . Su dif usión, reproducción o uso
t ot al o parcial para cual quier ot ro propósit o queda prohibida. Todos l os derechos reservados.
 UX/UI Aplicado al E-Commerce

La fotografía del producto constituye una parte esencial. Aunque la mayoría de

productos que se comercializan los podemos ver físicamente con facilidad, otros es
realmente complejo acceder a ellos, por lo tanto toda descripción gráfica ayudará sin
duda a la toma de decisión.

La gestión de los contenidos es otro de los apartados clave a tener en cuenta en la

creación de una ficha de producto. Debemos dar información de manera clara, tratando
de dar mensajes eficientes sobre nuestro producto, recordad que el usuario no tiene
tiempo que perder.

08 ASTURIAS CORPORACIÓN UNIVERSITARIA®

Not a Técnica preparada por Ast urias Corporación Universit aria . Su dif usión, reproducción o uso
t ot al o parcial para cual quier ot ro propósit o queda prohibida. Todos l os derechos reservados.
 UX/UI Aplicado al E-Commerce

Las llamadas a la acción deben ser claramente visibles y diferenciadas del resto del
contenido de la página. Es una página en la que debemos poner foco a la acción
principal, comprar. Es preferible sacrificar o relegar a un papel secundario ciertas
funcionalidades como compartir en redes sociales, descargar ficha de pro ducto o
marcar como favorito ya que se alejan del objetivo principal de nuestra web.

Las valoraciones de otros usuarios forman también, otro componente de gran utilidad
para los compradores. Además, facilitan información al usuario para que este pueda
resolver algunas de sus dudas.

El tiempo de recepción del pedido, la posibilidad de devolverlo así como la garantía,

forman parte también de los mensajes imprescindibles que toda ficha de producto

09 ASTURIAS CORPORACIÓN UNIVERSITARIA®

Not a Técnica preparada por Ast urias Corporación Universit aria . Su dif usión, reproducción o uso
t ot al o parcial para cual quier ot ro propósit o queda prohibida. Todos l os derechos reservados.
 UX/UI Aplicado al E-Commerce

deben contener. Debemos manejar las expectativas de nuestros usuarios orientándolos

siempre a cumplir nuestro objetivo, comprar.

La promoción de productos complementarios o productos que vieron otros clientes es

un componente primordial en toda estrategia de venta. Lo denominamos crosselling.
Mediante esta estrategia nuestros usuarios podrán aumentar su pedido con productos
de su interés. El upselling, sin embargo, trata de guiar al usuario a comprar un producto
más caro por un poco más del otro producto pero con unas características muchísimo
mejores. Ambas estrategias pueden ayudarnos a aumentar el pedido medio de nuestra
tienda online de cada uno de nuestros usuarios.

010 ASTURIAS CORPORACIÓN UNIVERSITARIA®

Not a Técnica preparada por Ast urias Corporación Universit aria . Su dif usión, reproducción o uso
t ot al o parcial para cual quier ot ro propósit o queda prohibida. Todos l os derechos reservados.

Ofrecer un proceso de pago sencillo es
esencial para obtener una buena tasa de
conversión, menos es más.
011
UX/UI Aplicado al E-Commerce
4 Buenas Prácticas Aplicadas a la UX/UI en el Proceso de
Compra
Otro de los aspectos clave a mejorar por parte de muchos comercios electrónicos es el
proceso de pago. Uno de los principales motivos de abandono que existen en las
tiendas online es el largo proceso que existe desde que un usuario añade un producto
al carrito hasta que finaliza su pedido. En ocasiones, esto es debido a la infinidad de
campos solicitados al usuario para realizar su compra, muchas veces innecesarios. En
otras ocasiones, el manejo de las expectativas del usuario no es el más adecuado, no
sabe cuantos pasos ha de completar para realizar la compra, no se especifican
correctamente las condiciones de envío y su coste o simplemente, el proceso no es lo
suficiente amigable para completarlo.
El proceso de pago es una fase realmente interesante para optimizar la conversión de
una tienda online. Si nos trasladamos al carrito de la compra, debemos proporcionar al
usuario una vista rápida de los productos añadidos a su carrito manteniendo siempre
visible el botón de comprar para introducir ya nuestros datos de compra.
En este apartado de carrito, se recurre frecuentemente a la introducción de productos
complementarios que podrías añadir. Su equivalente en la realidad, son los productos
extra que en ocasiones encontramos en las cajas de los supermercados, en definitiva,
una estrategia de crosselling.
ASTURIAS CORPORACIÓN UNIVERSITARIA®
Not a Técnica preparada por Ast urias Corporación Universit aria . Su dif usión, reproducción o uso
t ot al o parcial para cual quier ot ro propósit o queda prohibida. Todos l os derechos reservados.
 UX/UI Aplicado al E-Commerce

Una vez hemos completado este paso, llega el momento de finalizar la compra. Para
ello, muchos comercios electrónicos optan por solicitar infinidad de datos irrelevantes o
que no son necesarios en este momento. Habilitar la compra para invitados puede ser
una gran opción si queremos eliminar barreras de compra en nuestro e-commerce. Una
vez finalizada la compra podemos optar por invitar a registrar a nuestro usuario.

En el caso de Amazon, por ejemplo, una vez estás registrado se permite realizar la
compra de un producto en un solo clic. Un proceso totalmente innovador que agilizar
muchísimo el cumplimiento de nuestro objetivo principal.

Como decíamos, es de vital importancia ofrecer la información relativa al envío,

especificando el tiempo de entrega, el coste si aplica y la introducción de un número de
teléfono para que el repartidor pueda llamar en caso de necesidad.

Respecto a las pasarelas de pago, conviene implementar todas las opciones posibles
siempre que económicamente sea viable. Existen diferentes tipos como por ejemplo la
transferencia bancaria, tarjeta de crédito, contra reembolso, Stripe, Paypal y muchas
más que veremos en profundidad en el apartado de métodos de pago.

Por último y lo más importante es mantener visible en todo momento la opción de

compra. Esta, debe ir sustentada por los motivos o valores añadidos que los usuarios
deben reconocer para realizar la compra. El empleo de mensajes como devoluciones
gratuitas, entrega en 24/48h, 2 años de garantía, atención al cliente 365 días, 24horas…
Son factores muy importantes que manejan las expectativas del cliente y ayudan a
culminar el proceso de compra.

012 ASTURIAS CORPORACIÓN UNIVERSITARIA®

Not a Técnica preparada por Ast urias Corporación Universit aria . Su dif usión, reproducción o uso
t ot al o parcial para cual quier ot ro propósit o queda prohibida. Todos l os derechos reservados.
 UX/UI Aplicado al E-Commerce

 Experiencia de usuario tras la realización de la compra.

Pero no todo concluye realizando la acción de comprar. La experiencia de

nuestro usuario o cliente continúa hasta tiempo después de haber incluso
recibido su pedido. La página de confirmación de pedido es de gran importancia
pues recoge el feedback que será mostrado al usuario. En ella encontraremos
detalles como los productos adquiridos, el tiempo de entrega estimado con
posibilidad de hacer seguimiento del pedido, la descarga de factura, la
posibilidad de dejar valoraciones de productos así como la posibilidad de
registrar a nuestro usuario para futuras compras en el caso de que no esté
registrado.

Además de esta confirmación, se recomienda que cada compra vaya notificada

por medio de e-mail u otro método de contacto a nuestro cliente. De este modo
podrá también, hacer un seguimiento más exhaustivo de su compra.

5 Conclusiones

 La página de inicio representa el primer contacto con nuestro cliente. Esta debe
ser atractiva, debe captar su atención rápidamente y además debe facilitar al
usuario la labor de acceder y encontrar a cualquier producto de nuestro
catálogo. La navegación de la misma debe ser muy sencilla.

 La página de producto constituye un escaparate para los usuarios. Debe ser lo

más completa posible. La fotografía es muy importante, así como mostrar de
forma clara la llamada a la acción. Por otro lado, debemos poner en valor todos
nuestros valores diferenciales que puedan ayudar en la toma de decisión de la
compra del producto.

013 ASTURIAS CORPORACIÓN UNIVERSITARIA®

Not a Técnica preparada por Ast urias Corporación Universit aria . Su dif usión, reproducción o uso
t ot al o parcial para cual quier ot ro propósit o queda prohibida. Todos l os derechos reservados.
 UX/UI Aplicado al E-Commerce

 Muchas tiendas online cometen el error de crear procesos de pago difíciles de

completar. La sencillez es esencial para aumentar la conversión. Una variedad de
métodos de pago y una información sobre la compra muy específica, nos
ayudará a que las conversiones puedan aumentar.

6 Bibliografía Esencial

 Tayar López, Ricardo. CRO. Diseño y desarrollo de negocios digitales. Anaya

Multimedia, 2018.

 Jeff Gothelf. Lean UX: Cómo aplicar los principios Lean a la mejora de la
experiencia de usuario. UNIR Editorial, 2014

7 Bibliografía Recomendada

 Pauline Tonhauser. Design Thinking Workshop: The 12 Indispensable Elements

for a Design Thinking Workshop. Pauline Tonhauser, 2016.

014 ASTURIAS CORPORACIÓN UNIVERSITARIA®

Not a Técnica preparada por Ast urias Corporación Universit aria . Su dif usión, reproducción o uso
t ot al o parcial para cual quier ot ro propósit o queda prohibida. Todos l os derechos reservados.