Historia y definición del diseño UX/UI

En resumen

¿Cómo empezó el diseño UX/UI? ¿Cuáles son las definiciones del diseño UX/UI hoy en día y qué importancia tiene el diseño web en él? Respuestas en este artículo.

Este artículo forma parte de otro ⚠️

Si esta es su primera visita aquí, bienvenido 👋 . Ten en cuenta que este artículo forma parte de otro más global: Iniciarse en el diseño UX/UI, una guía completa. Aunque no es esencial, sigo recomendando empezar allí primero si eres nuevo en el diseño UX/UI.

Tabla de contenido

• Primeros pasos
• ¿Qué significa diseño?
• UX y UI, al principio
• ¿Cómo definir la UX y la UI hoy en día?
• Y más allá

Primeros pasos

Imagínate: es por la mañana y abres una aplicación en tu smartphone para leer las noticias, por la noche eliges una película en tu smart TV, al día siguiente pagas los billetes en una estación de metro en un terminal y cuando vas de compras, pagas en una caja automática. Cada vez que utilizas una pantalla que te permite interactuar con ella a través de una interfaz digital, ha habido diseñadores UX/UI detrás para hacerlo posible. Porque en algún momento, alguien ha tenido que definir la funcionalidades de esa aplicación, su estructura, la disposición de los componentes (formularios, textos, botones, etc.), el espaciado entre ellos, los colores, las animaciones, etc.

Pero, ¿por qué este extraño término? ¿“diseño UX/UI”? En resumen, abarca las dos fases principales en el diseño de una interfaz digital, UX = User eXperience y UI = User Interface. En la UX hay “Usuario” y “Experiencia”, es decir, se trata de tener en cuenta a los usuarios lo antes posible en la estructuración de un producto o servicio, para ofrecer la mejor experiencia posible. Para la UI, se trata de hacer que esta estructura sea utilizable con una interfaz por el usuario final. Una buena interfaz de usuario garantiza una buena experiencia general.

Por lo tanto, la fase de UX tiene que ver con el contenido, la estructura (producimos entregables que el usuario no verá, por ejemplo un wireframe) y la fase de UI, con la forma (lo que el usuario verá). He aquí un ejemplo:

Más adelante entraremos en detalle sobre lo que se hace en la fase UX y en la fase UI.

Ten en cuenta que cuando decimos UX, no estamos hablando necesariamente de un producto digital como una aplicación móvil, originalmente el término “UX” es amplio y abarca todos los puntos de interacción con una empresa como el servicio al cliente o el diseño de la tienda. Pero hoy en día, se utiliza mucho para los productos digitales. Hablaré más de esto en el próximo artículo sobre los diferentes términos.

Dicho esto, cuando hablamos de “diseño UX/UI”, en este caso la UX es específica de un producto digital.

Nota importante: en el resto de este artículo y en los demás, cuando hablaré de diseño UI, se tratará de interfaces de tipo GUI o “Graphical User Interface”, es decir: ordenadores, smartphones, relojes conectados, etc. Pero hay otras que presentaré más adelante en este artículo.

¿Qué significa diseño?

Antes de entrar en el meollo de la cuestión, ¿qué significa realmente “diseño” en “diseño UX/UI”? Una buena definición que me gusta es la de la Alianza Francesa de Diseñadores:

“El diseño es un proceso intelectual creativo, multidisciplinar y humanista cuyo objetivo es abordar y aportar soluciones a los problemas cotidianos, grandes y pequeños, relacionados con cuestiones económicas, sociales y medioambientales.” - AFD

UX y UI, al principio

La UX, en el sentido de mejorar la vida de los usuarios, apareció antes que la UI, que es puramente digital. La creación del término “UX” se atribuye a menudo, y es cierto, a Don Norman, un psicólogo cognitivo y diseñador que trabajó en Apple desde 1993. Fue el primero en llevar el término “UX” en su tarjeta de visita (“User Experience Architect” para ser exactos).

Pero podemos remontarnos más atrás: empezando por el Feng Shui, en el año 4000 a.C., que explica cómo armonizar el interior para mejorar la experiencia vital de sus ocupantes. Luego, pasando por la antigua Grecia, en el 500 a.C., y sus principios de ergonomía para optimizar las actividades de los trabajadores.

Más cerca de nosotros, a partir de los años 1900, con Frederick Winslow Taylor y su Taylorismo y luego Toyota, famosa por su uso del método “Kanban”, que tenía como objetivo optimizar los entornos de trabajo centrándolos en los trabajadores, o sea, en los “usuarios” de las líneas de producción.

A partir de 1950, empezamos a ver los primeros diseñadores de UX para consumidores, con entre otros: Henry Dreyfus y Walt Disney. El primero por su práctica del diseño industrial centrado en el usuario, del que, por ejemplo, las famosas aspiradoras Hoover son una manifestación. El segundo, ciertamente más conocido y a menudo citado como el primero de los diseñadores de UX, con sus parques temáticos en los que su obsesión por la experiencia del visitante los hace aún famosos hoy en día.

Luego, en 1970, comenzó el diseño UX/UI, es decir, la creación de experiencias de usuario que se basan en gran medida sobre una interfaz digital. Se podría pensar en Apple primero, pero en realidad la paternidad es de Xerox, que introdujo por primera vez conceptos clave como la navegación con el ratón, las carpetas y el escritorio virtual. Donde Apple marcó su época (y Microsoft, no nos olvidemos de ellos 😉 ), es tomando los conceptos de Xerox (los antis Apple dirán “robar”) para mejorarlos y lo más importante, hacerlos accesibles al gran público, con el primer Macintosh en 1984 y su precio de 2500$ frente al “Star” de Xerox de 16500$ lanzado tres años antes.

Y ahí llegamos en 1988, a Don Norman, que con su famoso libro The Design of Everyday Things, formalizó aún más la práctica de la UX. A menudo citado como lectura recomendada para cualquier diseñador UX/UI y con razón, aunque ya no es tan joven, sus principios de UX siguen siendo universales y aún aplicables hoy en día.

Otro hito de la historia es el primer iPhone en 2007. En efecto, al igual que con el primer Mac, Steve Jobs, con Apple, combinó por un precio asequible varios productos y tecnologías (reproductor de música, teléfono móvil, navegador web, tecnología multitáctil, sensores, etc.) rompiendo con los dispositivos que utilizaban un lápiz óptico y un teclado físico. Por el contrario, simplificó la experiencia introduciendo la multitáctil con el uso de los dedos. Ahora, casi todo el mundo tiene un smartphone, y cada vez más gente lo utiliza para todo tipo de cosas.

Al principio, las UI era fiel a los principios del skeuomorfismo, es decir, hacer que los elementos virtuales se parecieran a los del mundo real (escritorio, carpeta, ventana, etc.). Luego, con el paso del tiempo, los elementos se volvieron más abstractos (fig. 2 a 4). De este modo, los usuarios se acostumbraron poco a poco a utilizar estas nuevas interfaces.

En resumen, la UX existe desde la noche de los tiempos, porque en su esencia está el deseo de mejorar la vida de las personas. Pero es con el auge de la psicología y de las máquinas cada vez más inteligentes que la UX y la UI han cobrado más importancia, de ahí la necesidad de “profesionalizar” el campo, con profesionales dedicados al tema.

¿Cómo definir la UX y la UI hoy en día?

Así pues, desde los años 80 la UX/UI ha recorrido un largo camino, pero ¿qué definiciones se pueden dar a estos dos dominios hoy en día? Aunque han evolucionado, podemos dar definiciones que serán válidas durante un tiempo.

Presento la UX y luego la UI porque como recordatorio, el diseño UX/UI son dos campos agrupados la mayoría de las veces en una misma profesión, pero hay especialistas que sólo hacen UX y otros que sólo hacen UI.

¿Cómo definir la UX?

Existen múltiples definiciones de UX, porque a diferencia de la UI que es más “visible” y por lo tanto más fácil de definir, la UX abarca varios vastos dominios relacionados con el ser humano, y por lo tanto más difícil de resumir en una sola definición (de hecho, apenas una disciplina incluye el comportamiento humano, buena suerte para encajarlo en una sola definición). Así que podemos decir sin demasiados problemas, que cada diseñador UX puede tener su propia definición, siempre y cuando no olvide estos importantes elementos, señalados por la Dra. Carine Lallemand en su libro Métodos de diseño de UX: “Investigadores y profesionales coinciden en que la UX es el resultado de la interacción entre tres elementos: el usuario, el sistema y el contexto.”

Antes de que hagas tu propia definición, he hecho una selección de las que me parecen más relevantes:

“Todos los aspectos de cómo la gente utiliza un producto interactivo: la forma en que se siente en sus manos, lo bien que entienden su funcionamiento, cómo se sienten mientras lo utilizan, lo bien que sirve para sus propósitos y lo bien que encaja en todo el contexto en el que lo están utilizando.” - Alben

“Consecuencia del estado interno del usuario (predisposiciones, expectativas, necesidades, motivación, estado de ánimo, etc.), de las características del sistema diseñado (por ejemplo, la complejidad, la finalidad, la facilidad de uso, la funcionalidad, etc.) y del contexto (o el entorno) en el que se produce la interacción (por ejemplo, el entorno organizativo/social, el significado de la actividad, la voluntariedad del uso, etc.)” - Hassenzahl & Tractinsky

“UX = la suma de una serie de interacciones. La experiencia del usuario (UX) representa la percepción que queda en la mente de alguien tras una serie de interacciones entre personas, dispositivos y eventos, o cualquier combinación de ellos.” - Fatdux

Basándome en las previas y en mi experiencia, esta es mi definición de UX:

“Un amplio campo de conocimientos y prácticas centradas en el usuario y sus interacciones con los productos y servicios. La UX es transversal a muchos campos como la psicología, la sociología, la ergonomía, la etnografía, etc. En general, todo lo relacionado con el usuario. Durante la UX, no hablamos del aspecto visual como los colores o la tipografía. Nos centramos en el conocimiento de los usuarios, sus deseos, objetivos y trayectoria en el futuro producto o servicio.”

¿Cómo definir la UI?

Como dice el Nielsen & Norman Group, hay que diferenciar la UI de la UX y cita este claro ejemplo:

“Pensemos en un sitio web con críticas de películas. Aunque la interfaz de usuario para encontrar una película sea perfecta, la experiencia de usuario será pobre para un usuario que quiera información sobre un pequeño estreno independiente si la base de datos subyacente sólo contiene películas de los grandes estudios.” - NN Group

O:

“El diseño UI (User Interface Design), es la etapa de diseño de la interfaz de usuario. La UI, literalmente “interfaz de usuario”, permite la interacción con el producto y contribuye a la UX general. En efecto, la experiencia del usuario está directamente vinculada al diseño gráfico de la UI, que tiene la función de permitir una experiencia agradable. Por ello, el diseñador UI colabora con el diseñador UX, garante de la experiencia del usuario, con el que elabora la versión gráfica de la interfaz.” - Usabilis

“Experiencia de usuario (UX) e interfaz de usuario (UI) son algunos de los términos más confusos y mal utilizados en nuestro campo. Una UI sin UX es como un pintor que aplica la pintura a un lienzo sin pensar, mientras que una UX sin UI es como el marco de una escultura sin papel maché. Una buena experiencia de producto comienza con la UX y luego con la UI. Ambas son fundamentales para el éxito del producto.” - Rahul Varshney, co-creator of Foster.fm

Basándome en las previas y en mi experiencia, ésta es mi definición de IU:

“La creación visual de lo que se ha diseñado durante la fase de UX. A diferencia de la UX, que es amplia y abarca productos digitales y no digitales, la UI es sólo digital. Cumple un aspecto importante en la UX, ya que un producto con una buena UX pero una mala UI reducirá la apreciación general del usuario.”

Tenga en cuenta que en el diseño UI, podemos hablar de tres tipos principales de interfaces:

• GUI (“Graphical User Interface”), fig. 5: la más conocida, incluye todas las interfaces con una pantalla, con la que el usuario interactúa con sus dedos o dispositivos como un ratón, un joystick, etc.
• VUI (“Voice-Controlled Interface”), fig. 6: pensamos inmediatamente en asistentes como Google o Siri de Apple, incluye todo lo que se puede controlar por voz.
• Interfaz basada en gestos, fig. 7: sin duda el campo más innovador, incluye interfaces que se controlan por gestos, la mayoría de las veces en un entorno 3D. Por ejemplo: interfaces de tipo casco de VR o Leap Motion (para controlar un ordenador con las manos en un espacio virtual 3D). También, Microsoft con su HoloLens (auriculares MR para “Mixed-Reality”) que ya abre aplicaciones en medicina o industria, y probablemente pronto Apple con los rumores sobre las “Apple Glass” ( sin olvidar las Google Glass, pero que aún no han tenido el éxito esperado). Samsung también ha experimentado con el seguimiento ocular en algunos de sus smartphones, pero de momento parece que no está preparado para su uso masivo.

En general, para un diseñador UX/UI o UI, trabajará la gran mayoría de su tiempo en una GUI, porque es la que sigue siendo dominante. La VUI y el diseño de interfaces basadas en gestos son especializaciones del diseñadoruxui-design-process-with-an-example UI.

¿Y el diseño web?

El diseñador web, en el sentido más estricto de la palabra, sólo diseñará sitios web y no aplicaciones para móviles/portátiles (o incluso la interfaz de las máquinas de billetes de metro, por ejemplo). Pero el diseño web y el diseño UI tienen tanto en común como, entre otras cosas, la elección de los colores o la gestión del responsive, que personalmente, lo simplifico e incluyo el diseño web en el diseño UX/UI.

Pero ojo, un diseñador web especializado en este campo puede, por ejemplo, no haber tocado nunca el diseño de una aplicación móvil. En este caso, es mejor indicar en su currículum “diseñador web” que “diseñador UX/UI especializado en diseño web”.

En otras palabras: el diseño UX/UI ofrece acción, elección y hasta cierto punto información al usuario, mientras que una página web ofrece principalmente información. Pero en algunos casos, la frontera entre ambos es más difusa, muchos sitios hacen los dos: dar información y ofrecer una aplicación. Un ejemplo sencillo: un sitio web de noticias con un sistema de suscripción, gestión de cuentas, consulta de ediciones digitales y artículos favoritos, clasificación, etc. Es este razonamiento el que me hace incluir el diseño web en el diseño UX/UI.

Y más allá

El valor añadido de un producto bien hecho y con una interfaz cuidada es cada vez más importante, sobre todo en ámbitos competitivos, son parámetros cada vez más buscados por los usuarios. Si el cliente potencial tiene cinco aplicaciones similares para elegir y las prueba todas, puede estar seguro de que elegirá la que tenga unas pantallas de introducción limpias, una interfaz de usuario calibrada y coherente, un diseño limpio y, por supuesto, las funciones que espera.

También hay estudios (InVision y McKinsey) que muestran una fuerte correlación entre un buen diseño y el retorno de la inversión, y eso no se les ha escapado a algunos CEOs 💰 , como dice Ralf Speth (CEO de Jaguar):

“Si cree que un buen diseño es caro, debería evaluar el coste de un mal diseño.”

Para continuar con su impulso

Hemos visto la historia y definido el diseño UX/UI, pero como cualquier campo en crecimiento, a menudo se crean muchos términos. ¿Cómo orientarse entre “diseñador UX/UI”, “product designer”, “visual designer” y otros términos de la jerga? Esto es lo que te presento aquí:

UX vs UI vs product design y otros nombres

5 de mayo de 2022  •  10 min

El mundo del diseño de interfaces digitales está lleno de términos que a veces describen lo mismo, en este artículo explico los más comunes.

Doko Zero
Diseñador UI con conocimientos de UX y desarrollo web