SMZAC 3 - UX y WPO David Ayala

1. ¿Qué es el comportamiento de usuario o UX (User
Experience)?

2. UX = User Experience -> Experiencia de
Usuario
Lo que percibe el usuario al interactuar con
tu web, ya sea de manera positiva o
negativa.
Definición de UX

3. Los efectos negativos de una mala UX
Nuestra web puede caer por culpa de una mala UX
Perdemos usuarios recurrentes
Perdemos búsquedas de marca en Google
Google reconoce cuando los usuarios no están contentos
con tu web

4. ¿Cómo crees que Google detecta esto?
¿Con Analytics?

5. ¿Cómo sabe Google que tienes una mala UX?
El usuario hace una búsqueda, accede a tu web y al poco
tiempo pulsa en el botón «atrás» volviendo a Google.
El usuario hace la búsqueda, accede a tu web, y tras poco
tiempo realiza en Google la misma búsqueda para entrar en
otro sitio diferente al tuyo.
Esto son señales que Google detecta como consecuencia de
una mala experiencia de Usuario.

6. Otros efectos secundarios negativos en SEO
Los usuarios pulsarán en los resultados de nuestra
competencia, aumentando el CTR de nuestra competencia.
Menos usuarios que buscan nuestra marca.
Al no estar satisfechos con nuestra web, si aparecemos en
otra búsqueda diferente, no pincharán en nuestro resultado
(bajada del CTR).

7. Factores que influyen en la UX
Usabilidad
 Web adaptada para todos los
dispositivos
 Navegabilidad
 Funciones
 Utilidad
 Velocidad de carga
Apariencia
 Diseño
 Legibilidad
 Contenidos
Emociones
 Coherencia en las búsquedas
 Sentimiento de marca
 Aspectos emocionales
 Confianza
 Persuasión

8. Web Adaptada para todos los dispositivos
 Versión PC + Versión Móvil vsWeb Adaptativa
Ambas usables pero no generan la misma confianza en el usuario

9. Navegabilidad
Niveles o Cantidad de clicks para acceder a un resultado
(Cuantos menos mejor)
Menús → Equilibrio entre menú SEO y menú usable
Artículos relacionados
Enlazado Interno
Paginación

10. Funciones
¡Que sean intuitivas y sencillas, sino se irán de tu web!
Carrito de la Compra
Buscador
Chat de soporte
Etcétera

11. Utilidad
No sirve de nada tener contenido, si no es útil para el usuario
Por ejemplo: Estar posicionado por “Como perder peso” y que
en la web solo haya un artículo intentando vender unas
pastillas de adelgazamiento cuando el usuario lo que quiere
es información, y no comprar un producto

12. Velocidad de Carga
Pérdida de Ventas
Pérdida de Usuarios
Empeoramiento del
SEO

13. Con un retraso de 100 milisegundos,
Amazon pierde un 1% de sus ingresos
anuales

14. Diseño
El diseño influye en la Velocidad
de Carga
Cambia la distribución del On
Page
Puede generar confianza o
desconfianza
Puede atraer a la gente, o todo lo
contrario

15. Legibilidad
Fuente
Tamaño de letra
Interlineado
Efectos
Negritas

16. Contenidos
Imágenes
Vídeos
Texto
En un ecommerce, una imagen que acompaña
a la descripción del producto siempre viene
bien, sobre todo si es real

17. Coherencia en las búsquedas
Si te posicionas por el texto GRATIS, lo que ofreces en
la web tiene que ser gratis, ya que de lo contrario el
usuario se marchará
Por ejemplo, si posicionas por coches baratos y vendes
Ferraris, tu porcentaje de abandono aumentará

18. Sentimiento de marca
Si un usuario coge confianza con tu marca y se siente identificado
contigo, es probable que se convierta en un usuario recurrente.
Por el contrario si tu marca tiene mala fama, o no inspira confianza,
no solo abandonará tu web, si no que no volverá a entrar aunque
aparezcas en las primeras posiciones
Ejemplo, Coca-Cola

19. Aspectos emocionales
Hacer “sentir” cosas a los usuarios, conseguir que se
sientan conectados de algún modo a tu web o a tu
marca
Por ejemplo, diciendo que vas a donar un euro de
cada venta, o utilizando ejemplos de personas reales
Ejemplo, Aquarius

20. Confianza
Tu web tiene que inspirar confianza
Dando toda la información necesaria
Tener política de privacidad
Poner https://
Datos legales del dueño o de la empresa
Si es un ecommerce, indicar cual es la política de
devoluciones…

21. Persuasión
Escribir con un lenguaje persuasivo
Utilizar palabras que inciten a la acción
Usar imperativos (Compra esto, Haz click aquí,
Deja tu valoración…)

22. Consejos para mejorar la UX
Anticiparnos a las necesidades de los usuarios
Los usuarios deben sentir que tienen el control
de la web
Utiliza los colores con cabeza
Facilidad en uso
No permitas errores ni puntos muertos en la
web

23. Consejos para mejorar la UX
Evita la profundidad en la web para llegar a zonas importantes
No hagas esperar al usuario
Evita que usuario tenga que hacer un master para usar la web
(ponle las cosas fáciles)
Seguridad (sobre todo si es un ecommerce)
Sigue siempre las acciones de los usuarios (su comportamiento)

24. WPO
¿Qué es el WPO?
Web Performance Optimization o lo que es lo mismo, optimizar
los tiempos de carga.
WPO no es solo 1 URL
No sirve con optimizar la home
Una web es un conjunto de muchas URLs y por lo tanto es
necesario optimizarlas todas

25. WPO
¿Por qué es importante?
De cara a usuario
De cara a ventas
De cara al SEO

26. ¿Cómo reducir los tiempos de carga?

27. Medir antes de optimizar
https://developers.google.com/speed/pages
peed/insights/
https://gtmetrix.com/
https://tools.pingdom.com/
Así después podemos comparar con cada
cambio.

28. El hosting es el lugar que va a
alojar nuestra web y por lo
tanto la velocidad de nuestra
web dependerá en parte del
mismo.
La importancia del hosting

29. Tipos de Hosting
Hosting Compartido: En un servidor compartes con
muchas más webs
VPS o Servidor Virtualizado: Servidor dividido en
pequeños servidores virtuales
Servidor Dedicado: Máquina completa para ti

30. Cada hosting tendrá 1 dirección IP
asignada
La IP tiene asignado un país de
procedencia
El país de la IP no importa
Pero si el país del hosting
Las IPs

31. Factores importantes en nuestro
hosting
Disco duro SSD
Memoria RAM (VPS aseguran un
mínimo)
Procesador
Optimización correcta del servidor

32. OPTIMIZACIONES PARA WPO

33. Se produce cuando usan imágenes
nuestras en otras webs consumiendo
recursos de nuestro hosting.
Esto hace que nuestra web vaya más
lenta.
Evitar hotlinking

34. Puedes protegerte mediante Htaccess
Evitar hotlinking

35. Comprime los recursos antes de ser servidos a los
usuarios
Hace que la web cargue más rápido
Tu servidor tiene que tener un módulo de compresión
gzip
Podemos comprobar si está activado en
https://checkgzipcompression.com
Compresión Gzip

36. Se puede activar mediante htaccess
Compresión Gzip

37. Caché de navegador (guarda parte de la información directamente el
navegador en nuestro PC)
Caché Navegador

38. Caché de páginas (de páginas, consultas sql, de
objetos)
MEDIANTE PLUGINS
-> W3 Total Cache
-> WP Super Caché
-> WP Rocket
Caché Páginas

39. Minificación y unificación de JS y CSS
La minificación es eliminar líneas de código que no
se utilizan
La unificación es unir los archivos para hacer 1 sola
llamada en vez de muchas

40. Eliminar comentarios,
saltos de línea,
espacios, divs que no
se utilizan etcétera.
Priorizar contenidos
Optimización de código HTML

41. Mediante códigos en el fichero functions.php del theme
Mediante plugins tipo WP Head Optimizer o WP Head
Clean
Eliminar códigos inservibles del head de WP

42. remove_action('wp_head', 'feed_links_extra', 3 );
remove_action('wp_head', 'feed_links', 2 );
remove_action('wp_head', 'wp_shortlink_wp_head', 10, 0 );
remove_action('wp_head', 'rsd_link');
remove_action('wp_head', 'wlwmanifest_link’);
remove_action( 'wp_head', 'print_emoji_detection_script', 7 );
remove_action( 'admin_print_scripts', 'print_emoji_detection_script' );
remove_action( 'wp_print_styles', 'print_emoji_styles' );
remove_action( 'admin_print_styles', 'print_emoji_styles' );

43. Mediante códigos en el fichero functions.php
del theme
Mediante plugins
Mandar Javascript al Footer

44. function move_scripts_from_head_to_footer()
{
remove_action( 'wp_head', 'wp_print_scripts' );
remove_action( 'wp_head', 'wp_print_head_scripts', 9 );
remove_action( 'wp_head', 'wp_enqueue_scripts', 1 );
add_action( 'wp_footer', 'wp_print_scripts', 5);
add_action( 'wp_footer', 'wp_enqueue_scripts', 5);
add_action( 'wp_footer', 'wp_print_head_scripts', 5);
}
add_action('wp_enqueue_scripts', 'move_scripts_from_head_to_footer');

45. Un usuario que accede a una redirección tarda más
tiempo que si accede a url final
Lo mismo ocurre con versiones móviles, si tienes
miweb.com y m.miweb.com en móvil esa redirect
ralentizará.
Evitar URLs que redireccionen

46. Optimización/Minificación de imágenes y vídeos
Reducir el peso de carga de los vídeos con programas de edición o
subiéndolos a youtube y cogiendo el embed
Las imágenes podemos optimizarlas con Kraken.io versión web o con
plugins.
También podemos con Photoshop directamente en guardar para web

47. Uso de CDN
Content Delivery Network o red de distribución de contenidos
Aligeran carga de servidor
Carga más rápida de recursos
CloudFlare, Amazon

48. Otras Optimizaciones
Usar menos plugins y controlar cuales usamos
Cuantos más plugins usas, más sobre cargas
Wordpress
Controlar carga de cada plugin con P3 Plugin
Performance Profiler
Optimización de base de datos
Reducir peso de base de datos (WP Optimize)

49. Carga asíncrona de imágenes
Cargar “al vuelo” las imágenes que se muestran al
usuario
HTML siempre es más rápido que un CMS
Un CMS carga muchos archivos y funciones y no se
usan siempre todas.
HTML es lo más rápido que puedes tener.

50. ¿Preguntas hasta ahora?