Elena Alonso, la Directora Creativa de Marketalia nos comenta los diferentes tipos de diseños web, y las razones por las cuales un site es idóneo para su Posicionamiento en Buscadores o se convierte en una eficaz arma de ventas.
1. Elena Alonso Vázquez Directora Creativa Marketalia elena.alonso@marketalia.com
www.marketing-on-line.es
2. Diferentes Sitios Webs
Web Microsite
Corporativo
Landing page
(página de aterrizaje)
www.marketing-on-line.es
3. Web
Corporativo Carta de presentación de la empresa
Información sobre la empresa, filosofía,
historia, instalaciones, notas de prensa,
galería de fotos…
Permanente en el tiempo
Posicionamiento natural en SEO. Sitio
optimizado y amigable para los robots de
búsqueda
OBJETIVO: informar al usuario y crear
“Branding”
www.marketing-on-line.es
5. Microsite
Pequeño grupo de páginas individuales
Auxilian a sitios web primarios más
generales
Contiene información concreta sobre unos
productos o servicios
Herramienta destinada a la promoción
Temporal
OBJETIVO: venta cruzada (cross selling)
www.marketing-on-line.es
7. Landing page
(página de aterrizaje) Aterrizas después de haber hecho click en
algún enlace (banner o texto)
Sin navegación, simple y directa
Poco texto e información
Herramienta con un objetivo claro de venta
Perfecto aliado de las campañas de
marketing y las acciones de comunicación
Posibilidad de segmentación. Destinada a un
público objetivo
Posibilidad de medir su efectividad a través
de un formulario
OBJETIVO: vender un solo producto
www.marketing-on-line.es
12. ¿Cómo consigo más ventas?
OBJETIVO = + ALUMNOS
Definir: Definir:
+ TRÁFICO
OBJETIVO SITIO
> TASA DE
CONCRETO
WEB CONVERSIÓN
www.marketing-on-line.es
13. ¿qué es convertir?
En
El arte de convertir
VISITAS CLIENTES
www.marketing-on-line.es
14. ¿Cómo conseguirlo?
+ TASA DE
+ TRÁFICO CONVERSIÓN
SEO COMPATIBILIDAD
SEM ACCESIBILIDAD
DISPLAYS (banners, anuncios…) USABILIDAD
Comunicación offline y online CALL TO ACTION
E-mailing SEGURIDAD Y CONFIANZA
Afiliación FORMULARIO
www.marketing-on-line.es
15. Compatibilidad
NAVEGADORES
Debe verse igual o muy parecido en todos los navegadores
El código del sitio web debe estar validado en base a los estándares W3C
Herramientas: http://netrenderer.com
www.marketing-on-line.es
16. Compatibilidad
DISPOSITIVOS
Importancia del diseño para móviles:
Url lo más corta posible
Tamaño de pantalla
Memoria limitada
Ausencia de ratón
Red inalámbrica y coste de
navegación
Explotar características propias
Peso ideal de la página 10 KB
www.marketing-on-line.es
18. Compatibilidad
RESOLUCIÓN DE PANTALLAS
Compatibilidad de tu web con la resolución de pantalla de tu público objetivo
4% 4%
5% 1024 x 768
6% 21% 1366 x 768
6% 1280 x 800
8% 18% 1280 x 1024
1440 x 900
17%
11% 1920 x 1080
Herramientas: http://www.anybrowser.com/ScreenSizeTest.html Estudio Febrero 2012
www.marketing-on-line.es
19. Accesibilidad
Capacidad de acceso a la web y a sus contenidos por todas las personas.
Tamaño y tipo de fuente, interlineado, alineación
Contraste entre color y fondo
Imágenes con “alt” descriptivo
Compatible con navegadores, dispositivos y resoluciones
No hacer al usuario descargarse plugins
Controlar el peso de la página
Página que se pueda imprimir, enviar a un amigo,
recomendar
www.marketing-on-line.es
20. Usabilidad
Eficacia
Que el usuario
encuentre lo que busca
Satisfacción
Del usuario al
Eficiencia
navegar por la web Al conseguir lo que
quiere rápidamente
www.marketing-on-line.es
21. Usabilidad
¿Quiénes son los usuarios?
¿Cuáles sus conocimientos?
EL USUARIO ¿Qué quieren o necesitan hacer los
visitantes?
¿Cuál es la formación general de los
¿Quiénes son nuestros usuarios?
usuarios?
Edad, sexo, inquietudes, ocio… ¿Cuál es el contexto en el que el
¿Cuál es su formación general? visitante está trabajando?
¿Qué conocimientos tienen de ¿Qué debe dejarse a la máquina?
¿Qué al usuario?
navegación?
¿Cuáles son sus necesidades?
¿Cuál es el contexto del usuario?
www.marketing-on-line.es
23. Usabilidad
ESTRUCTURA y
NAVEGACIÓN
Estructura e interfaz claro y limpio
(evitar el ruido visual)
Mantener una sintonía de color
Enlaces coherentes y funcionales
(evitar links rotos o erróneos)
Imágenes clickables reconocibles
Mantener sitio actualizado
Después de 8 segundos dentro de un sitio, el
50% de los usuarios abandonan.
Tasa de rebote puede pasar de 80% a 20%.
www.marketing-on-line.es
24. Usabilidad
Eye tracking
El eyetracking es una tecnología de seguimiento ocular en auge actualmente
en el mundo de la usabilidad.
Se fijan en la parte superior izquierda - zona superior - hacia abajo y hacia la
derecha
Ignoran o evitan banners y grandes bloques te texto
El texto con formato “divertido” es menos atrayente que el texto convencional
Texto con fondo colorido funciona mejor, que texto negro sobre blanco
Se fijan más en números escritos que números con texto
Importancia de encabezados (en negrita y tipografía más grande)
Varios párrafos cortos mejor que uno largo
Una columna mejor que dos
Las listas mantienen la atención del usuario
Los enlaces y menús de navegación mejor parte de arriba
Los anuncios mejor arriba, parte izquierda o contenido importante
www.marketing-on-line.es
25. Las caras captan la atención de los usuarios:
Herramientas: http://attentionwizard.com
www.marketing-on-line.es
26. Usabilidad
NO
ELEMENTOS INTRUSIVOS
NO se debe abusar de:
Menús y enlaces
Banners
Pop-ups
Música o sonidos de fondo
Elementos interactivos
Animaciones
www.marketing-on-line.es
27. Usabilidad
Disminuir TIEMPO DE CARGA
No más de 5 segundos de carga
No abusar ANIMACIONES FLASH
Comprimir IMÁGENES
Código LIMPIO
Uso MINIATURAS
Utilización CSS
Reducir peticiones al SERVIDOR
Peso ideal de la página 30 KB
www.marketing-on-line.es
28. APARIENCIA DE BOTÓN
“Call to action”
TEXTO DESCRIPTIVO
Botones grandes y vistosos
Espacios en blanco o vacíos (para marcar
prioridades)
REFUERZO CROMÁTICO
No abusar de llamadas de acción (una
principal y las demás secundarias)
Procesos sencillos y claros (dejar
constancia)
Utilizar verbos (que llamen a la acción)
Meter prisa al usuario
EYE CANDY
Utilizar iconos (fácilmente reconocibles)
www.marketing-on-line.es
29. Confianza y Seguridad
Cumplir EXPECTATIVAS
Es muy importante cumplir las expectativas que se generaron en el usuario
cuando hizo click en el anuncio.
Dirigir directamente desde anuncio a la landing
Información presentada de forma directa y clara
Colocar visibles política de privacidad, garantías
de calidad, protección de datos, logotipos de
confianza
Testimonios de clientes
Presentación real del equipo
www.marketing-on-line.es
30. FORMULARIOS
AMIGABLES al usuario
Reducir al máximo nº de campos
Resaltar campos obligatorios
Autocompletar
Ejemplo o descripción de los campos
Evitar fragmentación de la
información
Detallar el motivo del error
Protección de datos
Botón grande y jugoso
www.marketing-on-line.es
31. Test A/B
Herramienta de optimización
Google Website Optimizer
Tener claro qué quieres testear
Saber con qué objetivo o propósito quieres realizar el cambio
Determinar las métricas que vas a utilizar
Testear sólo un cambio de cada vez
Medir antes y después de cada cambio
Ser constantes en la realización de las pruebas
www.marketing-on-line.es
32. TEST A/B
Modelo A Modelo B
Mucho texto Columnas eliminadas
Formulario con muchos campos Imagen de ejemplo de catálogo ampliada
Muchas distracciones a ambos lados Formulario con sólo los campos
Página saturada necesarios
Call to action
Página clara y limpia
www.marketing-on-line.es