¿Cómo diseñar
mi tienda online?
¿cual es el objetivo de mi web?
Ya, pero… definir objetivos es la clave (Es casi más difícil que cumplirlos)
definir una estrategia
Usuarios de Internet
Encuentran nuestra web
Navegan por nuestra web
Encuentran el productoque están buscando
Los que empiezan el Proceso de compra
Los que lo terminan
Los que nos recomiendan
Los que vuelven
Marketing
Diseño +
Usabilidad +
Accesibilidad
Servicio + Atención al cliente
el embudo de la conversión
embudo “recto de boca estrecha”
• Mercados poco maduros
• Productos novedosos
• Baja demanda actual
• Potencial de crecimiento
• Hay poca competencia:
Embudo casi recto
• El gasto en marketing no es
lo más rentable
• Llegan usuarios
• Pero no se convierte en
clientes
• Problemas de usabilidad
• Desconfianza
• Falta de Información
• Potencial de crecimiento
exponencial
embudo “descompesado”
• Mercados maduros
• La experiencia de uso es
correcta
• Pero la gente no llega a la web
• Crecimiento lineal
• Más Marketing -> Más clientes
embudo “pronunciado de boca estrecha”
El posicionamiento y el marketing
online atraen usuarios a la web
SEO
Social Media
SEM
Analítica Web
Atraer tráfico+ +
+
+
=
El diseño y la usabilidad
convierten usuarios en clientes
Usabilidad
Diseño orientado
Accesibilidad
Analítica Web
Conversión+ +
+
+
=
El tráfico y la conversión:
las claves del éxito
+ ++ =
Éxito OnlineAtraer Tráfico Conversión
El diseño es
fundamental
Usabilidad AccesibilidadDiseño gráfico
la importancia de un buen dominio
• Representativo de nuestra empresa Debe introducir el
nombre, o una de las palabras del nombre o marca.
También debería ser descriptivo de nuestra actividad.
Ejemplo: ceramicaslopez.com
• Fácil de recordar Mejor corto que largo, aunque
algunos giros o expresiones pueden ser llamativos y
mnemotécnicos
• Evitar números y guiones
Para poder decir y deletrear
fácilmente el dominio
definiendo a nuestros usuarios
definiendo a nuestros usuarios
• fácil de usar
• amigable
• claro
• intuitivo
• de fácil aprendizaje
Nuestro sitio ha de ser:
El diseño y la usabilidad
convierten usuarios en clientes
Usabilidad
Diseño orientado
Accesibilidad
Analítica Web
Conversión+ +
+
+
=
usabilidad
arquitectura de la información
• Estructura y
organización
• Definición de
layouts/wireframes
• Taxonomías y
folksonomías
• Navegación y niveles
de navegación
• Búsquedas
arquitectura de la información
• Algunas técnicas
Card Sorting
Benchmarking
Análisis de las
estadísticas web
Tests de usuario
• Los usuarios no
leen, escanean
usabilidad
• Sencillez
• Atractivo para el
usuario
• Fácil de usar
• Fácil de aprender
• Información a la vista
• Guiar al usuario
• ¿Máximo 3 clicks?
arquitectura y usabilidad (I)
• Estructura acorde con los objetivos de la web. La home se
estructura para lograr los objetivos de comunicación: informativos,
comerciales, atención al cliente, producto, etc.
• URLs claras y únicas. Cada página, una URL descriptiva, única y
permanente.
• Información de contacto clara. Destacada y bien ubicada, fácil de
encontrar desde cualquier punto de la web.
• Rótulos significativos y estándar. Las palabras elegidas como
menú de navegación deben ser simples y descriptivas.
• Navegación completa y descriptiva. Donde estás, dónde has
estado, dónde puedes ir. Un sistema de navegación consistente.
Máximo 4 niveles de navegación.
arquitectura y usabilidad (II)• Máximo 7 items de navegación.
• Migas de pan. Muestra el camino hacia atrás.
• Enlace a la home en el logo. Recurso sencillo para facilitar la
vuelta a la página de inicio.
• Enlace a la página de inicio desde todas las páginas.
• Enlaces claros y bien identificados en todo el site. Con estilo
propio y bien visibles.
• Aprovechar la jerarquía visual para estructurar información.
Estableciendo niveles de importancia del contenido y poniéndolos
en los sitios más visibles.
arquitectura y usabilidad (III)
• Evitar sobrecarga informativa. No más de 7 ± 2 elementos por
página.
• Ayuda contextual y mensajes de error. Para tareas complejas,
ayudas con globos de texto, información sobre tamaño y formato
de un documento, etc., evitando secciones independientes de
ayuda.
• Información de estado. En tareas complejas (como una compra),
informar de dónde se está y lo que falta para terminar.
• Evitar flash innecesario. No usar intros en flash, no construir
páginas completamente en flash. Usar elementos flash para
introducir toques de dinamismo en la web (cabecera, banners,
etc).
resumiendo usabilidad
La clave de un sitio usable es que quién navegue por él,
entienda su estructura y consiga realizar con éxito,
aquello que pretendía realizar. ej: proceso de compra.
…algunos trucos
direcciones de lectura:
de izquierda a derecha
de arriba a abajo
llamar a las cosas por su nombre
logotipo arriba y a la izquierda
navegación:
listado de elementos dispuestos a la izquierda
no más de 7 elementos
buscador:
situado en la parte superior derecha
ayuda:
situada en la parte superior derecha
…algunos trucos
tipos de letra:
sans-serif (sin remates)
contraste fuente-fondo:
influye en la legibilidad
tamaño de los textos:
los tipos de letra pequeños se leen mal
aspectos importantes del texto para su comprensión:
título
imagen
introducción al texto
elementos parpadeantes y similares:
distraen la atención del usuario
…algunos trucos
ayuda contextual
ayudas a la navegación:
migas de pan
mapa web
texto en los enlaces
rotulado correcto:
llamar a las cosas por su nombre
palabras adecuadas al contexto
no hacer pensar a los usuarios
El diseño y la usabilidad
convierten usuarios en clientes
Usabilidad
Diseño orientado
Accesibilidad
Analítica Web
Conversión+ +
+
+
=
accesibilidad
accesibilidad
• Visibilidad
• Efectividad
• Universal
• Distintos tipos de
dispositivos
• Distintas
posibilidades
• Estándares web
accesibilidad
El cumplimiento de estándares
W3C permite:
ver lo mismo en todos los
navegadores
acceder desde cualquier
dispositivo
El diseño y la usabilidad
convierten usuarios en clientes
Usabilidad
Diseño orientado
Accesibilidad
Analítica Web
Conversión+ +
+
+
=
diseño orientado a la conversón
• Diálogo • Influencia
diseño gráfico
Los 10 errores más comunes
1. problemas de legibilidad
2. enlaces alejados del formato estándar
3. flash
4. contenido no escrito para la web
5. búsquedas deficientes
6. incompatibilidad entre navegadores
7. formularios incómodos, demasiado largos
8. ausencia de vías de contacto
9. ¿maquetación con ancho fijo?
10. ampliación inadecuada de las imágenes
Los 10 imprescindibles
1. logotipo vinculado a la página principal
2. lema que describa el sitio
3. lo importante lo primero
4. un buscador que funcione bien
5. texto claramente legible
6. acciones claramente representadas
7. formularios amigables
8. que no haya enlaces rotos
9. que no haya contenido desactualizado
10. que los contenidos cumplan con las expectativas
diseño gráfico
• Look & feel adaptado a los objetivos y al sector
• La cabecera marca la pauta. La paleta cromática
• El logotipo de la empresa debe integrarse
• Evitemos ruido visual
• Jerarquía visual
• Uso tipográfico adecuado
• Contraste entre fuente y fondo
• Evitar el sonido ambiental
• No abusar de los ornamentos o recursos gráficos
• Proporciones de los elementos de la web
NO a las intros en FLASH
Usabilidad:
dificultad para el usuario, provocan el abandono de la página
en un tanto por ciento elevado de casos. Es algo que quiere el
dueño de la página pero no el usuario de la página
Buscadores:
incrustar una intro en una web supone prácticamente tirar el
valor de la home a la basura para temas de posicionamiento
en buscadores
Técnicos:
una intro generalmente lleva enlaces dentro del flash hacia
secciones internas o idiomas, por lo cual es difícil y costoso
de gestionar. Siempre necesitaremos la ayuda de un perfil
técnico
El diseño y la usabilidad
convierten usuarios en clientes
Usabilidad
Diseño orientado
Accesibilidad
Analítica Web
Conversión+ +
+
+
=
analítica web
fivesecondtest
• Permite evaluar conductas
• Muy útil para evaluar diseños (wireframes)
• Ayuda a la conversión (usabilidad)
eyetraking
• Ayuda a la conversión
• Permite ver atenciones máximas
• Permite reconstruir patrones de navegación
A/B testing
test multivariable
• Test A/B
Poco tráfico
Cambios radicales
Al principio del diseño
• Test multivariable
Bastante tráfico
Testear paginas en las
que se mantiene el
diseño
Testear elementos
google analytics
elementos de una
tienda online
catálogo de productos
catálogo de productos
• es nuestra carta de presentación
• lo más importante es la presentación de
los productos (confianza, seriedad)
• uso de fotografías reales
• buena descripción y uso de vídeos,
podcasts, otros
• organización jerarquizada
• uso de los más vendidos, top 10, etc.
carrito de la compra
carrito de la compra
• visible desde todas las páginas
• debe permitir añadir, eliminar o modificar
productos en cualquier momento de la
navegación
• referencias y cantidad compradas
• gastos de envío
• impuestos aplicables (directos)
• importe total del pedido
promociones y ofertas
promociones y ofertas
• vender por precio. El precio de los
productos siempre debe estar visible
• rebajas de precio, resaltar el precio de la
oferta y mantener el precio no rebajado
• módulo de descuentos configurable: por
categorías, por volumen, por tipo de
cliente, etc.
• códigos promocionales y cupones de
descuento
motor de búsqueda
motor de búsqueda
• indispensable una búsqueda simple
• si tenemos muchos productos es
indispensable disponer de un potente
motor de búsqueda
• buscar por categorías, rango de precios,
nombre
• siempre dar una alternativa. Si no existen
resultados, mostrar sugerencias con
productos relacionados
proceso de compra
proceso de compra
• directo y guiado con mensajes de
información
• registro de usuarios opcional
• menor número de pasos posible (5 clicks)
• información complementaria que de
confianza a los usuarios
• y además:
proceso de compra
• gastos de envío asociados a la
transacción
• dirección de entrega del pedido
• dirección de facturación
• disponibilidad de los productos elegidos y
plazo de envío
medios de pago
medios de pago
• es el momento más crítico
• ofrecer el mayor número de posibilidades
• medios habituales: contra reembolso,
transferencia bancaria, domiciliación
bancaria, tarjeta de crédito (TPV virtual),
otros medios (Paypal, Saftpay, Allopass,
Google Checkout)
• Mostrar siempre precios finales competos
(impuestos incluidos)
información corporativa
información corporativa
• quiénes somos
• que ofrecemos
• aviso legal y política de privacidad
• información de contacto
• dónde estamos (si hay tienda física u
oficina comercial)
• condiciones de compra y contratación
• preguntas frecuentes
registro y área de usuario
• Registro siempre opcional
• es una herramienta indispensable para la
fidelización de clientes (newsletters,
promociones, etc.)
• el área de usuario es recomendable pero
tiene un coste adicional (seguimiento de
envíos, consulta últimas compras, etc.)
• En el área de usuario el cliente puede
modificar datos, envío y/o facturación
gestión de la tienda online
gestión de la tienda online
• La plataforma / herramienta seleccionada
debe permitir realizar la gestión completa
de la tienda online:
Seguimiento y control de pedidos
Atención al cliente
Logística y transporte
Almacén, stocks
Gestión comercial
Facturación
Elementos de
influencia
Elementos de influencia
1. Confidencialidad
2. Seguridad en el pago
3. Facilidad en el cambio o la devolución
4. Proceso de compra realizado correctamente
5. Información clara de cómo se hace la compra
6. Navegación rápida y fácil
7. Imagen de confianza y seriedad
8. Posibilidad de pagar de distintas formas
9. Descripción detallada de los productos
10. Los precios
10 factores
de éxito
Empieza por el principio
Pon la tienda en orden
Fácil de usar
Que sea bonita
Buen contenido y bien actualizado
Estándares web
Publicita tu web a los cuatro vientos
Medir, medir, medir
No la abandones
Tu imagen en la red
Gracias
Fuentes: Red.es, Domestika, Vexlan, Cristóbal Fransi, E., Barrabés, Google, Territorio Creativo, ONTSI, adigital y fuentes propias.
Imágenes: Flickr CC (El Colo Eiguren, NattyDreaddd, Huladancer, Tilanevesen, Sebastián Ramos, Antonio Martínez, Redjar) y
Fotolia
Contenido: Licencia Creative Commons 3.0
Valladolid – noviembre 2010
Jezabel González Diez
www.vitalinnova.com/blog
twitter.com/jezis
twitter.com/vitalinnova
Recommended
