tendencias en diseño web 2016: usabilidad y ux

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.