¿Cómo diseñar mi tienda online?

¿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

jezabel.gonzalez@vitalinnova.com

www.vitalinnova.com/blog

twitter.com/jezis

twitter.com/vitalinnova