Este documento ofrece consejos sobre diseño web centrado en el usuario y la experiencia del usuario. Algunos de los puntos clave discutidos incluyen la importancia de la usabilidad, la velocidad de carga del sitio, y adaptar el diseño a dispositivos móviles. También recomienda mejorar la navegación y búsqueda de información, utilizar imágenes atractivas y cuidar los títulos y contenidos para satisfacer las necesidades y expectativas de los usuarios.

1. TENDENCIAS EN DISEÑO WEB
2016

2. USABILIDAD
USER EXPERIENCE

3. Diseño centrado en los usuarios
y la experiencia de los mismos

4. Diseño UX se refiere a la
funcionalidad, facilidad de uso y
eficiencia.

5. A nadie le importará lo
alucinante que sea tu diseño,
si no es usable al 100%.

6. “Tu web necesita
cargar rápido y debe ser
fácil de usar”

7. El 74% de los usuarios se sienten frustrados
cuando los sitios web no muestran
información relevante a su interés

8. LOS ESTUDIOS DICEN QUE CUANDO ELTIEMPO DE CARGA DE
UNATIENDA ONLINE SE AUMENTA EN UN SEGUNDO,
LASVENTAS CAEN EN UN 27%.

9. PRIMERO PREGUNTAR
Cuál es el objetivo de tu sitio web y que quieres
comunicar.
¿Es el mensaje que transmites “fácil” de entender por
tu cliente?
¿Es “fácil” de encontrar la información en tu sitio web?
¿Es “fácil” buscar información en tu sitio web?
¿Es “fácil” navegar por tu sitio web?
¿Está tu sitio web adaptado a los dispositivos móviles?

10. El posicionamiento SEO
no es lo único
importante

11. “El cliente es el Rey”

12. ¿Por qué es tan importante?

13. #1 PRIMERA IMPRESIÓN DE LOS
VISITANTES
Los usuarios sólo tardan 2,6 segundos a escanear
toda una página web y fijarse en elementos que resalten
como el menú, el logo, las imágenes, etc.

14. #1 PRIMERA IMPRESIÓN DE LOS
VISITANTES
• El color: debe ser atractivo y agradable.
• El contraste: debe ayudar a la legibilidad del contenido
• La imagen principal: debe responder a las expectativas
del usuario cuando entra a tu sitio web

15. #1 PRIMERA IMPRESIÓN DE LOS
VISITANTES

16. La navegación debe estar bien
estructurada y ser intuitiva
para no perder potenciales
clientes.

17. https://sessioncam.com/
https://www.clicktale.com/

18. #2 ENCONTRAR LO QUE BUSCAMOS
Primero debemos entender:
•quién es nuestro cliente ideal,
•qué está buscando en nuestro sitio web
• y de donde viene.

19. #3 MEJORAR EL PROCESO DEVENTA
Para mejorar la experiencia de usuario no sólo
es importante que los usuarios conviertan, sino
también es importante entender cómo los
usuarios navegan por nuestro sitio web para
acabar realizando lo que queremos que hagan.

20. Hitos del proceso
Acciones secundarias

21. Hitos de proceso:
Son los elementos que pueden motivar a la
conversión final:
• Velocidad de carga del sitio web
• Desplazamiento hasta el final del sitio web
• Número de páginas visitadas
• Click-Through-Rate (CTR) de las páginas clave

22. Acciones secundarias:
Estas no son el objetivo principal del sitio web,
pero son acciones deseables que los visitantes
deben realizar para llegar a completar la
conversión final. Por ejemplo:
• Ver un vídeo o tutorial
• Visitar el área de preguntas frecuentes
• Interactuar con plugins interactivos

23. Entonces
¿Cómo mejorar
la experiencia
del usuario?

24. #1 FACILITAR LA NAVEGACIÓNY LA
BÚSQUEDA DE INFORMACIÓN
• Estructurar nuestra web: Reducir
subsecciones fusionándolas.
• Incluir un buscador destacado.
• Utilizar en la barra lateral del blog enlaces a
categorías o etiquetas destacadas

27. #2 UTILIZAR ESPACIOS EN BLANCO
Esenciales para mejorar la
legibilidad

28. #2 UTILIZAR ESPACIOS EN BLANCO
El espacio en blanco aumentará
el protagonismo de los puntos
que deseamos destacar y que nuestro
sitio web parezca más abierto,
fresco y moderno.

30. Buscar el equilibrio

31. #3 MEJORAR LAVELOCIDAD DE CARGA
Esperar más de 2 segundos en
la carga de una web es una tasa
de abandono de hasta el 87%.

32. #3 MEJORAR LAVELOCIDAD DE CARGA
Servicio de Google para medir la
velocidad de tu sitio:
https://developers.google.co
m/speed/pagespeed/?hl=en

34. #3 MEJORAR LAVELOCIDAD DE CARGA
¿Cómo podemos mejorar el tiempo de carga de nuestro
sitio web?
• Cambiando el tamaño o eliminando imágenes de gran
tamaño.
• Reduciendo el número de plugins de nuestro sitio web.
• Eliminando archivos flash que empeoran el rendimiento de
nuestra web.
• Utilizar la memoria caché para minimizar el tiempo de
carga cada vez que el usuario entra en nuestro sitio web.

35. #4 HACER LLAMADAS A LA ACCIÓN
ATRACTIVAS
Los usuarios están acostumbrados a
seguir señales visuales que
determinan qué contenido es
importante para ellos.

36. #4 HACER LLAMADAS A LA ACCIÓN
ATRACTIVAS
Utiliza verbos o palabras de acción como
Sí, quiero; Inscribirme; Suscríbete

38. #5 CORREGIR LAS FALTAS GRAMATICALES
La experiencia de usuario está
enfocada en la credibilidad y
confianza del sitio web a través
del diseño y la comunicación.

40. #6 CORREGIR LOS ENLACES ROTOS
O PÁGINAS 404
Si el usuario se encuentra con un enlace
roto o una página no encontrada, hará
que su experiencia sea negativa.

42. #7 ADAPTAR EL DISEÑO A LOS
DISPOSITIVOS MÓVILES
El 25% del tráfico de un sitio
web viene a través de un
dispositivo móvil

43. #7 ADAPTAR EL DISEÑO A LOS
DISPOSITIVOS MÓVILES
Google penaliza a los sitios web
que no son mobile friendly

44. http://responsivedesignchecker.com/

45. #8 UTILIZAR LISTAS
Las listas permiten a los usuarios
disponer rápidamente de la
información relevante, formas de
resolver problemas y características
del producto

46. #8 UTILIZAR LISTAS
Ayudan a los usuarios hacerse una idea
de la propuesta de valor en pocos
segundos y obtener la información
que están buscando de una forma fácil

48. #8 UTILIZAR LISTAS
Cada punto debe mencionar una
característica de nuestro producto o
servicio enfocado a cómo benefician a
nuestro cliente.

49. #8 UTILIZAR LISTAS
Los usuarios quieren saber:
• Cómo tu producto les puede hacer
más sencilla sus vidas.
• Cómo tu producto los ayuda en su
vida diaria o en sus respectivos
negocios.

50. #9 UTILIZAR IMÁGENES ATRACTIVAS
Utilizar fotos de un archivo de
fotos gratuito puede reducir la
confianza de tu sitio web.

51. #9 UTILIZAR IMÁGENES ATRACTIVAS
Las fotografías deben despertar
emociones positivas en los
visitantes

53. #10 CUIDAR LOSTÍTULOSY CONTENIDOS
Antes de empezar a crear contenidos para
nuestro sitio web, lo primero que tenemos
que hacer es pensar cuál es el objetivo
y qué queremos comunicar a nuestra
audiencia en nuestro sitio web.

54. #10 CUIDAR LOSTÍTULOSY CONTENIDOS
Los motores de búsqueda
dan un mayor peso a los títulos
sobre el resto de contenidos.

55. #10 CUIDAR LOSTÍTULOSY CONTENIDOS
Los títulos y contenidos deben dar respuesta
a lo que los usuarios están
buscando

57. #11 MANTENER UNA COHERENCIA
EN EL SITIO WEB
Coherencia significa hacer que
todos los elementos de la página
web sean consistentes entre sí.

58. #11 MANTENER UNA COHERENCIA
EN EL SITIO WEB
Consistencia entre las diferentes
páginas web y en la propia
página.

59. #11 MANTENER UNA COHERENCIA
EN EL SITIO WEB
La incoherencia en el diseño de tu
web puede hacer disminuir la
percepción de calidad del
producto y/o servicios.

61. OTROS ELEMENTOS ATENER EN CUENTA…
• Formularios web que hagan el proceso de venta fácil.
• Incluir testimonios de otros clientes para dar más credibilidad.
• Colocar logos de nuestros clientes para mejorar la confianza.
• Incluir widgets de nuestras redes sociales que muestren
nuestra parte personal.
• Diferenciar los enlaces del texto. Normalmente, los usuarios
están acostumbrados a ver los enlaces de color azul y el texto
en negro.
• Hacer clicable el logo de tu web y te dirija a la página de inicio.