tendencias en diseño web 2016: usabilidad y ux
TRANSCRIPT
TENDENCIAS EN DISEÑO WEB2016
USABILIDADUSER EXPERIENCE
Diseño centrado en los usuarios y la
experiencia de los mismos
Diseño UX se refiere a la funcionalidad, facilidad de uso y
eficiencia.
A nadie le importará lo alucinante que sea tu
diseño, si no es usable al 100%.
“Tu web necesita cargar rápido y debe ser
fácil de usar”
El 74% de los usuarios se sienten frustrados cuando los sitios web no
muestran información relevante a su interés
LOS ESTUDIOS DICEN QUE CUANDO EL TIEMPO DE CARGA DE UNA TIENDA ONLINE SE AUMENTA EN UN SEGUNDO, LAS VENTAS CAEN EN UN 27%.
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?
El posicionamiento SEO no es lo único
importante
“El cliente es el Rey”
¿Por qué es tan importante?
#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.
#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
#1 PRIMERA IMPRESIÓN DE LOS VISITANTES
La navegación debe estar bien estructurada y ser intuitiva
para no perder potenciales clientes.
https://sessioncam.com/
https://www.clicktale.com/
#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.
#3 MEJORAR EL PROCESO DE VENTA
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.
Hitos del proceso
Acciones secundarias
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
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
Entonces¿Cómo mejorar la experiencia del usuario?
#1 FACILITAR LA NAVEGACIÓN Y 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
#2 UTILIZAR ESPACIOS EN BLANCO
Esenciales para mejorar la legibilidad
#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.
Buscar el equilibrio
#3 MEJORAR LA VELOCIDAD DE CARGA
Esperar más de 2 segundos en la carga de una web es una tasa de abandono de hasta el
87%.
#3 MEJORAR LA VELOCIDAD DE CARGA
Servicio de Google para medir la velocidad de tu sitio:
https://developers.google.com/speed/pagespeed/?
hl=en
#3 MEJORAR LA VELOCIDAD 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.
#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.
#4 HACER LLAMADAS A LA ACCIÓN ATRACTIVAS
Utiliza verbos o palabras de acción como Sí, quiero; Inscribirme; Suscríbete
#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.
#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.
#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
#7 ADAPTAR EL DISEÑO A LOS DISPOSITIVOS MÓVILES
Google penaliza a los sitios web que no son mobile friendly
http://responsivedesignchecker.com/
#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
#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
#8 UTILIZAR LISTAS
Cada punto debe mencionar una característica de nuestro producto o servicio enfocado a cómo benefician a nuestro cliente.
#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.
#9 UTILIZAR IMÁGENES ATRACTIVAS
Utilizar fotos de un archivo de fotos gratuito puede reducir la confianza de tu sitio web.
#9 UTILIZAR IMÁGENES ATRACTIVAS
Las fotografías deben despertar emociones positivas en los visitantes
#10 CUIDAR LOS TÍTULOS Y 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.
#10 CUIDAR LOS TÍTULOS Y CONTENIDOS
Los motores de búsqueda dan un mayor peso a los títulos sobre el resto de contenidos.
#10 CUIDAR LOS TÍTULOS Y CONTENIDOS
Los títulos y contenidos deben dar respuesta a lo que los usuarios están buscando
#11 MANTENER UNA COHERENCIA EN EL SITIO WEB
Coherencia significa hacer que todos los elementos de la página web sean consistentes entre sí.
#11 MANTENER UNA COHERENCIA EN EL SITIO WEB
Consistencia entre las diferentes páginas web y en la propia página.
#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.
OTROS ELEMENTOS A TENER 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.