La digitalización es una realidad cada vez más indispensable para todas las empresas y tener un sitio web que logre combinar un diseño atractivo con una facilidad de uso es clave para el éxito de tu negocio. La pregunta es, ¿cómo asegurarte de que tus páginas web cumplen con las expectativas y necesidades de tus usuarios? ¿Cómo puedes crear un sitio web fácil de usar?

Para responder esta pregunta de la mejor manera, decidimos colaborar con World of Digits, una agencia especializada en UX y UI. Alex Vandebeek, diseñador de UX en World of Digits, ha escrito una serie de 4 artículos dedicados a la experiencia del usuario para facilitaros todas las claves que necesitas para su proyecto.

¡Nos sumergimos en el diseño UX con este primer artículo escrito por Alex!

Índice de contenido

No hay que confundir interfaz de usuario (UI) y experiencia de usuario (UX)

En el mundo del diseño web, a menudo oímos hablar de experiencia de usuario (UX) e interfaz de usuario (UI). Estos dos conceptos a menudo se malinterpretan e incluso a veces se confunden.

Asimilar UX o Experiencia de Usuario (User eXperience en inglés) con UI o Interfaz de Usuario (User Interface) sería asumir que la experiencia del usuario se limita a navegar por sitios con un diseño elegante para realizar búsquedas.

papel del ux y ui

Si todavía tienes dudas sobre las diferencias entre UX y UI, puedes ver este vídeo de menos de 6 minutos.

¿Qué es el Diseño UX o UX Design?

El nuevo método para concebir y diseñar sitios web. Anteriormente, los desarrolladores y diseñadores web tendían a centrarse en la apariencia pura y dura de sus creaciones. Por el contrario, el diseño UX nos obliga a tener en cuenta al usuario final del producto o servicio, lo que se traduce en dar mucha más importancia a la «usabilidad» del producto en cuestión, manteniendo al usuario en mente en todo momento.

Esto significa que, en lugar de poner la apariencia de la web en el centro de las preocupaciones del diseñador, son las necesidades y expectativas del usuario final las que guían el diseño del sitio web. El objetivo es crear un producto «a medida» que se adapte perfectamente al usuario.

Para entenderlo mejor, podemos tomar como ejemplo a Heinz y su botella de ketchup. Podrían comercializar una botella bonita o una botella primordialmente funcional (que aún sea visualmente atractiva).

que es ux

Centrarse en el diseño VS. Centrarse en la experiencia del usuario

UX – U = X

La clave en el UX Design es el usuario. La realidad es que no estás creando un sitio web o una aplicación para ti, sino para un público muy específico. Por lo tanto, es importante tener en cuenta a esta audiencia al diseñar tu nueva web o al rediseñar tu web actual.

Además, para poder crear un producto que se adapte perfectamente a tus usuarios, puede ser interesante realizar pruebas de usabilidad que te permitan obtener la mayor cantidad de comentarios posible. Esto te ayudará a mejorar la web o la aplicación que estás creando.

Puedes, por ejemplo, pedir a 5 de tus usuarios que prueben tu web, que intenten completar ciertas tareas, y verificar si consiguen hacerlo con facilidad o no. La idea es verificar que se las arreglan para usar las características principales que ofrece la web, de la forma más directa posible. Por ejemplo, si tienes un ecommerce, ¿pueden llenar la cesta y efectuar el pago sin atascarse en el camino?

Desarrollar tu web de mano de tus usuarios, teniendo en cuenta sus comentarios, puede ser una forma de mejorar significativamente la experiencia que se les ofrece.

ideafoster-2-captura
Ideafoster
Barcelona, España
4 - 4 recomendaciones
Software de creación de sitios webDiseño WebEstrategia DigitalDesarrollo de la WebDesarrollo Web y Software
Conocer la agenciaarrow_forward
aja_cover
AJA Publicidad
Madrid, España
4.5/5 - 8 recomendaciones
Software de creación de sitios webSEOEstrategia DigitalMarketingDesarrollo de la Web
Conocer la agenciaarrow_forward
digo
CodigoNexo
Madrid, Spain
5/5 - 4 recomendaciones
Software de creación de sitios webDiseño WebSEOCreative & DesignEstrategia DigitalDesarrollo de la Web
Conocer la agenciaarrow_forward
nest
DNest Agency
Madrid, Spain
5/5 - 7 recomendaciones
Software de creación de sitios webSEOCreative & DesignEstrategia DigitalMarketingDesarrollo de la Web
Conocer la agenciaarrow_forward
nume
Numéricco
Zaragoza, Spain
5/5 - 7 recomendaciones
Software de creación de sitios webDiseño WebSEOEstrategia DigitalDesarrollo de la Web
Conocer la agenciaarrow_forward
cats
The Lonely Cats
Alcobendas, Spain
5/5 - 1 recomendación
Software de creación de sitios webDiseño WebSEOCreative & DesignDesarrollo de la Web
Conocer la agenciaarrow_forward
wwwarcelona-cover
WWWARCELONA
Barcelona, Spain
5/5 - 14 recomendaciones
Software de creación de sitios webDiseño WebSEOCreative & DesignEstrategia DigitalMarketingDesarrollo de la Web
Conocer la agenciaarrow_forward
wecome-cover
Welcome
Madrid, Spain
5/5 - 5 recomendaciones
Software de creación de sitios webMarketing de ContenidosMarketing AutomationSEOSEACreative & DesignEstrategia DigitalMarketingDesarrollo Web y Software
Conocer la agenciaarrow_forward
pool
Blackpool Digital
Barcelona, Spain
5/5 - 2 recomendaciones
Marketing de ContenidosSEOCreative & DesignEstrategia DigitalDesarrollo de la Web
Conocer la agenciaarrow_forward
immograf_cover
Immograf
Barcelona, Spain
5/5 - 5 recomendaciones
Software de creación de sitios webDiseño WebSEOEstrategia DigitalDesarrollo de la Web
Conocer la agenciaarrow_forward
wb-cover
Wild Branders
Granollers, Spain
5/5 - 7 recomendaciones
Software de creación de sitios webSEOCreative & DesignEstrategia DigitalMarketingDesarrollo Web y Software
Conocer la agenciaarrow_forward
inbuze-cover
Inbuze, Digital Marketing
Valencia, Spain
5/5 - 3 recomendaciones
Software de creación de sitios webDiseño WebMarketing de ContenidosMarketing AutomationSEOCreative & DesignEstrategia DigitalMarketingDesarrollo de la WebDesarrollo Web y Software
Conocer la agenciaarrow_forward
bcm
BCM MARKETING B2B Barcelona
Barcelona, Spain
5/5 - 7 recomendaciones
SEOEstrategia DigitalMarketingDesarrollo de la Web
Conocer la agenciaarrow_forward
bsl
BSL MARKETING
Bilbao, Spain
5/5 - 1 recomendación
Software de creación de sitios webSEOCreative & DesignEstrategia DigitalDesarrollo de la Web
Conocer la agenciaarrow_forward
modo
MODO
Barcelona, Spain
5/5 - 3 recomendaciones
Marketing de ContenidosSEOCreative & DesignEstrategia DigitalMarketingDesarrollo de la Web
Conocer la agenciaarrow_forward
ware
Syntec Soluciones TI
Barcelona, Spain
5/5 - 5 recomendaciones
Diseño WebEstrategia DigitalDesarrollo Web y Software
Conocer la agenciaarrow_forward
mes
Visual Publinet S.L.
Vigo, Spain
5/5 - 7 recomendaciones
Software de creación de sitios webDiseño WebSEOEstrategia DigitalDesarrollo de la Web
Conocer la agenciaarrow_forward
mutat
EMUTATION NEW MEDIA
Madrid, Spain
5/5 - 0 recomendación
Software de creación de sitios webSEOEstrategia DigitalDesarrollo de la Web
Conocer la agenciaarrow_forward
lab
Creative Hack Lab
Pinto, Spain
5/5 - 4 recomendaciones
Software de creación de sitios webDiseño WebMarketing de ContenidosCreative & DesignEstrategia DigitalDesarrollo de la Web
Conocer la agenciaarrow_forward
paella
PaellaSoft
Valencia, Spain
5/5 - 3 recomendaciones
Software de creación de sitios webDesarrollo de la Web
Conocer la agenciaarrow_forward
versus
Versus Byte
Madrid, Spain
5/5 - 3 recomendaciones
Software de creación de sitios webDiseño WebSEODesarrollo de la Web
Conocer la agenciaarrow_forward
hola
Hola. Creativos
Alicante, Spain
5/5 - 3 recomendaciones
Software de creación de sitios webDiseño WebCreative & DesignDesarrollo de la Web
Conocer la agenciaarrow_forward
bro
Full Time Brothers S.C
Málaga, Spain
5/5 - 8 recomendaciones
Software de creación de sitios webSEODesarrollo de la Web
Conocer la agenciaarrow_forward
naz1
Nazca Networks
El Barco de Ávila, Spain
5/5 - 2 recomendaciones
Software de creación de sitios webDiseño WebSEODesarrollo Web y Software
Conocer la agenciaarrow_forward
soa
Soamee Studio
Madrid, Spain
5/5 - 1 recomendación
Software de creación de sitios webDesarrollo de la WebDesarrollo Web y Software
Conocer la agenciaarrow_forward
lemon
Lemon Makers
Madrid, Spain
5/5 - 0 recomendación
Software de creación de sitios webDesarrollo Web y Software
Conocer la agenciaarrow_forward
enf
Enfusión
Barcelona, Spain
5/5 - 5 recomendaciones
Software de creación de sitios webDiseño WebMarketing de ContenidosSEOCreative & DesignDesarrollo de la Web
Conocer la agenciaarrow_forward
lift
Lifting Group
Barcelona, Spain
5/5 - 0 recomendación
Software de creación de sitios webSEOEstrategia DigitalMarketingDesarrollo de la Web
Conocer la agenciaarrow_forward
deli
Im3diA comunicación
Albacete, Spain
5/5 - 18 recomendaciones
Software de creación de sitios webEstrategia DigitalMarketingDesarrollo de la Web
Conocer la agenciaarrow_forward
woks
TheWokis
Madrid, Spain
5/5 - 0 recomendación
Diseño WebCreative & DesignEstrategia DigitalDesarrollo de la Web
Conocer la agenciaarrow_forward
acorn
Acorn Digital Agency
Barcelona, Spain
5/5 - 8 recomendaciones
Software de creación de sitios webSEOCreative & DesignEstrategia DigitalMarketingDesarrollo de la Web
Conocer la agenciaarrow_forward
lewis
LEWIS Communications
Madrid, Spain
5/5 - 0 recomendación
SEOEstrategia DigitalMarketingDesarrollo de la Web
Conocer la agenciaarrow_forward
rock
BrandStocker
Madrid, Spain
5/5 - 27 recomendaciones
Software de creación de sitios webCreative & DesignDesarrollo de la Web
Conocer la agenciaarrow_forward
lyra
lyra.
Madrid, Spain
5/5 - 7 recomendaciones
Software de creación de sitios webSEOCreative & DesignEstrategia DigitalMarketingDesarrollo de la Web
Conocer la agenciaarrow_forward
pinch
Pinchaaqui.es
Madrid, Spain
5/5 - 7 recomendaciones
Software de creación de sitios webEstrategia DigitalMarketingDesarrollo Web y Software
Conocer la agenciaarrow_forward
elmer
We Are Elmer, Branding & Marketing Digital
Barcelona, Spain
5/5 - 9 recomendaciones
Software de creación de sitios webMarketing de ContenidosSEOEstrategia DigitalDesarrollo de la Web
Conocer la agenciaarrow_forward
benny
VNBenny
Murcia, Spain
5/5 - 1 recomendación
Software de creación de sitios webDiseño WebSEOCreative & DesignEstrategia DigitalMarketingDesarrollo de la Web
Conocer la agenciaarrow_forward
wol
Wontech consultoria tecnologica
Badalona, Spain
5/5 - 0 recomendación
Software de creación de sitios webMarketing AutomationEstrategia DigitalDesarrollo Web y Software
Conocer la agenciaarrow_forward
dream
PREAM Internet, S.L.
Alcala de Henares, Spain
5/5 - 4 recomendaciones
Software de creación de sitios webSEOCreative & DesignDesarrollo de la Web
Conocer la agenciaarrow_forward
hub
AkuaroHub
Barcelona, Spain
5/5 - 3 recomendaciones
Software de creación de sitios webEstrategia DigitalDesarrollo de la Web
Conocer la agenciaarrow_forward
value
Thevaluefactory
Barcelona, Spain
5/5 - 5 recomendaciones
Software de creación de sitios webDiseño WebEstrategia DigitalMarketingDesarrollo de la Web
Conocer la agenciaarrow_forward
syst
A2 System Mobile,Research & Development SL
Málaga, Spain
5/5 - 3 recomendaciones
Software de creación de sitios webDesarrollo de la Web
Conocer la agenciaarrow_forward
cklin
Clickening
Córdoba, Spain
5/5 - 5 recomendaciones
Software de creación de sitios webSEOCreative & DesignDesarrollo de la Web
Conocer la agenciaarrow_forward
deba
DabaSystem
Sabadell, Spain
5/5 - 2 recomendaciones
Software de creación de sitios webDesarrollo de la Web
Conocer la agenciaarrow_forward
komori
Koomori Studio
Madrid, Spain
5/5 - 5 recomendaciones
Software de creación de sitios webSEODesarrollo de la Web
Conocer la agenciaarrow_forward

¿Por qué es tan importante la UX?

Tu página web es el escaparate de tu negocio, y dice mucho sobre ti. Tras una investigación, descubrimos que el 89% de los clientes interrumpen su interacción con un servicio debido a una mala experiencia en el sitio web del servicio en cuestión. Y es lógico, ¿hay algo más frustrante que una página web que funciona mal?

Más allá de esto, la investigación muestra que un usuario tarda 5 segundos de media, desde el momento en que abre una web en decidir si permanece en esta página o no.

Lo que eso significa es que debes diseñar una página web que pueda convencer de un vistazo a sus usuarios de que se queden y entiendan directamente lo que ofreces junto con los valores de tu marca.

Aquí hay dos situaciones que podrían hacer que un usuario abandone tu web:

  1. Supongamos que eres propietario de una tienda y tienes una tienda online donde sus usuarios no pueden encontrar un producto específico por culpa de un mal buscador. En este caso, tus clientes potenciales abandonan tu web sin haber comprado nada.
  2. Un usuario intenta concertar una cita con uno de tus asesores, y se encuentra bloqueado en un formulario largo con demasiadas casillas que llenar. Buscará ayuda en otro lado.

Amazon es un gran ejemplo de lo importante que es el UX Design. Concretamente, la empresa de Jeff Bezos se dio cuenta durante una prueba de usabilidad de que había un problema con uno de los botones en la web. Este botón tenía ciertos defectos de diseño, por lo que los usuarios de Amazon no hacían clic en él, y esto impedía que parte de las ventas de Amazon no llegasen a cerrarse. Al modificar el diseño de este botón, la compañía logró aumentar sus ingresos en 300 millones de dólares. ¡Al modificar un solo botón!

Mejorar la UX

La experiencia del usuario consiste en comprender las necesidades de sus usuarios y crear soluciones basadas en el análisis.

  • Una tasa de conversión óptima
  • Una mejor imagen de marca
  • Una mejor referenciación SEO en los motores de búsqueda
  • Una fidelización de clientes más eficaz
  • Un mejor conocimiento de sus usuarios

En última instancia, mejorar la UX no sólo es bueno para los usuarios, ya que les proporciona una mejor experiencia, sino que también es bueno para la empresa: los usuarios satisfechos tienen más probabilidades de aumentar sus ingresos y tienen una mejor percepción de su marca.

Los 4 niveles ocultos del diseño de la experiencia web

Esta infografía utiliza la metáfora del iceberg para definir la experiencia del usuario. Puede ayudarte a entender mejor el proceso al que se enfrenta el diseñador con cada diseño de ux.

proceso del user experience

¿Cuánto cuesta el UX Design? ¿Qué inversión supone el UX Design?

Supongamos que estás diseñando una web y tiene un problema, hipotéticamente te costaría 1€ resolver este problema durante el proceso de diseño de la página.

Si esperas y encuentras este problema durante el desarrollo de la página, te costaría 5€ resolverlo.

Aún peor, si encuentras este problema cuanto tu página está terminada y publicada, te costaría 30€ encontrar una solución (fuente: Digital Trends, 2015).

Aquí radica la importancia de incorporar el diseño UX al inicio del proceso de creación de tu web. 

10 directrices para el diseño UX

  1. El tamaño óptimo del texto principal debe ser de al menos 16 px
  2. Utilice tipos de letra sin serifa
  3. El ancho de su texto debe estar entre 450 y 650 px (en el ordenador)
  4. Optimice su seo apuntando a una palabra clave por página
  5. Utiliza listas, por ejemplo, con viñetas (como aquí)
  6. Cree sus propias imágenes
  7. Mostrar una opción de acción única
  8. Escriba títulos pegadizos
  9. Evitar las distracciones visuales
  10. Simplifique sus interfaces

¿Cómo poner en práctica el diseño UX?

En esta disciplina, es posible combinar todo un arsenal de métodos y técnicas que permitan investigar las necesidades reales de las personas que utilizarán tu página web y recopilar sus comentarios. La idea es enfrentar tu web con tus usuarios reales para recopilar sus impresiones y trabajar sobre ellas para el diseño de la página.

proceso en práctica del diseño de la interfaz de usuario

Puedes dividirlo en 4 fases:

  • Fase de descubrimiento: ¿Cuáles son las necesidades de tus usuarios? Ponte en su lugar y trata de entender lo que realmente necesitan.
  • Fase de definición: Resume tus conclusiones de la fase anterior y simula el recorrido del usuario basándote en estas conclusiones.
  • Fase de diseño y test: Intenta hacer que tus ideas sean tangibles con prototipos de la web. Haz bocetos sobre papel de las ideas y valídalas con los usuarios creando tests de usabilidad.
  • Fase de análisis: Una vez que tu web esté publicada y online, es importante continuar probando y mejorando tu producto o servicio. Puedes, por ejemplo, utilizar pruebas AB, encuestas o incluso mapas de calor que te permitirán comprender mejor el uso que los usuarios hacen de tu página, pero también descubrir problemas potenciales que hayan pasado desapercibidos en las fases anteriores.

Para cada fase, existen métodos y técnicas que te ayudarán a crear una web perfectamente enfocada en tus usuarios y sus necesidades. Aquí puedes encontrar guías paso a paso que te ayudarán a poner en marcha estas estrategias.

proceso para crear página web facilitar el ux

En las próximas semanas, compartiremos otros artículos que te ayudarán a aprovechar al máximo la UX, y podrás aprender:

  • ¿Cómo encontrar las necesidades reales de los visitantes de tu web?
  • ¿Cómo probar y verificar que tu sitio es fácil de usar?
  • Errores comunes de las páginas web y cómo evitarlos.

¡Estad atentos!