BUENAS

PRÁCTICAS UX
PARA MEJORAR
TU TASA DE CONVERSIÓN
 INTRODUCCIÓN
Proponer a los consumidores la oferta adecuada es un principio básico
de todo vendedor online que se precie, pero la multiplicación de ofertas y la
democratización del e-commerce pueden frenar el avance de las tiendas online.
Además, en un mundo cada vez más competitivo, los vendedores online deben ser
capaces de ofrecer a los clientes una experiencia diferente para salir adelante.

Mejorar la experiencia de usuario de un sitio web es la primera iniciativa que

debería tomar un vendedor online para reforzar su compromiso con los clientes.
Por tanto, es necesario pensar cada detalle de esta experiencia para transmitir una
imagen positiva de la marca, mejorar las conversiones y fidelizar a los clientes.

Aquí veremos las diferentes razones por las que la experiencia de usuario es
importante tanto para los vendedores online como para los consumidores, además
de ser una forma excelente de impulsar el crecimiento de un sitio web simplemente
a partir de unos cimientos sólidos.

1
 ÍNDICE
La experiencia de usuario: un recurso diferenciador ............................ 3

Interfaz de usuario: una prioridad para captar visitantes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4

Glanceability: técnica para dar una

buena impresión desde el primer momento. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5

Experiencia de usuario:
equilibrio entre claridad, funcionalidad y diseño. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7

La participación del cliente: un recurso natural de conversión . . . . . . . . . . . . . 8

Convertir al cliente en actor de su propia experiencia . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 9

Apelar a las emociones de los visitantes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 11

Los dispositivos móviles:

la prolongación de la experiencia de usuario . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13

Ser adaptable: la obligación de un sitio web . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 14

Una prolongación de la experiencia de usuario . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 15

Conclusión. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 16

Acerca de . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 18

2
LA EXPERIENCIA
DE USUARIO:
UN RECURSO
DIFERENCIADOR
 LA EXPERIENCIA DE USUARIO: UN RECURSO DIFERENCIADOR

Al igual que en el caso de las tiendas físicas, también debe tenerse en cuenta la
noción de la experiencia de usuario en cualquier tienda de e-commerce.

Con una competencia cada vez más feroz en Internet, hay que ser conscientes de
que, sin una buena experiencia de usuario, será difícil que un sitio web destaque entre los
demás. Por esta razón, se hablará principalmente de ella si fracasa, mientras que en el caso
contrario simplemente pasará a formar parte de las demás nociones que hacen que un
sitio web sea atractivo.

Pero, ¿qué es la experiencia de usuario? En realidad, se trata de un conjunto de reglas

pensadas para que la navegación del usuario por un sitio web sea lo más fluida e intuitiva
posible.

Para explicar la experiencia de usuario, hay que empezar por analizar el término
“interfaz de usuario”. A menudo mezclamos, e incluso confundimos, estos dos conceptos
diferentes y complementarios a la vez, que ayudan conjuntamente a mejorar la conversión.

Interfaz de usuario: una prioridad para captar a los visitantes

Las interfaces de usuario son determinantes

para cualquier sitio web, ya que a los usuarios les
basta cinco segundos para juzgar el sitio web y
decidir si les interesa. Estos pocos segundos se
concentran sobre todo en la página principal, su
aspecto, la información que presenta y el acceso a
datos relevantes.

Por tanto, esta noción de interfaz se centrará

principalmente en el diseño de un sitio web.
Distinguimos tres puntos importantes: la identidad
visual, el diseño gráfico y las normas editoriales.

● La identidad visual es la imagen que queremos dar de una marca: un logo,

una política, etc. Se trata de una etapa de suma importancia a la hora de crear una
tienda.

● El diseño gráfico tiene que ser la mezcla de una identidad visual sólida (propia de
una marca) y las tendencias actuales. El diseño de un sitio web debe ser agradable y
cómodo para los usuarios, claro y conciso, además de destacar los productos.

4
 LA EXPERIENCIA DE USUARIO: UN RECURSO DIFERENCIADOR

● Por último, las normas editoriales se centran principalmente en el público objetivo.

Se trata del tono utilizado. ¿Vamos a hablar de usted o de tú? ¿Qué secciones se van
a incluir? ¿Qué palabras clave se van a utilizar y con qué frecuencia se va a publicar?
Estas preguntas forman parte de la interfaz de usuario y es importante responderlas.

Si el usuario considera el sitio web de su agrado, tendrá más ganas de consultarlo

porque se dejará llevar por estímulos positivos. Por tanto, es un elemento importante
para construir la experiencia de usuario sobre una base sólida. Es la puerta de entrada
al sitio web y debe ofrecer a los visitantes lo que desean de forma inmediata.

Glanceability: técnica para dar una buena impresión desde el

primer momento

El 42 % de los usuarios juzgan los sitios web que visitan solo por su aspecto1. Por
tanto, es posible captar a casi la mitad de los visitantes ofreciéndoles una página de
inicio con un diseño agradable, que deberá contar con un número limitado de secciones
y elementos sencillos para evitar la sobrecarga.

De hecho, una de las claves para ofrecer una buena experiencia de usuario es dejar
suficiente espacio en blanco para que el usuario pueda respirar, lo que puede incrementar
su atención un 20 % y aportar un aspecto moderno y fresco a la página2. Al limitar las
distracciones, guiaremos al usuario hacia un objetivo concreto: encontrar el producto
adecuado.

Los espacios libres permiten orientar la mirada del usuario

1 : http://www.ecommerce-nation.fr/wp-content/uploads/2016/09/HJkZ-j84.jpg
2 : https://www.fastcodesign.com/3046656/why-white-space-is-crucial-to-ux-design

5
 LA EXPERIENCIA DE USUARIO: UN RECURSO DIFERENCIADOR

Para ello, lo más sencillo es optar por un diseño plano o flat design. Este tipo de
diseño, muy utilizado desde hace ya varios años, ofrece páginas minimalistas y claras
que guían al usuario hacia la opción deseada haciendo uso de colores y animaciones que
estimulan su atención hacia puntos precisos. Google es un buen ejemplo. Este buscador,
con formas minimalistas y colores primarios, ofrece una navegación clara a través de sus
diferentes servicios: Gmail, Inbox, Google Play, etc.

VS

FLAT DESIGN REALISTIC

Crear un sitio web con diseño plano ya no es cosa de un puñado de programadores.

PrestaShop ofrece una gama de temas gráficos que aprovechan al máximo todas las
posibilidades que ofrece este diseño. Este tipo de sitio web es actualmente la mejor
forma de lograr una apariencia profesional y de ofrecer a los usuarios una experiencia
de navegación inmejorable.

Un buen diseño también permite crear una página de inicio eficaz. Para maximizar el
potencial de conversión, existen varias opciones:

● El método KISS (Keep It Short and Simple): se conservan los elementos esenciales y
se deja a un lado lo superfluo.

● Debe ser posible acceder a todas las páginas desde la página principal. Aquí se puede
aplicar la regla de los tres clics: para limitar la sensación de frustración del usuario,
debe ser capaz de encontrar cualquier página en menos de tres clics.

●● El logo debe incluir un enlace que dirija hacia la página de inicio.

Teniendo en cuenta que más del 90 % de los usuarios consideran que el aspecto
visual de un sitio web es clave para tomar una decisión de compra3, las empresas deben
contar con los recursos necesarios para ofrecer una interfaz acorde con las tendencias
actuales.

3 : http://www.ecommerce-nation.fr/wp-content/uploads/2016/09/HJkZ-j84.jpg

6
 LA EXPERIENCIA DE USUARIO: UN RECURSO DIFERENCIADOR

El tema predeterminado de
PrestaShop 1.7 ofrece un diseño
plano combinado con efectos de
sombra que permite crear interfaces
minimalistas sin renunciar a los
elementos dinámicos.

La experiencia de usuario: equilibrio entre claridad, funcionalidad y

diseño

Una vez completada esta etapa, es el turno de la experiencia de usuario propiamente

dicha. Para que un sitio web sea atractivo desde el primer momento, es necesario presentar
claramente lo que ofrece para que las conversiones sean efectivas.

La navegación debe considerarse un camino que el usuario va a recorrer sin darse

cuenta. La interfaz va a estar oculta, pero el usuario seguirá un hilo conductor que le
indicará la mejor forma de proceder. El 76 % de los usuarios consideran que lo más
importante es que un sitio web sea fácil de usar4, lo que se consigue con categorías
directamente identificables y un número limitado de opciones disponibles.

El usuario debe ser capaz de identificar siempre dónde se encuentra en un sitio web.
Gracias a los diferentes elementos de la interfaz y a una buena experiencia de usuario,
podrá avanzar sin sentirse prisionero de su navegación. Migas de pan, un pie de página
explicativo, un menú presente y a la vez discreto… Todos estos elementos ayudan al
usuario a explorar el sitio web y ofrecen alternativas para que pueda ubicarse en él con
facilidad.

4 : http://www.ecommerce-nation.fr/wp-content/uploads/2016/09/HJkZ-j84.jpg

7
 LA PARTICIPACIÓN
DEL USUARIO Y LAS
MICROINTERACCIONES:
UN RECURSO NATURAL
PARA LA CONVERSIÓN
 LA PARTICIPACIÓN DEL USUARIO Y LAS MICROINTERACCIONES:
UN RECURSO NATURAL PARA LA CONVERSIÓN

Los detalles no son sólo

detalles. Crean el diseño.
- The details are not the details.They make the design.

Charles Eames,
Diseñador Americano que contribuyó con sus creaciones al desarrollo
de la arquitectura y diseño de mobiliario moderno.

La participación del usuario es el resultado de la conjunción de varios elementos,

entre los cuales se encuentran las microinteracciones. Seguro que estas nos
resultan familiares, ya que estamos rodeados de ellas cada día. Se trata de pequeñas
animaciones que permiten informar en tiempo real sobre una acción que realiza el
usuario para facilitar la navegación y hacer que esta sea más interactiva.

Las microinteracciones: cómo convertir al visitante en actor de su

propia experiencia

Las microinteracciones abarcan numerosos elementos de un sitio web. Se trata de

todas las animaciones diseñadas para que la navegación del usuario sea más entretenida y
darle la sensación de estar participando en la navegación.

Hay multitud de ejemplos, desde la forma más sencilla de interacción hasta los efectos
más complejos. Los botones que se iluminan o que cambian de color son un ejemplo
perfecto: actualmente están presentes en todas partes y ofrecen este carácter lúdico tan
importante.

Gracias a este proceso, el usuario deja de tener una función pasiva en la navegación
y se convierte en el actor principal de esta. Quiere descubrir las demás funcionalidades
previstas, se interesa y desempeña un papel más dinámico. Es una experiencia positiva que
podemos añadir a las anteriores: le ha gustado el diseño del sitio web y conoce su ubicación
en todo momento. Está aprendiendo a descubrir.

Estas medidas son especialmente eficaces a la hora de diseñar call to action o

llamadas a la acción:

●● Son botones que incitan a los usuarios a hacer clic al proponer una acción concreta.

●● Es importante respetar un código de colores: deben ser directamente identificables

y coherentes con el diseño del sitio web.

9
 LA PARTICIPACIÓN DEL USUARIO Y LAS MICROINTERACCIONES:
UN RECURSO NATURAL PARA LA CONVERSIÓN

●● El texto debe ser transparente. En lugar de mostrar la opción de “continuar” o

“confirmar”, se debe indicar explícitamente la acción o lo que le espera al usuario
detrás de esta etapa.

La llamada a la acción es el primer elemento que destaca en la página.

Uno de los elementos centrales que se deben tener en cuenta es el efecto que se
provoca en el usuario. Aquí conviene actuar con moderación para no ahogarlo con
animaciones, lo que daría al sitio web un aspecto global confuso.

Hay que centrar la atención del usuario en puntos concretos: las microinteracciones
también contribuyen a construir la experiencia de usuario y el camino que este debe
recorrer.

En el tema predeterminado de PrestaShop

1.7 las llamadas a la acción azules
contrastan con un fondo blanco y gris para
que se puedan ver e identificar con facilidad.

10
 LA PARTICIPACIÓN DEL USUARIO Y LAS MICROINTERACCIONES:
UN RECURSO NATURAL PARA LA CONVERSIÓN

Apelar a las emociones de los visitantes

Varios estudios han demostrado que a la hora de reflexionar el ser humano se deja
llevar ante todo por influencias inconscientes: las microinteracciones de un sitio web
permiten aprovechar al máximo una experiencia y limitar las dificultades.

Descubrir estas microinteracciones se convierte entonces en una especie de caza

del tesoro. Es un elemento importante, ya que despierta emociones positivas, y esta es la
principal razón por la que estas interacciones resultan interesantes.

La amígdala cerebral, la parte del cerebro que controla las emociones, utiliza dos
tercios de su capacidad para buscar experiencias negativas. Por tanto, tienen cierta ventaja
sobre las experiencias positivas: una simple contrariedad provocará la desvalorización
del producto y se necesitarán más de diez experiencias positivas para compensar
una negativa.

Limitar las probabilidades de que algo así ocurra forma parte de las obligaciones de
un sitio web. Un ejemplo concreto de esta habilidad para convertir un momento desagradable
en algo más entretenido es la personalización de las barras de carga.

80%

Los usuarios ya no soportan perder tiempo esperando a que un sitio web se cargue y
muchos estudios lo confirman:

El 65 % de los usuarios no están dispuestos a esperar más de tres segundos a que

cargue un sitio web5. ¿Cómo se soluciona este problema?

● Una posible solución sería ofrecer una interacción durante este tiempo de carga.

●● Se debe mejorar la velocidad de carga. Un tiempo de espera de más de dos segundos

disuade al 87 % de los visitantes6.

5 : http://www.ecommerce-nation.fr/wp-content/uploads/2016/09/HJkZ-j84.jpg
6 : http://www.multicom-ergonomie.com/blog/2011/04/combien-de-temps-accepte-t-on-dattendre-le-chargement-dune-page-web/

11
 LA PARTICIPACIÓN DEL USUARIO Y LAS MICROINTERACCIONES:
UN RECURSO NATURAL PARA LA CONVERSIÓN

Las microinteracciones constituyen actualmente la segunda etapa del proceso para

captar a los usuarios de un sitio web. Recordemos que la primera es atraer su atención.

Por tanto, es fácil crear las bases para captar a nuestro público proponiendo
simplemente una interfaz agradable y clara y teniendo siempre presente que el usuario
debe ser dueño de su propia experiencia.

PrestaShop ofrece temas que incluyen directamente estas interacciones y permite

modificarlas para lograr un resultado acorde con el sitio web.

12
 LOS DISPOSITIVOS
MÓVILES:
LA PROLONGACIÓN DE LA
EXPERIENCIA DE USUARIO
LOS DISPOSITIVOS MÓVILES: LA PROLONGACIÓN DE LA EXPERIENCIA DE USUARIO

Actualmente, el e-commerce ya no se limita a los ordenadores. Las fronteras están

desapareciendo poco a poco y es importante que todos los vendedores online sepan
aprovechar la oportunidad de estar presentes en los móviles y las tablets.

Ahora no hace falta ser un experto en informática para conseguir que se pueda acceder
a un sitio web desde todos los dispositivos móviles: las soluciones como PrestaShop
ofrecen sitios web totalmente adaptables.

Ser adaptable: la obligación de un sitio web

Para lanzarse al mundo del m-commerce, es necesario un sitio web optimizado para
dispositivos móviles. Algunos estudios muestran que más del 80 % de los sitios web no lo
están o no lo están lo suficiente7: es un mercado que está en pleno crecimiento, por lo que
adelantarse desde ahora es crucial.

El 81 % de los usuarios buscan en su dispositivo móvil antes de realizar una compra8.

De esta forma, ofrecer servicios y artículos de forma pertinente en dispositivos móviles
aumentará considerablemente el potencial de conversión.

Un sitio web adaptable es un sitio web

que puede adaptarse por completo
a todo tipo de pantallas, ya sean tan
pequeñas como las de los smartphones
o tan grandes como las de las tablets,
incluso al reducir el tamaño del
navegador.

Además de ser personalizable, esta

opción permite ofrecer siempre una
interfaz clara al eliminar la información
menos importante para privilegiar
siempre el contenido deseado.

Esta optimización permitirá de nuevo reforzar de forma positiva la experiencia

de usuario en una tienda de e-commerce. Teniendo en cuenta que más del 70 % de los
usuarios consideran que la velocidad de carga en los dispositivos móviles es demasiado
lenta9, ofrecer un sitio web rápido y seguro en todas las plataformas provoca una sensación
de satisfacción inconsciente y, por tanto, incrementa la frecuencia de las conversiones.

7 : http://blog.lunaweb.fr/responsive-web-design/
8 : https://viuz.com/2014/10/07/81-de-recherches-mobiles-avant-dacheter-en-magasin/
9 : https://www.digitalgov.gov/2014/07/07/user-experience-ux-vs-customer-experience-cx-whats-the-dif/

14
LOS DISPOSITIVOS MÓVILES: LA PROLONGACIÓN DE LA EXPERIENCIA DE USUARIO

PrestaShop 1.7 ofrece un proceso

de compra en una sola página (One
page checkout) que se adapta aún
más a los problemas relacionados
con el diseño adaptable y las compras
en dispositivos móviles.

Una prolongación de la experiencia de usuario

Un sitio web para dispositivos móviles debe tener el mismo impacto que su plataforma
principal. La creciente popularidad de este soporte le otorga una relevancia indiscutible.
Se pueden personalizar numerosas opciones para ofrecer una experiencia fiel al sitio
web y lo suficientemente original para atraer a los usuarios.

El m-commerce tiene también sus propias reglas. Un sitio web móvil permite evaluar
los elementos superfluos de una página: el lugar que ocupan en una pantalla más pequeña
revelará si son innecesarios. Así, cuando observamos un sitio web móvil, debemos analizar
varios elementos que podrían añadirse al sitio web y, si es necesario, suprimirlos:

●●● Los anuncios que entorpezcan la navegación

●● Los banners intermitentes que utilizan muchos recursos

●● Las redes sociales inactivas

Esta lista no es exhaustiva. Hay que pensar ante todo como el usuario y comprender su
reacción cuando interactúa en el sitio web, tanto si es móvil como si no.

15
 CONCLUSIÓN
¡NO OLVIDES LA EXPERIENCIA DE CLIENTE!

No podíamos terminar esta guía sin hablar de la experiencia del cliente, ya

que sin ella no obtendrás resultados positivos. La experiencia de compra ya no
se limita al e-commerce, a las tiendas convencionales o al m-commerce. A partir
de ahora, todos los puntos de contacto con los clientes deberán aprovecharse y
conectarse para ofrecerles una experiencia completa.

Los conceptos de experiencia del cliente y experiencia de usuario se

asemejan, pero son bastante diferentes. La experiencia de usuario representa lo que
experimenta el usuario cuando interactúa con tu sitio web/interfaz. La experiencia
del cliente es la opinión general que los consumidores tienen de tu marca a través
de las diferentes interacciones que tienen contigo en los diferentes canales.
¿Están dispuestos a comprar de nuevo en tu tienda o a recomendarte a su familia
y amigos?

La experiencia de usuario es, por tanto, un componente de la experiencia

del cliente10.

UX & CX UX CX UX CX CX UX

Ya lo has visto. Dar una buena imagen al público al ofrecer una experiencia
del cliente y del usuario inmejorable permite destacar significativamente entre las
demás tiendas de e-commerce. Por tanto, es evidente que trabajar para ofrecer
estas experiencias ayudará con total seguridad a aumentar tu tasa de conversión.

10 : https://www.digitalgov.gov/2014/07/07/user-experience-ux-vs-customer-experience-cx-whats-the-dif/

16
 SIGUIENTES ETAPAS:

ABRE TU TIENDA ONLINE

y ofrece a tus usuarios una experiencia inmejorable

DESCARGAR PRESTASHOP 1.7

ENCUENTRA MULTITUD DE CONSEJOS

SOBRE E-COMMERCE

SABER MÁS

17
 ACERCA DE
PrestaShop nació en 2007 con la misión de ofrecer un software de
e-commerce gratuito basado en estrategias de innovación de código abierto. Hoy
son más de 250.000 las tiendas online que funcionan con PrestaShop en 195
países. La empresa y su comunidad colaboran para que los vendedores online
puedan disfrutar de tiendas con todas las funcionalidades al menor coste posible.

E-commerce Nation es la primera plataforma colaborativa totalmente

dedicada a los vendedores online franceses. Ofrece cada día noticias, consejos y
soluciones para tu tienda de e-commerce. El sitio web se dirige a los vendedores
online que deseen aprender más sobre su actividad, así como desarrollar su negocio
con las herramientas y los conocimientos adecuados.

COMPARTIR