UNIVERSIDAD JOSÉ MATÍAS DELGADO
DISEÑO UX-UI
Escuchaste por ahí el término “UX” o “UI” en el mundo del diseño web, lo
investigaste y estás intentando entender a qué procesos se refieren. ¿Es así?
Puede que te suene la situación anterior, ya que cada vez es más frecuente oír
hablar de este tipo de diseños. Oyes decir que ayudan mucho, pero pocos te
explican por qué y cómo aplicarlos desde 0. Por eso te he preparado este
artículo, que viene a responder muchas de tus preguntas. ¡Empecemos!
¿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.
Ahora que ya está claro el marco de estos términos, ¡avancemos!
¿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.
Si, en cambio, no has definido el perfil del usuario que busca lo que ofreces en
tu web, puedes saber más sobre cómo hacerlo y ver un ejemplo rápido en este
post.
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.
Y... ¡mucho ojo! Aunque personalices, existen técnicas que funcionan con la
mayoría de los visitantes, como las siguientes. ¡Apunta!
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. ¡Ahora ya
lo sabes!
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.
Puedes hacer que algunos elementos sean ocultables y conjugar otros para que
ocupen un mismo espacio. ¿Qué te parece el resultado?
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?
Si quieres aprender más sobre los chats en páginas web, ¡haz clic aquí!
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.
Si te interesa, puedes leer este post sobre este tema en profundidad de uno de
los sitios sobre UX-UI más importantes del mundo (el contenido está en inglés).
8. Mide tu diseño UI y la UX constantemente
Algo muy importante es que analices tu trabajo periódicamente. Pero ¿sabes
cómo hacerlo?
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.
En conclusión
UX es lo qué te hace sentir una marca o producto al momento de interactuar con
él, mientras que UI es una capa visual de colores, texturas, formas y elementos.
Por eso, UX no es lo mismo que UI. Detrás de un producto o aplicación increíble
tuvo que haber trabajo previo de investigación y una correcta estrategia que se
tradujo en una interfaz atractiva. UI no es, ni nunca será por sí sola una solución.
