¿Qué falla en un diseño? El test de Can’t Unsee

Hace casi diez años (sí diez años), publiqué por el blog diseño, creatividad y dos test en el que hacía referencia a dos test de Andy Rutledge de los que se podía aprender mucho: en un test aparecía la solución, en otro había que investigar más… . Al final, una de las conclusiones es que la lectura de Universal Principles of Design, Revised and Updated era muy recomendable para conocer las respuestas al test y mucho más.

Con diferencia, Universal Principles of Design es el libro con el que más he aprendido.

Hoy recomiendo dar un vistazo a Can’t Unsee. Un test en el que vemos dos versiones sutilmente diferentes en el que hay que elegir aquella opción de que está mejor diseñada. ¿La diferencia? En ocasiones es muy sutil: es cuestión de detalles. Y ya sabemos…

Los detalles no son detalles, son lo que define el diseño.

Charles Eames

Mike Monteiro, vacunas, datos y sensaciones

Mike Monteiro, autor del recomendable libro Design is a job, ha publicado otro: Ruined by Design: How Designers Destroyed the World, and What We Can Do to Fix It. Y como ahora lo de escribir en un blog se ha vuelto vintage, está publicando una lista de correo (Mike´s Monteiro Good News).

Estoy suscrito.

La última entrega empieza hablando de las vacunas, los anti-vacunas (gente que puede ser responsable de la vida de sus hijos y también puede votar), los datos, las sensaciones y el diseño.

Como buen diseñador, es partidario de utilizar los datos disponibles: es una forma objetiva de tomar decisiones argumentadas (y tengo que aprender más al respecto, confieso).

Y no deja de ser paradójico que en la época en la que más datos hay disponibles, en no pocas ocasiones al final se toman las decisiones por emociones.

Silicon Valley claims to be obsessed with data.
[…]
How to get it. What to do with it. Who’s selling it to whom. Who needs it. How to protect yours. We’ve collected more data in the last ten years than we can process in the next hundred. No one can exactly remember why we’re collecting it, but everyone’s afraid to stop. Yet, with all this data at our disposal, we’ve created a garbage fire run by platforms of vitriol. Here’s some more data: we’re idiots.
Like any good designer, I work with data. If you’re designing something for people to use and no one can use it, that’s data. You’d be a fool to ignore the data.
[…]
While you’re designing, you’re like a scientist. You study every data point. It’s the smart thing to do. Then you gotta persuade people the work is right. Hold onto your butts…
The minute you put a design solution in front of data-driven Silicon Valley types, they start talking about feelings.
“This feeeeeels wrong.”
“I’m not feeeeeeling it.”
“Oh, I like the feel of this!”
It’s a little crazy-making, but it’s also understandable. I told you people don’t make decisions based on data; they make them based on feelings.

Mike Monteiro

Datos versus emociones.

Datos y emociones.

Las fuentes de Massimo Vignelli

En estos días estoy releyendo “The Vignelli Canon”, de Massimo Vignelli. El libro, muy recomendable, está disponible en formato pdf (The Vignelli Canon [pdf]“), pero es uno de esos libros que se disfruta mucho en papel.

En uno de sus contenidos, habla sobre tipografías. Desde su experiencia, no hacía falta trabajar con un número descomunal de tipografías, con unas pocas seleccionadas pudo hacer la mayor parte de sus trabajos. De hecho menciona que en una exposición, mostraba una representación de sus obras en las que únicamente usaba cuatro tipografías, y son las siguientes:

  • Garamond
  • Bodoni
  • Century Expanded
  • Helvetica

Nombraba también las siguientes fuentes, que añadía a su lista de imprescindibles (junto con algunas otras no mencionadas):

  • Optima
  • Futura
  • Univers
  • Caslon
  • Baskerville

Ocho fuentes que usadas con sabiduría, podría evitar lo que Massimo denominaba one of the biggest visual pollutions of all times, debido a la proliferación de fuentes creadas con los ordenadores.

Como curiosidad, añadiendo un poco más de información, más allá del nombre de la fuente (fecha de creación, autor y nacionalidad), saltan a la vista algunos detalles curiosos.

  • Garamond (1532), Claude Garamond, Francia.
  • Bodoni (1788), Giambattista Bodoni, Italia.
  • Century Expanded (1990), Morris Fuller Benton, Estados Unidos.
  • Helvetica (1957), Max Miedinger y Edouard Hoffmann, Suiza.
  • Optima (1955), Hermann Zapf, Alemania.
  • Futura (1930), Paul Renner, Alemania.
  • Univers (1957), Adrian Frutinger, Suiza.
  • Caslon (1734), William Caslon, Gran Bretaña.
  • Baskerville (1757), John Baskerville, Gran Bretaña.

Las fuentes clásicas, que van desde el siglo XIV al XVI son originarias de Francia, Italia y Gran Bretaña. Las fuentes más actuales, se concentran en Alemania y Suiza (más la Century, de Estados Unidos).

Massimo Vignelli fue un diseñador que trabajó en muchos ámbitos, pero en el contexto actual, hay que tener obviamente muy presente la proliferación de pantallas en nuestras manos y frente a nosotros.

Recuerdo haber leído opiniones al respecto de las fuentes que a pesar de estar plenamiente consolidadas (¡algunas se llevan usando durante siglos!), tal vez no sean las más apropiadas para el contexto digital. Al principio había que restringirse a las fuentes instaladas en el correspondiente sistema operativo (sí, el famoso font-family: Helvetica, Arial, sans-serif usada en las hojas de estilo), aunque hoy en día existe la flexibilidad de poder usar webfonts y hay una gran disponibilidad de fuentes con licencias bastante permisivas.

Dadas las circunstancias actuales, ¿qué fuentes diseñadas recientemente añadiría hoy en día Massimo a su lista para un uso predominante en un entorno digital? Mencionaré algunas posibilidades, diseñadas en un contexto más actual, aunque ignoro su probabilidad:

  • Fira Go (2018), varios autores, basada en la fuente Fira Sans (2013) diseñada por Erik Spiekermann para el sistema operativo Firefox OS.
  • Roboto (2011), Christian Robertson (Estados Unidos), diseñada para el sistema operativo Android.
  • San Francisco (2014), Apple, Estados Unidos. Usada en sus sistemas operativos (iOS y Mac OSX).
  • Segoe UI (2004), Steve Matteson, Estados Unidos. Usada en los sistemas operativos de Microsoft.

Pregunta que dejo en el aire. Estamos en el año 2050. ¿Estarán vivas Fira Go, Roboto, San Francisco, Segoe UI, o habrán caído en el olvido y seguirán con todo su vigor las fuentes antes mencionadas y diseñadas de uno a ocho siglos antes?

El tiempo lo dirá.

Imagen institucional del Gobierno de España. Mejoras necesarias.

Dramatización lúdica

La introducción de este artículo es una dramatización lúdica inspirada vagamente en Twilight Struggle.

Junio del año 2018.

Pedro Sánchez mira su mano de cartas y decide jugar el evento “Moción de censura” contra su contrincante Mariano Rajoy. Suma sus puntos de aliados, y compara su valor con los aliados del rival. Si saca un cinco o un seis, gana la moción de censura. Tira el dado, parece que va a salir un tres, pero en el último momento, sale un seis.

Como consecuencia, gana la moción de censura, dos puntos de victoria y el gobierno de la nación. Tendrá que asumir el Presupuesto del Estado, y tal vez el rival tenga una carta de evento que devuelva el control político. La gestión de las manos de cartas y el azar decidirá el resultado de la partida.

Fin de la prescindible dramatización.

Cambios, coste y resultado final de un cambio de nomenclatura ministerial

Con cada cambio de Gobierno, hay cambios ministeriales: de ministros y ministerios (nuevos, que desaparecen y que cambian de nombre).

Otra consecuencia adicional que se vive muy intensamente en los ministerios ya que un cambio de nombre implica la sustitución de textos e imágenes en muchos lugares:

  • Los cambios “digitales” van desde la firma en los correos electrónicos, literales en incontables páginas, las plantilla en los documentos de ofimática y los nuevos imagotipos en las diferentes webs públicas y privadas y otras externas pero que están obligadas a incluir el imagotipo.
  • Los cambios “físicos” incluyen señales, carteles, tarjetas de visita, trípticos, pegatinas, pendrives, felpudos, e incluso letras en metal fundido. Por decir algos ejemplos posibles.

¿Cuándo tienen que estar esos cambios? Lo antes posible.

¿Durante cuánto tiempo serán válidos? Depende: Hay nombres de Ministerios, como los de Justicia o el de Defensa, que suelen ser inmutables. Unos ministerios cambian cada legislatura, y otros tienen una duración efímera de tan solo una legislatura.

Como os podéis imaginar, todos estos cambios tienen un coste, ya sea en horas de trabajo, o en material. Hay cambios que se pueden realizar con relativa facilidad ya que su coste en tiempo-dinero-esfuerzo es residual. Otros, por diversos motivos, pueden eternizarse en una lista de tareas pendientes durante mucho tiempo. Con suerte, lo que hace dos etapas ministeriales era correcto, tal vez vuelva a serlo en una o dos legislaturas.

Hablando sólo de imágenes: Sobra decir que lo habitual es tener el logo, isotipo o imagotipo de cualquier entidad en diferentes tamaños repartidos por infinidad de sitios. Si se tiene un buen original en formato vectorial, puede ser sencillo obtener las diferentes imágenes bitmap en los tamaños que se necesiten (efecto pixel perfect aparte). La otra opción es redimensionar una imagen bitmap (jpg, gif, png) de incierto origen y hacer un apaño rápido con un programa de edición gráfica como el paint, que para eso está en todos los ordenadores con Windows.

Si se hace bien (imagen vectorial, exportar a diferentes tamaños, usar el timpo de fichero adecuado, seguir las normas de imagen institucional en el caso del Gobierno de España), estará bien durante una temporada (hasta el próximo cambio de gobierno). Si no es así, bueno. Nos lo imaginamos todos.

Un inciso, me ha tocado vivir desde dentro dos cambios de nombres de ministerios.

Imagen Institucional del Gobierno de España

En España, la imagen institucional se empieza a regular en el año 1999 (Real Decreto 1465/1999, del 17 de septiembre), pocos días después se aprueba el primer Manual de la Administración General del estado (Orden del 27 de septiembre de 1999).

Desde entonces, ha habido revisiones , que paso por alto, pero los últimos cambios a día de hoy son del año 2017 (Resolución de 3 de abril de 2017, de la Secretaría de Estado de Función Pública), en el que se actualiza el Manual de Imagen Institucional, en su presente denominación. Con respecto a los contenidos, se actualiza además con los cambios ministeriales.

Toda la documentación de la Imagen Institucional, está alojada en https://imagen.funciona.es. ¿Y qué característica tiene el dominio? Que sólo es accesible a través de una red interna de las administraciones públicas, SARA.

La Red SARA (Sistemas de Aplicaciones y Redes para las Administraciones) es un conjunto de infraestructuras de comunicaciones y servicios básicos que conecta las redes de las Administraciones Públicas Españolas e Instituciones Europeas facilitando el intercambio de información y el acceso a los servicios.

Red SARA

Dentro de https://imagen.funciona.es (accesible sólo desde la red SARA), están alojados los siguientes recursos entre otros:

  • Manual de Imagen Institucional, (aquí puedes ver la portada). Se trata de un documento en formato pdf de 146 páginas sobre la imagen institucional (escudo, fuente, colores, dimensiones, imagotipos ministeriales), normativa para material impreso, publicaciones, señalización, etcétera.
  • Imágenes en formato vectorial (fh11 y ai) y mapa de imágenes en dos tamaños (jpg y gif) del Escudo de España, y los imagotipos de los diferentes ministerios. Me sorprende que todavía se use el formato de Freehand 11 (la última versión del programa es del año 2004, hace 14 años), y que no esté disponible en formato svg (lo que permitiría utilizarlos sin problemas en inkscape, el programa de software libre de edición de imágenes vectoriales).

Algunos aspectos concretos de la Imagen Institucional del Gobierno de España

Un elemento básico de la Imagen Institucional, es el escudo. La descripción oficial está publicada en la Ley 33/1981 del 5 de Octubre. Cito, porque me parece un texto hermoso, aunque con un complejo vocabulario heráldico:

Artículo primero

El Escudo de España es cuartelado y entado en punta. En el primer cuartel, de gules o rojo, un castillo de oro, almenado, aclarado de azur o azul y mazonado de sable o negro. En el segundo, de plata, un león rampante, de púrpura, linguado, uñado, armado de gules o rojo y coronado de oro. En el tercero, de oro, cuatro palos, de gules o rojo. En el cuarto, de gules o rojo, una cadena de oro, puesta en cruz, aspa y orla, cargada en el centro de una esmeralda de su color. Entado de plata, una granada al natural, rajada de gules o rojo, tallada y hojada de dos hojas, de sinople o verde.

Acompañado de dos columnas, de plata, con base y capitel, de oro, sobre ondas de azur o azul y plata, superada de corona imperial, la diestra, y de una corona real, la siniestra, ambas de oro, y rodeando las columnas, una cinta de gules o rojo, cargada de letras de oro, en la diestra «Plus» y en la siniestra «Ultra».

Al timbre, corona real, cerrada, que es un círculo de oro, engastado de piedras preciosas, compuesto de ocho florones de hojas de acanto, visibles cinco, interpoladas de perlas, y de cuyas hojas salen sendas diademas sumadas de perlas, que convergen en un mundo de azur o azul, con el semimeridiano y el ecuador de oro, sumado de cruz de oro. La corona, forrada de gules o rojo.

Artículo segundo

El Escudo de España, tal como se describe en el artículo anterior, lleva escusón de azur o azul, tres lises de oro, puestas dos y una, la bordura lisa, de gules o rojo, propio de la dinastía reinante.

BOE: Ley 33/1981, de 5 de octubre, del Escudo de España.

Hay una interesante evolución histórica del Escudo de España en la wikipedia. Los cuatro cuarteles hacen referencia a los reinos de Castilla, León, Aragón, Navarra además del reino de Granada en la parte inferior. En el centro las tres flores de lis que se corresponde a la dinastía de Borbón-Anjou. Las dos columnas son las de Hércules, y tienen sobre su capitel la corona del Sacro Imperio y la corona española. Flipante.

Imagotipos ministeriales

Los imagotipos del Gobierno y los Ministerios en la web (puedes encontrarlos todos en Wikipedia: Ministerios de España), incluyen una columna con parte de la bandera de la Unión Europea (con tres estrellas), otra barra con la bandera de España, el escudo, el texto Gobierno de España (con la fuente Gill Sans Regular, de origen británico), una delgada columna de separación y el nombre del ministerio en cuestión (en la misma fuente Gill Sans Regular, pero un punto menor). Hay dos unidades básicas, que sirven para definir los tamaños y separación de los diferentes elementos y son:

  • El ancho del escudo, ya que un cuarto de esa medida, se utiliza para separar horizontal (a la izquierda) y verticalmente el escudo con la banda envolvente.
  • La altura de la fuente del texto “Gobierno de España”, siendo el ancho del texto, la anchura del escudo. El doble de esa medida, se utiliza en el ancho de la columna de las banderas de Europa y España, la separación entre el escudo y el texto “Gobierno de España”, y de separación del texto Gobierno de España y el texto con la denominación del ministerio de la delgada columna amarilla que los separa.

Si no te has enterado del todo, tal vez la siguiente imagen te ayude (hay un enlace para ver la imagen a tamaño completo):

Medidas usadas en la imagen institucional de los Ministerios de España

Un poco más de información: a continuación dos tablas, una con los colores oficiales del escudo y otra con los de los imagotipos.

Tabla con los colores institucionales del Gobierno de España
Color Denominación Pantone RGB numérico RBG hexadecimal
Amarillo envolvente Pantone 116 rgb(255,219,0) #FFDB00
Azul Europa Pantone Reflex Blue rgb(0,51,153) #003399
Amarillo Europa Pantone Yellow rgb(255,204,0) #FFCC00
Rojo Bandera rgb(173,21,25) #AD1519
Gualda Bandera rgb(250,189,0) #FABD00
Amarillo separador Pantone 116 rgb(245,227,38) #F5E326
Tabla con los colores institucionales del Escudo de España
Color Denominación Pantone RGB numérico RBG hexadecimal
Negro rgb(0,0,0) #000000
Rojo Pantone 186 rgb(181,0,39) #B50027
Plata Pantone 887 rgb(178,178,178) #B2B2B2
Oro Pantone 872 rgb(159,126,0) #9F7E00
Verde Pantone 3415 rgb(0,111,70) #006F46
Azul Pantone 2935 rgb(0,68,173) #0044AD
Púrpura Pantone 218 rgb(216,90,174) #DB5AAE
Granada Pantone 1345 rgb(243,203,126) #F3CB7E

Observación: no siempre se utilizan los colores correctos. Sugiero el ejercicio de ver todas las páginas de los ministerios y comparar los imagotipos oficiales (lo único que está especificado). Luego ya si eso, comparar las webs, e intentad adivinar si hay algún objetivo más allá de servir de fuente de noticias ministeriales.

Guía de Comunicación Digital del Gobierno de España

Tras hablar extensamente (perdón si ha sido demasiado) sobre el Manual y la Imagen Institucional, toca ahora hablar de otro documento: la Guía de Comunicación Digital para la Administración General del Estado. Se trata de un documento en formato pdf bastante extenso (365 páginas, en la última versión publicada a día de hoy, en el 2014), y a diferencia del ya mencionado manual, está disponible para su consulta y descarga.

Guía de Comunicación Digital para la Administración General del Estado.

La Guía trata sobre la imagen institucional, documentos electrónicos y ofimáticos, accesibilidad,… se puede descargar como un documento completo, o bien por fascículos. Yo destaco para el tema que nos ocupa el Fascículo 1: Aspectos generales y el Fascículo 2: Imagen institucional. En el primero (de ochenta páginas), nos encontramos con una serie de requisitos técnicos básicos y legales sobre los sitios webs. Os invito a ojearlo.

Desde mi punto de vista tiene al menos dos problemas:

  • Se queda algo anticuada en algunos aspectos —recordemos, cuatro años sin modificarse—.
  • El alcance propuesto es muy limitado. Comparando con…

GOV.UK Design System: tomemos nota

De vez en cuando he seguido las novedades del gobierno británico con respecto a su estrategia web. La última noticia, muy reciente: Introducing the GOV.UK Design System, en la que presentan GOV.UK Design System. Un sistema de diseño para las webs institucionales. Junto con GOV.UK Prototype Kit y GOV.UK Frontend.
El proceso detrás del resultado, se puede consultar en A GDS Story. Porque no se trata únicamente de usar cajas y colores.

The Design System and all of its contents are now fully supported by a dedicated team at the Government Digital Service (GDS).

Un equipo que centraliza el diseño y que desarrolla de forma abierta y público una sistema de diseño, plantillas, patrones,… para crear sitios y aplicaciones web con componentes reutilizables, aportando una imagen coherente y poniendo el foco en la accesibilidad.

¿Cómo se podría mejorar? Problemas.

Vemos el ejemplo británico, y por otro lado, aquí en España, tenemos algunos documentos muy completos en ciertos aspectos (imagen institucional, papelería y documentos ofimáticos,…), pero que flojea a la hora de ofrecer pautas para tener unas webs de la Administración General del Estado que tengan en común mucho más que unas guías para los imagotipos (y que no siempre se cumplen).

Entiendo las dificultades y desafíos de una propuesta similar a la británica, dada la situación actual:

  • Equipos de desarrollo, presupuestos y jerarquías independientes.
  • Diversidad en las aplicaciones webs desarrolladas: gestores de contenidos, lenguajes de programación, empresas proveedoras,…
  • La cantidad de trabajo que ya está hecho, y la dificultad para actualizarlo. No me hago una idea del presupuesto y el tiempo necesario para hacer algo así.
  • Inercias.
  • Encontrar un equipo capaz de gestionar un departamento así, dejarles trabajar, y que su trabajo no quede en un limbo administrativo.

Puestos a sugerir…

Crear un equipo independiente, transversal, con experiencia en diseño, experiencia de usuario, accesibilidad y tecnología. Los objetivos serían:

  • Mentalizar a quien haga falta, que el cambio es necesario, y beneficioso.
  • Crear una nueva versión de la imagen institucional web (creo que los imagotipos actuales no son los más adecuados, el texto suele ser ilegible). Pero ir más allá de los imagotipos.
  • Desarrollar un sistema de diseño que incluya los componentes necesarios en las webs institucionales, de acceso público y revisado periódicamente. Implica, obviamente, un rediseño de las webs, poniendo siempre el foco en los ciudadanos y sus necesidades.
  • Buscar algún sistema para que una URL siempre tenga el destino original, independientemente de los cambios en nomenclaturas. Las URLs molonas no cambian, que decía Tim.
  • Facilitar, y no entorpecer, el trabajo de los profesionales.
  • Etcétera

¿Es fácil? En absoluto. ¿Es posible? Debería serlo. ¿Es necesario? Creo que sí.

Diseño web: de la teoría a la práctica

Uno puede leer Universal Principles of Design, y aprender más o menos sobre diseño. Pero de la teoría a la práctica, a veces falta “algo más” que ayude a afrontar con confianza un proyecto.

Aquí van algunos recursos que nos muestran algo de teoría y práctica aplicada en el diseño web. Comencemos:

  • Laws of UX: probablemente conozcas la Ley de Fitt, la Ley de Hicks, la Regla de Occam,… en esta página se recopilar 13 leyes y aparte de una breve descripción, incluye algunos recursos adicionales.
  • En Las leyes de UX con casos prácticos, vemos algunos buenos ejemplos de cómo aplicar esas leyes.

Por otro lado, un par de enlaces para terminar:

  • 7 Practical Tips for Cheating at Design, tenemos algunos buenos consejos para mejora el diseño de páginas o aplicaciones.
  • Y en Redesigning Laravel.io, vemos como los mismos autores, explican el rediseño de un foro, basándose en muchos de los consejos del enlace anterior, y argumentando las decisiones.