El origen físico de los componentes de tu producto digital

Cada vez que arrastras un archivo a la papelera, pulsas un radio button o deslizas para desbloquear el móvil, repites un gesto aprendido mucho antes de que existieran las pantallas. Los controles digitales no nacieron en el vacío: tomaron prestado el nombre, la forma o la lógica de objetos físicos que ya estaban en el mundo.

Treinta de esos préstamos están recogidos en el recurso 30 componentes que usas diariamente en tus diseños digitales y su origen en el mundo físico, del DesignOps Playbook, animados en sincronía para que veas el gesto compartido entre cada objeto y su componente digital.

El skeuomorfismo como punto de partida

Al principio, casi nadie sabía usar una pantalla. Las primeras interfaces gráficas tenían que conseguir que alguien sin formación técnica supiera qué hacer al sentarse frente a un ordenador, y la respuesta fue el skeuomorfismo: diseñar imitando materiales y objetos conocidos para que la función se entendiera sin necesidad de leer un manual.

La metáfora del escritorio nació en Xerox PARC. Con el Apple Lisa, presentado el 19 de enero de 1983, llegó al gran público por primera vez, y el Macintosh, un año después, lo consolidó. Si algo parecía una carpeta, la gente entendía que podía guardar cosas dentro, sin que nadie se lo explicara.

Uno de los ejemplos más precisos de este préstamo es el radio button. El nombre viene de las teclas de presintonía de los autorradios: al pulsar una, la anterior saltaba de forma mecánica. La exclusión mutua no era una regla de código sino una propiedad del mecanismo. En pantalla, esa lógica pasa a ser comportamiento, pero sigue imitando lo que el metal hacía solo.

Con el tiempo, ese enfoque fue cediendo espacio a interfaces más abstractas. iOS 7, disponible desde el 18 de septiembre de 2013, rediseñó por completo su interfaz. Aun así, la herencia sigue ahí, en los nombres, los gestos y la lógica de muchos controles, aunque por el camino algo se queda fuera.

Lo que se pierde y lo que se gana

Lo primero que desaparece es el tacto, y con él la certeza inmediata de que algo ha ocurrido.

En el mundo físico, la acción queda inscrita en la materia. El fader de una mesa de mezclas tiene recorrido y fricción: puedes ajustarlo sin mirar porque el ángulo del pulgar te dice dónde estás. El teclado mecánico tiene tope físico: cada tecla baja, choca con él y vuelve, y el dedo sabe que ha escrito incluso antes de que aparezca la letra en pantalla.

En pantalla, el teclado solo se ilumina. La certeza la simula la vibración háptica y, en un dispositivo sin ella, desaparece. Se conservan la forma y el gesto, y lo que se pierde es esa respuesta que te confirmaba que lo habías hecho.

Lo que se gana, en cambio, es el estado. En digital, marcar y desmarcar cuesta lo mismo, puedes deshacer y la papelera sirve justo para recuperar lo que has tirado. Por eso las dos columnas de la lámina llevan subtítulo: la columna física es mecánica e irreversible; la digital es estado y reversible.

La paradoja de la papelera

La papelera es el caso más curioso, porque funciona justo al revés que el objeto que imita. La papelera digital llegó con el Apple Lisa en 1983 y se quedó con la imagen: tiras algo y desaparece de tu vista. Pero la papelera de la oficina es un punto de no retorno, y la digital no lo es.

Todo lo que cae ahí se puede restaurar. Va en contra del objeto del que tomó el nombre y, a la vez, es lo que la hace útil.

Con deslizar para desbloquear pasa algo distinto: aquí el préstamo fue tan concreto que acabó en una patente.

Un gesto con patente

En diciembre de 2005, Apple solicitó la patente del gesto de slide to unlock: deslizar para desbloquear imitaba correr un pestillo.

Si no llegabas al final del recorrido, volvía atrás, como un pestillo a medio correr. En 2016, con iOS 10, desapareció de los iPhones.

No todos los conceptos del diseño de interacción vienen de objetos mecánicos. Algunos tienen que ver con cómo la mente procesa lo que ve, y ahí está la distinción entre affordance y signifier.

Affordance y signifier, dos conceptos que conviene distinguir

La affordance es la relación entre un objeto y lo que permite hacer con él: un pomo redondo invita a girar, una placa plana invita a empujar. El psicólogo J. J. Gibson acuñó el término en 1966 y lo definió en The Ecological Approach to Visual Perception (1979). Donald Norman lo llevó al diseño de interfaces en 1988.

Oye, pero hay un matiz que importa. En 2008, Norman propuso corregir el uso del término: lo que diseñamos no es la affordance en sí, sino la señal que la hace visible. A esa señal la llamó signifier. El borde de un botón, el surco de una ranura, la sombra bajo una tarjeta: eso es un signifier. La affordance es la capacidad; el signifier es la señal que te invita a usarla.

Esta distinción cambia qué preguntas haces al diseñar. No es lo mismo preguntarse si algo parece pulsable que preguntarse si hay una señal visible que invite a pulsarlo.

El indicador de espera es un buen ejemplo de señal que cambia de imagen sin cambiar de función. Windows usó un reloj de arena como cursor de espera desde la versión 1.0 hasta XP, y Vista lo sustituyó por un círculo animado.

Las migas de pan y su origen literario

Las migas de pan de navegación toman el nombre directamente del cuento de Hansel y Gretel: dejas un rastro para saber de dónde vienes y poder volver. En el cuento, los pájaros se comen las migas y Hansel no puede regresar, pero en la interfaz las migas se quedan donde están. Aquí el préstamo no viene de un objeto, sino de un cuento.

Mi opinión

Llevo tiempo trabajando con equipos de diseño y hay algo que me sigue llamando la atención: la mayoría de las personas que usan estas interfaces a diario no saben de dónde vienen los nombres, y aun así los entienden sin problemas. Y creo que ahí está la gracia de un buen préstamo: no necesitas conocer el cuento para saber que las migas te devuelven al sitio de donde vienes.

Y mira, hay algo más que me parece relevante. La distinción entre lo que tiene un origen documentado y lo que es una metáfora elegida no es trivial cuando trabajas en sistemas de diseño. Si tienes que explicar por qué un componente funciona como funciona, o decidir cómo llamarlo en tu sistema, saber si estás ante una herencia mecánica real o ante una convención cambia el argumento. Con los que tienen un origen documentado puedes apoyarte en la historia; con las metáforas, el argumento es otro. Por eso en la lámina cada pareja lleva su nivel de certeza.

Cierre

Tienes las treinta parejas en el recurso 30 componentes que usas diariamente en tus diseños digitales y su origen en el mundo físico: el objeto físico a la izquierda y su componente digital a la derecha, animados con el mismo reloj para que veas el gesto compartido. Si diseñas componentes, si trabajas en un sistema de diseño o si simplemente te pica la curiosidad de saber por qué el scroll se llama scroll, hay treinta respuestas esperándote.

Referencias

• Radio button, Wikipedia: origen del nombre en las teclas de presintonía de los autorradios.
• Computer History Museum: «The Lisa: Apple's Most Influential Failure»: el Apple Lisa, presentado el 19 de enero de 1983, y la metáfora del escritorio.
• Apple Lisa, Wikipedia: contexto histórico y relación con Xerox PARC.
• Slide to unlock, Cult of Mac: patente solicitada en diciembre de 2005; gesto retirado con iOS 10 en 2016.
• Windows wait cursor, Wikipedia: el reloj de arena como cursor de espera, de Windows 1.0 a XP.
• Breadcrumbs, Syntagm: origen del nombre en Hansel y Gretel.
• Norman, D. A. «Signifiers, not affordances». Interactions, 15(6), 2008.
• Affordance, Wikipedia: Gibson (1966, 1979) y Norman (1988).
• Apple. «iOS 7 With Completely Redesigned User Interface»: disponible el 18 de septiembre de 2013.