25 Comprobaciones Esenciales para la UI y UX del Sitio Web

La idea detrás del diseño UX es simple: los usuarios felices y seguros tienen más probabilidades de comprarte. Es más probable que confíen en ti, se suscriban a tus listas de correo o descarguen tu aplicación.

A menudo pienso en el diseño de la experiencia del usuario (o diseño UX) como psicología en lugar de desarrollo.

Un buen diseño UX se trata de meterse en la mente de tus visitantes.

Es anticipar cada uno de sus movimientos y crear un sitio web que sea simple, intuitivo y agradable de usar.

Desafortunadamente, no hay una respuesta fácil o una fórmula mágica para un buen diseño UX. Es la culminación de muchos pequeños ajustes. Cada uno mejora la experiencia en tu sitio web.

Con eso en mente, he reunido una lista de verificación de 25 pequeños (y fáciles) ajustes que harán que tu diseño UX brille.

1. Velocidad

La velocidad del sitio web es tu primera oportunidad para causar una buena impresión. Es tu primer obstáculo de UX.

Si es demasiado lento, tus visitantes ya están agitados y es menos probable que confíen en ti. Instintivamente asociamos la velocidad con el profesionalismo, y la mayoría de los visitantes esperan que tu sitio web se cargue en dos segundos.

Cualquier cosa más lenta que eso, y es una mala experiencia de usuario, desde el principio.

Asegúrate de que la velocidad de tu servidor esté a la altura y reduce el peso de tu sitio para que se abra rápidamente. Consulta más consejos prácticos sobre cómo mejorar la velocidad de tu sitio web aquí.

2. ¿Quién eres y qué haces?

Tu siguiente gran desafío es informar rápidamente a tus visitantes. ¿Quién eres? ¿Qué haces? ¿Y qué valor puedes ofrecerles?

Esto se llama propuesta de valor, y es tan importante que escribimos una publicación de blog completa sobre ella. ¡Solo tienes unos segundos para convencer a tus visitantes, así que hazlos valer!

Inténtalo ahora: resume todo tu sitio web en una oración e indica a dónde quieres que vayan los visitantes a continuación.

3. Asegúrate de que los visitantes puedan ponerse en contacto contigo

Una parte fundamental del diseño UX es eliminar cualquier inquietud o ansiedad que puedan tener tus visitantes.

Una de las mayores preocupaciones para los nuevos visitantes es si deben confiar en ti o no, especialmente si eres un sitio web nuevo.

Una forma de eliminar esta ansiedad es mostrándoles que hay una persona real detrás de escena. Agrega una dirección comercial, un número de teléfono y una dirección de correo electrónico real. (NO un formulario de contacto; las personas tienden a desconfiar de ellos en comparación con una dirección de correo electrónico directa).

Aún mejor, usa un cuadro de chat en vivo para que los usuarios puedan hacer preguntas al instante.

Si algo sale mal, es bueno saber que pueden ponerse en contacto con facilidad.

4. Siempre da a los visitantes una forma de volver a casa

Todos nos hemos perdido en sitios web antes. Sigues enlaces y terminas en un agujero de conejo.

Si esto sucede, tus visitantes se agitan y se frustran. Instintivamente presionarán el botón «X» para cerrar el navegador.

En su lugar, asegúrate de que haya un botón ‘inicio’ claro y definido, para que siempre puedan comenzar de nuevo. Por lo general, los usuarios esperan que tu logo también los vincule a la página de inicio, así que asegúrate de que lo haga.

5. Mejor aún, deja migas de pan para que sepan dónde están

Además de darles un reinicio rápido, usa ‘migas de pan’ para explicar dónde se encuentran en el proceso.

Las barras de progreso grandes son excelentes para esto. Si se trata del proceso de pago, por ejemplo, haz saber exactamente a tu usuario dónde se encuentra y qué le queda por hacer.

Nuevamente, esto es simple psicología. Por ejemplo, dar un paseo es mucho más agotador cuando no sabes dónde está el final. Nos sentimos mucho más cómodos cuando tenemos un mapa. La misma idea se aplica en línea.

6. Elimina cualquier acción repetitiva

Es muy frustrante ingresar los mismos datos dos veces en un formulario (como una dirección de facturación y una dirección de envío). Trata de deshacerte de cualquier acción repetitiva que ralentice el proceso de compra.

Son cosas como estas las que conducen al abandono del carrito. Tus visitantes buscarán en otro lugar.

Mejor aún, crea un sistema que recuerde las preferencias de tus clientes. Les sorprenderá y les encantará cuando todo esté allí esperándoles nuevamente. Es una cosa simple que mejora las posibilidades de que los clientes regresen.

7. Usa información sobre herramientas para ayudar a los novatos (¡pero no impidas a los expertos!)

Algunos de tus visitantes serán habituales. Pasarán rápidamente por tus hojas de registro y proceso de compra. Otros serán nuevos y es posible que tengan algunas preguntas en el camino.

Los pequeños iconos de ‘información sobre herramientas’ (a menudo identificados con un signo de interrogación) ayudarán a los novatos a entender lo que necesitan hacer. Pero al mismo tiempo, no se interponen en el camino de tus expertos.

Incluso puedes proporcionar atajos o vías rápidas para ayudar a acelerar a los expertos. A menudo verás enlaces de «omitir esto» en la mayoría de los tutoriales de sitios web y aplicaciones, por ejemplo.

8. Crea una llamada a la acción grande y audaz

Una llamada a la acción le dice a tu visitante exactamente qué hacer: ‘Regístrate’ o ‘Compra ahora’, por ejemplo. Asegúrate de que sea imponente, directa y explique el valor de hacerlo.

Mejor aún, dale un color claro y audaz (los verdes y naranjas hacen maravillas aquí), y rodéala de espacio en blanco. Eso debería atraer la atención de tus usuarios directamente hacia ella, dándoles una clara indicación de que esto es lo que quieres que hagan.

9. Haz una distinción clara entre las llamadas a la acción primarias y secundarias

Con muchas llamadas a la acción, verás dos opciones. ‘Enviar’ y ‘cancelar’, por ejemplo. O ‘descargar ahora’ y ‘prueba gratuita’.

Está claro qué acción quieres que realice el visitante, así que asegúrate de que lo sepan. Echa un vistazo a la página de inicio de Spotify. Han hecho que el botón «hazte premium» sea audaz y llamativo. Han hecho que el botón «reproducir gratis» se desvanezca en el fondo.

Esto es solo psicología simple de nuevo. Sutilmente le haces saber a tus usuarios en cuál deben hacer clic.

10. Usa la jerarquía para mostrar a los usuarios a dónde ir a continuación

Con suerte, deberías tener un claro «recorrido del usuario» en mente. Digamos que enseñas cursos en línea a través de tu sitio web. Un simple recorrido de usuario podría verse así:

Leer el último blog > descargar el informe gratuito y suscribirse a la lista de correo > inscribirse en tu curso en línea de pago.

Si tienes un recorrido claro, puedes crear una jerarquía visual para dirigir a los usuarios a donde quieres. En este caso, te asegurarías de que tu blog sea lo primero que vean. Luego, comenzarás a incluir muchos enlaces a tu lista de correo.

11. ¡No juegues con los elementos esperados!

A menudo es difícil resistir el impulso de ser creativo con los diseños y elementos. Pero la cuestión es que todos sabemos cómo se supone que debe verse una tienda en línea. Esperamos que los productos se organicen en categorías simples. Esperamos descripciones de productos, reseñas y un proceso de compra familiar.

¡No intentes reinventar la rueda con estos aspectos cruciales! Mantenlo simple.

12. Mantente en una simple paleta de 3 colores

Una vez más, todo se trata de resistir el impulso de complicar demasiado las cosas. Combinar más de 3 colores primarios es difícil y a menudo confundirá a tus usuarios.

El color también es muy útil para dar forma a la experiencia del usuario, ya que está estrechamente relacionado con la psicología y las emociones. Por ejemplo, asociamos el azul con la confianza (¡hay una razón por la que Facebook usa el azul!)

Combina tu paleta de colores con tu producto.

13. ¿Por qué estoy recibiendo un error? ¿Y qué hago ahora?

A veces, las cosas salen mal y los errores 404 son inevitables. Sin embargo, en realidad puedes convertir esto en una experiencia de usuario positiva.

Explica exactamente por qué están recibiendo este error creando páginas 404 y 504 personalizadas. La «ballena fallida» de Twitter era famosa por esto.

Para errores desconocidos, asegura a los usuarios que estás trabajando en ello y dirígelos de vuelta a tu sitio web.

Los callejones sin salida, como las páginas de error, son peligrosos. Los usuarios alcanzan instintivamente la cruz. Tranquilízalos y envíalos de vuelta.

14. Choca los cinco con los usuarios cuando completen algo

Los seres humanos se mueven por un sentido de logro y finalización. Cuando completan una tarea, házselo saber y muéstrales a dónde ir a continuación.

Puedes hacer esto después de que envíen su dirección de correo electrónico, después de que compren un producto, después de que agreguen algo a su carrito o simplemente cuando lleguen al final de una publicación de blog.

Es una experiencia simple, fácil y positiva. También les da a los usuarios una sensación de colaboración; como si realmente los estuvieras ayudando a alcanzar sus objetivos.

15. Mantente en solo dos familias de fuentes

La coherencia y la marca son clave para una buena experiencia de usuario.

Es muy confuso si la fuente de tu logo es Futura, tu texto del cuerpo es Times New Roman, tu llamada a la acción es Comic Sans y tus encabezados son Windings…

Mantente en solo dos familias de fuentes. Es más fácil de leer y se ve más profesional y confiable. Consulta las mejores fuentes de sitios web para usar que combinen con tu marca.

16. Utiliza mensajes de alerta distintos y coherentes

A veces, tus usuarios se equivocarán. Tal vez ingresaron su contraseña incorrectamente y no pudieron iniciar sesión. Tal vez olvidaron incluir un código postal en la hoja de registro.

En estos casos, querrás un mensaje de error o alerta simple pero distinto. Asegúrate de que sea distinto en color y estilo a cualquier otra cosa en tu sitio. Da una clara indicación de que algo necesita acción.

También debes hacer que estos mensajes de alerta sean consistentes en todo tu sitio. No uses un color, estilo o ubicación diferente, ya que solo se vuelve confuso.

17. LIMITA EL TEXTO EN MAYÚSCULAS

Es simplemente molesto.

En realidad, hay razones más importantes que esa. De hecho, leemos el texto en mayúsculas más lento que en minúsculas. Por lo que es mucho más difícil de leer rápidamente (que es como generalmente leemos Internet).

Reserva las mayúsculas para cuando realmente necesites causar un impacto.

18. Agrupa elementos relacionados

Esto es específicamente para sitios web de comercio electrónico, pero funciona en general.

Trata de mantener artículos similares y relacionados en el mismo lugar. Significa que tus visitantes y clientes obtienen un servicio mucho más personalizado, casi como si hubieras anticipado sus necesidades.

Puedes hacer esto con productos físicos, como la selección «más como esto» de Amazon. También puedes hacer algo similar con publicaciones de blog y artículos, utilizando una sección de contenido relacionado.

Mantiene a los visitantes navegando por tu sitio, reduce tu tasa de rebote y crea una experiencia más personal.

19. Mantén todo consistente

Lo último que quieres es que un visitante haga clic en un enlace y sienta que ha navegado a un sitio web diferente.

Asegúrate de que tu barra de navegación permanezca en el mismo lugar, sin importar dónde te encuentres en el sitio. Asegúrate de que tu logo siempre esté visible y la paleta de colores siga siendo la misma.

20. Diseña el diseño para el escaneo de ojos

No leemos sitios web como leemos un libro. Nuestros ojos saltan y escanean en busca de información importante.

Normalmente leemos sitios web de manera en forma de F, pero las imágenes audaces y las llamadas a la acción también se sabe que atraen la atención primero. Asegúrate de consultar los diseños de sitios web populares que puedes usar para tu sitio web.

21. Genera confianza con testimonios y pruebas sociales

La mayoría de los visitantes de tu sitio web llegan con la guardia en alto. Naturalmente son cautelosos con los sitios nuevos y ciertamente no están listos para comprarte todavía.

Como dije, una parte clave del diseño UX es eliminar estas barreras y hacer que las personas se sientan cómodas en tu sitio web. Unos pocos testimonios y pruebas sociales bien ubicados harán que las personas se sientan más a gusto. Nos gusta ver que otras personas (idealmente grandes nombres) han usado tu producto y servicio y lo aprueban.

22. ¡Haz saber a los usuarios con qué pueden jugar!

Los sitios web generalmente se componen de dos partes: Número uno: contenido, es estático y no podemos interactuar con él. Y número dos: controles, estas son cosas con las que podemos hacer clic, jugar e interactuar.

Twitter es genial en esto. Texto negro simple para el contenido. El texto azul indica en qué puedes hacer clic e interactuar. Los íconos se llenan de color cuando pasas el mouse por encima para mostrar con qué puedes jugar.

¡Invita a las personas a jugar con tu sitio web!

23. Crea una curva de aprendizaje suave

A nadie le gusta quedarse atascado en un sitio web confuso y difícil.

Trata de darles a tus visitantes una pequeña victoria casi de inmediato. Facilítales las cosas y hazlo simple, especialmente si estás ofreciendo una propuesta comercial complicada.

24. Encuentra una forma de empatizar con tu visitante rápidamente

La experiencia del usuario se trata de imitar una relación humana y hacer una conexión con tu usuario. La empatía es una gran parte de esto: ¿Cuáles son los objetivos y sueños de tus visitantes? ¿Qué los ha estado frenando hasta ahora?

Inmediatamente hazles saber que entiendes su problema. Puedes hacer esto con una imagen con la que puedan relacionarse o una frase que resuma sus mayores problemas.

Tu visitante pensará «¡este sitio web me entiende!» lo cual es una gran experiencia de usuario para crear.

25. Utiliza microinteracciones para crear un diálogo

Trata de proporcionar retroalimentación a tu usuario en cada pequeña parte del recorrido. Creará una comunicación y una relación reales a las que los usuarios responden.

Puedes hacer esto con texto, como «¡Buen trabajo!» «Pensamos que te gustaría esto», «¿Te gustaría hablar con un experto?»

O pequeños gráficos y elementos visuales, como un pulgar hacia arriba, una cara sonriente o un reloj que hace tictac en una página de carga.

———

Combina estos pequeños ajustes y crearás una experiencia de usuario que genere confianza, se conecte con tu público objetivo y los deje sintiéndose felices y con una sensación de logro.

¿Estás usando alguno de estos trucos de diseño UX en la gestión de tu sitio web? ¡Me encantaría escuchar sobre cualquiera que haya olvidado mencionar! Házmelo saber en la sección de comentarios.