Diferencia entre revisiones de «GEL: Global Experience Language»

De Casiopea
Línea 127: Línea 127:


===Patrones web===
===Patrones web===
[[Archivo:CDS_CasoEstudio_GEL_14_mobile_toolbar.png|400px]]


==TV==
==TV==

Revisión del 18:35 21 jul 2012


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.


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

El 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.

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."

CDS CasoEstudio GEL 15 d toolbar.png


Para información más detallada, visitar la página oficial.

Componentes básicos

Tipografía

Iconografía

Patrones web

TV

Móvil

Tablet

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 GEL 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