8 trucos de diseño UX- UI

¿Qué quiere decir exactamente “UI” y “UX”?

La traducción del primer término es “interfaz de usuario”, que dicho de forma muy simple se refiere a lo que el usuario va a usar. O, en otras palabras, aquello con lo que podrá manejar los procesos digitales que desea realizar. Al ser la parte de ingeniería, es trabajo común de un programador y un diseñador.

Y, por su parte, el término “UX” se traduce como “experiencia de usuario”. En este caso se refiere a lo que la persona percibe interna y emocionalmente al usar una interfaz, en pocas palabras, su reacción. El profesional que realiza esta labor debe tener amplios conocimientos en copywriting, en neuromarketing y en neurociencia en general.

¿Es realmente importante mejorar la UX?

Probablemente has dudado sobre si te conviene invertir tiempo y dinero en este ámbito, pues suena a veces muy complejo o innecesario, ¿verdad?

Sin embargo, te invito a hacer una reflexión: tu web no está para ser un adorno. Tu web es o será visitada por muchos consumidores digitales y la experiencia de estos dentro de tu sitio tiene mucho que ver con que te contacten o compren.

¿Necesitas más datos? Te los daré: según la famosa consultora Nielsen Norman Group, si la UX en un sitio web es ineficaz, este será abandonado, de promedio, en menos de 15 segundos. Y lo peor es que 9 de cada 10 usuarios que perciban una mala experiencia no regresarán, pero sí serán propensos a compartir su opinión con otros.

Así, si quieres formar parte de estas estadísticas puedes olvidarte de la UX.

Una buena experiencia para el cliente online siempre refleja grandes beneficios en visitas, conversión y, por ende, en ingresos. ¡Tenlo en cuenta!

Además, créeme: verás que no es algo realmente complicado de llevar a cabo. A continuación, te mostraré algunos consejos para sobresalir aplicando el diseño UX-UI, la mayoría de ellos basados en estudios de mercado.

Consejos para aplicar el diseño UX-UI

1. Adapta tu sitio web al perfil de tu usuario objetivo

¿Pero de quién vas a mejorar la experiencia?

¿Sabes realmente a quién vas a dirigirte?

Esas dos preguntas abarcan más de lo que crees.

Si ya hiciste una investigación y segmentación (targeting) y ya tienes el perfil de tu usuario objetivo, llévalo a la UX de tu web.

Debes partir de ahí para crear una experiencia acertada para dicho perfil. No puedes presentar una página web con un texto muy formal y científico si la edad de tu visitante objetivo es, de promedio, de 15 a 23 años, y su interés en internet es lo viral en redes sociales. ¿Estás de acuerdo?

Usa la información definida para adaptar colores, imágenes o parte de tu forma de escribir según lo que le gusta. Este, inconscientemente, al sentirse cómodo y familiarizado, será más propenso a realizar una conversión, según nos explica el neuromarketing.

Al final, verás el beneficio de adaptarse a los intereses del usuario en tus estadísticas.

2. Crea un menú de navegación preciso y accesible

Para empezar, te diré que uno de los errores más comunes al crear una página web es no analizar la eficacia del menú. Si este es medio con el que el usuario se mueve en el sitio, entonces, ¿qué tan importante crees que es su cuidado?

Debes enlistar todas las páginas y definir cuáles son las más relevantes para estar en el menú principal.

Los enlaces deben ser lo más generales y directos posible: encuentra las palabras que tu target espera ver, define las que son clave y analiza, por ejemplo, la web de algún competidor.

Utiliza submenús, pero sin saturar ni llegar a confundir toda la estructura.

Y, para ayudar al visitante a saber de su existencia, es muy favorable que muestres iconos y/o algún tipo de efecto o animación en cada acción. Indicaciones visuales como esas son de gran beneficio en la UX, también, por ejemplo, para dar a saber en qué página se encuentra uno.

Algo también primordial es la accesibilidad, ese recurso tan amado, en silencio, por todos los usuarios de una página.

Lo más efectivo en este aspecto es tener un menú “estático”. Según el experto en UX Steve Krug, un menú fijo termina agradando más al usuario porque le hace perder menos tiempo y esfuerzo, llevándole exactamente a lo que busca.

3. Añádele importancia a tu buscador interno

Algo que tiene mucho que ver con ofrecer una buena experiencia en un sitio web es el buscador. Para empezar, si el tuyo no tiene uno, estás perdiendo demasiado. Por si no eras consciente de ello, te daré más datos.

El cibernauta promedio, de forma inconsciente, se acostumbró a navegar mediante búsquedas, tal vez por los 19 años que lleva Google en marcha. Además, seguro que sabes que siempre lleva prisa, y explorar toda tu web no es su principal objetivo.

Para ello, te recomiendo consultar los programas de creación web que te proporciona un buscador interno propio. La cuestión es que, si tu sitio tiene gran contenido, el buscador va a ser un gran aliado para él y, al final, para ti.

El truco, según György Fekete (fundador de Prima Skill), es tenerlo lo más accesible que se pueda. Debe estar en el header y con un tamaño no tan pequeño. Incluso es más eficiente que sea también estático para blogs y tiendas online medianas y grandes.

También en estos casos suele convenir que sea un cuadro de búsqueda y no solo un icono de una lupa lo que se aprecie. Según la revista UXMagazine, funcionalidades como las “sugerencias de búsqueda” y algunos filtros en la página de resultados son necesarios en sitios repletos de contenido.

4. No satures el espacio, pero sé adecuadamente minimalista

Es bien sabido, y lo recalca el autor de varios libros sobre usabilidad Jakob Nielsen, que una página repleta de elementos sin orden no va a resultar muy efectiva.

Las personas quieren claridad en la interfaz de un sitio, y es algo que muchos webmasters no terminamos de entender hasta el día de hoy.

Sin caer en la exageración, debes limpiar tu interfaz, reducirla a lo esencial o a lo que, en verdad, le interesa o le puede servir al usuario. Antes de querer mostrarlo todo en todas partes, define la importancia de los elementos de tu web en niveles y, al final, elimina los que realmente son de muy poco valor.

De este modo, tendrás claridad sobre lo que vale cada cosa que le muestras al visitante y aprenderás a acomodarlo todo estratégicamente en base a ello. ¡Pruébalo!

Pero solo acomódalo, porque no se trata de eliminar todo lo que puedas de la interfaz. La cuestión es que el objetivo no debe ser exactamente tener pocos elementos, sino tener los adecuados en los lugares adecuados.

De eso trata una buena experiencia en una web: de satisfacer más que de tener muchos espacios en blanco sin saber por qué. ¡Quédate con la idea!

Una buena técnica es el uso del espacio según el interés real del usuario. Puedes hacer dinámico tu contenido para que no sature una página visualmente.

Has visto cómo infinidad de sitios utilizan menús o cajas de contenido que se pueden ocultar y mostrar cuando uno quiera, bien, pues eso es un ejemplo directo.

5. Adapta la carga de algunos elementos al scroll

Es sabido que el scroll nos proporciona mucha información del usuario y de su reacción con nuestra página web.

Una de las técnicas más efectivas para un buen trabajo UX en un sitio web es que algunos elementos solo se carguen en relación con este. Al hacerlo, desarrollamos un tipo de lo que se conoce como «Lazy Load».

Lo anterior se aplica con las imágenes en muchos blogs y llega a ser muy beneficioso, ya que al lograr que no se estén cargando todas desde el comienzo, consigue una mejora enorme en el tiempo de carga.

Y, por otra parte, el usuario obtiene una mejor experiencia y todavía sin notar demasiados cambios, repitiendo, puesto que la carga sigue a su vista actual.

Para hacer algo como esto, tan solo hace falta retrasar y configurar la carga de los scripts adecuados. ¡Afortunadamente, existen muchos plugins/widgets para este trabajo!

Y, además, puedes aplicarlo a otros elementos, como la sección de posts relacionados o la caja de comentarios, por ejemplo.

Si usas WP y quieres saber más sobre todo esto, consulta este artículo, ¡te será muy útil!

6. Haz más accesible y humaniza tu medio de contacto

Un gran error (y también un poco irónico) es tener la forma de contacto lejos o distante del usuario.

La mayoría deja la página de contacto casi al final en el menú y no pone muchos accesos a esta desde el contenido primario, más que probablemente un pequeño icono.

En realidad, no hay mucha astucia en hacer eso, si se analiza bien. Muchos se aturden diseñando la página de portada u otras, y los menores esfuerzos vienen en la de contacto. ¿Te identificas con ellos?

De hecho, se sigue un patrón de casi solo dejar un formulario allí, cuando se supone que es el gran punto de conversión, y creo que debería importar su UX.

Para empezar, debes proporcionar información de contacto desde la portada o un “call to action” bien diseñado que lleve a la sección completa para contactar.

Pero incluso en la actualidad, algo más efectivo son las formas de contacto más accesibles: las estáticas. Ofrecen una experiencia más gratificante y viva, conectan mejor con las personas.

Puede ser el mismo formulario que se abra con un botón en cualquier página o puedes ir a otro nivel con un chat en tiempo real.

Este formulario mejora incomparablemente la experiencia del usuario y termina aumentando casi un 30% la conversión general de todo sitio web. Una cifra nada desdeñable, ¿verdad?

7. Crea toda una estrategia para mostrar contenido relacionado

Aunque parezca difícil de creer, muchos webmasters no tienen muy en cuenta las métricas del “porcentaje de rebote” y del “tiempo en sitio”, tal vez porque no saben lo que realmente valen.

Si para Google son dos de los factores SEO más importantes, según el gigante de la analítica web SEMrush, entonces… ¿por qué no poner la mira ahí?

Y es que van de la mano con el trabajo UX, pues se basan en mejorar la permanencia del visitante en una web de forma voluntaria.

Comúnmente es sabido que puedes ocupar widgets de posts relacionados, por ejemplo, para hacer que no se vaya tan rápido y lea otro artículo del blog. Pero más allá de eso, el secreto es adaptarse a la necesidad real del consumidor. ¡Ahí está la clave!

Si lo haces, no tendría por qué salir de tu web en segundos, como hace habitualmente.

El usuario está dispuesto a consumir contenido similar si el actual no es exactamente el que está buscando, o simplemente si desea saber más acerca de este.

¿Cuál es entonces el secreto? Ofrecer secciones de contenido relacionado en ese momento con algoritmos que logren adaptarse y/o complementar al actual. ¡Eso crearía una UX altamente eficiente y, al final, muy rentable!

Desafortunadamente, la mentalidad de muchas páginas web les hace creer que están hechas para ser abandonadas en tiempo récord y no ven más allá de esa conclusión. Entonces nunca trabajan cuestiones relacionadas con la UX como estas.

También porque el hecho de hacerlo implicaría un trabajo de desarrollo e investigación. Y, al final, este consejo abarca una mina de oro para quien la sabe visualizar.

8. Mide tu diseño UI y la UX constantemente

Algo muy importante es que analices tu trabajo periódicamente.

Puedes empezar con algo sencillo, como un sistema de valoración por estrellas o una encuesta general para conocer lo que el usuario piensa acerca de lo que experimenta en tu web. Es un recurso que utilizan muchos sitios poderosos y que es fácil de aplicar.

También puedes hacer un seguimiento más avanzado, usando herramientas como los “mapas de calor” para saber en qué pone sobre todo la mirada el visitante dentro de tu sitio.

Puedes también utilizar Smartlook, que sirve para ver cómo se comporta dentro de tu web, pero en vídeo. Y no olvides utilizar también Bitly para analizar el uso de los enlaces dentro de tu sitio.

Fíjate como cosas que aparentan ser tan sencillas (enlaces) tienen un alto impacto en la UX si se estudian.

Por supuesto, tienes que cambiar tu enfoque al utilizar Google Analytics: deja de hacerle caso a las llamadas “Métricas vanidosas” como el número de visitas.

Estas son engañosas, porque no te dicen realmente demasiado acerca de los usuarios.

No te olvides poner la mira en los datos accionables, como el porcentaje de rebote. Te recomiendo este post para saber profundamente cómo medir tu trabajo UX.