Home Blog/ Estilo de vida/
Estilo de vida

¬ŅC√≥mo crear interfaces fant√°sticas? Sigue estos 9 UX tips y presume tus logros

Josefina Castelan - 20 Abr 21

Articulo

7 min.

Que el UX est√° rompiendo todos los paradigmas de dise√Īo de productos no es ninguna novedad. ¬ŅPero c√≥mo puedes destacar en este nuevo rubro, con tanta competencia alrededor? Pon en pr√°ctica estos 9 UX tips y crea interfaces incre√≠bles que dejar√°n huella. 

Si est√°s iniciando en el dise√Īo UX/UI, seguramente pases horas viendo proyectos en Behance, mientras piensas que nunca llegar√°s a hacer interfaces tan incre√≠bles como las que se muestran ah√≠. ¬°Esperamos que no sea tu caso! 

Pero si lo es, ¡tranqui! Si lees este artículo, en muy poco tiempo estarás presumiendo tus proyectos UX por todos lados. Y, lo mejor de todo, ¡ganando dinero con ellos!

¬°Toma nota de los UX tips que te daremos en este art√≠culo! Pero antes, repasemos algunos conceptos que debes dominar. ūüďĆ

¬ŅQu√© es dise√Īo UX?

Si ya vienes trabajando hace rato con el dise√Īo de experiencia de usuario, seguro sepas de memoria el concepto de UX/UI (aunque nunca viene mal un repaso). Pero si eres novato, empecemos con los puntos b√°sicos que debes saber, antes de pasar a la secci√≥n de UX tips.  

Pol Celsi, profesor de Crehana del curso online de fundamentos del UX & UI, nos comenta lo siguiente:

“Un producto digital no podría sobrevivir sin una buena interfaz o experiencia de usuario. ¡Esto es un hecho! Comenzar en UX/UI es cuestionar todo lo que sucede alrededor del usuario y su viaje en tu producto".

Es que el dise√Īo UX/UI lleva a repensar el dise√Īo de interfaces desde la perspectiva del usuario hasta su interacci√≥n con el producto: sus intereses, necesidades, puntos de dolor, percepciones y muchos aspectos m√°s

¬ŅSab√≠as, por ejemplo, que un usuario decide en menos de 15 segundos si se quedar√° o no en un sitio web? ¬°Esto impacta directamente en tu tasa de rebote! Y es por eso que una de las premisas del dise√Īo ux es la validaci√≥n del producto con el usuario

Entonces, vamos a lo importante, ¬Ņqu√© es UX/UI?: 

  • Dise√Īo UX: es el dise√Īo de experiencia de usuario. Refiere al proceso de desarrollo de productos y servicios de todo tipo, en el que se prioriza la satisfacci√≥n del usuario en relaci√≥n a su funcionalidad, accesibilidad y facilidad de uso.

  • Dise√Īo UI: Es el dise√Īo de interfaz de usuario y hace referencia al conjunto de elementos con los que interact√ļa un usuario. 

Muchos de los UX tips que te compartiremos a continuaci√≥n tienen que ver con la aplicaci√≥n del dise√Īo UI tambi√©n, ya que este no debe tomarse como un proceso separado, sino m√°s bien como una estrategia en su conjunto. 

ux researcher

Imagen: Pixabay

Los mejores 9 UX tips que recibir√°s en tu vida

No es que seamos exagerados y nos encante la dramatizaci√≥n. Es que realmente los tips y trucos de dise√Īo UX que tenemos para ti son clave para triunfar en este rubro. ¬ŅLos vemos? ¬°Vamos uno por uno!

Comienza por lo b√°sico: haz UX research

Bueno, esto no es solamente uno de los UX tips m√°s importantes, sino, m√°s bien, es una premisa y un paso obligatorio del dise√Īo UX en general. 

El UX research es, b√°sicamente, una investigaci√≥n exhaustiva del usuario. Se realiza a trav√©s de diferentes herramientas y m√©todos, dependiendo el objetivo de cada investigaci√≥n. 

A pesar de ser una parte imprescindible del UX, en muchos procesos de dise√Īo de producto no se exprime del todo esta etapa, que puede terminar siendo la m√°s importante. 

En nuestro curso online de Experiencia de usuario: Del research a la ideaci√≥n, podr√°s conocer un poco m√°s sobre este aspecto. Pero a modo de adelanto, te contamos cu√°les son algunos de los m√©todos de UX research que puedes implementar: 

  • Entrevistas en profundidad

  • Encuestas a usuarios

  • Focus group

  • Benchmarking

  • Card sorting

  • Eye tracking

  • Tree testing

  • User testing

  • Costumer journey map

¬ŅQuieres conocer m√°s sobre esta √ļltima t√©cnica de UX research? Nuestro profesor Pol Celsi nos cuenta sobre el Customer journey map en el siguiente video: 
 


 

Pon al usuario en el centro de todo

Una vez que tengas toda la informaci√≥n del usuario, conseguida a trav√©s del UX research, √ļsala para dise√Īar tu producto desde su perspectiva. 

Parece una obviedad decir esto, pero es muy com√ļn que a la hora de dise√Īar un producto pensemos en las cosas que nos gustar√≠a a nosotros. Por ejemplo, si estamos dise√Īando una p√°gina web, no debemos elegir colores que nos gusten a nosotros, sino que sean del agrado de nuestro p√ļblico objetivo. 

Para hacer este proceso un poco m√°s sencillo y evitar tentaciones, te recomendamos definir tu buyer persona. Recuerda que lo importante es hacer que tu usuario se sienta c√≥modo y a gusto utilizando tu producto, de esta forma ser√° m√°s propenso a realizar una conversi√≥n. 

Crea una buena arquitectura de la información

¬ŅEst√°s tomando nota de los UX tips, no? Bien, remarca esto: para cualquier producto es clave estructurar y etiquetar correctamente el contenido, de forma que el usuario pueda encontrar r√°pidamente la informaci√≥n. 

El concepto de la arquitectura de la informaci√≥n surgi√≥ hace varios a√Īos, pero el UX lo adopt√≥ como parte esencial de su filosof√≠a. El Instituto de Arquitectura de Informaci√≥n define este concepto como: 

‚ÄúArquitectura de informaci√≥n es la pr√°ctica de decidir c√≥mo organizar las partes de algo para ser comprensible‚ÄĚ.

Por supuesto, siempre pensando en organizarlas de una forma que le sea práctica y efectiva al usuario. Una de las técnicas del UX research para lograr identificar esto es el card sorting

Si nunca usaste este m√©todo, seguramente te preguntar√°s: ¬Ņqu√© $&*%@ es card sorting? No es un juego de cartas‚Ķ ¬°Bueno, en parte s√≠ lo es! Se trata de una t√©cnica en la que diferentes participantes deben ordenar y categorizar tarjetas que contienen ‚Äúinformaci√≥n‚ÄĚ, de acuerdo a c√≥mo les gustar√≠a encontrarlas en el men√ļ. 

Optimal Work es la herramienta principal para poder realizar card sortings de forma remota. Por supuesto, también puedes hacerlo de forma presencial. Y aquí seguramente se te venga a la mente esa imagen de los tableros llenos de post-it: ¡es exactamente eso!

card sorting

Imagen: Krisztina Szerovay

Dise√Īa un men√ļ efectivo y eficiente

Con la informaci√≥n recolectada del card sorting, tienes el trabajo casi servido para dise√Īar un men√ļ incre√≠ble y que cumpla con el objetivo de la navegabilidad. 

Pero para ayudarte un poco m√°s, te compartimos algunas sugerencias publicadas por Nielsen Norman Group:

  • No esconder el men√ļ, ni hacerlo diminuto. El usuario debe verlo o encontrarlo f√°cilmente. 

  • El usuario debe notar que puede hacer clic en las opciones del men√ļ, ya sea a trav√©s de una interacci√≥n o colocando un bot√≥n. 

  • Usa t√©rminos f√°ciles y directos: el men√ļ no es lugar para usar lenguaje persuasivo. 

  • Usa un men√ļ de navegaci√≥n local en una p√°gina o secci√≥n con la que tenga relaci√≥n. Esto facilitar√° la navegaci√≥n del usuario. 

Se minimalista: no satures al usuario de informaci√≥n 

No es necesario mostrar todos tus contenidos geniales en una misma pantalla. Aseg√ļrate de contar con suficientes espacios en blanco para no agotar la vista (y la mente) del usuario. 

Este es uno de los UX tips que se pueden usar en la vida en general, ya que la tendencia minimalista est√° de moda en todos los aspectos, ¬Ņno?

OK, volviendo a lo nuestro, dise√Īa una interfaz de usuario limpia y est√©tica, que inspire tranquilidad y calma. Tu prototipo funcional puede parecer muy lindo en Figma, pero para que puedas realmente comprobarlo, usa Figma Mirror y chequealo en tu celular. 

¬ŅQuieres otros UX tips sobre el uso de Figma? Anotate en nuestro curso de Dise√Īa y prototipa desde cero con Figma, y s√°cale provecho al m√°ximo. 

wireframes baja

Imagen: Unsplash

Genera un impacto visual

Que tenga que ser agradable a la vista y seguir una est√©tica minimalista, no significa que no puedas exprimir tu creatividad en un dise√Īo UI incre√≠ble. No te limites a hacer un dise√Īo funcional, b√°sico y est√©tico. 

Comienza plasmando tus ideas en papel, luego ll√©valas a un prototipo en baja fidelidad, luego media y finalmente en alta. Tomate tu tiempo en cada paso y busca ayuda y consejos de otros dise√Īadores. 

Presta atenci√≥n a los botones, a los √≠conos, a las im√°genes, a la tipograf√≠a (y a su tama√Īo), y a todos los componentes del dise√Īo de interfaces de aplicaciones, web o del producto que sea. Si necesitas realizar una investigaci√≥n o prueba con usuarios espec√≠ficamente para validar el dise√Īo, ¬°hazlo! 

Y por √ļltimo, uno de los aspectos m√°s importantes: ¬°usa la psicolog√≠a del color como biblia a la hora de dise√Īar!

Un buen UX hace la diferencia, descarga este kit Wireframe UX para iOS y Android

wireframes en papel

Cuida tus palabras: usa el poder el UX writing

Las palabras por sí solas pueden lograrlo todo: guiar al usuario, incrementar visitas, lograr conversiones y mucho más. Pero para ello, debes planificar qué comunicar y cómo hacerlo

El UX writing se encarga de dise√Īar textos que ayuden al usuario durante la interacci√≥n con el producto. 

Por lo general, lo que se hace en este paso es crear una gu√≠a de voz y tono. All√≠ se especifican todas las palabras y frases que te servir√°n para crear conversaci√≥n con el usuario y ayudarlo en su recorrido. 

Te recomendamos agregarle, a esta gu√≠a, un apartado de buenas pr√°cticas con ejemplos y recomendaciones sobre qu√© textos o formatos usar ante determinadas situaciones. 

¬ŅQuieres ver un buen ejemplo de UX writing? OK, veamos el caso de Google

En su buscador de hoteles, cuando el usuario quer√≠a consultar por un alojamiento, el bot√≥n dec√≠a ‚ÄúReserva una habitaci√≥n‚ÄĚ. Pasado un tiempo, a un UX writer se le prendi√≥ la lamparita y decidi√≥ cambiar esa leyenda por ‚ÄúComprobar disponibilidad‚ÄĚ. 

¬ŅEl resultado? La interacci√≥n de los usuarios aument√≥ en un 17%. ¬ŅCu√°l fue el cambio? Poner una frase menos agresiva que funcione como CTA (llamado a la acci√≥n)

google ejemplo

google check availability

Imagen: Google Developers

No descuides tus mensajes de error

Sabemos que no todo es color de rosa y que en el mundo de la tecnolog√≠a, los errores pueden ocurrir. Por eso, mejor estar preparado y tener a mano dise√Īos y textos para usar como mensaje de error. 

En este art√≠culo con ejemplos de p√°ginas de error 404 encontrar√°s propuestas divertidas para ‚Äúcalmar‚ÄĚ al usuario y, a su vez, redireccionarlo sutilmente a otra secci√≥n de la p√°gina. 

Aunque parezca algo un poco pesimista, es clave que tengas esto en tu checklist a la hora de hacer alguna propuesta de dise√Īo. ¬°Es uno de los UX tips m√°s importantes!

Recomendaci√≥n: usa tu imaginaci√≥n y agr√©gale humor y/o im√°genes tiernas a tu mensaje de error. ¬ŅAcaso no te encanta el gatito de Crehana?

crehana mensaje de error

No tengas miedo de realizar el redise√Īo de un producto 

La iteraci√≥n es uno de los procesos m√°s comunes en el dise√Īo de producto. Por lo menos as√≠ deber√≠a ser. 

Hoy en d√≠a, el tiempo para lanzar un producto a veces no alcanza para hacer todo el UX research que nos gustar√≠a, y en ese sentido, la iteraci√≥n es clave. 

Mart√≠n Rodriguez, dise√Īador UX de Mercado Libre, lo explica as√≠ en un art√≠culo publicado en Medium:  

‚ÄúSomos conscientes de que muchas veces no tenemos todas las respuestas, y que mejor que nos las den los mismos usuarios. Con este esp√≠ritu, tenemos que estar dispuestos a probar cosas que pueden fallar. Pero la falla no tiene que ser en vano, tenemos que aprender r√°pido de eso e iterar m√°s r√°pido a√ļn para poder llevarles a nuestros usuarios la mejor soluci√≥n que sea posible‚ÄĚ.

dise√Īo ux ui

Imagen: Unsplash

Por √ļltimo, te recordamos una de las frases c√©lebres de Plat√≥n: 

‚ÄúEl que aprende y aprende y no practica lo que sabe, es como el que ara y ara y no siembra‚ÄĚ.

A medida que vayas poniendo a prueba tus conocimientos podr√°s crear apps incre√≠bles, webs memorables o productos en general. 

Con la ayuda de estos UX tips, no te ser√° dif√≠cil ser un dise√Īador UX s√ļper solicitado y conseguir muchos proyectos. 

¬°Nos vemos en el pr√≥ximo art√≠culo! ūüöÄ