¿Qué es UX?, ¿cómo empezar? y ejemplos…

14/02/2022

Antes de empezar a decirte qué es UX quiero dejar en claro algo. UX NO ES DISEÑO, repitan conmigo UX-NO-ES-DI-SE-ÑO. Por si quedan dudas, NO ES DISEÑO.

Ahora que entendemos qué no es, ¿qué es UX?, bueno, UX proviene del inglés User eXperience, que en nuestro bello idioma se traduce como Experiencia de Usuario (¿deberíamos decirle XU o XdU, no?), y entonces entendiendo la traducción es aquello que busca que nuestro usuario se sienta cómodo con nuestro producto o servicio, que lo entienda y sea fácil de utilizar.

¿Por qué quise iniciar con lo anterior?, porque hay un problema hoy en día que siempre lo relacionan como si fuera diseño, por ejemplo los reclutadores diciendo “Busco diseñador UX”, entonces por ello tenemos que entender que la parte de UX no tiene que ver con el diseño, puedes hacer la cosa más fea del mundo pero usable y eso generará una experiencia de usuario buena… Sin embargo, al ser la UX algo que busca que el usuario se sienta cómodo y contento, el diseño sí interviene, es ahí cuando entonces es más correcto integrar a su mano derecha:

Capítulo de Las Chicas Superpoderosas: https://www.youtube.com/watch?v=dI2LDG_3iNg

La UI, por sus siglas en inglés User Interface, o traducido, Interface de Usuario.

Es aquí donde entra el “UI/UX”, donde se combinan esos mundos. Pero retomemos, ¿qué es entonces la UX Asfo?, porque solo le estás dando vueltas. Vamos a verlo jóven Padawan, la UX es el proceso que lleva una persona para investigar el comportamiento de una persona respecto a su producto o servicio para aplicar mejoras en este.

Entonces la UX empieza un proceso de investigación con los usuarios, saber quién es tu público objetivo, sus edades, sus gustos, todo lo que puedas de tus usuarios. Normalmente la UX en proyectos nuevos tiende a ser complejo, porque no tienes datos, no tienes visión de quiénes fueron en realidad tus usuarios, usemos un meme:

Entonces nunca realmente sabes en dónde va a terminar tu proyecto, pero una vez que lo lanzas empezarás a obtener toda la información que puedas, por eso esta etapa es bastante crítica pero, no necesariamente debes estancarte en que si tu investigación no sale como creiste, debas deprimirte, simplemente que las cosas a veces cambian en el proceso…

Empatía…

El segundo paso es iniciar un procedimiento de “Empatía” o pensar que tú eres el usuario, y sobre todo, conseguir usuarios “prueba”, para ello hay un montón de “herramientas” que puedes usar, por ejemplo un user story, que no voy a darte una plantilla pero básicamente debes generar una “historia” de lo que haría tu usuario, “Debe entrar a la página X, picar el botón Y, hacer Z” y después, tus usuarios “demo” deberán realizar esa actividad y darte retroalimentación, o tú mismo preguntarte, “¿me sentí cómodo y fue fácil para mi?, ¿me tomó mucho tiempo?, ¿qué tanta amsieda’ me dio?”, a su vez de las user story, te puedes apoyar de user flows, que son diagramas de flujo de esta user story para entenderla más visualmente.

Ahora, hay una cosa en UX por si no tienes a 50 personas en Facebook que te hagan el favor de probar tu producto o servicio (o peor si fuese un servicio que fuera presencial, imagínate), que se conoce como User Persona. Este va a ser un personaje ficticio que te vas a inventar con base a tu público objetivo, tal como lo hiciste en tu proceso de investigación y entonces, vas a usar a esas personas que generaste contigo mismo (normalmente sí se hace con tus 50 amigos de Facebook siendo seleccionados a través de tus perfiles ficticios para hacer empate con tus 50 amigos y luego retirando aquellos que no hagan ese empate con los perfiles ficticios)…

Entonces, pensando en tus personajes ficticios, debes desarrollar algunas user stories, y así generar esas ejecuciones por tu cuenta y darte una idea… reiterando, la idea o la mejor idea sería que lo haga alguien más siguiendo ese perfil que creaste, pero si estás solo 🙁 pues es una opción ;)…

¿Diseño?…¡¿DISEÑO?!

El siguiente paso que ya sabes cómo se comportan tus usuarios y quiénes son y todo lo que puedas de tus usuarios es afiliarte con un diseñador, aprender diseño o ver la forma de hacer diseño, ¿no había dicho que no era diseño?, es que obviamente necesitas algo dónde aterrizar todo, ¿no?, digo, ni modo que lo hagas mental o cosas así…También claro, puedes hacer esto en un producto físico o hasta en un servicio, así que no ocupas diseño necesariamente, pero esto es web 🙂

Entonces, ahora que ya tienes toda tu investigación debes hacerla aterrizar en un diseño viable (reitero, no tiene por qué ser bonito realmente, si no usable, ¿y qué demonios es usable?, pues que sea fácil), así que junto a tu amigo diseñador o tus conocimientos de diseño debes aplicar ya que con esto se harán entonces adaptaciones re-ejecutando el proceso una y otra vez hasta el fin de los tiempos, o hasta que tu producto y servicio esté en el punto “perfecto”.

Sin embargo NO debes perder el tiempo aún en “meterle más diseño”, lo que debes hacer primeramente en UX son Mockups o Wireframes, básicamente haz dibujitos o cuadritos que te sirvan como guía, por ejemplo:

En este caso por ejemplo, puedes obtener resultados de cómo es que tu idea de flujos funciona… veamos esto más real hasta este punto:

Piensa que tienes una plataforma de eCommerce (tienda en línea) de productos digitales y quieres vender más… Empezando tiene una imagen, un título y una descripción, adicional de un botón, pero por alguna razón, no vendes mucho, ¿qué pudiera ser?, en tu proceso de investigación detectaste que la mayoría de tus usuarios son personas de 30–40 años, que llegan desde el producto, al proceso de compra, pero cuando les muestras el formulario de registro abandonan su carrito, ¿qué pudiera ser?…

Bueno, muchas plataformas te piden un registro para poder hacer algo conocido como “re-márketing” (básicamente mandarle publicidad/recordatorios/ofertas y demás a alguien ya registrado)… pero, aquí viene el por qué abandonan su carrito, esas personas NO quieren registrarse, ¿cómo puedes solucionarlo?.

Es aquí cuando tu diseño entra en juego, no solo a nivel gráfico si no a nivel de flujos, ¡BOOM! ¿Te acabas de dar cuenta que realmente no nos interesa más el diseño visual que el de flujo? 🤔 Bueno, entonces, vamos a seguir, aquí puedes agregar un nuevo botón que sea “Comprar ahora”, de esta forma los usuarios solo necesitan ingresar información de pago y un correo, no ocupas su nombre, edad ni ningún otro dato, y con el correo puedes hacer “re-marketing” un poco menos “Formal”, pero permites pagar rápido y directo sin tener que pedir otros datos, esos puedes después pedirlos mandano un correo tipo “Tu cuenta te espera, ¿qué esperas para realizar tu registro?, al hacerlo obtienes un cupón de 10% en tu próxima compra” y ahora tienes mayor posibilidad de que, se registren y compren.

¿Pero qué pasa si en realidad este proceso ya existe?, ¿dónde más puede estar el problema?, bueno, aquí es donde sí entra un poco el diseño, gracias a servicios de rastreo gráfico y analíticos podemos usar mejor estos datos y así hacer las adaptaciones que hemos hablado…

Si no tienes un diseño base, pues al final de cuentas es hacer la característica o el nuevo producto/servicio desde 0 y empezar desde este pensando en como se había mencionado, tu investigación de mercado, user persona, y otras muchas cosas que de seguro ya conseguiste de información.

Así que veamos primero, lo primero, si ya tienes un diseño, debes revisar por qué no cliquean, quizá el contraste en el botón no es lo suficientemente atractivo, tu algoritmo de información no está mostrando el orden correcto, entonces debes hacer también un análisis de flujos claro (como el segundo caso) pero también de diseño, por ejemplo viendo la siguiente imagen:

Ignoremos el “View more -> Continue to Checkout”, pero si observan en esa imagen, las playeras NO muestran un botón de comprar, tampoco un botón de que son cliqueables, claro, quizá tenga un cambio en el cursor, pero no es claro visualmente, es ahí donde nuestra investigación nos dice “Los usuarios fulanos de X edad, de Y país y bla bla bla” no compran porque no le entienden correcto y aquí es donde integramos un botón de “Comprar ahora” y otro de “Agregar al carrito” y vemos que con el botón (o botones) más visual la gente empieza a cliquear y terminar sus compras.

¿Y qué tal si no tenemos un diseño?, pues de cualquier forma sabemos los flujos, podemos empezar por desarrollar diseños básicos, podemos basarnos en otros sitios, por ejemplo hablando de eCommerce existen grandes plataformas como MercadoLibre, Amazon, Linio y otros que nos pueden dar ideas de cómo aterrizar esa información y entonces empezar con un diseño, posiblemente tu primer diseño falle, pero ¡Para eso está la UX!, así que solo es repetir este proceso infinitamente (o al menos muchas muchas veces…) hasta obtener los mejores resultados siempre.

Análisis de datos…

Ahora, ¿qué sigue?…¿ya terminamos?… ¡NO!, pero ya lo mencionamos, ¡datos!, ¡DATOS!, ¡DATOS!, ¡¿A QUIÉN NO LE GUSTAN LOS DATOS?!… Bueno, dejando de exaltarnos, realmente necesitamos como en el punto anterior hacer un análisis de resultados, para pasar al último paso de este flujo infinito, sin fin, que jamás deben dejar, básicamente obtener retroalimentación de tus usuarios, obtener toda la información que puedas para así poder saber dónde te equivocaste, qué cambió de lo que originalmente esperabas, qué pasó con tus user persona, ¿se cumplió el perfil?, entre otros… Obtén todos los datos que puedas, y de esta forma nos vamos al último paso…¿O quizá “penúltimo”? bueno depende de cómo lo consideres.

Conclusiones…o resultados…

Ya que tienes todos tus datos en gráficas bien padres, con videos de cómo usaron tu plataforma tus usuarios, con tus productos con estrellitas, con sus comentarios donde pudiste, con esos reportes de atención al cliente y demás, vamos a los resultados y conclusión del flujo.

En UX entonces, son como esa canción que tanto te gusta, debes repetir, con estos datos resultantes puedes generar una nueva investigación y aprovechar toda esa información para así, tener mejores resultados. Si tu siguiente cambio no funciona como esperabas, bueno, sigue adaptándolo con los resultados y nuevas investigaciones hasta que llegues a los mejores procesos. Para todo esto, menos es más, evita sobre cargar todo, hazlo siempre lo más sencillo posible.

Veamos algunos ejemplos…

En este caso, vemos que del lado izquierdo nos hace una pregunta y aunque muchos de nosotros entendemos la interfaz por experiencia, piensa que esto es para alguien de 60 años, ¿crees que vería el “Next” arriba a la derecha?, ¿que puede seleccionar varias opciones y que puede cliquear abajo?…

Aquí entra en juego íconos, y el círculo de marcado, así como el botón de continuar, ¿qué más mejorarías en este paso?

Un caso muy común son los formularios:

Nosotros leemos de izquierda a derecha, lo cual nos haría pensar, ¿es mejor el derecho no?…

Pero, si se fijan del lado derecho (ignorando que los tipos de datos estén mal), creemos que hay muchos campos y nos marean estar variando, mientras que el izquierdo es lineal y vamos avanzando.

Veamos un ejemplo de la vida real que también aplica con UX, el viejo “Jale/Empuje”, ¿cuántos de nosotros no dice “Empuje” y jalamos o dice “Jale” y empujamos?

Para mejorar esta UX nuestra investigación nos dice “La gente no lee”, mi “perfil” es de personas mayores que llevan prisa, por lo tanto, ¿cómo lo resuelvo?, simple, dejando que la puerta entonces pueda abrirse empujando o jalando y dejamos los indicativos, digo, no vaya a ser que alguien quiera deslizar, ¡¿CIERTO?!, entonces ….¡Reparado!.

Pero al final, siempre tendrás posiblemente errores de capa 8 (que el usuario no tiene ni idea de cómo usar tu producto o servicio, así que te culpa, por eso se le dice que es error de capa 8 o error del mismo usuario), como en el caso de la puerta, gente que quiera deslizarla.

Por lo tanto, no te molestes y siempre acepta la crítica y la retroalimentación, si eres diseñador UI/UX (o solo investigador UX, o pa’ que suene más de caché, “UX Researcher”), no te enojes si alguien te dice que “no le entiende” o “no es bonito” o como sea, siempre acepta la crítica, adapta tus procesos, tus diseños, adapta tu UX, que para eso es, para que los usuarios, no tú, se sientan bien con tu plataforma, ellos serán quienes la usen y sean “tus maestros”.

Así que ahora que entiendes que la UX no es diseñar, no es agarrar Figma o cualquier herramienta de ese tipo y aventarse unos diseños “bien bonitos” o hacer cosas con Tailwind/Bootstrap/Foundation porque te ahorra tiempo, empieza a introducirte hacia la UX, hay muchos términos que aquí no fueron tratados pero para términos de este tema, pues no nos interesan, ya que solo es una breve introducción a la experiencia de usuario y cómo va su proceso.