Diseño de interacción: ¿cómo se relaciona el usuario con la interfaz?

Existen muchas definiciones posibles para la palabra «diseño». Si quisiéramos alcanzar una definición que concilie las principales visiones al respecto, podríamos hablar del diseño como la especificación de un objeto para cumplir un objetivo particular. Esta definición genérica —alineada a la que propusieron Charles y Ray Eames, célebres diseñadores de muebles— es lo suficientemente amplia como para abarcar tanto objetos abstractos (un plan, un servicio, un proceso) como concretos (un sitio web, una revista, un mueble, un electrodoméstico). Además, esta definición no entra en conflicto con aquellas que consideran al diseño mayormente como un medio para resolver problemas (tal sería el «objetivo particular» en cuestión) o bien enfatizan en su necesidad de aportar belleza o atractivo estético a una idea. El diseñador y emprendedor José Luis Antúnez trata de condensar estas dos miradas al definir al diseño como «soluciones bellas».

Sin embargo, dentro del diseño existen disciplinas más acotadas, con sus propias definiciones y alcances. Por ejemplo, el diseño de interfaces digitales (web o software) se sirve en buena medida de los principios del diseño gráfico. Esto se debe a que comparten numerosos elementos en común —como tipografías, fotografías, dibujos y colores—, aunque los principios a aplicar en papel impreso no siempre sean los mismos que en una pantalla. Una de las mayores diferencias viene dada por el hecho de que, mientras el papel es inmutable, en las interfaces digitales existen imágenes móviles (videos o animaciones), transiciones y transformaciones. Con el desarrollo de la computación personal, estas características particulares han dado lugar a una disciplina separada: el diseño de interacción (IxD, interaction design), o la definición de la estructura y el comportamiento de sistemas interactivos. Tal es la definición aportada por la IxDA (Interaction Design Association), el más importante de los organismos que nuclean a los profesionales de esta actividad y organizador de numerosas conferencias internacionales al respecto (como Interaction South America, celebrada en 2014 y 2015 en Argentina).

Sin embargo, esta definición no es universal, y no resulta difícil confundirla con las de otros campos vinculados al mundo digital. Es posible establecer algunos límites:

  • La experiencia de usuario (UX) es lo que siente una persona al utilizar un producto. Es un término amplio y global, que incluye el diseño de productos tanto abstractos como concretos, con las subcategorías que correspondan. Pero no se limita al diseño visual, ya que puede incluir otras variables. Por ejemplo, en el caso de un sitio web, la experiencia de usuario también pasa por la velocidad de carga y la comunicación con el cliente, dos factores que escapan al diseño visual. Su principal preocupación es cómo se siente el producto.
  • El diseño visual o gráfico se aboca a las características visuales de un producto: líneas, espacios, colores, texturas, tipografías y formas. Para el caso del diseño de interfaces, no tiene en cuenta factores como la transición entre distintas pantallas. Su principal preocupación es cómo se ve el producto.
  • El diseño de interfaces (UI) se limita mayormente al aspecto estético y la usabilidad de interfaces para máquinas y software, como las que podemos encontrar en computadoras, electrodomésticos, dispositivos móviles y otros dispositivos electrónicos. Su principal preocupación es cómo se presenta el producto.
  • El diseño de interacción es un campo dentro del diseño de experiencia de usuario que se aboca a la relación entre el usuario y el producto. Generalmente se habla de productos digitales, aunque algunos también incluyen a los productos físicos. Su principal preocupación es cómo reacciona el producto ante la acción del usuario. Para el caso de una interfaz digital, el diseño de interacción puede tomar decisiones sobre:
    • Cómo debería deslizarse un menú.
    • Qué efectos de transición utilizar.
    • Cómo debería transformarse un botón (por ejemplo, tras presionar el botón de play, este cambia su ícono por uno de pause).
    • Qué cambios deberían producirse cuando el usuario se desplaza vertical u horizontalmente por la página (por ejemplo, el header se achica y simplifica o hay un efecto de paralaje).
    • Cómo indicar que los datos ingresados en un formulario son correctos o incorrectos.

Como puede suponerse, en la práctica las fronteras entre estas disciplinas son difusas, y no es raro que una misma persona desarrolle más de una al mismo tiempo. Sin embargo, es importante destacar que en el diseño web el diseño de interacción juega un rol cada vez más importante, ya que las interacciones capaces de ser incorporadas en una página web crecen en variedad y complejidad a medida que avanza la tecnología. Características de CSS3 como las transiciones y las animaciones, softwares como Adobe Animate y API como WebGL presentan nuevas posibilidades y desafíos para el diseño de interacción.

Anti-patterns: un riesgo latente para la experiencia de usuario

Ya conocimos los dark patterns: trampas que los diseñadores de UX colocan voluntariamente en sus interfaces, con el fin de engañar al usuario. Un error similar, pero involuntario, son los anti-patterns: patrones de diseño que no funcionan bien o resultan contraproducentes. Para el diseñador Michael Boeke, un anti-pattern es un patrón de diseño que a simple vista parece beneficioso, pero trae consecuencias indeseadas; y debe ser marcadamente inferior a un patrón de diseño alternativo usado en otro lado.

Es habitual que, cuando vemos una misma práctica de diseño repetida alrededor de muchos sitios web, pensemos que es correcta y la apliquemos en nuestros proyectos. Pero este patrón, por más común que sea, puede ser perjudicial. Solo realizando pruebas y conociendo a nuestro público objetivo podemos darnos cuenta de si esa elección de diseño realmente ayuda al usuario a cumplir sus objetivos o, por el contrario, es una costumbre nociva demasiado extendida.

Conozcamos algunos anti-patterns:

  • «Haga clic aquí». El anchor text debe describir lo que hace el enlace. Por ejemplo, no tiene sentido usar la frase «Haga clic aquí para obtener más información»: lo correcto sería «Más información».
  • Elementos cliqueables que no parecen cliqueables. Los elementos «cliqueables» —mayormente, enlaces y botones— deben distinguirse de aquellos que no lo son. Por ejemplo, la tendencia al flat design hace que muchos botones, al no tener relieve, parezcan estar al mismo nivel que la pantalla, resultando indistinguibles del resto del contenido.
  • Mystery meat (carne misteriosa). Se refiere a los casos donde el usuario tiene que hacer clic sobre un enlace, o pasar el mouse por encima, para saber adónde conduce. Esto es habitual en muchos menús que usan íconos o imágenes en vez de texto: si el gráfico no es descriptivo, el usuario se ve obligado a pasar el mouse por encima para que el browser le informe a qué dirección conduce, o, en el mejor de los casos, para que aparezca un tooltip informando el destino. La frase mystery meat suele usarse para los productos de carne muy procesada (como salchichas o nuggets) cuyo origen es difícil de determinar.
  • Repetición robótica. Ocurre cuando el usuario debe ingresar más de una vez la misma información. Por ejemplo, cuando al llenar un formulario se le pide su edad y su fecha de nacimiento. Esto es innecesario, ya que el primer dato puede calcularse a partir del segundo.
  • Mala superficie para el touch. Los enlaces y botones deben estar suficientemente separados entre sí y contar con una superficie de al menos 48dp. Si esto no ocurre, el usuario de dispositivo táctil tendrá problemas para tocar el link correcto: el dedo podría exceder la superficie cliqueable o accionar un enlace adyacente.

Para evitar la aplicación de estos patrones, es importante realizar pruebas de usabilidad y no creer que lo que vemos en otros sitios es necesariamente correcto. Nosotros somos los únicos capaces de brindar la mejor experiencia de usuario posible para nuestro público particular.