GEL: Global Experience Language

De Casiopea
Revisión del 10:30 23 jul 2012 de Caterinadasilva (discusión | contribuciones)
(dif) ← Revisión anterior | Revisión actual (dif) | Revisión siguiente → (dif)


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 enTaller de Construcción DG 4 - 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.

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 las 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 y la guía de estilos 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

"We have designed a new set of icons to work in harmony with the new visual language. The default size is 13px and icons can be used with or without a flat button container. These can used in any colour unless otherwise specified."

Trad.: "Hemos diseñado un nuevo juego de iconos para trabajar en armonía con el nuevo lenguaje visual. El tamaño predeterminado es de 13px y los iconos se puede utilizar con o sin un contenedor plano de botón. Estos pueden utilizarse en cualquier color a menos que se especifique lo contrario."

El reloj de la BBC es un elemento característico y fue usado como inspiración para el estilo visual de los íconos. Para ello, se basaron en el ancho del trazo y el ángulo de las líneas que se encuentran dentro de la esfera del reloj. En la imagen a continuación vemos el reloj de la BBC, los trazos que lo componen, y su aplicación en el lenguaje visual de los iconos.


CDS CasoEstudio GEL g16 d clock 587.png


Decidieron que debían respetar los principios del diseño visual propuestos, como ser auténticos y distintivos, pero, a su vez, debían de ser familiares para el usuario. A continuación vemos cómo fueron desarrollándose los iconos de audio, ciencia y arte.

CDS CasoEstudio GEL 17 d icons 444.png

Por ejemplo, para el ícono de audio querían buscar un nuevo enfoque para su representación, a pesar de ello, volvieron al tradicional ícono del altavoz, mas con algunos cambios sutiles en el estilo visual. La necesidad de diseñar para un atractivo universal también jugó un papel importante en el diseño del ícono de la categoría Ciencia, comenzaron mostrando la complejidad de la cadena de ADN, sin embargo, se optó por el vaso de precipitación, ya que era más fácil de reconocer y tenía una asociación cultural más fuerte con el tema. Según dicen, se requirieron dos rondas de pruebas de usuario para validar los nuevos iconos para el concepto de Arte, ya que había que verlo dentro del contexto del sitio web.

En la siguiente imagen, un muestrario de algunos iconos que fueron creados:

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

En cuanto a los colores, han desarrollado una gama de color de realce para las áreas del sitio que no son parte de la marca, o áreas donde la marca BBC habla directamente a la audiencia. Por ejemplo, la página web de la BBC, de búsqueda, algunas de nuestras áreas de género. Cada color tiene una gama de tonos para ser utilizado en contraste o al unísono uno con el otro.

CDS CasoEstudio GEL 20-colour.jpg

CDS CasoEstudio GEL 22-colour.jpg

También encontramos una gama de colores neutros y un uso mucho más moderado de los gradientes de donde los colores están situados uno junto al otro en cada rango tonal en la rueda de color.

CDS CasoEstudio GEL 21-colour.jpg


La recomendación que hacen es que las páginas que tengan una paleta de colores donde predominan los tonos neutros de color, deben ser proporcionados con imaginería grande y dramática. El color de resaltado se usa con moderación para crear vitalidad y atraer la mirada a las áreas clave de la página.

CDS CasoEstudio GEL 23-colour.jpg

Patrones web

Para el desarrollo de los patrones, es fundamental que éstos se adapten a cada dispositivo en lugar de tratar de calzar un patrón de interacción desarrollado para una plataforma a otra. Por ello, rescataron las fortalezas de cada plataforma y fueron considerado con los dispositivo de control de cada soporte (ratón, mando a distancia / D-pad o Touch).

El acordeón es sólo un ejemplo de cómo los patrones de diseño fueron adaptados a través de las plataformas. Inicialmente, este fue desarrollado como un patrón de diseño de páginas web:

CDS CasoEstudio GEL 12 d accord 240.png


A continuación, adaptada para el tamaño de la pantalla más pequeña en el móvil…

CDS CasoEstudio GEL 13 m accord 341.png


…Y, finalmente, modificado para que sea considerado con la entrada de control remoto y la introducción de resaltado de selección utilizados para IPTV:

CDS CasoEstudio GEL 14 tv accord 339.png


Y así es cómo se ve en un ejemplo de uso horizontal:

CDS CasoEstudio GEL 16-type.jpg


Los otros patrones que fueron creados son: carrusel, panel superpuesto, presentación de diapositivas, panel informativo, iPlayer Catchup, navegación local, paginación, promoción, pestañas, sugerencias, auto-sugerencia, compartir en redes sociales, BBC iD Calls To Action, Mapping clusters, Paneles de información para mapa, Controles de navegación de mapas, Botones superpuestos para mapas y Pinpoints.

Móvil

Las directrices de GEL para móviles, utilizan las plantillas web como punto de partida. Desarrollaron una guía de estilo y los patrones, y luego fueron adaptándolos para los tamaños de pantalla más pequeños, abarcando tanto featurephones y smartphones, y considerando el D-pad y la pantalla táctil.

La grilla universal para móviles, naturalmente, tiene que trabajar en una resolución menor, pero al igual que su contraparte web, proporciona un marco para el mantenimiento de valores coherentes de relleno y la alineación de los módulos de contenido y texto.

CDS CasoEstudio GEL Mobile grid small trim.jpg

Esta red también es necesario para reflejar la orientación del dispositivo e incluye tanto el formato apaisado y formato vertical. Aquí vemos cómo se adapta la barra de herramientas a todas las pantallas.

CDS CasoEstudio GEL 14 mobile toolbar.png

Intentan establecer una norma tipográfica que mantiene la misma fuente en negrita y el contraste de tamaños, sin embargo, por las limitaciones técnicas de algunos de los dispositivos, no es siempre posible mantener este formato en su forma más pura. Hay algunos casos donde Arial no está disponible, por lo que las fuentes específicas del dispositivo se utilizan en su lugar.

CDS CasoEstudio GEL 06 m typo 595.png


Aquí vemos las plantillas para dos módulos comunes de contenido para móviles: el catchup y las pestañas.

CDS CasoEstudio GEL 7 Mobile modules.png


Para más información, visitar la página oficial sobre las consideraciones de uso en móviles y la guía de estilos para móviles.

Tablet

Al igual que con las otras tres plataformas también hubo consideraciones para dispositivos específicos, por ejemplo, uno de los puntos clave a considerar es que los dispositivos de tableta son únicos en que el contexto en el que se utilizan pueden cambiar considerablemente. Con esto en mente, redactaron directrices tanto para la orientación, como la distancia de lectura (cerca, medio y lejano), es decir, proporcionaron flexibilidad en los tamaños de fuente y previeron cómo la grilla se adaptaría a una serie de distintas resoluciones.

Al igual que con una serie de smartphones, la falta de un estado "hover" de los dispositivos de pantalla táctil también significó que los hipervínculos debían ser adaptados para ayudar a su descubrimiento. Las directrices de GEL estándar especifican un subrayado de los enlaces cuando se les pasa por encima, en cambio, en la tableta se especifica una combinación de tipografía en negrita y de colores para diferenciar los enlaces del resto del cuerpo del texto y significan un estado de acción claro en la interacción, cambiando el color de los enlaces al pulsarlos.

CDS CasoEstudio GEL 11 t if.png


"In addition to establishing best practice and tapping into some of the unique features of the tablet platform, we also wanted to give designers an overview of the established gestures and a guide to best practice."

Trad.: "Además de establecer las mejores prácticas y aprovechar algunas de las características únicas de la plataforma de tableta, también queríamos dar a los diseñadores una visión general de los gestos establecidas y una guía de buenas prácticas.

Para más información, visitar la página oficial sobre el uso de GEL en tablet y guía de estilo para tablet.

IPTV

La clave para la adaptación de GEL para la televisión fue conseguir una comprensión clara de las limitaciones de la plataforma. Por ejemplo,incluir orientación sobre cuestiones específicas de visualización de TV, tales como el parpadeo, el contraste de color y la alineación para examinar las zonas seguras. En la imagen siguiente vemos cómo evitan el parpadeo y cómo diseñan la visualización para distintas proporciones de pantalla.

CDS CasoEstudio GEL 8 Flicker Safe.png


Querían que la tipografía en la televisión reflejase el estilo audaz que tenemos en la web, móviles y tabletas. La tipografía GEL tiene que ver con la aplicación de una estricta jerarquía y la creación de contrastes dramáticos entre los encabezados, sub-encabezados y el cuerpo del texto. Debido a los problemas de legibilidad en la televisión, se usa un tamaño mínimo de fuente mucho más grande, por lo que los encabezados son aún más grandes para mantener el contraste deseado.

Al igual que con los dispositivos móviles, puede ser limitado en las fuentes que pueden utilizarse, pero de nuevo siempre que sea posible se recomienda utilizar Arial o Helvetica Neue.

CDS CasoEstudio GEL 9 TV Typography trim.png


Además de las áreas tradicionales de televisión y esenciales seguros, han introducido una grilla universal de la televisión para ayudar a mantener constante el relleno y la alineación de los elementos.

CDS CasoEstudio GEL Safe area 43 centre cutout.png


En GEL para la web, el uso del color fue deliberadamente plano, las imágenes de fondo pueden incluir las imágenes ricas y degradados, pero en los componentes básicos de la interfaz de usuario se evitan deliberadamente el uso de gradientes y sombras. Esto crea una sensación más contemporánea, que es a la vez, limpia y nítida. Se exagerado el hecho de que pueda verse muy dura y en peligro de ser torpe, pero en la televisión la interfaz de usuario se presenta en un tamaño mucho más grande, lo que suaviza esa sensación.

Las plataformas de IPTV se inclinan más hacia una propuesta de espacio de 3 dimensiones, para ello adaptaron GEL específicamente para la televisión y presentaron directrices que especifican un uso controlado de gradientes y sombras. Usado con moderación, estos ayudan a dar prioridad a la información mediante la creación de una sensación de profundidad en la televisión.

CDS CasoEstudio GEL High-end graphics.png

Es importante señalar que un apoyo limitado a las paletas de color amplias en algunas plataformas de IPTV puede significar que los gradientes de efectivos son difíciles de lograr.

CDS CasoEstudio GEL 10 tv colours 595.png


Para información más detallada, visitar la página oficial sobre el diseño para TV y la guía de estilos GEL para IPTV.

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