Clase5 pdf1

—
1 © Asturias Corporación Universitaria

Índice
1 Introducción ............................................................................................................................................................ 3
2 Diseño Web y Usabilidad................................................................................................................................ 3
3 Fases del Diseño Web y los Elementos de Navegación ............................................................. 4
4 El Catálogo de Productos y el Checkout en un eCommerce .................................................. 9
5 Conclusiones ........................................................................................................................................................ 13
6 Bibliografía Esencial ......................................................................................................................................... 14
7 Bibliografía Recomendada ........................................................................................................................... 14
ASTURIAS CORPORACIÓN UNIVERSITARIA®

Nota Técnica preparada por Asturias Corporación Universitaria. Su difusión, reproducción o
uso total o parcial para cualquier otro propósito queda prohibida. Todos los derechos
reservados.
Objetivos
• Conocer la importancia de la usabilidad para crear un diseño web enfocado
en la conversión de los objetivos.
• Identificar las fases del proceso de diseño de una página web.
• Estructurar un catálogo de productos con sus elementos clave de
navegación para una correcta usabilidad.
1 Introducción
El diseño web nos permite llevar online todo el plan de negocio digital que hemos
elaborado previamente en un informe escrito. Será la puesta en marcha del
proyecto y su desempeño centrado en el usuario es uno de los factores de éxito.
El trabajo previo es una correcta y fluida comunicación entre el departamento de
producto, negocio digital e IT. De esta manera se estructurará cómo es la mejor
forma de mostrar la información al usuario y se llevará a cabo en la web siguiendo
unas pautas de usabilidad que guían al cliente digital por la página web hasta el
pago.
2 Diseño Web y Usabilidad
El diseño web se encarga de crear los atributos visuales y funcionales con

El diseño web crea los elementos el foco en la conversión de los objetivos, sea ésta cual sea: vender, conseguir
encargados de cumplir con los objetivos leads, informar…
de conversión y la usabilidad asegura una Estos atributos son: textos, imágenes, CTA (call to action), estilos y jerarquía de la
óptima interacción entre usuario y página información.
web.
El diseño web está condicionado por los siguientes factores:
• La usabilidad. Es una disciplina que estudia la calidad de la experiencia
que tiene un usuario cuando interactúa con una página web, siendo el
objetivo hacer la navegación fácil, cómoda e intuitiva. Los elementos que se
ven afectados son: la navegación, las funcionalidades y los contenidos.
• El libro de estilo de la compañía.

reservados.
• La arquitectura de contenidos: las categorías y subcategorías de los
productos, los servicios de la compañía, las tiendas físicas, el blog, etc…
• Las evoluciones en la programación (html5, scripts, flash, hojas de estilo
CSS...) y la velocidad de carga que afecta directamente al posicionamiento
orgánico.
• Los dispositivos. Actualmente el porcentaje de uso de móvil está en un
55-65% en la mayoría de las categorías. La experiencia de usuario en
dispositivos móviles es un factor que en los últimos años ha cobrado mayor
importancia debido a los cambios constantes en el algoritmo de Google,
que premia a aquellas páginas web que ofrecen una interacción “mobile -
first” entre usuario y contenido. En este sentido, de menor a mayor
experiencia mobile, encontramos:
- Diseño Responsive: técnica de diseño que adapta una página web a
cualquier dispositivo, sea móvil, tablet o desktop.
- AMP: Accelerated Mobile Pages. Tecnología de código abierto que
pretende disminuir los tiempos de cargas en dispositivos móviles.
Enfocada en la entrega del contenido de forma rápida y simple.
- PWA: Progressive Web Adaptive, Aplicaciones Web o Web Adaptativa.
Se trata de una página web que funciona en un navegador pero que
se comporta como una aplicación web cuando el dispositivo es un
móvil. Permiten almacenamiento local, es decir, que no requieren
conexión, son rápidas en cualquier navegador y dispositivo y pueden
enviar notificaciones push. Es la versión más evolucionada del
“mobile-first”. Como ejemplo puedes encontrar: Twitter, Facebook o
Instagram.
3 Fases del Diseño Web y los Elementos de Navegación
El diseño web ha de ser un trabajo en equipo entre Negocio e IT. Entre los
dos tendrán que desarrollar un documento funcional que recoja con rigor y
El documento funcional recoge con
detalle lo que se quiere conseguir. Con este documento los especialistas elaboran
detalles y rigor las especificaciones
los wireframes. Tras ser validados se pasan a diseño, y posteriormente a
que Negocio e IT describen sobre maquetación.
cómo han de ser todos los elementos
de la página web.

reservados.
1. El documento funcional incluye interacciones entre el ERP y el back-
office de la web, afecta a la jerarquía de venta o categorización, al surtido,
al pricing, a los atributos, etc…
2. Los wireframes son pantallazos sin diseño de todas las páginas descritas
en un funcional. La cabecera y el footer se crean a parte ya que se repiten a
lo largo de toda la web. Incluyen todos los elementos de las páginas pero
sin diseño. Por ejemplo, en un ecommerce encontramos:
- Home
- Categoría de producto (listado de productos)
- Subcategoría de producto (listado de productos de nivel 2)
- Ficha de producto (PDP)
- Cesta de la compra
- Registro
- Checkout
- Mensajes core transaccionales: “bienvenida”, “confirmación de
pedido”, “tu pedido está en camino”, “tu pedido ha sido entregado”,
“gracias por tu confianza”. Y otros del tipo: “has olvidado tu
contraseña”, etc.
3. Funcionalidades varias que se incorporan a una web para desempeñar
funciones comerciales o de fidelización. Por ejemplo, el buscador interno, la
recomendación de productos, las opiniones de usuarios, el chat, pop-up de
promociones, pop-up de salida, formulario de suscripción a la newsletter,
etc…
4. El diseño gráfico comienza cuando los wireframes han sido aprobados por
Negocio. Tendrá que tener en cuenta el libro corporativo de estilo y grandes
dosis de creatividad para aportar valor a la navegación del usuario y
diferenciarse de la competencia. El diseño debe ser:
- Corporativo
- Usable
- Funcional
- Mobile first

reservados.
5. Finalmente, la maquetación. Se encarga de organizar el espacio web para
mostrar todos los elementos descritos anteriormente.
Los elementos de navegación son los hitos que guían al usuario por una página
web y le permiten moverse por todo el catálogo de productos y resto de
información disponible online.
Mostramos los elementos de navegación claves en un ecommerce mediante el
ejemplo de El Corte Inglés, ya que es uno de los catálogos más complejos que
nos podemos encontrar.
• El menú superior: es la clasificación más global del catálogo. En el
ejemplo, se definen los “departamentos”: moda, informática,
electrodomésticos, deportes, etc…
• El menú horizontal: es la clasificación de segmentos del catálogo de
productos. A menudo esta clasificación se complementa con un menú
desplegable que refuerza las categorías y subcategoría visibles en el menú
lateral. En el ejemplo, entramos en el departamento de “moda” y nos
encontramos con mujer, joven ella, lencería, hombre, zapatos, etc…
• El menú lateral: muestran las categorías y subcategorías de los productos,
lo que se llama nivel 1, nivel 2, etc… Es recomendable no más de 3 niveles. En
nuestro ejemplo, entramos en lencería y vemos como categorías de producto
sujetadores, bodys, camisetas interiores, etc. Y como subcategorías por
ejemplo de sujetadores serían sujetadores deportivos, sujetadores reductores,
sujetadores push up, etc…
• El rastro de migas (o breadcrumbs): es la ruta de navegación desde su
origen. En nuestro ejemplo, en una ficha de producto de un sujetador de
lencería en el departamento de moda de El Corte Inglés, sería: Moda>
Lencería> Sujetadores> Sujetadores reductores> Sujetador Chantelle
reductor sin costuras
• Los filtros o facetas de navegación: son los atributos de los productos. En
moda suelen ser marca, talla, color,… Pero en lavadoras, por ejemplo,
encontramos marca, capacidad, clasificación energética, color, velocidad
del centrifugado, etc…
• El buscador interno. Es una de las herramientas de usabilidad más
cualificadas para guiar la navegación del usuario, siempre que esté bien
configurado. Aproximadamente el 15% del tráfico navega a través del
buscador interno de un ecommerce, por lo que podemos aprovecharlo como

reservados.
una funcionalidad para aumentar la conversión de visitas a ventas. El
buscador interno hay que alimentarlo constantemente. Es recomendable
dedicar tiempo a estudiar cómo busca el usuario en nuestro ecommerce y a
configurar palabras sinónimas y faltas de ortografía. Además, es necesario
una comunicación fluida con el departamentos de marketing/medios para
informar al buscador interno de la actividad de la empresa: promociones,
anuncios en televisión y radio, RRPP, redes sociales, etc…, ya que los
usuarios a menudo utilizan el buscador interno para encontrar cualquier
cosa más allá del producto. El buscador de un e-commerce tiene que ser
capaz de responder a búsquedas semánticas o de no productos: por
ejemplo, si la tienda física abre o no un domingo. Podemos redirigir
“producto no encontrado”, hacia las FAQs o “quizá te interese…” y un
widget con los productos más vendidos. También es importante la
creatividad.

reservados.
• Otros elementos de navegación: login, quiénes somos, localizador de
tiendas físicas, atención al cliente, etc.

reservados.
4 El Catálogo de Productos y el Checkout en un eCommerce
El catálogo de productos se puede sincronizar desde el departamento de

El catálogo de productos ha de estar compras hasta el ecommerce a través de un ERP. Pero hay que tener en
perfectamente estructurado en
cuenta que la información técnica de producto no tiene que presentarse al
usuario de forma literal. Hay que adaptarla a las keywords adecuadas y el long tail
categorías y subcategorías. La ficha
que utiliza el propio usuario en sus búsquedas.
de producto sustituye al vendedor de
la tienda física. Y el checkout es el

Por ejemplo: en Lencería de El Corte Inglés se utiliza el concepto “corsetería”
para categorizar los “sujetadores”internamente. Sin embargo, en el ecommerce se
pago por caja.
utiliza la categoría “sujetadores”, ya que “corsetería” no es una palabra que el
usuario suela utilizar en sus búsquedas. Esto podemos investigarlo con la
herramienta de Google Trends.
Fuente: https://trends.google.com/trends/?geo=ES
La jerarquía de venta de un ecommerce se organiza a partir de las categorías y

subcategorías de los productos. Cada una de las categorías tendrá además
definidos sus atributos, que ayudarán a la navegación por filtros.
También hay que tener en cuanto las meta-etiquetas para optimizar el
posicionamiento en buscadores: meta-título y meta-descripción.
La ficha de producto (también conocida como PDP) es el elemento que sustituye
en un ecommerce al vendedor de la tienda física. Aquí mostraremos nuestro
argumento comercial, contaremos las bondades del producto, su valor diferencial,

reservados.
los detalles y particularidades. Es nuestra oportunidad para convencer al usuario
de que tiene que comprar nuestro producto ahora.
Los elementos que debe contener una ficha de producto son:
• Nombre del producto o título. Este es uno de los elementos más
importantes para optimizar el posicionamiento orgánico. Aquí debemos
incluir un “apellido” al nombre que haga referencia a cómo busca el usuario
en los buscadores tipo Google, donde generalmente se incluyen marcas o
alguna particularidad. Por ejemplo, si estamos vendiendo un “teléfono
móvil”, incluiríamos la marca y la serie: “Smartphone Samsung S9”.
• SKU, es la referencia interna de cada producto en su máxima
segmentación, es decir, cada combinación de atributos será un SKU
diferente. Por ejemplo, si vendemos una camiseta, tendremos una
“referencia o modelo” con tantos SKU´s como combinaciones de tallas y
colores haya: S-blanca, M-blanca, L-blanca, S-negra, M-negra, L-negra, etc…
Este código único por producto nos servirá para gestionar el catálogo
internamente, analizando la profundidad de stock de cada una de ellas, los
destacados comerciales por colores, por tallas, por medidas o cualquier
otro concepto. Asimismo, servirá al usuario para identificar un producto
ante una consulta de disponibilidad en tienda física con el departamento de
atención al cliente o directamente en la tienda física tras haber consultado
la página web.
• La marca del producto es un elemento de búsqueda fundamental en
tiendas multimarca. Si somos Mango, no es necesario que a todos nuestros
productos les añadamos la marca, ya que el usuario es consciente de la
misma. Pero si somos El Corte Inglés, sí es necesario porque los productos
se buscan también por su marca.
• La descripción del producto tiene que transmitir sus ventajas,
características, propiedades, de qué está hecho, cómo funciona y cuáles
son sus usos. Hay que aportar información técnica como materiales,
capacidad y composición. Ofrecer información sobre el proveedor es un
buen complemento. También podemos aprovechar para explicar cómo se
recibe el producto, el empaquetado, qué incluye, indicaciones especiales de
uso o consumo… Tiene que aportar confianza y credibilidad, estar escrito
con claridad, sin redundancias pero con amplitud. Si el usuario considera
que no ha obtenido la información que buscaba en nuestro ecommerce, se
marchará a otro para encontrar su objetivo. Además, la descripción del

reservados.
producto es una gran oportunidad para atraer tráfico cualificado de los
buscadores a través de las palabras claves que los usuarios utilizan. La
descripción del producto tiene que estar escrita en un estilo apropiado para
el público al que nos dirigimos. Es un elemento que influye directamente en
la decisión de compra del usuario.
• Imágenes y vídeos, son contenido multimedia que enriquecen la ficha de
producto y aportan confianza al usuario, ya que pueden mostrar el producto
de forma más realista, poniendo foco en los detalles. Para ello, las
imágenes y los vídeos han de estar hecho en alta calidad, poniendo énfasis
en la luz y en la nitidez. También podemos aprovechar estos elementos para
hacer guiños al público objetivo, introduciendo la creatividad para aportar
más que información visual del producto.
• El precio y los descuentos son las etiquetas que buscamos en una tienda
física antes de pasar por caja. Han de estar bien visibles y claramente
definidos, sin confundir al usuario. De lo contrario, podría entender que se
pretende el engaño y dejaría de confiar en la tienda online.
• La llamada a la acción o CTA (call to action) es imprescindible para
animar al usuario a realizar la compra. Botones de “añadir al carro”, “ver”,
“comprar”… Cada ecommerce debe estudiar a tu público objetivo y estimar
qué palabras escoger para su CTA. Ha de ser un verbo que incite al usuario
a realizar la acción que queremos que haga para conseguir la conversión de
nuestros objetivos.
• Las opiniones de clientes son valoraciones de usuarios que han comprado
el producto en un ecommerce. Es información de valor para otros visitantes
que hacen referencia tanto al producto como al servicio y atención prestada
por el propio ecommerce. Las valoraciones de clientes son elementos que
aumentan la conversión de las ventas ya que representan la opinión de
terceras personas que han pasado por la experiencia de compra, sin
intermediación de la empresa. Lo que ofrece mayor credibilidad.
• Las recomendaciones de productos o elementos de venta cruzada son
elementos que fomentan una mayor interacción entre usuario y ecommerce.
Se dinamiza el catálogo de productos personalizando la oferta al propio
usuario, según su búsqueda en el propio site o la información que revelen
las cookies de su dispositivo. Se trata de ofrecer al visitante la información
que busca de una forma rápida y directamente, además de fomentar la
venta cruzada de otros productos que haya comprado o sumado a su cesta

reservados.
de la compra. Este elemento de conversión trata de aumentar el precio
medio del ticket final de compra en el ecommerce.
• Disponibilidad en tienda física. Los retailers que tienen una amplia red
de tiendas pueden aprovechar esta herramienta para derivar tráfico web a
sus locales físicos. Los usuarios que buscan el producto en la tienda online
pueden ver en tiempo real si la mercancía está disponible en su tienda más
cercana.
• Acceso a atención al cliente para solventar dudas sobre el producto o
servicio. Cuando un usuario online consulta una ficha de producto y le
surgen dudas, es muy útil poner a su disposición en el mismo espacio web
todas las vías de comunicación con el ecommerce para solventarlas. El
teléfono y el email son vías clásicas, pero el chat, vídeochat o Whatsapp
suelen ser mecanismos más adaptados al usuario ya que está más
habituado a utilizarlo en su día a día. Además, son herramientas en tiempo
real, mientras que un email pueden tardar más en contestar. La atención al
cliente tiene que responderse con inmediatez y con una clara vocación
comercial, además de empatía por el cliente.
• Botones para compartir en redes sociales o enviar por email. Permitirá a
los usuarios informar o prescribir a otros visitantes sobre nuestros
productos. Les derivará directamente a la ficha de producto que es el paso
inmediatamente posterior al paso por caja.
• Resumen de condiciones de compra, con gastos de envío, devoluciones,
entrega estimada, disponibilidad geográfica, medios de pago… Es
información de valor para el usuario que quizá se pregunta en el momento
que se convence del producto. Si no queremos que abandone la ficha de
producto donde está el botón de comprar, lo mejor es ofrecerle la solución
a todas sus posibles dudas en ese mismo espacio online.
El checkout es el paso por caja similar a una tienda física. Es el momento en el
que el usuario ha de indicar sus datos personales y pagar. Se estima que el 65-
70% de las cestas con producto añadido se abandonan finalmente.
Los motivos pueden ser varios: los gastos de envíos que no se han mencionado
durante el proceso de compra, la fecha de entrega estimada, solicitar demasiados
datos personales en el formulario de registro, la falta de medios de pago que se
adapten el público objetivos, etc… por lo que tenemos que trabajar muy bien
todos ellos para tratar de aumentar la tasa de conversión.

reservados.
Veamos cómo enfocar el diseño web en la página de la cesta de la compra, es
decir, el resumen donde se ve los productos que el usuario ha ido sumando a lo
largo de su recorrido por el ecommerce.
En primer lugar, el carrito debe estar perfectamente visible y accesible en todo
momento, en cada página por la que el usuario navega. Y ofrecer la información
sobre qué productos han sido añadidos, cuántas unidades y los precios definitivos
incluidos los gastos de envío y la fecha de entrega estimada.
Elementos que han de estar presentes en el carrito de la compra de un
ecommerce:
• La posibilidad de modificar la cantidad de unidades pedidas o eliminar
productos, guardar los productos en su “lista de favoritos” o similar para
finalizar la compra más tarde, seguir comprando o finalizar la compra.
• El “pago exprés”, como por ejemplo el botón de Paypal o Amazon Pay, que
convierten la cesta en una compra directamente, ya que el usuario
transmite sus datos personales para la entrega y el contacto, además del
propio pago, mediante el login en estas plataformas de terceros. Elementos
como este favorecen la confianza de la tienda online y aumentan la
conversión de los objetivos de venta.
• El acceso a todas las vías de comunicación con atención al cliente, para
evitar fugas de pedidos por no solventar dudas en el último momento.
• La caja para aplicar los cupones de descuento que responden a acciones
comerciales y de marketing con el foco en la conversión de ventas.
• Otras promociones que inviten al usuario a adquirir una cesta de la
compra más cuantiosa con productos cruzados, o advirtiendo al usuario que
le faltan X € para conseguir los gastos de envío gratuitos, etc…
5 Conclusiones
• El diseño web ha de estar íntimamente ligado a los conceptos de usabilidad

enfocado 100% en el usuario. Su cometido es hacer la navegación fácil,
cómoda y sencilla para que el visitante cumpla con los objetivos de la
página web.

reservados.
• Los elementos de navegación guían al usuario por la web, le permiten
moverse por todo el catálogo de productos y resto de información
disponible online. Los menús, los atributos y las llamadas a la acción son
básicos necesarios a tener en cuenta en el diseño web.
• La ficha de producto y el checkout son claves fundamentales en el diseño
web ya que afectan directamente a la conversión de los objetivos en un
ecommerce. El primero es el argumento comercial de cada producto y el
segundo es el paso por caja donde finaliza la compra.
6 Bibliografía Esencial
• Hassan Montero, Yusef, “Experiencia de Usuario: Principios y Métodos”

https://www.amazon.es/Experiencia-Usuario-Principios-y-M%C3%A9todos-
ebook/dp/B00TIXX0MA/ref=sr_1_1
• Luke Wroblewski, “Mobile First”
https://www.lukew.com/resources/mobile_first.asp
7 Bibliografía Recomendada
• “Infografía sobre el abandono del carrito”, el blog de Brainsins,

https://www.brainsins.com/es/blog/infografia-sobre-abandono-de-
carrito/101142
• “9 Free AMP Templates for Businesses”. Practical eCommerce
https://www.practicalecommerce.com/9-free-amp-templates-businesses
• “All Things Data-Driven. Conversion Optimization Blog”,
https://conversionxl.com/blog/
• “Desing in The Daily Egg”, https://www.crazyegg.com/blog/category/web-
design/

reservados.

Clase5 pdf1

Cargado por

Información del documento

Título original

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

Clase5 pdf1

Cargado por

Copyright:

Formatos disponibles

—

1 © Asturias Corporación Universitaria

ASTURIAS CORPORACIÓN UNIVERSITARIA®

2 Diseño Web y Usabilidad

El diseño web se encarga de crear los atributos visuales y funcionales con

ASTURIAS CORPORACIÓN UNIVERSITARIA®

3 Fases del Diseño Web y los Elementos de Navegación

ASTURIAS CORPORACIÓN UNIVERSITARIA®

ASTURIAS CORPORACIÓN UNIVERSITARIA®

ASTURIAS CORPORACIÓN UNIVERSITARIA®

ASTURIAS CORPORACIÓN UNIVERSITARIA®

ASTURIAS CORPORACIÓN UNIVERSITARIA®

El catálogo de productos se puede sincronizar desde el departamento de

la tienda física. Y el checkout es el

La jerarquía de venta de un ecommerce se organiza a partir de las categorías y

ASTURIAS CORPORACIÓN UNIVERSITARIA®

ASTURIAS CORPORACIÓN UNIVERSITARIA®

ASTURIAS CORPORACIÓN UNIVERSITARIA®

ASTURIAS CORPORACIÓN UNIVERSITARIA®

• El diseño web ha de estar íntimamente ligado a los conceptos de usabilidad

ASTURIAS CORPORACIÓN UNIVERSITARIA®

• Hassan Montero, Yusef, “Experiencia de Usuario: Principios y Métodos”

• “Infografía sobre el abandono del carrito”, el blog de Brainsins,

ASTURIAS CORPORACIÓN UNIVERSITARIA®

También podría gustarte