C√≥mo llevar tu UX al siguiente nivel: dise√Īo m√°s atento y sostenible

Cuando piensa en UX, es probable que esté pensando en cómo su producto proporciona respuestas prácticas al por qué, el qué y el cómo eso impulsa a un usuario a interactuar con él. En pocas palabras, UX crea el producto que su cliente necesita (para completar una tarea específica), comprende (a través de sus funcionalidades) y le gusta (por su claridad y diversión).

A trav√©s de cada una de estas etapas en el viaje de un usuario, el contenido de su sitio web o aplicaci√≥n debe tranquilizar, guiar y deleitar a su cliente. Para lograr esto, su UX debe aprovechar al m√°ximo un pu√Īado de conceptos y formas de comunicarse con su usuario.

1. El dise√Īo es el lenguaje visual de su producto.

Im√°genes de Dreamstime

Cuando hablas con alguien, usas instintivamente las mejores palabras de tu vocabulario para transmitir tus ideas y emociones. Tambi√©n, en general, haces lo mejor que puedes para hablar de una manera que tu pareja probablemente entienda. Eso significa usar un vocabulario com√ļn y adaptar su tono y elecci√≥n de palabras al contexto en el que ambos se encuentran.

A trav√©s de este proceso, usted realmente se perfila y establece la conexi√≥n. Es igual con tu dise√Īo. Cada componente de su interfaz visual es una palabra, gesto o expresi√≥n facial en su conversaci√≥n con sus usuarios reales o potenciales.

Definir qui√©n es su producto y ser coherente al respecto es esencial para atraer a su p√ļblico objetivo y mantener a ese p√ļblico c√≥modamente involucrado con usted. Para ello, tiene una marca clara y constantemente reafirmando y desarrollando sobre ella. Al igual que en una relaci√≥n saludable, comunicarse a trav√©s de su dise√Īo es un viaje constante y no solo una interacci√≥n √ļnica.

2. Las im√°genes son lo que dices cuando no escribes.

Im√°genes de Dreamstime

Desde su p√°gina de inicio (el equivalente a su "Hola, soy …") hasta sus p√°ginas secundarias y siguiendo hasta la interfaz de su producto, las im√°genes que acompa√Īan al contenido escrito o interactivo tienen una gran influencia en sus declaraciones generales.

Las im√°genes en la secci√≥n de encabezado lo ayudan a crear una primera impresi√≥n s√≥lida, al igual que las im√°genes insertadas en el resto del contenido en cualquier p√°gina determinada lo ayudan a confirmar esa impresi√≥n y tambi√©n ofrecen pausas de lectura r√°pidas para sus visitantes. im√°genes brillantes y entretenidas (porque tendemos a sentir que las im√°genes fuertes reflejan esa fuerza en nuestra marca y todos quieren un socio fuerte, ¬Ņverdad?), debe alejarse de esa idea por un tiempo y repensar su estrategia visual.

¬ŅEsa imagen realmente se alinea con qui√©n eres y, igual o m√°s importante, con qui√©nes son tus clientes? ¬ŅUtiliza colores llamativos cuando vende un producto delicado? ¬ŅEst√° llenando su sitio web con im√°genes tem√°ticas industriales cuando vende seguros de vida? ¬ŅEst√°, quiz√°s, eligiendo composiciones complejas y metaf√≥ricas cuando sus principales compradores tienen prisa? Considere tambi√©n el impacto que tienen sus im√°genes en el resto del contenido. ¬ŅEst√°n rompiendo el equilibrio entre su contenido escrito, sus componentes interactivos (formularios, botones) y sus im√°genes? ¬ŅCu√°l es el prop√≥sito final de su sitio web?

Siempre eval√ļe si alguno de sus componentes de dise√Īo est√° dominando a los dem√°s o incluso saboteando potencialmente su objetivo final (como una imagen desproporcionada que podr√≠a arrojar ese bot√≥n de "Cont√°ctenos" fuera de la vista). Sea considerado con el tipo y la frecuencia de sus im√°genes y conc√©ntrese en mantener la comunicaci√≥n con sus usuarios f√°cil de seguir y coherente (sin gritar a trav√©s de una foto de 2000x2000px de una se√Īal de stop) Sus im√°genes deben ser efectivas funcionalmente, as√≠ como emocionalmente.

Recuerde que su dise√Īo no solo debe representar qui√©n es usted (o a qui√©n le gustar√≠a que lo perciban), sino tambi√©n empatizar y reflejar a las personas a las que intenta ayudar a trav√©s de su producto o servicio. El dise√Īo es un di√°logo, no un mon√≥logo.

Afortunadamente para nuestra década, la calidad y diversidad de las bibliotecas de fotos de archivo hacen posible encontrar cualquier tipo de recursos que necesite para construir su identidad y su voz de la manera correcta.

3. Su producto debe ser accesible para todos.

Im√°genes de Dreamstime

A medida que la web evoluciona y la cobertura de Internet abarca el planeta, sus audiencias potenciales crecen y se diversifican. Personas de todos los or√≠genes y culturas se est√°n uniendo a la conversaci√≥n y debe planificar su dise√Īo para mantener el canal abierto para una multitud de tipos de usuarios.

Se ha hablado mucho sobre la accesibilidad en los √ļltimos a√Īos y un n√ļmero creciente de marcas est√°n construyendo o reconstruyendo sus sitios web y productos para que sean inclusivos para diferentes conjuntos de necesidades.

El World Wide Web Consortium (W3C) tiene muchos est√°ndares espec√≠ficos para guiarlo en la creaci√≥n de una experiencia de usuario accesible. Aqu√≠ hay algunas recomendaciones b√°sicas para tener en cuenta para su dise√Īo:

‚óŹ claridad de imagen

La calidad de las im√°genes presentes en un sitio web o dentro de una aplicaci√≥n siempre debe ser alta. Esto no solo aborda las necesidades de los usuarios con una variedad de condiciones de visi√≥n, sino que tambi√©n le brinda flexibilidad para ajustar el contenido a m√ļltiples tipos de dispositivos y tama√Īos de pantalla.

Las bibliotecas de fotos de archivo pueden ayudarlo a administrar esto con im√°genes que van desde los tama√Īos m√°s peque√Īos (piense 480x200px y 72dpi) hasta la calidad de retina completa (m√°s de 4000px o 5000px y 300dpi).

‚óŹ Contraste legible

Ya sea que se trate de secciones de texto sin formato o si está agregando texto sobre una imagen, siempre considere dar a su información primaria el contraste adecuado con su fondo.

Puede consultar las relaciones de contraste recomendadas promovidas por W3C, seg√ļn el tipo de texto:

  • Texto peque√Īo – use una relaci√≥n de contraste de al menos 4.5: 1 contra el fondo
  • Texto grande (significa tama√Īos que comienzan en 14 puntos en negrita / 18 puntos regulares): use una relaci√≥n de contraste de al menos 3: 1 contra el fondo

Elija colores complementarios para su texto e im√°genes y simplemente use una b√ļsqueda filtrada en una biblioteca de fotos para encontrar las mejores im√°genes coincidentes.

‚óŹ Usar subt√≠tulos

Este es un consejo saludable no solo para fines de SEO o como soluci√≥n de respaldo para cuando se produzca un error de visualizaci√≥n. Es principalmente un requisito de accesibilidad para las personas con discapacidad visual, que acceder√°n a su contenido mediante lectores de pantalla. Para ayudarlos a comprender su informaci√≥n y usar su producto, aseg√ļrese de incluir texto alternativo o un t√≠tulo para cada imagen (o al menos las m√°s importantes).

4. Está bien tener una personalidad multifacética.

Im√°genes de Dreamstime

Algunas de las personas m√°s fascinantes del mundo muestran personalidades complejas, con aspectos multicolores en lugar de una tipolog√≠a lineal. Tambi√©n se sabe que le sucede a las marcas, grandes o peque√Īas.

Dependiendo del evento, el momento en el viaje de un usuario o el medio en el que se comunica con su audiencia, es perfectamente genial usar más de un tipo de elemento visual. Es decir que no hay problema ni contradicción si desea combinar fotografías, ilustraciones, animaciones e infografías en el mismo sitio web.

De hecho, muchos dise√Īadores usan una combinaci√≥n de elementos y solo hay una cosa muy importante que traza la l√≠nea entre una buena mezcla y una mal ejecutada: la intenci√≥n.

La intenci√≥n significa que est√° dise√Īando teniendo en cuenta que cada elemento presente en su sitio web o en su aplicaci√≥n debe ser relevante y √ļtil para un objetivo en particular. No agregue im√°genes o ilustraciones solo para llenar un espacio en blanco (y corra el riesgo de llamar la atenci√≥n del usuario de la informaci√≥n del producto) y no publique infograf√≠as solo porque est√°n de moda. Alinee siempre sus im√°genes con su marca.

Use cada elemento para mantener la conversación con sus usuarios y mantenerlos involucrados en su viaje de descubrimiento de productos.

Y como regla general, así es como sugerimos usar 3 de los activos visuales más populares:

  • Fotograf√≠as – Realmente brillan cuando se usan para resaltar las caracter√≠sticas del producto (dependiendo del tipo de producto), para presentar ciertas entidades (como los miembros de su equipo) o para presentar eventos e historias.
  • Ilustraciones – Son excepcionales cuando se usan para presentar conceptos o met√°foras y como micro interacciones (botones de pensar, alternar, estados vac√≠os). Tambi√©n son la opci√≥n perfecta para las pantallas de aplicaciones, ya que pueden agregar emoci√≥n sin interrumpir la experiencia del usuario.
  • Fuentes – S√≠, las fuentes tambi√©n son recursos visuales. Y har√°n o romper√°n su conversaci√≥n con sus usuarios, literalmente (doble juego de palabras). Las fuentes tambi√©n funcionan en pares y hay una recomendaci√≥n general de que solo debe usar 3 o 4 en un dise√Īo determinado. Ciertamente, puede usar diferentes fuentes para textos principales, titulares y superposiciones de texto, pero aseg√ļrese de que est√©n armonizados, sean legibles y eficientes en varias pantallas.

Y al igual que las imágenes deben resaltar su contenido escrito, las fuentes deben actuar como una voz cristalina para su información.

Ya sea que est√© buscando recursos para integrar en el dise√Īo de su marca o buscando im√°genes espec√≠ficas para una campa√Īa o evento, las bibliotecas de fotos de archivo ahora ofrecen todo tipo de activos: fotos, ilustraciones, fuentes, videos, elementos de interfaz de usuario y muchos m√°s. Todo lo que necesitas es una "estrategia de compra".

5. Mantenga la voz de su marca aut√©ntica cuando hable en p√ļblico.

Im√°genes de Dreamstime

Entonces, hemos hablado sobre c√≥mo construir su dise√Īo en su propio dominio o producto. Pero tambi√©n con frecuencia saldr√° de su territorio para atraer a audiencias m√°s amplias: en redes sociales, foros, blogs, sitios web de terceros.

Su dise√Īo debe extenderse y adaptarse para cumplir con estas ocasiones. El contenido social de marca ha sido imprescindible durante a√Īos y esa es una tendencia que probablemente no veremos cambiar pronto. Lo que s√≠ cambi√≥, sin embargo, en los √ļltimos 2 a√Īos, es el formato preferido del p√ļblico para el contenido social. Contenido ef√≠mero, espec√≠ficamente historias (en Instagram, Facebook o YouTube) es ahora el tipo de contenido social m√°s consumido y m√°s eficiente.

Y debido a que su carácter está en su nombre (efímero), generar constantemente contenido altamente pulido para los canales de redes sociales puede convertirse rápidamente en una pesada carga financiera.

Una vez m√°s, hay una soluci√≥n simple y extraordinariamente eficiente para este desaf√≠o: fotos de archivo, videos y plantillas. Todo lo que debe hacer es concentrarse en su mensaje real y en mantener su dise√Īo y voz consistentes.

En definitiva, la experiencia del usuario es un proceso continuo. Crece y cambia con su producto y sus audiencias, desarroll√°ndose a medida que aprende m√°s sobre sus clientes y al construir o reconstruir caracter√≠sticas e interfaces. Su dise√Īo tambi√©n puede cambiar, para adaptarse a nuevas audiencias o nuevas personas de marca. Sin embargo, lo que debe permanecer constante son sus di√°logos con sus usuarios y su flexibilidad.

Cuando dise√Īa experiencias de usuario, influye en el tiempo, las emociones y los resultados que sus usuarios invierten en descubrir su producto o servicio. En formas m√°s profundas que nunca, dise√Īar productos y crear UX es un elemento social y √©tico de la vida cotidiana. Y aunque eso puede sonar un poco intimidante, es una oportunidad extraordinaria para mejorar vidas y dejar una marca positiva. El dise√Īo ya no se trata de papeles de envoltura bonitos, se ha convertido en una fuerza significativa.

Para permanecer enfocado en su misi√≥n y apoyarse en su proceso de experiencia de usuario, considere concentrar sus recursos en el desarrollo de productos (investigados a fondo) y recurra a fuentes rentables para impulsar su dise√Īo. Y ah√≠ es exactamente donde las bibliotecas de fotos de archivo se adaptan a su viaje y lo hacen m√°s f√°cil.

Este artículo fue escrito por Clif Haley, que es un profesional de SEO y actualmente trabaja para Dreamstime, una de las principales agencias de fotografía. Cuando no está ejerciendo su experiencia en SEO, a menudo va de excursión y le gusta el aire libre.