En un mundo donde siempre está presente el diseño web "plano", a veces puede ser difícil encontrar la diferencia entre un wireframe y una entrega final. Lo cual es una razón por la que se escucha esta pregunta una y otra vez: "¿Cuál es exactamente la diferencia entre UX y UI?”.
El diablo está en los detalles, así que vamos a asegurarnos de que tenemos los elementos básicos cubiertos en primer lugar. UX es sinónimo de experiencia de usuario y UI es sinónimo de interfaz de usuario. De acuerdo con el consultor Jakob Nielsen, un diseñador de experiencia de usuario es una persona que "abarca todos los aspectos de la interacción del usuario final con la empresa, sus servicios y sus productos”. Aunque Nielsen puede ser el gurú que conduce UX, esa definición no aclara exactamente las cosas para la mayoría de la gente.
Una razón por la que hay tanta confusión en torno a UX y UI es porque están unidos por la cadera. La línea en la que una disciplina termina y comienza la otra es borrosa, para estar seguros, y para aumentar la confusión, los diferentes equipos toman diferentes enfoques en cuanto a cómo deben interactuar los equipos. En los últimos años, los diseñadores UX han aumentado sus funciones en el equipo interactivo. Anton Repponen del dúo de diseñadores interactivos Anton & Irene, declaró: "Antes, ser diseñadores UX eran un papel solidificado, UX estaba sucediendo. Puede que no hayan sido buenos en UX, pero aun así estaba sucediendo".
Durante años, los diseñadores de aplicaciones y sitios web son los que llevaban la voz principal. ¿Qué, puedes preguntar, ha cambiado de manera tan significativa que ahora necesitas una nueva persona en tu equipo? La respuesta es simple, el diseño interactivo ha envuelto desde unas cuantas páginas web con estilo de brochure a una compleja experiencia de productos digitales; como ha ido creciendo, también ha tenido que crecer el rol de un diseñador UX.
Vamos a desglosar, exactamente, lo que hace un diseñador UX. La principal entrega de un diseñador UX es un wireframe. En caso de que no estés familiarizado con los wireframes, son planos para una experiencia interactiva. Los wireframes esencialmente ponen todo el contenido de un sitio web o aplicación y establecen una jerarquía visual.
Los wireframes tienen dos funciones principales: aclarar cómo un sitio o aplicación trabajarán y pensar sobre los problemas más complejos. Wireframes son intencionalmente suaves, con cuadros grises y un marco simplificado con el fin de proporcionar un enfoque a los contenidos, y en muchos casos para permitir firmar por parte del cliente. Son vitales para confirmar todo el contenido previsto para ir al sitio así no te encuentras a ti mismo añadiendo "el párrafo que falta" en la tercera ronda del diseño.
Con herramientas como Axure, Framer e Invision, los diseñadores UX también pueden agregar valor para los equipos y sus clientes mediante la adopción de la creación de prototipos. Por medio de la creación de interacciones a las que se puede hacer clic, un wireframe se siente más como un producto final y las pruebas de usuarios pueden empezar inmediatamente. Un gran diseñador UX busca soluciones innovadoras y sorprendentes a los problemas. Los prototipos se están convirtiendo en una parte importante de la función UX, lo que ayuda a todos a entender el proyecto antes de que haya imágenes, fuentes y colores en el diseño.
El segundo papel de los wireframes es establecer un marco para que los diseñadores UI puedan hacer lo que mejor saben hacer: proporcionar emoción visual y el contexto para el contenido. Por lo general, los diseñadores de interfaz de usuario toman el diseño del texto negro intencionadamente soso y cuadros grises y explorar las fuentes, los colores, el tamaño, y la colocación. Aquí es donde el contenido es posible gracias a la vida por el emparejamiento de imágenes y copia, refinando la jerarquía de la tipografía, y poniendo las cosas en una cuadrícula. Los diseñadores UI tienen que ver con la estética general de la marca y la forma en que hará sentir a los usuarios.
"¡Espera! ¿No acabas de decir que el diseñador UX planea la jerarquía? ¿Por qué el diseñador UI re-hace todo este trabajo?"
Aquí es donde la asociación entre UX y UI realmente entra en juego. Algunos equipos consideran que una vez que el trabajo de UX se ha hecho, los wireframes son aprobados, mientras que otros tienen a UX involucrado en todo el camino hasta su lanzamiento. Algunos equipos hacen wireframes de píxeles perfectos, unos hacen bosquejos y otros dejan cosas sueltas y abiertas a la interpretación de los diseñadores. Al igual que muchas áreas del diseño, no hay una respuesta correcta para este proceso, además de una comunicación abierta.
Con el aumento de la función del diseñado UX, también estamos viendo nuevas herramientas que llegan a la escena para dar cabida a este proceso. Aplicaciones como Sketch han creado la capacidad de hacer un archivo que puede comenzar con UX y recorrer todo el camino a través del diseño. Esto ha llevado al tan esperado Poject Comet de Adobe, el primer producto diseñado para abrazar este nuevo paradigma y permitir a los usuarios de wireframes, prototipos y diseños en una sola aplicación.
Cuando pensemos en la diferencia entre UI y UX, pensemos en el lado izquierdo del cerebro frente al lado derecho. Y aunque las líneas se cruzan a veces, los diseñadores de interfaz de usuario y lo de experiencia de usuario realmente llevan a cabo diferentes trabajos. Ya sea que estén haciendo bocetos para comunicar rápidamente una idea o estén creando wireframes de píxeles perfectos, el diseñador UX está tratando de resolver los problemas funcionales, planea contenido y organiza los datos del sitio. El diseñador UI es el responsable de transmitir la marca y hacer que el sitio web dé una experiencia más agradable y humana.
