Diseño Web Centrado en el Usuario: Técnicas para mejorar la experiencia de usuario en nuestro diseño web - Menús - Formularios - Imágenes y vídeos - CTA - Blog y textos - Tablas de precios - Slider - Testimonios - Velocidad de carga - Eror 404 - Ecommerce

1. DISEÑO WEB CENTRADO EN EL USUARIO
Técnicas para mejorar
la experiencia de usuario en nuestro diseño web
@BegoRomero93 Begoromero.com#DSM2018

2. ¿Quién soy?
Bego Romero
Diseñadora Web especializada en WordPress y diseñadora
gráfica-web. Te ayudo a tener más visibilidad y VENDER
MÁS gracias a un diseño web creativo y único.
@BegoRomero93 Begoromero.com#DSM2018

3. Qué es la experiencia de usuario (UX)
La experiencia de usuario es lo que se percibe o lo que se siente
cuando interactuamos con un producto o servicio.
@BegoRomero93 Begoromero.com
Antes Durante Después
#DSM2018

4. @BegoRomero93 Begoromero.com
Qué es la experiencia de usuario (UX)
#DSM2018

5. @BegoRomero93 Begoromero.com
Qué es la experiencia de usuario (UX)
#DSM2018

6. @BegoRomero93 Begoromero.com
Qué es la experiencia de usuario (UX)
#DSM2018

7. Diseño
UX
@BegoRomero93 Begoromero.com
Qué es la experiencia de usuario (UX)
#DSM2018

8. @BegoRomero93 Begoromero.com
Qué es la experiencia de usuario (UX)
#DSM2018

9. Interfaz de Usuario (UI)
@BegoRomero93 Begoromero.com
La interfaz de usuario son los elementos que permiten que el
usuario interactúe con el producto.
Gran parte de la credibilidad de una web se basa en la estética.
#DSM2018

10. UX vs UI
@BegoRomero93 Begoromero.com
MEJOR UX + MEJOR UI = MAYOR CONVERSIÓN
#DSM2018

11. UX+UI, la unión hace la fuerza
¿Cómo tener un Diseño Web centrado en el usuario?
Entender el contexto y qué necesitan los usuarios
Proceso de Diseño
Evaluación del Diseño
@BegoRomero93 Begoromero.com
Diseño Web Centrado en el Usuario
#DSM2018

12. Menús
Hover y active llamativo
Menú Fijo y Back to Top
@BegoRomero93 Begoromero.com
Diseño Web Centrado en el Usuario
#DSM2018
Destaca lo que te interese
CURSOS

13. Formularios
Reduce los pasos
No seas pesado en las confirmaciones
Ojo con la versión móvil
Opción de recordar datos
@BegoRomero93 Begoromero.com
Diseño Web Centrado en el Usuario
#DSM2018

14. Imágenes y vídeos
Fotos mirando al texto
Diseño Web Centrado en el Usuario
@BegoRomero93 Begoromero.com#DSM2018

15. Imágenes y vídeos
Cuidado con los vídeos automáticos
Ojo con el Parallax en móvil
MOBILE FIRST
“El 50% de los jóvenes españoles solo se conectan a internet por el móvil” Sociedad
Digital, Fundación Telefónica (2017)
@BegoRomero93 Begoromero.com
Diseño Web Centrado en el Usuario
#DSM2018

16. CTA o llamadas a la acción,
¿Qué son y para qué sirven?
@BegoRomero93 Begoromero.com
Diseño Web Centrado en el Usuario
#DSM2018

17. CTA o llamadas a la acción
Visibles y llamativos
Sin elementos que distraigan
Utiliza varios CTA si es largo el contenido
Innova en la frase
@BegoRomero93 Begoromero.com
Diseño Web Centrado en el Usuario
#DSM2018

18. CTA o llamadas a la acción
@BegoRomero93 Begoromero.com
Ojo con los colores
Piensa en tu Público Objetivo
Diseño Web Centrado en el Usuario
#DSM2018

19. CTA o llamadas a la acción
Ojo con los Pop-up
@BegoRomero93 Begoromero.com
Diseño Web Centrado en el Usuario
#DSM2018

20. Blog y textos
Separa los textos y hazlo visual
@BegoRomero93 Begoromero.com
Diseño Web Centrado en el Usuario
#DSM2018

21. Blog y textos
Destaca los beneficios
@BegoRomero93 Begoromero.com
Diseño Web Responsive
El tráfico en el móvil se va a triplicar en el
2021 y tu página deberá estar adaptada.
Haré que tu web se adapte a todos los
dispositivos para no perder este tráfico.
Diseño Web Centrado en el Usuario
#DSM2018

22. Blog y textos
Sé cercano
CTA para aumentar el engagement y click to tweet
Oculta contenidos de poca relevancia en el móvil
Ojo con las tipografías
@BegoRomero93 Begoromero.com
Bloomy Script
Diseñadora Web en WordPress
Arial
Diseño Web Centrado en el Usuario
#DSM2018

23. Tablas de Precios
@BegoRomero93 Begoromero.com
Diseño Web Centrado en el Usuario
#DSM2018

24. No más Slider
Según estudios tan solo un 1% de los usuarios harían click en ellos.
@BegoRomero93 Begoromero.com
Diseño Web Centrado en el Usuario
#DSM2018

25. Testimonios
“Un 92% de la gente confía en una recomendación de un compañero, y el 70% de la gente
confía en una recomendación de alguien que ni siquiera conocen.” Estudio realizado por
Nielsen.
@BegoRomero93 Begoromero.com
Diseño Web Centrado en el Usuario
#DSM2018

26. Velocidad de carga
“El 53% de los usuarios que entran en una página web desde un dispositivo móvil la
abandonan si ésta no carga en 3 segundos.”, Google
@BegoRomero93 Begoromero.com
Diseño Web Centrado en el Usuario
#DSM2018

27. Error 404
@BegoRomero93 Begoromero.com
¡No dejes que el usuario abandone la página!
Diseño Web Centrado en el Usuario
#DSM2018

28. Ecommerce
No empieces a pensar por la Home
Destaca las ofertas y establece un tiempo limitado
@BegoRomero93 Begoromero.com
Diseño Web Centrado en el Usuario
#DSM2018

29. Ecommerce
Chat en directo
Las conversiones se multiplican hasta 16 veces si hay un agente disponible para atender al
cliente.
@BegoRomero93 Begoromero.com
Diseño Web Centrado en el Usuario
#DSM2018

30. Ecommerce
Página de gracias
@BegoRomero93 Begoromero.com
Diseño Web Centrado en el Usuario
#DSM2018
Vídeo
Acceso al curso

31. Ecommerce
Utiliza los filtros
@BegoRomero93 Begoromero.com
Diseño Web Centrado en el Usuario
#DSM2018

32. Ecommerce
Checkout en 1 paso
Esquema del proceso de compra
No obligues al registro
@BegoRomero93 Begoromero.com
Diseño Web Centrado en el Usuario
#DSM2018

33. Ecommerce
Productos sin stock
@BegoRomero93 Begoromero.com
Si vas a tener más stock de ese producto:
- Aviso de Stock por email
- Ofrécele un descuento por la espera
- Mostrar productos similares
Si no vas a tener stock nunca:
- Redirección 301 a un producto similar
Diseño Web Centrado en el Usuario
#DSM2018

34. Constructores de diseño web en WordPress
Extensiones de Google Chrome
@BegoRomero93 Begoromero.com
Herramientas para hacer un diseño web centrado en el usuario
#DSM2018
Web developerPage RulerColorPickWhatFont

35. Reduce tiempo en los procesos y ahorra en
pequeñas tareas
@BegoRomero93 Begoromero.com
Diseño Web Centrado en el Usuario
#DSM2018

36. A veces menos es más...
@BegoRomero93 Begoromero.com
Diseño Web Centrado en el Usuario
#DSM2018
La gente olvidará lo que dijiste, pero nunca olvidará cómo les hiciste sentir.
Maya Angelou

37. ¡Gracias!
Bego Romero
@BegoRomero93 Begoromero.com#DSM2018