Charla sobre usabilidad, accesibilidad y diseño. Aspectos a tener en cuenta a la hora de diseñar una tienda online.
Jornadas #mescomercio en Cámara de Comercio de Valladolid. Noviembre 2010
4. Usuarios de Internet
Encuentran nuestra web
Navegan por nuestra web
Encuentran el producto
que 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
5. 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
6. • Llegan usuarios
• Pero no se convierte en
clientes
• Problemas de usabilidad
• Desconfianza
• Falta de Información
• Potencial de crecimiento
exponencial
embudo “descompesado”
7. • 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”
8. El posicionamiento y el marketing
online atraen usuarios a la web
SEO
Social Media
SEM
Analítica Web
Atraer tráfico+ +
+
+
=
9. El diseño y la usabilidad
convierten usuarios en clientes
Usabilidad
Diseño orientado
Accesibilidad
Analítica Web
Conversión+ +
+
+
=
10. El tráfico y la conversión:
las claves del éxito
+ +
+ = Éxito OnlineAtraer Tráfico Conversión
13. 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
18. 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
19. 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
20. 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?
21. 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.
22.
23. 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.
24.
25. 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).
26.
27.
28. 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.
29.
30. …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
31.
32. …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
33. …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
34. El diseño y la usabilidad
convierten usuarios en clientes
Usabilidad
Diseño orientado
Accesibilidad
Analítica Web
Conversión+ +
+
+
=
41. 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
42. 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
43.
44. 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
45.
46. 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
47. El diseño y la usabilidad
convierten usuarios en clientes
Usabilidad
Diseño orientado
Accesibilidad
Analítica Web
Conversión+ +
+
+
=
52. 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
56. 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.
58. 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
60. 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
62. 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
64. 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:
65. 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
67. 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)
69. 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
70. 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
72. 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
74. 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