ContraformaLos fundamentos del diseño, explicados

El diseño de interfaz

El diseño de interfaz es la disciplina que define los componentes con los que una persona opera un programa, y sobre todo los estados que cada componente puede tener, porque un botón no es un dibujo sino siete situaciones distintas del mismo botón.

Término

El diseño de interfaz (UI, user interface)

Categoría

Disciplina de pantalla, orientada al sistema de componentes

No confundir con

La experiencia de usuario, que es el resultado y no la pieza

Dónde se decide

Al definir el componente, no al dibujar la pantalla

Lámina dibujada: El diseño de interfaz. Un componente no es un dibujo: es la tabla de todos sus estados.
Un componente no es un dibujo: es la tabla de todos sus estados.

Qué es el diseño de interfaz

El diseño de interfaz produce el juego de piezas con el que se arma cualquier pantalla del producto: campos, botones, listas, avisos, tablas y navegación. Lo que lo separa de sus disciplinas hermanas es la unidad de trabajo. Un componente de interfaz no es una imagen, es el conjunto de sus estados, y son siete los que hay que resolver siempre: reposo, hover, foco, activo, inhabilitado, carga y error. Una pantalla bonita con dos estados dibujados es una pantalla sin terminar.

Qué produce: la tabla de estados de cada componente

Lo que produce un encargo de interfaz no es un juego de pantallas sino una biblioteca de componentes, y cada componente llega con sus siete estados especificados.

EstadoQué le comunica a quien lo usaQué pasa si no se dibuja
ReposoEsto existe y se puede usarEl componente no se distingue del texto
HoverEl puntero está encimaSe duda si el elemento responde
FocoEl teclado está aquíQuien no usa ratón se pierde
ActivoLa pulsación se registróSe pulsa dos veces por las dudas
InhabilitadoAhora no, y por algún motivoSe insiste sobre algo que no responde
CargaEstá ocurriendo, hay que esperarSe abandona la operación a medias
ErrorQué salió mal y qué hacerSe repite el mismo error

Qué decide quien lo ejerce, y contra qué criterio

Quien ejerce el diseño de interfaz decide, antes que el aspecto, cuántos componentes distintos va a haber, y el criterio es de resta. Dieter Rams, diseñador de Braun, formula sus diez principios del buen diseño en la década de 1970, y el décimo dice: tan poco diseño como sea posible. Aplicado a una interfaz significa que dos botones que hacen lo mismo con dos formas distintas son un defecto, no variedad, porque obligan a aprender dos veces la misma regla.

De qué fundamentos depende: valor del color, tipografía y retícula

El fundamento del que más depende una interfaz no es el matiz sino el valor, la segunda de las tres dimensiones con que Albert Munsell ordena el color en el sistema que publica en 1905, junto al matiz y al croma. Un estado inhabilitado se distingue por valor, no por color, porque el color no siempre llega. La tipografía aporta la jerarquía dentro del componente, la retícula fija la separación entre piezas, y el proceso aporta lo demás: sin una norma escrita, cada pantalla nueva reinventa el espaciado.

Con qué se confunde: experiencia de usuario, interacción y desarrollo

El diseño de interfaz se confunde con tres campos vecinos y la diferencia es de objeto. La experiencia de usuario mide el resultado del uso y se apoya en normas como la ISO 9241-11, mientras la interfaz produce la pieza. El diseño de interacción decide el comportamiento en el tiempo, es decir qué responde y cuándo. Y la ingeniería de software construye lo especificado. Lo que se llama interfaz gráfica de usuario, GUI, es el conjunto de esas piezas visibles, no la disciplina entera.

La misma frontera explica por qué una interfaz correcta puede dar una experiencia mala, y por qué medir la segunda no arregla la primera.

Dónde se ve el resultado: el cajero, el trámite y el tablero

El resultado se ve en cualquier pantalla que se opera de pie y con prisa: un cajero automático, un formulario de trámite, un tablero de control. Ahí funciona un principio de percepción anterior a las computadoras: Edgar Rubin publica en 1915 la figura ambigua que se conoce como la copa de Rubin, y muestra que figura y fondo se disputan la lectura. Un botón que no se separa de su fondo no se lee como botón, por muy bien alineado que esté.

Cómo se estudia y cómo se juzga una interfaz

Una interfaz se juzga por sus estados y por su coherencia, no por su pantalla de portada: si el mismo aviso de error se ve de tres maneras en tres lugares, el sistema no existe. Ese modo sistemático de trabajar tiene escuela: la Hochschule für Gestaltung de Ulm funciona entre 1953 y 1968 y lleva el método más lejos que la Bauhaus. Sobre las herramientas conviene una advertencia: un programa de diseño se juzga por si permite definir un componente una vez y reutilizarlo, no por su catálogo de efectos.

Qué cambia cuando el sistema es digital

Un sistema de componentes digital tiene un pariente impreso, y compararlos ordena el asunto. Adrian Frutiger publica Univers en 1957 con 21 variantes numeradas en una matriz de peso y anchura: no dibujó una tipografía, dibujó un sistema donde cada pieza tiene coordenadas. Una biblioteca de interfaz aspira a lo mismo, con dos diferencias, que el sistema digital se actualiza para todo el mundo a la vez y que sus piezas tienen estados. Por eso la documentación pesa más que el archivo de diseño.