Expanding the ³ÉÈË¿ìÊÖ's Global Experience Language
The lines of the ³ÉÈË¿ìÊÖ clock inspire some of GEL's iconography
I'm Andrew Greenham, Creative Director for the ³ÉÈË¿ìÊÖ Global Experience Language (GEL) and part of the User Experience and Design team for ³ÉÈË¿ìÊÖ Future Media.
In this post I'd like to talk about some of the additions to the ³ÉÈË¿ìÊÖ Global Experience Language and give an overview of the new ³ÉÈË¿ìÊÖ design guidelines and patterns for Mobile, IPTV and Tablet devices. You can see the recently updated GEL site at bbc.co.uk/gel.
In February 2010 ³ÉÈË¿ìÊÖ UX&D Head of Design Bronwyn van der Merwe's blog post gave an insight into the process of developing the new Global Experience Language, or Global Visual Language 3.0 (GVL) as it was known back then.
The rollout has continued over the past year and a half and has included the launch of ³ÉÈË¿ìÊÖ Proms, Desert Island Discs and the new ³ÉÈË¿ìÊÖ Weather site at the end of last year.
Following the initial design phase, Bronwyn and Creative Director Ben Gammon worked with Research Studios and the wider ³ÉÈË¿ìÊÖ UX&D team to deliver the new Global Experience Language.
In June 2010 the GEL rollout began with the initial launches across ³ÉÈË¿ìÊÖ News, Food and Doctor Who sites, to name just a few.
The rollout continued through 2011 and included the launch of ³ÉÈË¿ìÊÖ Proms, Desert Island Discs and the new ³ÉÈË¿ìÊÖ Weather site at the end of last year.
The GEL website: a reference point for designers
Alongside the initial 2010 launch, a ³ÉÈË¿ìÊÖ GEL website also went live showcasing the new styleguide and design patterns library as a resource for designers working on ³ÉÈË¿ìÊÖ services.
Our early GEL guidelines and patterns were very web-centric. Over the past eighteen months we've been working to expand the guidelines for other platforms and at the end of last year an updated edition of the GEL website went live; this now includes guidelines and patterns for Mobile, Tablet and IPTV devices and also includes a dedicated Accessibility section.
As with the original GEL web styleguide, the framework for the guidelines on each platform is based around a set of Foundations, Building Blocks and Design Patterns. Where there is specific and fundamental knowledge essential to effective design on a particular platform or device, we've also introduced a 'Design Considerations' section. This section serves as a best practice introduction for designers new to working across, what may be for some, previously unfamiliar platforms.
The 'Foundations' section for each platform includes information on the underlying universal grid; this is scaled to reflect the various device resolutions and a canvas on which a series of flexible layouts can be created. It also includes global elements such as the toolbar, local masthead and footer; elements that can downloaded from the GEL site as Photoshop or Illustrator templates.
The Universal Grid for desktop web showing a three-column page template overlaid (at 50% actual size). The wider 336px column supports the standard advertising formats.
The 'Building Blocks' section includes the page elements such as typography, iconography and information on using images. We've also included examples of typographic formatting and module layout.
An example of the GEL typographic format showing suggested type size hierarchy (actual pixel size)
GEL for Mobile
The GEL guidelines for mobile followed soon after those for the web. Using the desktop web guidelines as a starting point Ux Designer Stephen Robertson developed a styleguide and patterns for mobile devices. Adapting GEL for the smaller screen sizes, this covered both featurephone and smartphone and was considerate of D-pad and touch screen input.
The universal grid for mobile naturally needs to work at a smaller resolution, but like its desktop web counterpart, provides a framework for maintaining consistent padding values and aligning content modules and text.
The Mobile Universal Grid for Featurephone and Smartphone screen sizes (at 50% of actual size)
This grid also needed to reflect device orientation and includes both landscape and portrait formats.
On Mobile, where possible, we've tried to set a typographic standard that maintains the same bold typography and contrast of type sizes, however technical limitations on some devices means that it is not always possible to support this format in its purest form. In some cases where Arial is not available, device specific fonts will be used in its place.
GEL Mobile Typography (actual pixel size)
We've also included downloadable psd templates that provide a starting point for some of the common mobile content modules.
Templates for two common mobile content modules
GEL for IPTV
Developing effective guidelines for IPTV offered up many challenges. The key to adapting GEL for TV was to get a clear understanding of platform limitations and provide designers with the fundamental principles for designing for television. For example, Device Considerations includes guidance on TV specific display issues such as flicker, bloom, colour contrast and alignment to screen safe areas.
How to avoid flicker on a TV interface (top) and Designing for different aspect ratios
Where possible we wanted typography on TV to reflect the bold styling we have on the web, mobile and tablet. Getting the GEL typography right is all about applying a confident hierarchy and creating dramatic contrast between the headers, sub headers and body copy. Due to the legibility challenges on TV we have a much larger minimum font size, so headers are larger still to maintain the desired contrast.
As with mobile devices, even the most modern IPTVs and set top boxes can be limited in the fonts they can support, but again where possible we recommend using Arial or Helvetica Neue.
GEL Connected TV Typography
In addition to the traditional and essential TV Safe Areas we've also introduced a universal grid for TV to help maintain consistent padding and alignment of elements.
One of the biggest challenges in adapting GEL for TV platforms was in the application of colour. In GEL for web, the use of colour was deliberately flat; background images may include rich imagery and gradients, but in core user interface components we've deliberately avoided the use of gradients and drop shadows. This creates a more contemporary feel that is both sharp and clean. In early GEL concepts for TV interfaces a direct translation of this philosophy left the UI feeling too stark and in danger of looking clunky. This is exaggerated by the fact that on TV the user interface is presented at a much larger size.
Naturally the audience has come to expect a more 'televisual' treatment of graphical elements on IPTV platforms that leans more towards a suggestion of 3-Dimensional space. With this in mind we've adapted GEL specifically for TV and introduced guidelines that specify a controlled use of gradients and drop shadow where appropriate. Used sparingly these can help prioritise information by creating a sense of depth on TV.
Creating colour gradients: GEL includes very specific guidelines for creating subtle gradients and drop shadow for the television UI
It's important to note that limited support for extensive colour palettes on some IPTV platforms can mean that effective gradients are difficult to achieve.
GEL for Tablet
Up until recently GEL didn't extend to include any design guidelines for tablet devices. With an increasing number of ³ÉÈË¿ìÊÖ services being developed on this emerging platform, Senior UX Designer Simon Rooney set about creating an initial set of guidelines that provides a foundation for further design development.
As with the other three platforms there were also some specific device considerations that we needed to highlight; for example, one of the key points to consider is that tablet devices are unique in that the context in which they are used can change considerably. With this in mind we needed to write guidelines that reflected both orientation and reading distance (close, medium and far). Naturally this meant providing flexibility around font sizes and considering how the grid would adapt at a range of resolutions.
As with a number of smartphones, the lack of hover state on touchscreen devices also meant standards for links needed to be adapted to aid their discoverability. GEL guidelines for desktop specifies an underline for links on hover; on tablet we specify a combination of bold type and colour to differentiate links from body copy and signify a clear action state on interaction by changing the link colour when tapped. We felt that the colour change felt cleaner than using underlines for specifying links or the action state.
On tablets, a combination of bold type and colour differentiate links from body copy
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.
The Design Patterns
With the Foundation and Building Blocks as a starting point for each platform, the GEL Design Patterns provide more specific detail around common pan-product design components.
When developing the patterns it was crucial that we adapted each accordingly rather than trying to shoe-horn an interaction pattern developed for one platform on to another for the sake of consistency. It was crucial to play to the strengths of each platform and be considerate of the things like the control device for each platform (Mouse, Remote control/D-pad or Touch).
The Accordion is just one example of how design patterns have been adapted across the platforms. Initially this was developed as a web design pattern:
Accordian Menu (desktop) with different elements expanded
Then adapted for the smaller screen size on mobile…
Accordian Menu (mobile) in collapsed and expanded state
…and finally modified to be considerate of the remote control input and introduction of selection highlight used for IPTV:
Accordian Menu (IPTV) with two different elements expanded
A new global toolbar
We've recently designed and launched a new global toolbar. This is currently being rolled out across both bbc.co.uk desktop and mobile sites.
The objective of this redesign was to make the toolbar work harder to expose the breadth of ³ÉÈË¿ìÊÖ 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.
On desktop the previous version of the toolbar didn't offer a great deal of flexibility in terms of integration with banner graphics and we were keen to offer a variant that could be blended more effectively with the visual treatment of the wide variety of ³ÉÈË¿ìÊÖ sites. This led us to design a wider variety of toolbar variants with a greater range of background translucency. We offer transparent light (20% black), medium (40% black) and dark (70% black) in addition to opaque white, black and grey variants.
White and transparent versions of the toolbar
For example the transparent light variant of the toolbar on the ³ÉÈË¿ìÊÖ Weather site blends nicely with the various weather ambient background images when overlaid. The default white version of the toolbar is used across the core ³ÉÈË¿ìÊÖ sites such as the ³ÉÈË¿ìÊÖpage and Search.
On the very latest version of the new toolbar that sits across more recent GEL sites, we've also introduced a new treatment for the 'more' panel; this serves as an index to other ³ÉÈË¿ìÊÖ sites. This is implemented as a pushdown panel on opening; the rationale behind transitioning the toolbar to white when selecting the 'more' link or search field was to signify that the toolbar is entering a global mode and therefore references the white variant seen on the ³ÉÈË¿ìÊÖpage and Search pages.
The toolbar turns white when 'more' or 'search' are selected
The mobile version of the toolbar can be seen on the new mobile homepage, ³ÉÈË¿ìÊÖ Sport Olympics and ³ÉÈË¿ìÊÖ News sites. Due to the reduced width, the global links have been collapsed into a Menu pushdown panel that echoes the functionality of the desktop version.
A new set of GEL icons
With the aim of making GEL even more distinctive we worked with the design agency RGA to update the original set of GEL icons. Whilst keeping the bold and simple style of the original set we've modified the icons to make them more "ownable" and also to meet the requirements of new product features.
The ³ÉÈË¿ìÊÖ clock is a strong ³ÉÈË¿ìÊÖ "signature" element and we used this as inspiration for the visual style; where applicable basing stroke width and angle of line upon those found within the clock face.
The ³ÉÈË¿ìÊÖ Clock, the strokes that make it up, and (top right) the application of the visual language in icons
The design of the each icon involved exploring a number of potential options
While it was important to adhere to the aforementioned visual design principles, we were careful not to deviate from established iconography that was instantly familiar to the user. The audio icon was a good example of this; initial concepts explored a new approach to representing audio but we ultimately reverted to the more traditional right facing speaker icon with some subtle updates to the visual styling.
The need to design for universal appeal also played a part in the design of the Science category icon; while we loved the intricacy of the DNA strand, we opted for the beaker as it was more easily recognized and had a stronger association with the subject.
The design process also involved two rounds of user testing to validate the new icons both as stand-alone artwork and more importantly in the context of the web page.
A sample of the updated GEL icon set
For more on the new GEL icons you can (PDF) and other assets from the iconography section of the GEL website.
More GEL to come…
GEL has always been about encouraging designers to build upon the guidelines and to develop new design patterns. With that in mind, GEL is still evolving, we're working to make the design language more distinctive whilst at the same time, continuing to take on board the requirements of new ³ÉÈË¿ìÊÖ products.
We’re already expanding upon these new cross platform guidelines; ³ÉÈË¿ìÊÖ News on mobile and the recently launched ³ÉÈË¿ìÊÖ TV channel homepages use responsive design and build upon the GEL mobile, tablet and desktop guidelines by treating them as a continuum.
My colleague Ste Everington will blog about the ³ÉÈË¿ìÊÖ’s new TV channel homepages soon.
For more information go to bbc.co.uk/gel.
Andrew Greenham is Creative Director for the ³ÉÈË¿ìÊÖ Global Experience Language (GEL) and part of the User Experience and Design team for ³ÉÈË¿ìÊÖ Future Media.
Comment number 1.
At 18th Jun 2012, Greg Tyler wrote:I came across the GEL site the other day. Absolutely fascinating from a design point of view.
Complain about this comment (Comment number 1)
Comment number 2.
At 18th Jun 2012, Keith wrote:For some reason the news & sport websites appear to be using a different version of the masthead to the rest of the site. The News site has the mouseover 'more' link, however is missing the London 2012 link. The Sport website is still using the older version where the 'more' link requires clicking to reveal.
I assumed all of the GEL 3.5 masthead (except children's) were the same template and would automatically update to be consistant.
Complain about this comment (Comment number 2)
Comment number 3.
At 18th Jun 2012, Gareth Adams wrote:Very interesting post, I don't think I would ever have seen the "²Ñ´Ç°ù±ð…" dropdown without being told, Once I've decided I need to see "more" then I'm going to click on a link rather than hover over it
Complain about this comment (Comment number 3)
Comment number 4.
At 23rd Jun 2012, warvetandy wrote:This comment was removed because the moderators found it broke the house rules. Explain.
Complain about this comment (Comment number 4)
Comment number 5.
At 28th Jun 2012, Mark wrote:³ÉÈË¿ìÊÖ International needs to reconsider what its doing with weather reporting. It really doesn't make sense to spend 10 minutes of news on a very high level weather report for the whole of South America, Africa and South Asia which they just did a few minutes ago. This is not news and its not helpful at all to anyone.
Complain about this comment (Comment number 5)