Ir al contenido principal
Ir al contenido principal
Design SystemsApp

30 componentes que usas diariamente en tus diseños digitales y su origen en el mundo físico

Treinta controles digitales junto al objeto físico del que aprendieron su nombre, su forma o su lógica, animados en sincronía.

Origen físico de los componentes

3 de las 30 parejas

  1. Radio button

    Presintonías del autorradio

    Documentado

    Físico
    FM 88.5 94.1 101.3 106.7 MHz FM 1 FM 2 FM 3 FM 4
    Pulsar una tecla hace saltar la anterior. La exclusión es física.
    Digital
    Emisora favorita 88.5 94.1 101.3 106.7
    Elegir una opción deselecciona la anterior. La exclusión es una regla.
  2. Papelera

    Papelera de oficina

    Documentado

    Físico
    Lo que cae en la papelera acaba en el contenedor.
    Digital
    Escritorio Informe.pdf Papelera Restaurar
    La papelera digital es un purgatorio: todo se puede restaurar.
  3. Slide to unlock

    Cerrojo de puerta

    Documentado

    Físico
    Se corre el pestillo hasta el tope: la puerta queda abierta.
    Digital
    09:41 domingo, 18 de octubre desliza para desbloquear
    Si no llegabas al final, volvía atrás, como un pestillo a medio correr.
30 componentes que usas diariamente en tus diseños digitales y su origen en el mundo físico

Únete a la comunidad

Crea una cuenta gratis para acceder a la app interactiva y las descargas.

Iniciar sesión o crear cuenta

Cada vez que arrastras un archivo a la papelera o pulsas un botón en pantalla, repites un gesto que aprendiste mucho antes de que existieran las pantallas. Los controles digitales tomaron prestado el nombre, la forma o la lógica de objetos que ya estaban en el mundo, y la lámina de este recurso los pone uno al lado del otro.

El origen: la metáfora como solución de diseño

Las primeras interfaces gráficas tenían que conseguir que alguien sin formación técnica supiera qué hacer al sentarse delante de un ordenador, y la respuesta fue el skeuomorfismo: diseñar imitando materiales y objetos físicos para que la función se entendiera sola.

La metáfora del escritorio nació en Xerox PARC y llegó al gran público con el Apple Lisa, presentado en enero de 1983, y con el Macintosh un año después. Apple mantuvo esa estrategia en iOS hasta que iOS 7, disponible desde el 18 de septiembre de 2013, rediseñó por completo la interfaz.

Affordance y signifier

Una 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 y lo definió en The Ecological Approach to Visual Perception (1979). Donald Norman lo llevó al diseño en 1988 y veinte años después corrigió el rumbo: lo que de verdad diseñamos es la señal que hace visible esa posibilidad. A esa señal la llamó signifier: el borde de un botón, el surco de una ranura, la sombra bajo una tarjeta.

Lo que se pierde y lo que se gana

Lo primero que se pierde es el tacto. En el mundo físico la acción queda inscrita en la materia, el objeto responde a la vista, al tacto y al oído a la vez, y muchas veces no hay vuelta atrás. A cambio, lo digital gana el estado: 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 física es mecánica e irreversible; la digital es estado y reversible.

Cómo leer la lámina

Cada fila es una pareja: 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. Cada pareja lleva una marca de certeza sobre su origen:

  • Documentado: hay una fuente que lo establece.
  • Probable: parentesco razonable sin fuente directa.
  • Disputado: hay varias explicaciones.
  • Metáfora: imagen elegida por parecido, no origen histórico.

Las parejas marcadas como metáfora sirven igual para pensar un componente, solo que no cuentan de dónde viene. Si las animaciones te distraen, puedes pausarlas desde la propia lámina.

Referencias

componenteshistoria del diseñoskeuomorfismoaffordancesdiseño de interacciónsistemas de diseño

Comentarios

CargandoCargando comentarios…