Saltar al contenido →

Introducción crítica a los Componentes de la Interfaz de Usuario

Este texto pertenece a una colección de publicaciones que he programado bajo el marco de una Guía crítica de Componentes de la Interfaz de Usuario. Está dirigido principalmente a los alumnos del Máster de Diseño Web y Creatividad de la Escuela de Negocios de la Cámara de Comercio de Sevilla, pero también puede servir de ayuda a todo el que se inicia en el Diseño de Experiencia de Usuario y en el Diseño de Interfaz de Usuario. Los profesionales con más experiencia que se acerquen a este texto quizás no encuentren nada nuevo. No obstante espero que, en su caso, sirva como excusa para abrir debate sobre la cuestión.

A falta de una definición oficial o mejor, escribía en el artículo anterior que:

Los componentes de la interfaz de usuario son conjuntos de elementos que forman un elemento más complejo, a la vez que único y en ocasiones indivisible, cuya usabilidad suele ser autoexplicativa por la propia composición, estructural y visual del mismo.

Resumiendo de una manera más prosaica, los componentes de la interfaz de usuario son esas piezas identificables —tan identificables que son universalmente reconocibles— que sirven para trasladar a un plano tangible las relaciones entre forma y función en el contexto de una interfaz.

No siempre pero en la mayoría de ocasiones pueden parecer piezas prefabricadas con las que trabajar. Centrándonos en el diseño de productos digitales, hablamos de componentes como el botón, los conjuntos de pestañas, acordeones, migas de pan…. Más adelante el listado completo.

Por tanto, conocer y comprender los componentes con los que podemos trabajar es un requisito obligatorio para resolver de la manera más óptima los problemas de diseño a los que nos enfrentamos en cada proyecto.

Una visión crítica sobre el estado actual del sector.

Primero, contexto.

Este texto está dirigido a aquellos alumnos que se están formando tanto en el Diseño de la Experiencia de Usuario como en el Diseño de Interfaz. Debo puntualizar, antes de que alguien se enfade, que ambos tipos de diseñadores guardan sus diferencias como podéis ver de manera muy resumida en el gráfico siguiente.

Conociendo las diferencias entre UX y UI design
Conociendo las diferencias entre UX y UI design

Artículos que hablan y desarrollan estas diferencias encontraréis muchos. Si no habéis profundizado sobre esto, es el momento —pero, por favor, luego volved a este artículo :).

Obviando las diferencias y poniendo en el centro del escenario el producto digital, encontramos, como decía anteriormente, aquello que es común y transversal a ambos tipos de diseñadores: la interfaz. Y, dentro de la interfaz, los componentes. El UX designer hará tangible esto a través de la conceptualización gráfica de un wireframe. El UI designer aplicará su ejercicio de diseño gráfico sobre los layouts propuestos. El punto de encuentro del diseñador UX y diseñador UI es la gestión que cada uno hace de los componentes. De menos a más: componentes, layouts, interfaz, producto digital. Todo se relaciona entre sí formando un sistema.

Segundo, el estado actual de la cuestión.

La tendencia actual en el diseño de producto digital es el diseño de sistemas. Esto quiere decir que el valor añadido de nuestra labor como diseñadores no es tanto producir muchas pantallas como ofrecer soluciones transversales. Tres puntos claves definen una buena labor de diseño de interfaz cuando se trabajan desde los componentes:

  1. Proponer soluciones sobre cómo los componentes se conjungan entre sí formando las diferentes pantallas.
  2. Resolver cómo estos componentes se adaptan a los contextos en los que un producto digital puede ser utilizado.
  3. Finalmente, prever cómo estos componentes serán sostenidos a lo largo de la vida y/o ciclos del producto.

La consecuencia lógica final de todo esto será la creación de una Guía de estilos del Producto Digital. Llegaremos a este punto en el capítulo correspondiente

En ese sentido, el diseñador de experiencia y el de interfaz hablan este mismo idioma en favor del producto. No ocurre lo mismo con la relación entre los equipos de diseño y desarrollo. Una queja recurrente y un problema lamentablemente común en los equipos es la brecha, cada vez mayor, entre los diseñadores y los desarrolladores. Algunos posibles motivos:

A). Los diseñadores cada vez se alejan más de las cuestiones tecnológicas que afectan a los procesos de desarrollo de productos digitales. ¿Deben los diseñadores saber código? Es una cuestión recurrente y controvertida.

B). Los desarrolladores, específicamente front-end, son castigados por el modelo actual, agresivo en cuanto a tiempos de entrega y volumen de herramientas se refiere de creación de productos digitales. Esto no les deja margen para empatizar con las necesidades del diseñador. Tanto es así que muchos desarrolladores han llegado a creer que se puede diseñar sin necesidad de diseñar —una mala, malísima interpretación de la técnica “Designing in the browser“. No les culpo. Estas son las consecuencias de la “década startup“, como más adelante veremos.

Resumiendo:

  1. El diseñador ha perdido el control y se ha alejado del código necesario para hacer tangible su interfaz y, por tanto, los componentes diseñados.
  2. Por su parte el desarrollador es un perfil muy demandando que, por contra, ejerce su labor bajo una saturación de métodos y herramientas.

Existe una solución a esta problemática. Los diseñadores deben volver a tomar el control en la gestión total de los componentes de la interfaz —con todas las implicaciones que esto supone— y con ello, de paso, liberarán a los compañeros desarrolladores de partes que no le deberían corresponder. Para diseñar mejor, el diseñador debe volver a hacerse con el código, como lo hacían hace años los diseñadores primigenios (esa suerte de diseñador-maquetador-profesional-para-todo). Puede que antes de ponernos manos a la obra tengamos que repasar un poco nuestra historia.

Esa es la propuesta ¿Te interesa? Allá vamos.

Published in Sin categoría