Diseño Web y Social

Media (I)
—

1 © Asturias Corporación Universitaria

 Diseño Web y Social Media (I)

Í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 .................................................. 8
5 Conclusiones ........................................................................................................................................................ 12
6 Bibliografía Esencial ......................................................................................................................................... 13
7 Bibliografía Recomendada ........................................................................................................................... 13

02 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.
 Diseño Web y Social Media (I)

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 foco en la
conversión de los objetivos, sea ésta cual sea: vender, conseguir leads, informar…
El diseño web crea los elementos
encargados de cumplir con los objetivos Estos atributos son: textos, imágenes, CTA (call to action), estilos y jerarquía de la
de conversión y la usabilidad asegura una
información.
óptima interacción entre usuario y página
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.

• 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…

03 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.
 Diseño Web y Social Media (I)

• 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 detalle lo que se quiere
El documento funcional recoge con
detalles y rigor las especificaciones que conseguir. Con este documento los especialistas elaboran los wireframes. Tras ser
Negocio e IT describen sobre cómo han validados se pasan a diseño, y posteriormente a maquetación.
de ser todos los elementos de la página
1. El documento funcional incluye interacciones entre el ERP y el back-office de la
web .
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:

04 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.
 Diseño Web y Social Media (I)

- 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

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.

05 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.
 Diseño Web y Social Media (I)

• 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 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

06 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.
 Diseño Web y Social Media (I)

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.

• Otros elementos de navegación: login, quiénes somos, localizador de tiendas

físicas, atención al cliente, etc.

07 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.
 Diseño Web y Social Media (I)

4 El Catálogo de Productos y el Checkout en un eCommerce

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

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

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 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, los detalles y

08 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.
 Diseño Web y Social Media (I)

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. Ofrec er
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 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

09 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.
 Diseño Web y Social Media (I)

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 de la compra. Este elemento
de conversión trata de aumentar el precio medio del ticket final de compra en el
ecommerce.

010 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.
 Diseño Web y Social Media (I)

• 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.

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

011 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.
 Diseño Web y Social Media (I)

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.

• 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.

012 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.
 Diseño Web y Social Media (I)

6 Bibliografía Esencial

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

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/

013 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.