Tiempos interesantes

 Vivimos tiempos interesantes en el diseño gráfico.

Vale, eso es una maldición tradicional china. Vivir tiempos interesantes es un puteo significativo: tienes que estar alerta, no puedes relajarte, y la siguiente oleada se te puede llevar por delante. Esos franceses con pelucas ridículas vivieron tiempos interesantes cuando al vulgo le dio por recortar el gasto a la altura del cuello, o (en términos menos drásticos) los vivieron los copistas cuando Gutemberg empezó a sacar biblias como churros.

Pero vivir tiempos interesantes, a base de tenerte con los nervios de punta, te sirve para ver un montón de nuevas ideas, nuevas corrientes y nuevos métodos. Por ejemplo, la transición que están viviendo las libretas de dibujo de siempre para convertirse en esto:

Las nuevas libretas no te dejan arrugar ni marranear el papel, no se ven del todo bien bajo la luz solar directa, y se te quedarán sin batería si las usas de seguido durante demasiadas horas. Pero, oye, a cambio tienes infinitas páginas en infinitos blocs, y todas las herramientas contenidas en el propio soporte. Además, ¿has visto qué bonito? Se abre, se cierra, todo es fluído, natural y, qué demonios, elegante con rabia.

Pero se nos olvida una cosa.

Paper es una aplicación. El iPad NO es una libreta.

La pelea

La palabra rara del día es Skeumorfismo. Se dice que algo es skeumorfo cuando muestra aspectos de una versión anterior de sí mismo. Unas chanclas de plástico con esa textura de tela hecha a molde en la cinta, una bombilla con forma de llama o las páginas dobladas en un libro digital son skeumorfos.

Este calendario no está hecho de papel, pero tiene rotos en el borde superior.

El uso de elementos de apariencia física empezó a popularizarse con el diseño de webs "2.0" (con mucha carga de degradados y brillos), y ha madurado hacia acabados más discretos pero que retienen ese aspecto realista. Hoy día es común encontrar webs con acabados de papel o de tela, botones que parecen reales, y ornamentos bonitos pero definitivamente superfluos. Y aquí empiezan las discusiones. Hay un fuerte movimiento en el mundo del diseño gráfico que dice que eso de ponerle puntadas de hilo a la banda superior de una web es una cutrez.

—¡Mentiras! —dice Pseudónimo Helvética— ¡Es una pantalla y un montón de código! ¡No hay tela, ni papel, ni los botones están hechos de plástico mate! ¡No lo disfraces!

Y tiene razón.

—¡Chorradas! —dice John Appleseed— ¡Una web que resulta familiar es más agradable! ¡Los ornamentos dan vida a una interfaz que estaría desolada sin ellos!

Y tiene razón también.

El diseño de interfaces ha ido evolucionando hasta convertirse en diseño de interacción (o de experiencia de usuario, UX que lo llaman). El diseño gráfico sirve para comunicar un mensaje, pero ese mensaje es mucho más que el "pulsa aquí" del botón al final de un formulario. El mensaje también es el tono de la comunicación, es la sensación que queremos evocar en el usuario, el espectador o el lector, y ahí es importante saber aprovechar otra palabra rara.

Metáfora.

El skeumorfismo no es sólo un método decorativo. Ese "diseño vestigial" a menudo sirve para explicar sin palabras el funcionamiento de los elementos de una interfaz. Por eso los botones en la pantalla de tu ordenador tienen una pequeña sombra por debajo desde tiempos de Windows 3.1

Botones que parecen elementos físicos para que sepas que puedes pulsarlos.

Si nos ponemos serios, cualquier elemento de apariencia física es un skeumorfismo gratuito. El falso volumen en los botones del navegador, la sombra que proyecta la ventana sobre el escritorio o los remates en una M que no ha visto en su vida un cincel y un martillo.

Para semejante tontería prefiero no ponerme serio.

El skeumorfismo no es malo de por sí, igual que no lo son la ornamentación o los filtros chuscos del instagram. En algunas ocasiones puede ser una ayuda fundamental para comprender una herramienta, en otras puede limitarse a adornar el conjunto general. A veces una interfaz te pedirá una Helvética negra enorme sobre un fondo blanco, y otras te vendrá bien poner un fondo con textura de lienzo y el texto construído a base de explosiones de óleo.

Sólo importa la experiencia de usuario. En base a eso podemos sacar tres normas fáciles para aplicar skeumorfismos sin liarla.

Las tres leyes

Asimov no tiene nada que ver con esta entrada, pero tiene unas patillas poderosas.

El diseño gráfico va de transmitir la información adecuada, con el tono adecuado, de una forma eficaz y agradable. Si tuviera que resumir, diría:

1. No confundas:
Vale, la ornamentación no es mala, pero si todos tus elementos están hechos con volumen y parecen botones yo me desesperaré haciendo clic en cajas de texto plano. Lo mismo para los enlaces sin subrayar. Respeta las expectativas de tus usuarios y mantén un lenguaje coherente.

2. No hagas perder el tiempo:
La navegación no tiene por qué ser instantánea, pero tiene que ser fluída. Hacer que una nueva ventana "suba" desde el borde inferior de tu navegador está bien; si sube, se gira y empieza a mostrar el texto letra por letra como si se estuviera escribiendo a mano habré cerrado la ventana antes de llegar a "haz clic aquí".

Ojo: no me hagas perder el tiempo, ni tampoco el espacio. Si la ornamentación se está comiendo la mayor parte de la superficie de tu interfaz (y no hablo de dejar espacio en blanco) lo estás haciendo mal.

3. Sigue al contenido:
Un recetario virtual usa el mismo lenguaje escrito que un manual de finanzas o una aplicación sobre punk rock, ¿por qué iban a usar el mismo lenguaje visual?. Adorna en la medida en que el contenido y el tono lo requieran, y toma decisiones justificadas respecto a qué entra y qué no en un diseño.

Aplica estas tres normas y tendrás un resultado final claro, eficaz y coherente. Y según le pilles el tranquillo podrás aplicar la cuarta ley...



4. Pásate todo esto por salva sea la parte.
Si funciona, funciona. No hay más que hablar.

 Hasta la próxima entrada.