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

1. ¿Cómo diseñar
mi tienda online?

2. ¿cual es el objetivo de mi web?
Ya, pero… definir objetivos es la clave
(Es casi más difícil que cumplirlos)

3. definir una estrategia

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

11. El diseño es
fundamental

12. Usabilidad Accesibilidad
Diseño
gráfico

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

14. definiendo a nuestros usuarios

15. definiendo a nuestros usuarios
• fácil de usar
• amigable
• claro
• intuitivo
• de fácil aprendizaje
Nuestro sitio ha de ser:

16. El diseño y la usabilidad
convierten usuarios en clientes
Usabilidad
Diseño orientado
Accesibilidad
Analítica Web
Conversión+ +
+
+
=

17. usabilidad

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.

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.

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

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.

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

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+ +
+
+
=

35. accesibilidad

36. accesibilidad
• Visibilidad
• Efectividad
• Universal
• Distintos tipos de
dispositivos
• Distintas
posibilidades
• Estándares web

37. accesibilidad
El cumplimiento de estándares
W3C permite:
ver lo mismo en todos los
navegadores
acceder desde cualquier
dispositivo

38. El diseño y la usabilidad
convierten usuarios en clientes
Usabilidad
Diseño orientado
Accesibilidad
Analítica Web
Conversión+ +
+
+
=

39. diseño orientado a la conversón
• Diálogo • Influencia

40. diseño gráfico

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

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

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+ +
+
+
=

48. analítica web

49. fivesecondtest
• Permite evaluar conductas
• Muy útil para evaluar diseños (wireframes)
• Ayuda a la conversión (usabilidad)

50. eyetraking
• Ayuda a la conversión
• Permite ver atenciones máximas
• Permite reconstruir patrones de navegación

51. A/B testing

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

53. google analytics

54. elementos de una
tienda online

55. catálogo de productos

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.

57. carrito de la compra

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

59. promociones y ofertas

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

61. motor de búsqueda

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

63. proceso de compra

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

66. medios de pago

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)

68. información corporativa

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

71. gestión de la tienda online

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

73. Elementos de
influencia

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

75. 10 factores
de éxito

76. Empieza por el principio

77. Pon la tienda en orden

78. Fácil de usar

79. Que sea bonita

80. Buen contenido y bien actualizado

81. Estándares web

82. Publicita tu web a los cuatro vientos

83. Medir, medir, medir

84. No la abandones

85. Tu imagen en la red

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