Fuente: https://alistapart.com/article/the-elegance-of-imperfection

La elegancia de la imperfección

Javier Cuello
A List Apart en Español

--

Por David Sherwin. Original en inglés, traducido al español por Javier Cuello

Todo lo que sé sobre la elegancia de la imperfección, lo aprendí de un plato de porcelana blanco que compré en Kyoto.

¿Qué tiene este plato que lo haga tan especial? Antes de que se pusiera al fuego, era perfectamente redondo, pero el artista desemparejó los bordes a propósito. Es elegante, y mejora con cada cosa que toca su superficie: una pera verde brillante, chocolate cortado en trocitos, un puñado de almendras tostadas. Hoy, este plato descansa en la mesa de la oficina que tengo en casa. Representa una lección crucial acerca del arte: la utilidad no depende de la perfección de la forma. De hecho, las lecciones que aprendí sobre construir experiencias elegantes —desde un brief creativo hasta el diseño de interfaces— involucran abandonar completamente el deseo de perfección.

Hay una anécdota, contada una y otra vez en la literatura japonesa, acerca de un maestro Zen que está hospedándose con un sacerdote en un templo cerca de Kyoto. El sacerdote va a recibir invitados esa tarde, y ha pasado la mayor parte del día en el jardín —podando el musgo, arrancando la hierba, y dándole pequeños ajustes a las hojas, todo para conseguir el mismo estado de perfección que los constructores originales del templo habían diseñado.

“¿No es hermoso?”, le preguntó el sacerdote al maestro…

El maestro asintió. “Sí… tu jardín es hermoso, pero hay algo que falta…”

El viejo señor caminó lentamente hacia un árbol que crecía en el centro de una armónica combinación de roca y musgo. Era otoño y las hojas estaban secándose. Todo lo que el maestro tuvo que hacer fue sacudir el árbol un poco, y el jardín estaba nuevamente lleno de hojas, repartidas en patrones al azar.

“Eso era lo que le hacía falta”, dijo el maestro.

Janwillem van de Wetering, The Empty Mirror

Wabi-sabi y hacer sitios web

Cuando trato de pensar en un paradigma de perseguir la elegancia a través de la imperfección, se me viene a la cabeza el concepto japonés de wabi-sabi.

Leonard Koren, en su libro Wabi-Sabi for Artists, Designers, Poets & Philosophers, describe las siguientes cualidades materiales del wabi-sabi: asimetría, aspereza, simplicidad, modestia, intimidad y la sugerencia de un proceso natural.

Esos atributos parecen describir solamente la estética de un diseño. Sin embargo, los diseños más exitosos infunden esas consideraciones en cada etapa, desde la idea hasta el producto terminado. Como Koren escribió:

La simplicidad de wabi-sabi se entiende mejor como el estado de gracia al que se llega con una inteligencia sobria, modesta y sentida. La estrategia principal de esta inteligencia es la economía de medios. Quita hasta dejar la esencia, pero no elimines la poesía. Mantén las cosas limpias y accesibles, pero no esterilices. (Las cosas que son wabi-sabi son emocionalmente tibias, nunca frías). Generalmente esto implica una paleta limitada de materiales. También significa mantener las funciones sobresalientes al mínimo. Pero no significa eliminar el tejido conectivo invisible que de alguna manera une los elementos en un todo significativo.

Dotar de corazón a las experiencias web puede ser difícil, ya que los sitios web y aplicaciones son principalmente producidas por lógica (a través de código). Aunque no puedas crear un sitio web que funcione como una expresión pura de wabi-sabi, encontrar formas para añadir una pizca de wabi-sabi a nuestras creaciones lleva nuestro trabajo a una nueva dimensión. Nos fuerza a pensar cómo el orden natural de nuestro mundo físico debería comunicar a los mundos virtuales de información que creamos. Una de las formas que este orden natural encuentra para expresarse en el mundo del diseño web es a través del concepto de elegancia.

Taxonomía de la elegancia

Jeremy Alexis, del IIT Institute of Design, nos pide que pensemos en tres tipos de elegancia cuando enfrentamos un problema de diseño: elegancia lógica, elegancia sistémica y elegancia estética.

La elegancia lógica se desprende de un propósito expresado claramente para que exista un sitio web. Elaborar una idea lógica y elegante para un sitio web trae aparejada claridad a un conjunto complejo de necesidades de usuario y requisitos de negocio.

Hace poco vi a Luke Wroblewski hablar sobre la prueba de rediseño de la página de inicio de Yahoo. Luke describió la idea principal detrás del rediseño: Yahoo sería “el tablero para que lo te gusta en internet”. El equipo completo del rediseño se adhirió tanto a este principio como a la complejidad de su tarea de diseño, y creó una experiencia más significativa para sus usuarios.

La elegancia sistémica surge del andamiaje que sostiene la idea principal de un sitio. En un sitio web o aplicación web, este andamiaje incluye la arquitectura de información, experiencia de usuario y diseño de interacción tanto como estrategia de contenidos y el flujo de información a través del sistema.

Netflix proporciona un ejemplo excelente de elegancia tanto lógica como sistémica. El fuerte foco de la compañía en proveer acceso asequible a películas, combinado con una experiencia de usuario en constante evolución anclada en una arquitectura elegante del sitio web, permite a los visitantes usar funciones sociales y ver películas en línea — mientras, simultáneamente, sus elecciones mejoran el motor de recomendaciones del sitio.

La elegancia formal o estética involucra el aspecto visual de un sitio web. Esto incluye el diseño de interfaz y las cualidades de marca que impregnan el lenguaje visual del sitio, su contenido e interacciones de los usuarios.

Cualquier diseño de sitio web que se enfoque en la claridad puede ser considerado formalmente elegante —aún si el sitio es un poco tonto, tal como National Geographic Kids. Un ejemplo más obvio podría ser el sitio web de Luigi Bormoli, que usa AJAX para producir una presentación elegante de cristalería. Como en un catálogo impreso, el sitio web alienta a los usuarios a seleccionar y explorar productos, eliminando las recargas innecesarias de página. Sin embargo, si quitas los elementos estéticos que responden a AJAX, no es tan elegante.

Quisiera agregar una variedad más de elegancia a la lista de Alexis. La elegancia natural trata con el sentimiento que un sitio web o aplicación expresa a través de su comportamiento a lo largo del tiempo, y está arraigada en las reglas de orden que rigen la naturaleza.

No estoy hablando solamente de sistemas de retículas y diseños de pantallas terrosas. La elegancia natural se refiere a las formas en que sitios web y aplicaciones pueden funcionar de una manera más poderosa entrelazando la imperfección natural en cada nivel de sus diseños. Esta sensibilidad al sentimiento debería impregnar el esfuerzo completo, desde el trabajo fundacional de experiencia de usuario hasta la interfaz final.

Es posible crear sitios web perfectamente agradables enfocándose solamente en la elegancia formal, estructural y lógica. Pero aquellos sitios web que se adhieren a este cuarto tipo de elegancia son percibidos por los usuarios como seres vivientes que pronuncian palabras profundas; son el matrimonio de forma, función, contenido agradable y sentimiento personal.

Donde wabi-sabi se encuentra con el diseño de interfaces

Recuerda los atributos de wabi-sabi: asimetría, aspereza, simplicidad, modestia, intimidad y la sugerencia de un proceso natural. Probablemente puedes imaginar dónde estas características se pueden expresar en el diseño visual de tu sitio web. Piensa en las siguientes posibilidades:

El sitio web como un libro —El modelo de página:

  • Las excepciones visuales crean variedad, forzando al ojo a enfocarse en el contenido prioritario (asimetría),
  • Animado por la textura de la superficie para crear una ilusión de dimensionalidad (aspereza),
  • Tensión de diseño nacida de un sistema de retícula en un plano 2D (simplicidad) o una disposición orgánica que no puede convertirse fácilmente en un sistema (sugerencia de un proceso natural),
  • La tipografía es estilizada de una forma controlada (modestia),
  • Y el diseño, desde su idea principal hasta los detalles más finos, transmite emoción (intimidad).

Craiglist es un ejemplo destacado, y de alguna forma rudimentario, de un sitio web que presenta este modelo de diseño de una manera naturalmente elegante. Aunque el resultado puede que no sea visualmente estupendo, el sitio refleja las formas en las que vemos y compartimos información como comunidad. Craiglist evolucionó orgánicamente a su propio modo a través del tiempo, mientras se mantuvo fiel a un tipo de expresión humana que simula un tablero de anuncios del mundo real.

No obstante, las reglas cambian cuando hablas de sitios web que van más allá del modelo de página para simular nuestro mundo físico en su organización y comportamiento. Hay un fino balance entre orden y caos cuando se diseñan los siguiente tipos de sitios web:

El sitio web como un jardín— El modelo de mundo físico:

  • Tensión de diseño nacida de la relación entre figura y fondo en un plano 2D (asimetría) con ilusión de una tercera dimensión en un eje z,
  • Las texturas de superficies son plasmadas en objetos, simulando la realidad,
  • Y las excepciones visuales, si no se ajustan a la simulación, rompen la ilusión.

The Eco Zoo toma la elegancia natural y la hace física. En este sitio, puedes “trepar” un árbol y leer historias en un libro en forma de pop-up acerca de criaturas tales como Yagi-Chan, una cabra que viste ropa de oveja.

El sitio web como Placa de Petri — El modelo molecular:

  • La tensión de diseño nace de la atracción gravitatoria entre los elementos de la página,
  • Los objetos no pueden tener un alto nivel de detalle, de otra manera la UI es puro ruido,
  • Y el sitio es la excepción visual, yendo de la desorganización (exploratoria) a la organización (ordenada) con un click.

WeFeelFine.org —un sitio que recopila y visualiza datos sobre los sentimientos humanos de blogs alrededor del mundo— demuestra la facilidad, flexibilidad y fluidez característica de la elegancia natural.

Un Kōan para el diseñador web

Nada de lo que vemos o escuchamos es perfecto. Pero justo ahí en la imperfección se encuentra la realidad perfecta.

–Shunryu Suzuki

Hemos explorado una cantidad de temas que, cuando se plasman correctamente en un sitio web bien pensado, pueden infundirlo con inteligencia sentida más allá de la estética pura. En pequeñas dosis, el pensamiento wabi-sabi puede proveer un contrapunto a nuestra tendencia modernista de refinar las cosas hasta su más mínimo detalle, dotando de un poco de gracia a lo que de otra manera sería un conglomerado de píxeles distribuidos rígidamente en la pantalla.

Ten en cuenta que la búsqueda de la perfección de un sitio web es siempre una negación de la perfección que existe dentro de nosotros mismos en el mundo físico. Percibir apenas un suspiro de nuestra propia “realidad perfecta” es justamente la experiencia por la que nuestros usuarios y clientes nos han contratado; para capturarla, cuidadosamente, a través de nuestro trabajo.

Si te gusta lo que hace A List Apart, ¡haz una inversión en apoyarnos! O síguenos en Twitter y Facebook. ¡Gracias!

--

--