A

Alfonso Morcuende

re-new Orleans

Neighborhood

Won't You Be My Neighbor?

Photo by Fuzzy Images
Publicado en Linkedin el 10 de julio de 2018

 

Fred Rogers , al llegar a casa, se cambiaba su ropa de trabajo por una más cómoda, zapatos por zapatillas y americana por chaqueta de lana tejida por su madre, siempre tejida por su madre. Fred murió en 2003, pero su chaqueta se guarda en “The National Museum of American History“, también conocido como “The Smithsonian“. Pocos objetos en este museo despiertan más cariño que esta humilde chaqueta.

Durante más de treinta años Fred Rogers fue el vecino que todos los niños quisieron tener. En su programa infantil “Mister Rogers’ Neighborhood” promovió, de forma incansable, el bien estar emocional y moral de niños entre dos y seis años. Para millones de americanos Fred representa los mejores valores de un ser humano: respeto, compasión, integridad y humildad.

Su lenguaje era directo y claro para los niños, sus palabras medidas y pensadas una por una. Para Fred, el lenguaje con el que nos dirigimos a un niño condiciona la manera en que ellos pueden controlar sus emociones. El programa de Fred comenzó en la década de los 60, en un tiempo convulso para la sociedad americana; guerra, conflictos raciales, criminalidad rampante. En su programa los niños pudieron entender la forma de hacer frente a situaciones emocionalmente tan complejas como el asesinato, el divorcio, el suicidio, incluso un episodio especial el día después del 11-S y todo gracias a un lenguaje pensado para ellos.

Fred midió cada palabra en sus episodios de una manera obsesiva, su mayor preocupación era que sus palabras fueran malinterpretadas. Por ejemplo, cada episodio terminaba con la canción “Tomorrow” en la que s despedía de su audiencia hasta el día siguiente, la letra de la canción se repetía todos los días, excepto los viernes en el que la letra cambiaba para que los niños no esperaran a verle el sábado, día en el que no se emitía su programa.

 

 

¿Qué es un sistema de diseño?

Un sistema de diseño es el lenguaje creado y compartido dentro de un equipo de producto. Este lenguaje está compuesto por patrones interconectados y reutilizables entre sí. Un sistema de diseño consigue que el todo sea mayor que la suma de sus partes. A diferencia de otros productos, por ejemplo una guía de estilos, un sistema de diseño siempre está vivo. Su objetivo final es asegurar la coherencia de un producto a medida que su complejidad aumenta.

Cuando creamos un sistema de diseño estamos creando un lenguaje común que permite colaborar a gente de dientes equipos alrededor de algo tan complejo y cambiante como un producto digital. No es un lenguaje de diseño, es el lenguaje de diferentes equipos, es un lenguaje que les permite expresar opiniones para tomar decisiones de negocio, diseño o desarrollo.

No dibujamos un botón, explicamos como funciona, cuando usarlo, el motivo de tener este botón en particular, su nombre, sus estados, cómo ha de ser su literal… Todos los aspectos de un componente y lo que le rodean han de ser pensados, perfilados y pulidos una y otra vez. Tal y como hacía Fred y su equipo.

 

El “Fredish”

Era tal el cuidado en el proceso de creación de Fred y su equipo de contenidos que crearon el término “Freddish“. El “Fredish” era un sistema de pasos para traducir del lenguaje común a un lenguaje que comunique sin ambigüedades a un niño:

 

  1. Exprese la idea que desea comunicar lo más claramente posible, en términos que un preescolar pueda entender”. Ejemplo: “Es peligroso jugar en la calle”.
  2. Escriba de una manera positiva el mismo mensaje”. Ejemplo: “Es bueno jugar en un lugar seguro”.
  3. Reformule su idea, teniendo en cuenta que los niños en edad preescolar aún no pueden hacer sutiles distinciones y necesitan ser redirigidos a las autoridades en las que confían”. Ejemplo: “Pregunta a tus padres dónde es más seguro jugar”.
  4. Reformule su idea para eliminar todos los elementos que puedan considerarse prescriptivos, directivos o instructivos”. En el ejemplo, eso significaría deshacerse de “preguntar”: “Tus padres te dirán dónde es más seguro jugar”.
  5. Reformula cualquier elemento que sugiera certeza”. Ejemplo “voluntad”: “Tus padres pueden decirte dónde es más seguro jugar”.
  6. Reformule su idea para eliminar cualquier elemento que no se aplique a todos los niños”. No todos los niños conocen a sus padres. Ejemplo: “Tus adultos preferidos pueden decirle dónde es más seguro jugar”.
  7. Agregue una idea motivacional simple que brinde a los niños un motivo para seguir sus consejos”. Ejemplo: “Tus adultos favoritos puedan decirle dónde es más seguro jugar. Es bueno escucharlos.”
  8. Reformule su nueva declaración, repitiendo el primer paso”. Ejemplo “Bueno” representa un juicio de valor, entonces: “Tus adultos preferidos pueden decirle dónde es más seguro jugar. Es importante tratar de escucharlos.”
  9. Reformule su idea por última vez, relacionándola con alguna fase de desarrollo que un niño en edad preescolar pueda entender” Ejemplo: “Tus adultos favoritos pueden decirle dónde es más seguro jugar. Es importante tratar de escucharlos, y escuchar es una parte importante del crecimiento”.

 

Nuestro Fredish

Nuestros lenguajes no tienen palabras con las que componen mensajes, tienen patrones de diseño. Un patrón es una solución reproducible frente un problema que se repite. Cuando diseñamos realizamos predicciones sobre los modelos mentales de un usuario, de esta forma esperamos que nuestras soluciones sean entendidas intuitivamente. Solemos utilizar soluciones ya implementadas, y el acumulado de estas implementaciones es lo que denominamos estándar o patrón de diseño. No solemos utilizar patrones nuevos a un problema estándar, ya que esto conlleva un aprendizaje por parte del usuario.

Un patrón de diseño es el uso continuado y combinado entre diferentes componentes que definen una interfaz. Estos componentes pueden ser desde interacciones a sonidos, botones, colores, tipografías, movimiento, tono en la comunicación, etc. El objetivo de un equipo de diseño es ser capaces de definir o identificar estos patrones para que puedan ser registrados, documentados y difundidos como lenguaje común.

Los patrones no constriñen la creatividad, ni hacen aburrida a la Web. Dos productos que solucionan un mismo problema no han de diferenciarse en el uso de distintos patrones funcionales, si estos son los correctos, pero en la forma en que estos patrones han sido aplicados a cada producto.

Existen tres tipos de patrones especialmente importantes: Patrones funcionales, de producto y de plataforma. Con patrones funcionales nos referimos a los elementos de nuestro lenguaje que enfocan la tarea de un usuario dentro de nuestra interfaz, por ejemplo en Spotify encontramos controladores de reproducción, buscadores, flujos e interacciones para la creación de una “playlist”, etc.

Los patrones de producto son los elementos de nuestro lenguaje con los que definimos la marca de nuestro producto. La elección de tipografía, sus colores, los tamaños, el tono con el que comunicamos, el movimiento, los iconos o las ilustraciones. Los patrones de producto en combinación con los de función son los que determinan la percepción de solidez y fiabilidad del producto que se hace extensible a la percepción de la marca.

Un acierto a la hora de generar tu propio sistema de diseño es evidenciar estros tres patrones y hacerlos visibles al resto del equipo. Poniendo un ejemplo en “Fredish”… A la hora de abstraer el patrón de color de nuestro sistema diferenciamos el patrón funcional del de producto. Por un lado tenemos los valores de color de la marca con la que estamos trabajando, por otro lado tenemos los colores de interfaz con los que estamos intentando comunicar acciones funcionales por parte del sistema.

 

Ejemplo de color dentro del patrón funcional.

Ejemplo de color dentro del patrón funcional.

 

Ejemplo de color dentro del patrón de producto.

Ejemplo de color dentro del patrón de producto.

 

Estos dos patrones no están aislados y la suma de los dos es lo que hace que el sistema funcione, pero cuando expresamos lo metafórico ganamos control sobre el sistema al hacer visible lo interconectado a todo el equipo del producto. Al igual que el “Fredish” hacemos no interpretable el lenguaje, creando un conocimiento común.

Siguiendo con el ejemplo. En nuestro lenguaje, creado junto a desarrollo, se quiere dar libertad al patrón de producto, pero no se permite lo mismo al patrón funcional. Los valores de color para la marca son libres, son valores escogidos puramente por diseñadores.

 

Pero los valores de color en el patrón funcional se establecen mediante reglas de construcción que ayuden a desarrollo a tener una lógica cuando estos valores sean creados.

 

Un botón es una llamada a la acción, esta llamada está guardada en el patrón funcional, mientras que su color, tipografía y forma resulta lo calificativo del producto y se encuentra en el patrón de producto. La forma de hacer ver estos patrones al equipo de desarrollo es transmitir que el patrón funcional es HTML, mientras que el patrón de producto es nuestro CSS.

Por último tenemos el patrón de plataforma. Un mismo producto puede vivir en diferentes plataformas tecnológicas: Web, Android, iOS o distintos dispositivos. Cada una de estas plataforma y dispositivos tienen elementos de lenguaje que le son propias y que han de interrelacionarse con los patrones de función y producto, con el objetivo de ofrecer una experiencia unitaria al usuario.

Un ejemplo en “Fredish”, cuando definimos las tipografías de nuestro lenguaje, hemos tenido en cuenta reflejar no solo una escala de tamaños, también las hemos asociado a un marcado y a un dispositivo, esto ha sido consensuado con desarrollo. En esta imagen muestro como “display 3”, entre otros, cambia de valor dependiendo del tipo de dispositivo para el que estemos diseñando.

 

Sin la detección de patrones, sin la creación multidisplinar, sin la documentación exhaustiva de todas las decisiones no estamos generando un sistema de diseño. En la búsqueda de un lenguaje común las herramientas y la forma de diseñar cambia. Puede parecer obsesivo, exagerando, una pérdida de tiempo, pero es nuestro “Fredish”, es la única forma de comunicar certeza entre todos los equipos de un producto. Es nuestra oferta de respeto, integridad y humildad a nuestros compañeros y usuarios.