GEL: Global Experience Language

De Casiopea


CDS TC3 CasoEstudio Gel.gif


Caso de Estudio
NombreGEL: Global Experience Language
AutorBBC
Período2010-
Palabras ClaveUX, Experiencia de usuario, Diseño de Interfaz, Diseño Centrado en las Personas, Diseño Front, Diseño Web
Estudiado en4º DG 2012
Estudiado porCaterina Da Silva
URLhttp://www.bbc.co.uk/gel
DescripciónEs una filosofía de diseño que unifica la experiencia del usuario en línea. Como lo describen, "GEL es el pegamento que une a todos los servicios de la BBC" ("GEL is the glue that ties all BBC services together"). El patrón de diseño se basa en una página 976px de ancho que está dividido en 61 unidades verticales de 16px. Además, han normalizado su cabecera y pie de página en todos los sitios al tiempo que permite cabeceras locales y fondos de canal. GEL es un gran ejemplo de poner la experiencia del usuario en primer lugar. Este estudio se enfocará mayormente en el desarrollo web, pero puede ser profundizado en cómo funciona en otros dispositivos más adelante.

Introducción

"GEL is the glue that ties all BBC services together".

Para crear una imagen de entidad seria y consistente en el mundo digital, acorde con la historia y peso que tiene la BBC como corporación, deciden crear un nuevo framework que regulara de manera limpia y consistente todos los medios digitales que abarca. Las directrices de GEL son un punto de referencia para el diseño de servicios de la BBC a través de Internet, móvil, IPTV y Tablet PC.

CDS CasoEstudio GEL Bbc-gel.png

Historia digital de la BBC

Los inicios

El sitio de la BBC partió el año 1994 como un servicio de suscripción pagado sin fines de lucro. Por la suscripción, a los miembros del club se les daba acceso a una temprana red social con un tablón de anuncios para compartir información y conversación en tiempo real, junto con un servicio de conexión de acceso telefónico a Internet.


CDS CasoEstudio GEL BBC Networking Club 1994.jpeg


Para 1996, la BBC lanzaría su sitio oficial [www.bbc.co.uk]. En ese entonces, era una oferta básica con dos secciones en el sitio. Con el tiempo, creció para abarcar mucho más. Sin embargo, debido a la forma orgánica en la que el sitio web se fue desarrollando y la compleja estructura interna de la empresa, con muchos y pequeños equipos de diseño que trabajan de forma independiente el uno del otro, el sitio tenía un carácter bastante "esquizofrénico", como ellos mismos lo denominan.


CDS CasoEstudio GEL BBC website 1997.jpeg


Primera generalización del sitio

Para el 2001, como un primer intento de unificar todos los campos de la BBC, se crea BBCi. Éste fue concebido como una marca integral para todos los servicios digitales interactivos BBC a través de Internet, teletexto digital, televisión interactiva y en plataformas móviles. Como parte de los cambio de marca, todas ñas páginas web de la BBC muestran la misma barra de navegación en toda la parte superior de la pantalla, ofreciendo una navegación basada en categorías y una barra de búsqueda.


CDS CasoEstudio GEL Bbci website jan 2004.jpeg


La decisión del cambio

A pesar de estos incipientes esfuerzos, el año 2004 decidieron volver a la antigua plataforma de BBC Online. El proceso fue lento y procuraba modernizar la imagen de la BBC, a su vez integrar el sistema de widgets customizables por el usuario, como lo hacían Facebook y iGoogle en ese entonces, en los inicios del 2008.


CDS CasoEstudio GEL 2-Wall-of-shame.jpeg


Luego de imprimir una a una las páginas de todo el sitio y pegarlas en la pared para tener una visión general, se dieron cuenta de que no había hilo conductor entre ellas, por lo que fue apodado "The wall of shame", o "El muro de la vergüenza". Esa fue la gota que rebalsó el vaso y finalmente resolvieron embarcarse en un ambicioso proyecto llamado Global Visual language 2.0: BBC design guidelines for the web, con el objetivo de unificar el diseño visual y la interacción de bbc.co.uk y el sitio web para móviles.

Con ella determinan una nueva página más amplia, centrada en una plantilla de página que toma ventaja de las resoluciones de pantalla más amplia y, por primera vez se hace uso de una grilla subyacente. A su vez, racionalizan los cientos de estilos diferentes para los banners y el sistema de navegación en una nueva marca global y local. Discontinuaron los diferentes reproductores de audio y video y crean un reproductor de medios universal incorporado: el iPlayer. Por último, rediseñan la página web de la creación de un estilo visual que comenzó a unificar el sitio y la plataforma móvil.

CDS CasoEstudio GEL 6-GVl2-Homepage.jpeg

CDS CasoEstudio GEL 7-Mobile.jpeg

La nueva guía de estilo GEL

Brief

A pesar de que se sentían cómodos con los resultados, puesto que eran funcionales y user-friendly, el 2009 deciden que hay que renovar el proyecto.

"We set out to broaden our ambitions; to create a design philosophy and world-class design standards that all designers across the business could adhere to. We wanted to find the soul of the BBC. We wanted something distinctive and recognisable; we wanted drama. We knew whatever we created needed to be truly cross-platform and that we needed to simplify our user journeys."

Trad.: "Nos propusimos ampliar nuestras ambiciones, para crear una filosofía de diseño y estándares de clase mundial al que todos los diseñadores de todos los negocios podrían adherirse. Queríamos encontrar el alma de la BBC. Queríamos algo distintivo y reconocible, queríamos drama. Sabíamos que cualquier cosa que creáramos, era necesario que fuese verdaderamente multiplataforma y que necesitábamos simplificar los viajes de nuestros usuarios."

Filosofía detrás de GEL

"La filosofía de diseño sustenta todo lo que hacemos como una experiencia del usuario y del equipo de diseño. Se informa la manera en que nuestros servicios se ven, la forma en que se comportan y el modo en que funcionamos como un equipo."

Principios

En la BBC querían crear un conjunto de valores, para unir a los profesionales de la experiencia del usuario en toda la empresa. Para ello se basan en diez palabras clave que creen resumen lo que son y lo que tratan de lograr:

  1. Universal: "Nuestros mensajes son claros y se comunican a través de interfaces simples, útiles e intuitivas. Nuestros servicios son inherentemente abiertos y accesibles."
  2. Convincente: "Nuestra voz va desde ser seria y con autoridad hasta ingeniosa y entretenida. Sonamos auténticos y relevantes, cálidos y humanos. Involucramos a nuestro público con una narración convincente."
  3. Auténtico: "Valoramos la familiaridad y la confianza depositada en nosotros. Somos conscientes de la herencia del diseño icónico de la BBC y la historia de la radiodifusión con referencias sutiles."
  4. Pionero: "Somos pioneras en innovaciones de diseño que sorprenden y deleitan. Introducimos lo inesperado pero siempre tomamos en cuenta a nuestra audiencia."
  5. Actual: "Creamos una línea de tiempo de la Gran Bretaña, que refleja el presente como ocurre y la adición de enlaces contextuales pertinentes con el pasado."
  6. Distintivo: "Nos destacamos por mirar hacia el mañana en vez de simplemente hacer referencia a las tendencias de diseño actuales. Tenemos un equilibrio entre el diseño de molde y la hermosa anarquía."
  7. Cohesivo: "Todos nuestros servicios y plataformas son un todo que ofrece experiencias sensibles al contexto de uso. Hacemos posible que los viajes coherentes, tanto dentro como fuera de las trayectorias familiares. Nos conectamos a nuestro público, donde hay intereses y experiencias compartidas."
  8. Local/Global: "Necesitamos hablar a todos pero reconocemos al individuo. Nuestro mensaje es escalable y localizable."
  9. Universal: "Nuestros mensajes son claros y comunicados a través de interfaces simples, útiles e intuitivas. Nuestros servicios son inherentemente abiertos y accesibles."
  10. Mejor: "Último pero no menos, ponemos la calidad primero. Nuestra ambición es ser la mejor marca de medios digitales en el mundo."

Mapa cultural

"La marca principal de la BBC hablará directamente con el público en la página principal. Una rica experiencia de marca seguirá siendo claramente 'BBC' en Doctor Who."

CDS CasoEstudio GEL Cultural map main.gif

De acuerdo a este mapa cultural que presentan, se da a entender que quieren que la marca de la BBC sea lo principal en todas las páginas, dándole trascendencia en ellas. A medida que se va alejando del centro, menor relevancia se le da, sin perder el lenguaje común que existe en el sitio.

Web

Bases

La grilla

"What we were trying to achieve is an underlying grid system that was flexible enough to enable many unique design variations whilst still feeling coherent and considered."

Trad.: "Lo que estábamos tratando de lograr era un sistema de red subyacente que fuese lo suficientemente flexible como para permitir a muchas variaciones de diseño únicas, mientras se sintiese coherente y considerado."

CDS CasoEstudio GEL 11-grid.jpeg

La grilla se basa en 31 columnas de 16 píxeles con dos columnas de la izquierda que se pueden dividir en cuatro, y una columna de la derecha más amplia, que se adapta a los formatos de anuncios que aparecen en la versión internacional del sitio. Buscan crear el efecto de bandas entrelazadas verticales y horizontales.

CDS CasoEstudio GEL 12-grid.jpeg

A su vez, tiene una rejilla base de 8 píxeles para alinear los elementos de una página, tanto vertical como horizontalmente.

CDS CasoEstudio GEL 13-baseline.jpeg

Para información más detallada, visitar la página oficial sobre el uso de la grilla en la web.

Navegación

"The objective of this redesign was to make the toolbar work harder to expose the breadth of BBC content. In addition to making the global links more prominent to increase visibility, we've also provided the ability to promote upcoming events such as London 2012 in the toolbar."

Trad.: "El objetivo de este rediseño era hacer que la barra de herramientas trabajase más para exponer la amplitud de contenidos de la BBC. Además de hacer los enlaces globales más prominentes para aumentar la visibilidad, también hemos proporcionado la capacidad de promover los próximos eventos, como (Los Juegos Olímpicos de) Londres 2012, en la barra de herramientas."

Para resolver anteriores problemas de flexibilidad para integrar la barra de herramientas a los banners superiores, decidieron diseñar una diversidad más amplia de variantes para la barra de herramientas con una gama más extensa de transparencia de fondo: luz transparente (20% de negro), medio (40% de negro) y oscuro (70% de negro), además de color blanco opaco, negro y grises distintos. En la imagen vemos la barra en blanco, y en transparente.

CDS CasoEstudio GEL 15 d toolbar.png

Y en esta imagen, en negro.

CDS CasoEstudio GEL 24-nav.jpg

Para información más detallada, visitar la página oficial y ver la guía de uso de la barra de herramientas.

Componentes básicos

Tipografía

"GEL uses bold typography to create stronger hierarchies and drama across the site. We're moving from Verdana to Arial as the BBC's default web font for both headers and body copy."

Trad.: "GEL utiliza la tipografía en negrita para crear fuertes jerarquías y el drama a través del sitio. Estamos pasando de Verdana a Arial como tipografía de la BBC web por defecto para los encabezados y el cuerpo del texto."

En términos de tipografía, utilizan una cascada de tres tipografías: Helvetica/Arial, Gill sans y Georgia, como podemos ver en la imagen siguiente.

CDS CasoEstudio GEL Fonts.png

Han introducido en negrita grande la Helvetica o Arial y las variaciones en el tamaño restringido de modo que tienen una consistencia mucho mayor en todo el sitio. En la imagen siguiente vemos los modos de uso establecidos para ellas, los títulos y el cuerpo del texto en la página.

CDS CasoEstudio GEL 03 d typo 595.png

Aquí vemos una ejemplo de uso de la tipografía en una noticia.

CDS CasoEstudio GEL 15-type.jpg

Para el caso de la Georgia establecen que en cursiva debe limitarse para resaltar una breve cita de los blogs de la BBC o sitios web de terceras partes dentro de un módulo en la página. Pero, no se debe utilizar para los párrafos o páginas completas de cuerpo del texto. Para el sitio web de la BBC blogs y las secciones de comentarios en las páginas deben seguir utilizando letra Arial. A continuación un ejemplo de uso:

CDS CasoEstudio GEL Putting-it-together-georgia.png

Para información más detallada, visitar la página oficial sobre las tipografías usadas y sus variantes.

Iconografía

CDS CasoEstudio GEL 27-icons.jpg

CDS CasoEstudio GEL g16 d clock 587.png

CDS CasoEstudio GEL 17 d icons 444.png

CDS CasoEstudio GEL 18 d moreicons 595.png


Para información más detallada, visitar la página oficial donde muestran todo el set iconográfico creado o ver la guía de estilos sobre los íconos.

Paleta de colores

CDS CasoEstudio GEL 20-colour.jpg

CDS CasoEstudio GEL 21-colour.jpg

CDS CasoEstudio GEL 22-colour.jpg

CDS CasoEstudio GEL 23-colour.jpg

Patrones web

Móvil

Para más información, visitar la página oficial sobre las consideraciones de uso en móviles.

Tablet

Para más información, visitar la página oficial sobre el uso de GEL en tablet.

TV

Para información más detallada, visitar la página oficial sobre el diseño para TV.

Accesibilidad

Al ser una corporación que se basa en la audiencia, son conscientes de los problemas y discapacidades que las personas pueden tener, es por esta razón que diseñan en base a esos términos.

Para información más detallada, visitar la página oficial de cómo lo hicieron accesible y las pautas oficiales de la BBC sobre accesibilidad.

Bibliografía

  1. GEL: Global Experience Language
  2. GEL Styleguide: Building a Global Experience Language for the BBC
  3. Wikipedia: BBC Online
  4. BBC guidelines
  5. GELLED: A blog about GEL
  6. BBC Internet Blog: Expanding the BBC's Global Experience Language