8/9/2019 NICS Corporate Layout for the Internet v2

1/16

Page 1 of 16

NICS Corporate Identity and Layoutfor the Internet

SummaryThis paper makes recommendations for implementing a corporate approach to thelayout for all NICS websites. The goal of the proposed layout is to deliver aconsistent corporate identity and a common web interface to ensure that onlineinteraction with NI government via the Internet is easily recognisable, memorable,and usable for all. The proposed recommendations are intended not to be overlyproscriptive thereby allowing individual websites enough freedom to have layouts thatmeet the expectations of their intended audience and which suit the structure ortaxonomy of information and services contained within them.

Background

The impetus for a corporate layout stems from an overall commitment to providejoined-up government and to provide services across departmental boundaries forthe benefit of all citizens. This commitment has already led to the development ofcentrally provided e-GIF (e-Government Interoperability Framework) compliantinfrastructure, tools, standards and guidelines including:

A search engine that can be embedded into all government websites(including those not centrally hosted by DID);

A content management system onto which all centrally hosted governmentwebsites can be migrated;

Metadata standards (based on the e-Government Metadata Standard);

Accessibility guidance;

A style and tone guide for writing for the web and;

Corporate identity guidelines.

Consistent identity

The corporate identity guidelines are a starting point for implementing consistentidentity and define strict rules for the presentation of department logos on websites.The rules specify:

the minimum size of a logo;

the minimum width of space that should surround a logo (a protection

zone); that logos should not be altered or distorted.

Unfortunately these rules have been broken mainly due to the fact the new logoshave had to be shoe-horned into the same space occupied by the old logos withoutany redesign.

The intention of the recommendations made in this paper is to define a corporatetemplate which ensures the consistent presentation of department logos inaccordance with corporate guidelines.

8/9/2019 NICS Corporate Layout for the Internet v2

2/16

Page 2 of 16

Consistent usability and accessibility

Whilst consistent identity is important to provide the right impression to citizens, ofgreater importance to the end user is that government websites are easy to use andare accessible. It is therefore critical to provide a common web interface thatcontains core functionality and services that are consistent, usable and accessible

across all NI government websites.

Corporate template look and feel

The corporate guidelines do not specify strict rules for the look and feel of eachdepartments website and designers are free to respond to specific design briefsgiven to them. There is no intention to change this position in this paper.

Corporate template objectivesThe corporate template will define:

the size and placement of department logos to ensure compliance withcorporate identity guidelines;

the placement of ancillary logos for branches, agencies, etc;

the placement of core/utility navigation links and search facilities to provide abaseline web interface consistent across all NI government websites.

Corporate layout pitfalls to avoid

1. The corporate layout may be perceived as a corporate strait jacket.

Obtaining buy-in from the various departments and agencies for a corporatelayout is essential. Without buy-in authors, editors and developers may bereluctant to take ownership of a site they have little control over in terms of layout.This could lead to poor motivation to provide content of the highest standard andlead to bending of the rules.

2. Non-conformance to corporate identity and layout rules.

Where government sites are hosted on the corporate content managementsystem, templates can be supplied which will enforce the basic framework of thecorporate template. However, there is no way of preventing developers in

individual departments from modifying those templates to break corporate layoutrules. It is essential therefore that the layout guidelines and recommendationsprovide enough leeway so that rules are unlikely to be broken yet still strictenough to ensure some level of consistent identity and usability.

3. Overly prescriptive layout rules which inhibit rather than encourage goodusability.

It is generally not feasible or advisable to create a layout without consideration forthe nature and structure of the content that must be fitted into that layout. Eachwebsite will differ in terms of the nature and structure of the content placed on it(although many will be similar). The corporate layout must therefore have in-built

flexibility so that usability is not sacrificed because of restrictions.

8/9/2019 NICS Corporate Layout for the Internet v2

3/16

Page 3 of 16

Pilot layout

The layout produced for the content management system pilot websites was a first

attempt at developing an overall corporate layout. The layout consists of two or threecolumns spanned by a branding banner. Primary (or global) navigation is splitbetween a top navigation/utility bar (below the banner) and a navigation menu in theleft-hand column.

The top navigation bar contains:

a link to the homepage;

any utility links such as a link to a text only version of the site or to a contactspage;

a search facility for medium to large sites (small sites with only a few pagesare unlikely to require a search facility).

The left-hand navigation menu should typically contain the key content areas orsubsections of the site.

The right column may be spit into to further columns to be used as website ownerssee fit. Typically the right column would be split into two one column for the maincontent and the other used for tertiary or subsection navigation and/or teaser items.

A footer navigation menu may be included to contain legals these are links to acopyright notice, privacy policy, terms and conditions, and so on.

Figure 1 - An example of the pilot layout using three columns. The left-column contains

primary navigation to key content areas. The middle column contains the main content. Theright-hand column contains subsection navigation (navigation for a key content area).

8/9/2019 NICS Corporate Layout for the Internet v2

4/16

Page 4 of 16

Pilot layout issues

The pilot layout may become the corporate strait jacket we wish to avoid. Thelayout lacks the flexibility required to meet the varying needs of large and smallgovernment sites:

1. For large sites with a deep hierarchical structure the left-handnavigation/three-column layout model is not suitable.

Main department websites must necessarily guide users to a very broad range ofresources and therefore tend to have a deep hierarchical structure, often deeperthan three levels. To provide usable navigation using a left-hand navigationmenu is not feasible since it would necessarily have to contain too many items.

2. For smaller websites with a flat structure a top and left navigation menu isnot necessary: Small sites containing just a few pages only need onenavigation menu.

3. Departments might wish to make use of redundant space to the right of thedepartment logo if it is not used for an agency or branch logo.

Lessons learned

The drawbacks of the pilot layout mainly revolve around a misguided attempt to applyone navigation model to all websites. A much better solution is to allow individualsites flexibility to utilise a layouts and navigation models which best suit the structureof the content contained within the site.

For example, the homepages of main department websites or any large websitecontaining a large number of key content areas, a portal style layout or indexlayout would be advisable. A particularly good example of a portal layout is the BBCwebsite (see figure 2).

The BBC group of websites provide an excellent example of how to maintaincorporate identity without being overly proscriptive in terms of layout.

Each BBC site:

is easily recognisable as being a BBC site and yet has a distinctive look andfeel;

usesportal and two/three column layouts sometimes alone or incombination with a variety of navigation schemes employed;

includes core navigation and utilities on every page of every site.

Why use a portal layout?Most department websites currently use a two or three column layout with a left-handnavigation menu. There are a number of disadvantages with this approach. Siteswith a broad range of resources must fit a large number of items into the menuleading to:

over-crowding and placing some links below the fold that is, the user mustscroll down to see the entire menu;

8/9/2019 NICS Corporate Layout for the Internet v2

5/16

Page 5 of 16

overly brief link text that prevents the user from inferring what the link will leadto this forces the user to make blind decisions;

the use of cascading menus that depend on JavaScript to function presentinga whole raft of issues relating to accessibility, usability and cross-platform/browser compatibility.

Research has shown that information is found more quickly using a portal layoutwhen compared to vertical (or horizontal) cascading menus and furthermore usersactually express a preference for this type of menu layout.

Rather than attempt to place links to all key content areas into a left navigation menu,a portal style (or index style) layout consists of clearly separated blocks of links foreach key content area (normally arranged in columns). Maximum use is made of thevisible screen area to display a large number of links in addition to brief summaries ofwhat the user can expect in a highlighted key content area. This allows the user toquickly scan each area for topics of interest.

When the user chooses something from a key content area they are then typically ledto a sub-site devoted to that area. Depending on the structure of the key contentarea, it may itself be a portal (a so-called mini-portal) to further sub-sites or it maybe a target site containing the content of interest.

Figure 2: The BBC homepage an excellent example of a portal style layout.

8/9/2019 NICS Corporate Layout for the Internet v2

6/16

Page 6 of 16

Figure 3 The BBC Science & Nature mini-portal

Figure 4 - The BBC Science & Nature Animalssite - an example of a "target-site" that can bereached via the Science & Nature mini-portal.

Target site layout two or three columns with left-hand navigation

The content of a target site should be focussed on a particular area and can bestructured as a single, double or triple-tiered hierarchy easily. In this situation atwo/three column layout with a left-hand navigation menu as used for the pilot layoutbecomes feasible because fewer items need to be crowded into the menu.

The award winning BBC news site, like many target BBC sites, uses a two/threecolumn layout. The left navigation menu contains categorised news channels (keycontent areas) and is persistent across all pages of the site. The second column usesa portal style layout on the homepage and the main pages for each key content area.

8/9/2019 NICS Corporate Layout for the Internet v2

7/16

Page 7 of 16

Figure 5 - The award winning BBC News website

a target site that uses a two/three column layoutwith a left-hand navigation menu containing keycontent areas.

Figure 6 - The Northern Ireland "key content area"

main page on the BBC News website.

Figure 7 - An article in the Northern Ireland "key content area".

Core identity, navigation and utilities

To ensure the corporate layout is usable it must contain certain core elements thatare consistent across all sites to aid recognition and minimise the need for users toreadapt and reorient themselves on each website. It should be possible for users tomove from one department website to another and find elements like a link to thehomepage or a search facility in the same location.

The BBC has achieved this by placing a corporate bar above the branding banner

on every page of every site (see figure 8 for some examples of this).

8/9/2019 NICS Corporate Layout for the Internet v2

8/16

Page 8 of 16

The BBC corporate bar contains:

The BBC logo

A link to the BBC homepage

Links to some key content areas of the BBC portal (TV, Radio, Where I Live)

Utilities such as an A-Z index and a search facility

The BBC branding banners contain:

A logo and/or title text representing a key content area or subject matter ofthe site

Core navigation and utility links typically a link to a text only version

Figure 8 - Some examples of the BBC corporate bar in combination with various brandingbanners.

A similar approach could be taken for NI government sites using Northern IrelandExecutive or Northern Ireland Government bar at the top of every page. The barcould contain:

A link to the Northern Ireland Executive portal and a link to Online NI (sincethe user could have arrived at a government site via one of these portals)

Links to key content areas in the Executive portal

However, it would be prudent to avoid the placement of a search facility within thecorporate bar because it could be misinterpreted as being a global search of all ofgovernment sites when in fact the search facility is context sensitive and alwayssearches the current site. The BBC have dealt with this problem by representing thesearch box as a colour-coded tab using colours which match the branding banner ofcurrent site thereby giving the impression that the search facility belongsto that site.It is felt that the position of the search facility in the pilot layout (in the top navigationbar beneath the branding banner) provides a more explicit indication that it searchesthe current site and is therefore preferable to the strategy adopted by the BBC.

8/9/2019 NICS Corporate Layout for the Internet v2

9/16

Page 9 of 16

The combination of a corporate bar, branding banner and a top navigation barcontaining core navigation and utility links plus a search facility very neatly providesthe user with:

a mental model of the hierarchy of government websites they are currentlylocated in reducing disorientation;

a means to return to key points in the hierarchy;

tools to search the current location in the hierarchy.

Starting from the top (and reading from left to right) the user has:

a link back to the NI Executive portal and access to key content areas in theportal;

a department logo to indicate which department site they are viewing;

an ancillary logo to indicate which key content area of the department theyare currently in;

a home link for the main department site plus any utility links;

a search facility to search the current site.

Bringing it all together the proposed corporate layout

The proposed corporate layout builds upon the pilot layout but with a fewfundamental additions and changes.

The most important addition is inclusion of a corporate bar at the top of every page ofevery site. This bar contains links to corporate portals (NI Executive and Online NI)allowing users who have arrived at a particular government site via one of these

portals to return there.

The most important change from the pilot layout is the removal of a proscribedtwo/three layout with a left-hand navigation menu in favour of flexibility to permitportal style layouts and two/three column layouts depending on the needs of eachindividual site.

The basic core elements

A corporate bar.

A banner containing the department logo to the left plus ancillary logos/titles(for a key content area) to the right.

Top navigation (beneath the banner) containing core/utility navigation placedto the left and a search facility placed to the right.

Portal and two/three column layouts.

A footer navigation menu containing legal links (copyright statement,disclaimer, terms and conditions, etc).

NICS Corporate bar

Figure 9 - An example of the NICS corporate bar.

A persistent, global feature of every page on every site.

8/9/2019 NICS Corporate Layout for the Internet v2

10/16

Page 10 of 16

Placed at the very top of the page.

It is static it never changes from site to site.

Contains a link to the NI Executive portal, links to key content areas of the NIExecutive portal (e.g. Departments, News Releases, A to Z Index) and a linkto Online NI.

Uses a fluid design for screen resolution independence. Uses text-based links with relative rather than fixed font sizes for maximum

usability and accessibility.

Banner

The department logo mustbe placed to the left and ancillary logos or titles(identifying a key content area) must be placed to the right.

Figure 10 - An example banner showing the OFMDFM department logo plus an ancillary logofor the "Targeting Social Need" key content area.

Department logos mustconform to the rules specified in the NICS Corporate IdentityManual.

1. The main hexagon of the logo should be exactly 55 pixels in width to ensuremaximum consistency across all the department websites.

2. There should be a protection zone of space surrounding the logo of exactly14 pixels. In effect, this means that the top leading edge of the logo shouldbe exactly 14 pixels from the bottom of the NICS corporate bar and the left-hand leading edge should be 14 pixels from the edge of the browser window.

Properly applied, these rules will ensure that department logos are in exactly thesame position on all sites.

Top navigation

Top navigation should contain text-basedcore navigation and utility links.

A link to the website homepage mustbe included and must be the very first link(reading from left to right). The following utility links may also be including dependingon requirements (these are just examples):

Site map or A-Z index

Feedback

Organisation chart

The top navigation should also contain a quick search box if the site requires asearch facility (smaller sites do not) and should be placed to the right.

8/9/2019 NICS Corporate Layout for the Internet v2

11/16

Page 11 of 16

Figure 11 - An example of top navigation.

Portal and Two/Three column layouts

The decision to use portal style layout/navigation or to use a two/three column layoutwith left-hand navigation (or some hybrid) will depend on the structure of contentcontained within a site. Designers and developers must have the flexibility to use themost appropriate layout to ensure usability and accessibility. It is critical howeverthat when different layouts are used within the same site that they are consistentlyused. For example, if a portal layout is used on the homepage reverting to two/threecolumn layout for a key content area then every key content area accessible from thehomepage should use a two/three column layout.

A portal style layout will probably be the best choice for main departmenthomepages. Sub-sites and target sites that are focussed on a particular subject or

key content area will be able to make use two/three column layouts.

Figure 12 The corporate template using a pure portal style layout.

8/9/2019 NICS Corporate Layout for the Internet v2

12/16

Page 12 of 16

Figure 13 - An example of a hybrid portal layout with a left-hand navigation menu.

Left-hand navigation

When provided left navigation will typically contain links to the key content areas orchannels of the site and/or of a key content area. Left navigation may also containadditional navigation items where it is not feasible to place these in the top navigationbar or in a footer navigation bar.

Right column

This can be used as authors/designers see fit. The entire space may be used for aportal style layout (for key content area index pages) or for main body text of anarticle. Or the space could be split into two columns one for main body text and onefor right hand navigation for tertiary or context sensitive navigation items (see figure

15).

Navigation features:

Regardless of where navigation menus are used, they should always have thefollowing features:

Should be persistent and consistent across all the pages linked to. If theitems in the menu differ from page to page this will likely lead to confusion forthe user.

Navigation is text based (not image based) and functions without the need for

javascript to ensure accessibility and cross-platform/browser compatibility. Navigation items should be logically grouped. For example, links to key

content areas should be separate from other links.

8/9/2019 NICS Corporate Layout for the Internet v2

13/16

Page 13 of 16

If cascading menus are used, developers should ensure they are usable andaccessible.

Example templates

DID will supply templates conforming to the corporate layout on request. Thetemplates will be available as standalone HTML files for those sites not hosted on thecorporate content management system. Templates will be provided for portal stylelayouts, two/three column layouts and hybrids of the two.

Standards and accessibility: The templates are e-GIF complaint and will beconstructed to meet W3C WAI Priority 2 checkpoints (otherwise known as AAconformance). This will be the minimum accessibility requirements for UKGovernment websites.

Modifying the look and feel: The look and feel of the templates can easily be

modified by making changes to the CSS (Cascading Style Sheet) controlling suchaspects as the fonts, colours, borders and background images.

Modifying the layouts: All layouts in the templates have been built usingrecognised conventions and are easy to modify (by editing the HTML or CSS). Use oftables has been kept to an absolute minimum and can easily be replaced with tablefree layout code if developers choose.

Figure 14: Portal style homepage in the Corporate Template

8/9/2019 NICS Corporate Layout for the Internet v2

14/16

Page 14 of 16

Figure 15: Three column layout in the Corporate Template

8/9/2019 NICS Corporate Layout for the Internet v2

15/16

Page 15 of 16

Figure 16: Two column layout in the Corporate Template

8/9/2019 NICS Corporate Layout for the Internet v2

16/16

Page 16 of 16

Figure 17: Single column layout in the Corporate Template