Piensa en un sitio web o aplicación que te encante. ¿Qué es lo que más te gusta? ¿Es la facilidad de recopilar información relevante? ¿Es la manera en que puedes comprar algo con un solo clic (y recibirlo mañana) o qué tan rápido responde tus preguntas?

Ahora piensa en las personas que crearon ese sitio web: ¿cuál fue su objetivo?

Intentaban crear un sitio que tuviera las características que más te gustan: fácil de usar, que entregue de manera efectiva la información que necesitas y que te permita tomar decisiones inteligentes de acuerdo con tus desafíos o inquietudes.

<< Aprende a crear un sitio web de alto rendimiento en la certificación de CMS  Hub para marketers >> 

El concepto de UX se habla con mayor frecuencia en términos de tecnología, como smartphones, computadoras, software y sitios web. Esta es la razón por la cual la experiencia de usuario no es solo un campo bastante nuevo, sino también variable: cambia rápidamente debido a los avances tecnológicos, a los nuevos tipos de interacciones y a las preferencias del usuario.

No es ningún secreto que los clientes de hoy quieren formas rápidas y simples de satisfacer sus necesidades y resolver sus puntos débiles. Por ejemplo, 53% de las veces los usuarios de móviles se irán de una página web que tarde más de 3 segundos en cargar. Es por eso que la UX se ha vuelto tan importante.

Tu empresa probablemente cuenta con un sitio web, ya sea que te desenvuelvas o no en la industria de la tecnología. Y los clientes podrían perder el interés en tu marca en cuestión de segundos si no lo encuentran útil y fácil de usar. De hecho, la mayoría de los visitantes pueden determinar si quieren o no permanecer en un sitio en menos de 15 segundos.

Aquí conocerás más sobre la importancia del campo de la UX, qué hace un diseñador de esta área y por qué tu negocio puede beneficiarse de este tipo de diseño.

El diseño UX consiste en crear productos «que provean experiencias significativas y relevantes», de acuerdo con la Fundación para el Diseño Interactivo. Dentro del diseño UX, hay algunas categorías diferentes.

4 tipos de diseño UX

1. Diseño de interacción

Un subconjunto del diseño UX es el diseño de interacción (IxD). Se define como... ¡sí, lo adivinaste! La interacción entre un usuario y producto, donde el objetivo es que sea agradable para el usuario.

2. Diseño visual

En el diseño visual, una de las principales claves son comprobar cómo se ve y cómo se siente navegar por una aplicación; además, cubre otro tipo de aspectos para la experiencia del usuario como la eficiencia, estado de ánimo, nivel de entretenimiento o placer. Para tener un diseño visual exitoso, los principios de diseño artístico incluyen: equilibrio, espacio y contraste. El color, la forma, el tamaño y otros elementos también afectan el diseño visual.

3. Investigación del usuario

Consiste en que las empresas determinen qué quieren y necesitan sus clientes y usuarios. En esencia, tu sitio web debe resolver un problema, por lo que este es un paso importante para detectar qué requieren exactamente tus usuarios. Sin este, tus diseños están basados solo en conjeturas.

4. Arquitectura de la información

Los diseñadores usan la arquitectura de la información para estructurar y etiquetar el contenido de modo que los usuarios puedan encontrar la información fácilmente. Se usa en los sitios web, teléfonos inteligentes, aplicaciones e incluso en lugares físicos. La facilidad de uso y la capacidad de descubrimiento son dos factores importantes, por lo que están tan estrechamente relacionadas con el diseño UX.

Piensa en el mapa del metro de la Ciudad de México. Este es un gran ejemplo de arquitectura de información, pues ayuda a las personas a entender cómo llegar de un lugar a otro, a través del uso de simbologías, colores y texto. De acuerdo con el Instituto de Arquitectura de la Información, «Si estás haciendo cosas para otros, estás practicando la arquitectura de la información».

Experiencia de usuario: mapa del metro de la Ciudad de México

Imagen de Metro CDMX

Los 5 principios del diseño UX

La experiencia de usuario es un campo en constante cambio, pero los principios fundamentales del diseño UX siguen siendo los mismos. Los diseñadores tienen que determinar lo que quieren en términos de equilibrio visual. Además, ser claros y concisos es crucial... ¡menos es más! El objetivo es que tu diseño sea intuitivo y deba satisfacer las necesidades del usuario.

Si bien la experiencia de usuario está sujeta a tendencias y nuevas tecnologías, hay algunos principios básicos que permanecen igual. Estos ayudan a los diseñadores a analizar varios problemas a través de una metodología consistente y enfocada.

  1. Sé contextual: deseas lograr que las personas sepan exactamente dónde están en su recorrido de usuario. Nunca deberían sentirse perdidas o abrumadas. Tu diseño está ahí para guiarlas a lo largo de su viaje.
  2. Sé humano: ningún usuario disfruta sentir que está interactuando con una máquina. Obtendrás la confianza del usuario final si le muestras la personalidad y la accesibilidad de tu marca.
  3. Sé localizable: los usuarios no quieren perder el tiempo. Con un diseño UX exitoso tu trabajo será fácil de encontrar y navegar. 
  4. Sé fácil: ser coherente y directo ayudará mucho a tus usuarios. Construye relaciones con ellos brindándoles experiencias agradables y fáciles.
  5. Sé simple: evita los elementos y descripciones innecesarios. Ve directo al punto. Seamos honestos... hoy en día, todos tienen un periodo de atención corto.

Las 5 etapas del proceso de diseño de experiencia de usuario

Generalmente, hay diversas etapas del proceso de diseño UX a considerar. El diseño UX adopta un enfoque centrado en el humano para así crear cosas útiles para los usuarios. Se trata de que consideres las necesidades de las personas para las que estás diseñando, idees una amplia gama de soluciones para resolver el problema que enfrentan, crees prototipos para que los usuarios los prueben y, finalmente, implementes la mejor solución para el usuario. Si observas el problema desde la perspectiva del usuario y diseñas con él en mente, crearás soluciones que querrá adoptar.

Ahora veamos más de cerca cada etapa del proceso de diseño:

1. Comprende los puntos de dolor de tu usuario

Dado que el diseño de UX se trata de mejorar la experiencia del usuario, tu primer paso es descubrir cuáles son los desafíos y expectativas de los usuarios. Una vez que comprendas cuáles son los problemas, podrás resolverlos.

En un artículo para Career Foundry, Rosie Allabarton destaca el papel de la empatía en esta etapa del proceso de diseño de UX. Dice:

«Trabajarás con grupos de usuarios con diversos orígenes y que traen experiencias diversas con ellos. Tu trabajo es tratar de entender por qué se comportan de la manera en que lo hacen; no tratar de cambiar ese comportamiento o influir en él, sino acomodarlo en el producto».

Hay algunos enfoques que puedes usar para recopilar tu investigación sobre los usuarios:

Entrevistas

Una de las mejores formas de entender a tu audiencia es tenerla frente a frente. Las entrevistas de usuarios generalmente implican que un grupo de usuarios navegue a través de un sitio o producto existente tuyo o incluso de un competidor, mientras los miembros de tu equipo observan.

De esa manera, tu equipo puede ver cómo las personas interactúan con un sitio web o producto y recopilar comentarios en tiempo real. Esto puede ayudarte a descubrir áreas de mejora que tú y tu equipo no habían notado. Tal vez los usuarios ni siquiera miren el botón de llamada a la acción en tu página de inicio, o quizá quieran un recuadro de búsqueda para navegar por el sitio web. Luego, puedes incorporar este feedback en el proceso de diseño.

Si las entrevistas en persona no son una opción, siempre puedes realizar sesiones de prueba de forma remota.

Encuestas en línea

Mientras que las entrevistas son ideales para obtener información valiosa de un grupo pequeño de usuarios, las encuestas en línea son una excelente manera de recopilar comentarios de una audiencia más amplia.

Las encuestas consisten en una serie de preguntas específicas enviadas a una audiencia muestra. Estas preguntas pueden adoptar una variedad de formatos, que incluyen:

  • «Sí» o «no»
  • Opción múltiple
  • Casillas de verificación
  • Opciones de menú desplegable
  • Clasificación
  • Escalas de clasificación
  • Respuestas de cuadro de texto

Las encuestas en línea generalmente se distribuyen por medio de formularios y luego se recopilan en una base de datos para que tu equipo y otras partes interesadas puedan revisarlas.

2. Haz user personas (representaciones de usuario)

Ahora que tienes la investigación de usuarios, querrás resumirla. Crear user personas es una excelente manera de hacerlo. También conocidos como buyer personas, son representaciones semificticias de tus clientes ideales basadas en datos e investigaciones. Te ayudan a comprender mejor a tus clientes actuales y prospectos, de modo que puedas personalizar tus productos, así como tus servicios, contenido y mensajes para satisfacer sus necesidades, comportamientos y preocupaciones específicas.

Experiencia de usuario: ejemplo de buyer persona

Los buyer personas ayudan a garantizar que todos los miembros de tu equipo comprendan, recuerden y se centren en el usuario final durante todo el proceso de diseño.

Para aprender a investigar y crear buyer personas, ingresa al Generador gratuito de buyer personas de HubSpot.

3. Mapea los recorridos del usuario

Aunque es útil clasificar diferentes tipos de user personas, cada usuario es único. Eso significa que diferentes usuarios interactuarán con tu sitio de diferentes maneras, incluso si tienen el mismo objetivo.

Digamos que están buscando postularse para un puesto en tu empresa. Algunos pueden navegar en tu página de inicio, hacer clic en «Trabaja con nosotros» en la barra de navegación y luego buscar las plazas laborales. Otros pueden buscar el nombre de tu empresa más «vacantes» en Google.

Tu objetivo es identificar los objetivos principales de los usuarios y asegurarte de que puedan cumplirlos. Un sitio de comercio electrónico, por ejemplo, deberá identificar todas las diferentes formas en que un cliente podría querer completar una compra y asegurarse de que el sitio les ayude en cada paso. Asimismo, debe mejorar la funcionalidad para que un cliente pueda completar una compra en un equipo de escritorio, en una tableta o en un dispositivo móvil, entre otros aspectos.

4. Realiza esquemas de página

Ahora que has trazado los recorridos de tus usuarios en papel, es hora de trazarlos en tu producto real con prototipos y estructuras. Un esquema de página (wireframe) es como un boceto de tu producto o web.

Al crear un esquema para tu sitio web o producto, puedes trazar cómo deseas mostrar sus características principales, asignar los espacios y presentar las imágenes y contenido. Verás cómo este diseño ayuda (o dificulta) al usuario lograr sus objetivos antes de introducir los elementos de diseño, como los esquemas de color.

Evaluar la funcionalidad de tu producto y el comportamiento previsto del usuario en esta etapa puede ayudarte a encontrar problemas potenciales o funciones faltantes que podrían obstaculizar las conversiones o las ventas más adelante. De esa manera, puedes realizar cambios fácilmente, obtener la aprobación de otras partes interesadas y pasar con confianza a la etapa siguiente del proceso de diseño.

Los wireframes varían en complejidad. Puedes hacerlos a mano o con una herramienta de diseño. Este es un ejemplo:

Experiencia de usuario: ejemplo de un wireframe o esquema de página

Imagen vía Uxables

5. Inicia la fase de prototipos

Piensa en un prototipo como el borrador final de tu producto o sitio web antes de que comience la codificación. No es la versión final, pero está lo suficientemente cerca como para que puedas probar completamente el producto antes de su lanzamiento y demostrarlo a la gerencia y otras partes interesadas.

A diferencia de una estructura de página, un prototipo incluirá fuentes, imágenes, iconos y colores. No obstante, esta fase está centrada en los flujos de usuarios más que en la apariencia. Los prototipos serán interactivos, lo que te permitirá, así como a los usuarios y a otras partes interesadas, experimentar cómo funciona el producto en la vida real.

En esta fase ejecutarás más pruebas de usuario para descubrir si hay problemas; tal vez tu proceso de pago requiere demasiados clics o es difícil navegar por la página de inicio. Es probable que experimentes con la navegación y otras funciones en esta etapa, y produzcas muchas iteraciones.

Para crear un prototipo y las iteraciones posteriores, utiliza una herramienta especializada como Adobe XD, InVision o Justinmind. Este es un ejemplo de un prototipo creado con Justinmind:

Diseño UX: prototipo de página web de escritorio y móvil en Justinmind

Imagen de Justinmind

Una vez superado este punto, podrás enviar tu prototipo a los diseñadores y desarrolladores que crearán la interfaz de usuario. Más adelante verás qué es una interfaz de usuario y en qué se diferencia de la experiencia de usuario.

4 entregables en el diseño UX

Una vez completado el proceso de diseño UX, el diseñador y el equipo deben presentar una lista de entregables para su revisión ante un cliente o un equipo interno. Necesitan mostrar el proceso y que aprueben sus ideas.

La documentación UX es una parte crítica del proceso de diseño. Esta consiste en los registros del trabajo realizado. Ayudan a los diseñadores a comunicar de manera efectiva sus ideas de diseño y los hallazgos de investigación, para dejar en claro a las partes interesadas por qué hacen recomendaciones de cambios y mejoras.

1. Investigación del usuario

Las necesidades, tendencias y motivaciones se pueden determinar por medio de diferentes tipos de investigación del usuario. Esto puede incluir datos cuantitativos y cualitativos obtenidos en sesiones de prueba y grupos focales. Te permiten detallar los comentarios sobre los flujos del usuario en el proceso de registro, el proceso de onboarding de usuarios y las consultas de servicio al cliente.

El objetivo es tener un análisis detallado de lo que está funcionando en el sitio y lo que podría mejorarse. Todo tiene que estar respaldado por la información recopilada de los usuarios. Como ya sabes, los investigadores pueden crear buyer personas basados en datos de usuarios reales para determinar con precisión quién usará su dispositivo, sitio web o aplicación. Gracias a estos datos, los diseñadores entienden y se identifican con el usuario.

2. Evaluación de la competencia

Evaluar las fortalezas y debilidades de tus competidores es una forma de mejorar tu propia estrategia de experiencia del usuario. Puedes hacerlo mediante la creación de un informe de análisis competitivo, que detalle el diseño de interacción de tu competencia y proporcione un análisis de los riesgos y las oportunidades que perdió. Tu negocio puede aprovechar estos aspectos.

3. Diseño de interacción

Un diseño de interacción puede ser un prototipo para que las personas puedan revisar cómo ocurrirían las interacciones con el sitio. Muestra cómo los usuarios completan las tareas clave, obtienen información, usan un producto; cuál es el flujo de búsqueda de información y la facilidad con la que el producto puede utilizarse.

Es recomendable que tu prototipo sea lo más similar posible al producto final para que puedas tener una aprobación del diseño antes de comenzar a construirlo.

4. Arquitectura de la información

La arquitectura de la información es el proceso de tomar cierta información y organizarla de una manera fácil de entender. Esto es especialmente importante para los sitios web grandes, ya que necesitas comprender qué contenido existe y cómo organizarlo de una manera que tenga sentido para tus visitantes.

El resultado puede ser un inventario de contenido, mapa del sitio con navegación sugerida o varios flujos de usuarios que revelen cómo los visitantes se mueven a través de un sitio.

Arquitectura de la información de un sitio web para diseño UX

Imagen de Adobe

Ahora que sabes de los diferentes entregables que un cliente o gerente podría pedirle a un diseñador de experiencia de usuario, conoce más de cerca la investigación de UX.

¿Qué es la investigación de experiencia de usuario?

Sería imposible definir el enfoque de lo que el usuario necesita y quiere sin investigación. Esta consiste en la investigación de los usuarios y lo que necesitan, que a su vez informa el proceso de diseño UX. Las empresas y los diseñadores utilizan esta investigación para llegar a conclusiones específicas sobre lo que funciona para los usuarios y lo que debe cambiarse.

Hay varias formas en que las empresas y los diseñadores realizan la investigación UX.

Pruebas de usabilidad

Las pruebas de usabilidad evalúan el éxito de un producto probándolo en usuarios reales. Brindan a las compañías información real sobre cómo las personas usan un producto o sistema y cómo funciona para ese usuario. Hay dos métodos de prueba principales:

  • Las pruebas Hallway son una forma rápida y económica para que las empresas e investigadores obtengan información de usuarios que tal vez no conozcan la empresa o sus productos. Varios individuos al azar usan los productos y dan su opinión sobre su experiencia.
  • Las pruebas de usabilidad remota permiten a las empresas investigar con los usuarios en su entorno natural (como en su hogar u oficina). Estas pruebas se pueden moderar de cualquier manera que la empresa elija.

3 herramientas de pruebas de usabilidad

Las herramientas de prueba de usabilidad permiten a los investigadores y diseñadores recopilar comentarios precisos de los usuarios. Así logran analizarlos para realizar los cambios basados ​​en datos. Si estás buscando una herramienta que pueda ayudarte a probar la facilidad de uso de tu sitio o producto, consulta estas opciones:

1. Crazy Egg

Herramienta de pruebas de usabilidad para UX: Crazy Egg

Imagen de Crazy Egg

Esta herramienta permite a las empresas ver exactamente en qué hacen clic los usuarios mientras están en su sitio web. También registra exactamente de dónde provienen los visitantes del sitio, incluida la ubicación geográfica y si fueron referidos desde otro sitio.

2. Hotjar

Herramienta de pruebas de usabilidad para UX: Hotjar

Imagen de Hotjar

Esta herramienta combina análisis y comentarios para brindar una visión general sobre las formas de mejorar la experiencia del usuario. Lo hace mediante el uso de mapas de calor, tasas de visitantes, embudos de conversión, entre otras funciones.

3. Userfeel

Herramienta de pruebas de usabilidad para UX: Userfeel

Imagen de Userfeel

Userfeel es un servicio en línea que te ayudará a entender rápidamente por qué cierta página recibe más o menos atención. Una de sus características más atractivas es que puede analizar sitios de 40 idiomas, por lo que te servirá con tus campañas y clientes globales.

¿Cómo mejorar la experiencia del usuario?

Por medio de la investigación y de las pruebas antes mencionadas, la experiencia de usuario siempre se puede mejorar.

Algunas de las formas más comunes para hacerlo incluyen: adoptar un enfoque consultivo para mejorar la experiencia, determinar los llamados a la acción (CTA), implementar un diseño web responsive, considerar la ley de Fitts (en un momento hablaremos más acerca de esto), evitar una entrada abrumadora de datos, entre otras.

Ley de Fitts para mejorar la experiencia del usuario

La ley de Fitts es un modelo predictivo que determina la cantidad de tiempo que le toma a un usuario específico mover su mouse o cursor a un área objetivo dentro de una página web.

Existen varias versiones de la ley de Fitts, pero todas giran en torno a la idea general de que «El tiempo requerido para moverse a un objetivo depende de la distancia a él, pero se relaciona inversamente con su tamaño». La ley de Fitts se usa ampliamente en el diseño UX para mejorar la ergonomía, además de la usabilidad para los usuarios.

Aquí hay un ejemplo de esto: la Touch Bar en MacBook Pro de Apple es una pantalla táctil sobre el teclado que acelera la experiencia del usuario al usar Google, marcar una página, cambiar el brillo de la pantalla, el volumen y más. Las opciones de la barra táctil cambian según lo que estés navegando, ya sea una aplicación, un sitio o incluso solo la configuración personal.

Video de Adiabático

Con la barra táctil, la experiencia de usuario se simplifica porque muchas configuraciones de uso común se encuentran en una ubicación compacta. La ley de Fitts establece que cuanto más lejos y más pequeño es un objeto o botón para un usuario, más difícil es que ese usuario haga clic en él. Es por eso que la barra táctil es un gran ejemplo de tomar esta regla y aplicarla con éxito a tu dispositivo para mejorar la experiencia del usuario.

7 herramientas de diseño UX

Ya sea que estés investigando, creando prototipos o desarrollando guiones gráficos, existen múltiples herramientas UX disponibles para ayudarte durante el proceso de diseño. De hecho, hay tantas herramientas en el mercado (gratuitas o de suscripción), que puede ser un tanto abrumador para los diseñadores saber cuál necesitan exactamente. Para comenzar, aquí hay una lista de algunas herramientas populares y valiosas que podrían servirte:  

1. Adobe Fireworks

Adobe Fireworks CS6 ofrece a los diseñadores web una forma de crear gráficos para sus páginas web sin entrar en el código o los detalles de diseño.

Hay algunas razones por las cuales los diseñadores de UX usan Adobe Fireworks: la herramienta tiene una precisión de píxeles impresionante, tiene capacidades de compresión de imágenes (JPEG, GIF, etc.), permite a los usuarios crear sitios web funcionales y desarrollar vectores. Esta es una gran opción, especialmente si ya estás familiarizado con otros programas de Creative Cloud.

2. Adobe XD

Con Adobe XD puedes diseñar sitios web y aplicaciones móviles, así como crear prototipos, wireframes y diseños vectoriales. Los usuarios pueden compartir prototipos interactivos en múltiples plataformas, incluidas Windows, Mac, iOS y Android, por lo que es perfecto para la colaboración en equipo.

3. Axure

Axure RP Pro es otra gran herramienta de diseño UX, que además es gratuita. Axure tiene varias capacidades que incluyen wireframing, creación de prototipos y documentación. Incluso, puede ayudarte a crear flujos de usuarios y mapas de sitio. Es perfecta para desarrollar aplicaciones web y de escritorio y brinda a los usuarios la capacidad de exportar fácilmente a PDF o HTML para su revisión.

4. Inkscape

Si estás buscando una alternativa asequible al software de Adobe, como Adobe Illustrator (que se utiliza principalmente para crear gráficos vectoriales), sí existe. Inkscape es conocida por hacer la mayor parte de lo que hace Illustrator, pero de forma gratuita. Este software es de código abierto y se puede utilizar para crear gráficos vectoriales impresionantes. El único problema con el que podrías encontrarte es que algunos usuarios han informado que el programa es un tanto lento.

5. Sketch

Sketch es un software con características específicas que incluyen edición no destructiva (lo que significa que Sketch no cambiará los píxeles en la foto con la que estás trabajando), exportación de código, precisión de píxeles, creación de prototipos, edición de vectores y más. Con Sketch puedes reutilizar y actualizar tus diseños fácilmente.

6. Storyboarder

Tal vez te preguntes por qué necesitarías un guion gráfico en el diseño UX. Bueno, esta es una excelente manera de predecir y revisar visualmente la forma en que un usuario podría interactuar y experimentar un producto en un contexto más amplio. Hay varias herramientas de storyboard disponibles, con diferentes niveles de características y complejidad.

Storyboarder es una opción de software de guion gráfico gratuito, que tiene características básicas hechas para diseñadores de todos los niveles. Permite a los usuarios crear rápidamente dibujos y figuras para diseñar una trama o idea.

7. Toon Boom Storyboard Pro

Otra opción de software de storyboard es Toon Boom Storyboard Pro. Combina dibujo, animación, controles de cámara y muchas otras funciones, todo por una tarifa anual o mensual. Tiene una gama más amplia de características para contar historias más complejas y trabajos de preparación detallados.

¿Qué es el diseño de interfaz de usuario o UX UI?

Nintendo Switch agregó en sus consolas portátiles un pequeño sensor para regular los niveles de brillo óptimos para tus ojos. Además, te permite ahorrar batería en caso de ser necesario. Este elemento es muy funcional y brinda altos beneficios a los usuarios.

Este es un gran ejemplo de una interfaz de usuario (IU) exitosa. La interfaz de usuario se refiere a cómo las personas interactúan con computadoras, máquinas, sitios web, aplicaciones, dispositivos portátiles y otros programas o dispositivos. El diseño de la interfaz de usuario es el proceso de hacer que estas cosas sean lo más fáciles y eficientes posible.

Elementos del diseño UI

Aunque el diseño UX y el diseño UI tienen definiciones similares, es importante tener en cuenta las diferencias clave que los separan. Nuevamente, UI se enfoca en las apariencias y superficies de un producto, mientras que UX está más preocupado por cómo las personas interactúan con un sitio. Estos son algunos términos comunes de UI que debes conocer para comprender mejor cómo se diferencian:

  • Componentes informativos: los diseñadores de UI usan componentes informativos para mejorar la experiencia de lectura o dar más información. Ejemplos de componentes informativos son las barras de progreso, las notificaciones y los cuadros de mensaje. Los diseñadores los usan cuando quieren dejar en claro al usuario que ha completado una tarea o si desean notificar al usuario que es necesaria cierta acción de su parte.
  • Navegación por breadcrumbs: las breadcrumbs o migas de pan son una herramienta de diseño utilizada a menudo por los diseñadores UI para aumentar visualmente la usabilidad de un sitio web. Permite a los usuarios ver su ubicación en un sitio en una estructura jerárquica. No necesita tener características visuales especiales o un diseño exagerado: tan solo debe indicar claramente dónde se encuentra una persona en un sitio. Es posible que hayas notado estos enlaces en la parte superior de una página web mientras compras en línea o en otro sitio.
  • Controles de entrada: los controles de entrada brindan a las personas múltiples opciones en respuesta a una pregunta. Estas pueden ser casillas de verificación, listas desplegables y toggles. Mantén la información que solicitas en tus controles de entrada simple y directa para que el usuario encuentre fácilmente lo que necesita.

Diseño UI: breadcrumbs en el sitio web de la NASA

Imagen de Justinmind

Por ejemplo, el sitio web de la NASA desenfoca las líneas entre una barra de navegación secundaria y las breadcrumbs para ayudar a los usuarios a obtener contexto sobre lo que ven. También les muestra qué otras cosas podrían encontrar al seguir en una misma categoría.

¿Cómo mejorar la experiencia de usuario en tu sitio web?

Aquí te presentaremos algunos consejos breves para mejorar la UX en tu sitio. En vez de pensar en lo que tú quieres para tu sitio web, céntrate en la experiencia de tus visitantes. Pregúntate: 

Más allá del motivo de la visita, tu sitio debe ayudarlos a alcanzar sus objetivos de manera fácil y eficiente. De lo contrario, corres el riesgo de perderlos para siempre. 

A continuación, verás los pasos que te ayudarán a optimizar la UX en tu sitio web:

1. Verifica que tu sitio web sea útil

Los usuarios llegan a tu sitio por una razón (puede que quieran ver tus precios, chatear con alguien del equipo de atención al cliente o leer el blog).

Para analizar qué tan útil es tu sitio web, puedes llevar a cabo algunas acciones:

  • Analiza constantemente las métricas del sitio web: revisa el número de visualizaciones de la página, las entradas, el tiempo por visita a las páginas y la tasa de rebote. Esto te dará una idea del tráfico que tienes en la página y qué tan relevante es el contenido para los visitantes.
  • Realiza encuestas para los visitantes: las encuestas son una excelente forma de conocer la opinión de tu audiencia sobre tu sitio web. Haz preguntas específicas, como «¿Por qué visitaste el sitio?» o «¿Qué es lo que buscabas?». Puedes realizar estas encuestas directamente en el sitio web, por medio de correo electrónico o en tus cuentas de redes sociales.
  • Usa un software de mapas de calor: como viste antes, esto será útil para recoger información sin dirigirte a los clientes directamente. Programas como Hotjar o Lucky Orange analizan qué secciones de tu sitio web visitan los usuarios y en dónde encuentran más dificultades. También puedes emplear software de eye tracking que te ayudará a saber cuáles áreas de tus páginas miran tus usuarios y durante cuánto tiempo.

2. Asegúrate de que también sea intuitivo

Si los usuarios no saben dónde buscar o qué es lo más relevante para ellos, su experiencia puede ser confusa y negativa. 

Ofrecerles mucha información o pedirles demasiado a tus visitantes solo los confundirá y hará que no lleven a cabo ninguna acción. Simplifica la experiencia centrándote en una pregunta y una llamada a la acción por página. ¿Qué quieren saber los usuarios en esta página y qué quieres tú que hagan cuando lo descubran? 

3. Genera consistencia en todo el sitio

A los seres humanos nos gusta la familiaridad por naturaleza. Esto es lo que conocemos como el efecto de mera exposición, es decir, cuanto más familiarizados estamos con algo, más nos gusta. 

Aprovecha el efecto de mera exposición creando consistencia en todo tu sitio web. Busca la uniformidad en el diseño, en la disposición de los elementos de las páginas, los colores y las fuentes, además del contenido. 

Para garantizar la consistencia en todo tu sitio web, define guías para el contenido visual y escrito. Una guía de estilo visual establece las pautas para los logotipos, las opciones de fuente, los colores y la disposición de elementos. Una guía de estilo de redacción te permite establecer el tono de tu empresa y cómo dirigirte a tus clientes, entre otros aspectos.

4. Fomenta que tu sitio sea accesible

En primer lugar, maneja estándares de accesibilidad para elementos como la lectura en pantalla, el contraste de color y el tamaño de las fuentes. Revisa las opciones de validadores de accesibilidad en sitios web para evaluar tu sitio. 

La accesibilidad también hace referencia a la forma en la que los visitantes llegan al contenido: en un estudio de HubSpot, 76% de los participantes dijo que el elemento más importante del diseño de un sitio es la facilidad con la que encuentra la información. Por esto, ayuda a los visitantes a encontrar fácilmente lo que buscan con un menú de navegación claro. Usa la técnica de ordenación de tarjetas o card sorting para definir tu menú de navegación. 

Si ya tienes un sitio web creado y quieres optimizar las opciones de navegación para mejorar la experiencia del usuario, puedes hacer las pruebas de usabilidad que describimos anteriormente. Observa cómo las personas usan tu sitio web, ya sea en forma virtual o física, y toma nota de las dificultades que encuentren, como problemas para usar el menú principal o para encontrar la información que necesitan en una página determinada. Luego, haz cambios en función de los resultados. 

  • Tip de experto 1: intenta no tener más de 7 elementos en el menú principal y, en la mayoría de los casos, evita tener más de 3 niveles de navegación secundaria. 
  • Tip de experto 2: incluye el menú en el encabezado y en el pie de página de tu sitio para simplificar la navegación y mantener el interés de los visitantes. 

5. Ten en cuenta que tu sitio web debe ser atractivo

Atractivo no es sinónimo de recargado o complicado. Lo simple también puede ser atractivo. Cuando las personas logran entender el objetivo de una página y el contenido a primera vista, se genera una experiencia de usuario positiva. 

Ten en cuenta estos elementos de diseño para crear un sitio web atractivo: 

  • Usa espacio en blanco en las páginas del sitio web para destacar información importante y centrar la atención del lector. 
  • Recuerda que una imagen relevante es una excelente forma de transmitir información, aumentar el atractivo visual de la página y complementar su objetivo. 71% de los encuestados por Renderforest menciona que el tiempo promedio de navegación en sus sitios aumenta al añadir videos, así que no dudes en usarlos. 
  • Mantén un diseño simple y despejado. Asegúrate de que los colores y las fuentes que elijas reflejen tu marca. Busca un equilibrio entre los colores de contraste y los más neutros, y trata de no usar más de dos familias de fuentes; en cambio, crea variantes jugando con el tamaño y el peso. 
  • Ten un objetivo por página, así que elige cuidadosamente el diseño y la disposición de los elementos. 

6. Mide y mejora su rendimiento

Ya conoces los elementos que crean una buena experiencia del usuario en el sitio web. Ahora, lo último que debes tener en cuenta es que tu sitio web debe evolucionar constantemente. 

Los usuarios cambian todo el tiempo, por eso tu sitio también debería hacerlo.

Lo que funcionó ayer podría no funcionar hoy. Sé crítico con tu sitio web y pregúntate cómo puedes simplificarlo y ayudar a los usuarios a alcanzar sus objetivos más rápido. Crear una experiencia del usuario excepcional requiere de mucha constancia y es un proceso que nunca termina.

¿Quieres saber más sobre cómo crear un sitio web excepcional tanto para los usuarios como para los motores de búsqueda? Visita la Certificación gratuita de HubSpot CMS para marketers (disponible en inglés).

Esta certificación está dirigida a profesionales de marketing, administradores, creadores de contenido y otros usuarios no técnicos que quieran aprender a implementar y administrar su CMS, diseñar un sitio web enfocado en el usuario y generar informes de rendimiento, así como estructurar y administrar los materiales del sitio.

Ahora que sabes cómo mejorar tu sitio web, conoce más sobre cómo convertirte en un diseñador enfocado en la experiencia de usuario.

1. Investiga en profundidad.

Este paso puede parecer un tanto obvio, pero seguir un camino profesional (o cambiar el tuyo por completo) es algo grande. Investiga mucho para asegurarte de que quieres ser un diseñador de experiencia de usuario. Guías como esta te ayudarán a darte una idea de lo que implica el diseño UX. También puedes buscar artículos de «Un día en la vida de…», podcasts y libros para comprender mejor cómo otros diseñadores de UX pasan sus jornadas.

2. Toma un curso de diseño UX

Hay muchos cursos de educación superior disponibles en todo el mundo, aunque generalmente requieren un plan de estudios de diseño de pregrado de cuatro años como requisito previo.

También hay alternativas de cursos gratis de UX/UI para freelancers, los cuales te dotarán de muchos conocimientos y abrirán un poco más tu panorama acerca de esta rama del diseño. Muchos varían en duración y nivel de experiencia. Por ello, no dudes en comparar todas las opciones disponibles.

3. Aplica por una pasantía de diseño UX

Una pasantía de diseño UX es valiosa por algunas razones. Primero, cierran la brecha entre la educación y la experiencia de la vida real. Te permiten poner en práctica lo que has aprendido en el aula (o en línea) mientras recibes comentarios útiles de tus colegas y compañeros de trabajo.

En segundo lugar, puedes crear un portafolio de diseño realizado en nombre de una empresa real. Si bien el trabajo de demostración es valioso para demostrar habilidades y procesos, es todavía mejor informar sobre el impacto y los resultados del trabajo que completas durante tu pasantía.

Por último, así podrás crear valiosas relaciones con diferentes mentores, los cuales son vitales para desarrollar tus habilidades, recibir críticas constructivas y expandir tu red: tres cosas que pueden ayudarte a conseguir el trabajo de diseño UX de tus sueños.

Para encontrar una pasantía de diseño UX comienza con sitios como LinkedIn, Doméstika, Jooble, Indeed o The Talent Place. O simplemente busca en Google. También puedes dirigirte a las propias empresas: Seagate, Blizzard, EDteam, Adobe y Salesforce ofrecen programas de pasantías de diseño UX.

4. Construye un portafolio de diseño UX

Una vez que comiences a solicitar el trabajo UX de tus sueños, necesitarás un currículum sobresaliente y un portafolio llamativo. Usa un sitio como Dribbble o Behance para exhibir tu trabajo, o crea tu propio sitio web usando una herramienta como SquareSpace.

Consejos para un portafolio de diseño UI

Cuando construyas tu portafolio, ten en cuenta estos tips:

Hazlo visualmente impresionante

La presentación lo es todo. Tu trabajo debe hablar por sí mismo... ¡no solo lo expliques! Tu elección en color, tipografía y diseño juegan un factor importante aquí.

Incluye una sección «Acerca de» 

Los gerentes de contratación y reclutadores quieren conocerte: qué piensas sobre el diseño, qué te inspira y qué te hace único. ¿Por qué deberían contratarte? ¿Qué valor puedes agregar a su nueva empresa y equipo potenciales?

Ten una navegación clara y enlaces a lo largo de todo tu portafolio

Imagina que el reclutador de la empresa de tus sueños tiene dificultades para navegar por el portafolio de un diseñador UX. ¡Qué incómodo! Recuerda que esta es tu oportunidad de demostrar lo que eres capaz de hacer. En tu barra de navegación, incluye opciones como: «Portafolio», «Acerca de», «Contacto» y «Currículum» para evitar confusiones.

Explica tu proceso personal de diseño UX

Tu futuro empleador quiere saber cómo piensas. Incluye información que le permita participar en tus procesos de investigación de usuario, casos de estudio y proyectos realizados.  

Crea portafolios adicionales para expandir tu red

Usa otras herramientas para que tu trabajo esté disponible en sitios donde pasan su tiempo los diseñadores y aquellos que buscan contratar diseñadores. Behance y Dribbble son excelentes sitios de portafolios para personas que buscan inspiración, redes y nuevas oportunidades de carrera.

7 ideas para comenzar en el diseño de experiencia de usuario

¿Te interesa el diseño UX pero no sabes por dónde empezar? Hemos compilado una lista de ideas inspiradoras. Completar estos proyectos no solo te dará una experiencia valiosa, sino que también sumará elementos para tu portafolio.

1. Rediseña el menú digital de tu restaurante local favorito

Rediseñar un menú es un buen ejercicio para aprender a anticipar las necesidades del usuario. Para encontrar el equilibrio adecuado entre la información y las imágenes, tendrás que decidir qué necesitan saber y ver los lectores para tomar decisiones, y qué simplemente los abrumará. Puedes experimentar con la categorización, las descripciones y las calificaciones de los alimentos, y más.

Observa el trabajo del diseñador Panji Arafat para un menú de bebidas:

Diseño UX: menú de bebidas de Panji Arafat en Dribbble

Imagen de Panji Arafat en Dribbble

2. Esboza una mejor interfaz para tu horno tostador

Esto te ayudará a analizar un producto existente y a identificar dónde puedes agregar valor en términos de funcionalidad y diseño. ¡La mejor parte es que puedes completar este proyecto sin salir de tu cocina!

Mira el ejemplo de la diseñadora Sarah Kerbleski:

 

Video de Sarah Kerbleski

3. Rediseña la página de inicio de tu sitio personal

Puedes rediseñar la página de inicio de cualquier sitio web, pero lo ideal es que uses tu sitio personal o un sitio al que tengas acceso. De esa manera, puedes practicar la investigación de los usuarios y el uso de esos conocimientos para alimentar tu proceso de diseño.

Cuando en 2016 rediseñamos nuestra página de inicio, el diseñador UX Austin Knight analizó cantidades masivas de datos y descubrió varias tendencias importantes: una cantidad significativa de usuarios se estaban moviendo de la página de inicio a la página de precios, a la página de preguntas frecuentes y a la barra de búsqueda.

Todas estas tendencias respaldaron la conclusión de que la página de inicio carecía de información crítica que estaba afectando sus conversiones. Puedes leer más sobre este rediseño en el estudio de caso de UXPin (disponible en inglés).

Ideas de diseño UX: rediseño de la página de inicio de HubSpot

Imagen de UXPin

4. Rediseña una función de una app

Practica el rediseño de algunas funciones en una aplicación existente, en lugar de comenzar desde cero. La diseñadora de producto Jo Zhouzheng hizo exactamente esto para DoorDash. Frustrada por la experiencia de navegación de restaurantes y de menú en esta app de entrega de alimentos, Zhouzheng rediseñó la interfaz.

A continuación, verás un antes y un después de las interfaces.

Ideas de diseño UX: rediseño de la app DoorDash por Jo Zhouzheng

Imagen de UX Collective

5. Diseña una app de registro de servicios médicos

Diseñar cualquier aplicación de salud será un gran ejercicio de experiencia de usuario. Centrarte específicamente en el proceso de registro te ayudará a identificar y resolver los puntos de dolor del usuario. Puedes concentrarte en un registro en persona o virtual, como lo hizo el diseñador de productos digitales Divan Raj a continuación.

Ideas de diseño UX: diseño de app de servicios médicos por Divan Raj

Imagen de Divan Raj en Dribbble

6. Crea user personas para una app que desees diseñar o rediseñar

La creación de user personas es una parte importante del proceso de diseño UX. Puedes obtener algo de experiencia creando user personas para una aplicación hipotética o existente. Tal vez te guste una app o un sitio web, pero sabes que la funcionalidad o el diseño podrían ser mejores. En ese caso, podrías definir nuevos user personas para ese producto. O crearlos para un producto en el que hayas pensado.

Mira un ejemplo de user persona para un servicio en línea de venta de libros:

Ideas de diseño UX: creación de un user persona para un servicio de venta de libros

Imagen de Option en Medium

7. Planifica el recorrido de un usuario votante

Esta actividad puede ayudarte a comprender cómo el diseño de experiencia de usuario puede contribuir en fenómenos más grandes, como la baja participación de votantes, y emplear tu análisis y pensamiento crítico. Al trazar el camino desde el registro hasta el punto en que los votantes tienen la boleta en sus manos, descubrirás las regulaciones, limitaciones de tiempo, falta de transparencia, malas elecciones de diseño y otros puntos débiles.

Whitney Quesenbery y Dana Chisnell fundaron el Centro para el Diseño Cívico con este objetivo en mente: querían comprender dónde se pierde la gente en el recorrido como votantes y cómo redirigirlos. Esta es una de sus guías para garantizar la intención del votante, que ayuda a los funcionarios locales a crear boletas bien diseñadas:

Ideas de diseño UX: resideño de boleta electoral

Imagen de 99U

Estas son solo algunas ideas. Para obtener más inspiración, visita sitios como Dribbble y Awwwards.

El diseño UX puede ayudarte a ti y a tu empresa a crecer, ya sea como diseñador gráfico, blogger, desarrollador y otros campos. Un usuario final satisfecho es la clave del éxito, y esto sería imposible de lograr sin un diseño UX optimizado.

A medida que la tecnología se vuelva aún más omnipresente en nuestras vidas, el diseño exitoso de la experiencia de usuario creará transiciones sin interrupciones entre las personas y sus dispositivos y aplicaciones. El diseño UX nunca ha sido más importante, por lo que es un momento ideal para que ingreses a este campo o consideres los beneficios para tu negocio.

Si quieres integrar un enfoque UX en tu modelo de negocio, visita nuestra entrada sobre experiencia de usuario y smarketing.

Si ya eres usuario de HubSpot Academy, te invitamos a que tomes nuestra más reciente certificación en español sobre CMS Hub. Accede haciendo click aquí abajo.

CMS Hub Certification

 Certificación CMS Hub

Publicado originalmente el 03 de diciembre de 2020, actualizado el 04 de diciembre de 2020

Topics:

Experiencia de usuario