NICS Corporate Identity and Layout

for the Internet

Summary
This paper makes recommendations for implementing a corporate approach to the
layout for all NICS websites. The goal of the proposed layout is to deliver a
consistent corporate identity and a common web interface to ensure that online
interaction with NI government via the Internet is easily recognisable, memorable,
and usable for all. The proposed recommendations are intended not to be overly
proscriptive thereby allowing individual websites enough freedom to have layouts that
meet the expectations of their intended audience and which suit the structure or
taxonomy of information and services contained within them.

Background
The impetus for a corporate layout stems from an overall commitment to provide
joined-up government and to provide services across departmental boundaries for
the benefit of all citizens. This commitment has already led to the development of
centrally provided e-GIF (e-Government Interoperability Framework) compliant
infrastructure, 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 government
websites 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 consistent
identity 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 logos
have had to be “shoe-horned” into the same space occupied by the old logos without
any redesign.

The intention of the recommendations made in this paper is to define a corporate

template which ensures the consistent presentation of department logos in
accordance with corporate guidelines.

Page 1 of 16
Consistent usability and accessibility
Whilst consistent identity is important to provide the right impression to citizens, of
greater importance to the end user is that government websites are easy to use and
are accessible. It is therefore critical to provide a common web interface that
contains 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 each
department’s website and designers are free to respond to specific design briefs
given to them. There is no intention to change this position in this paper.

Corporate template objectives

The corporate template will define:

• the size and placement of department logos to ensure compliance with

corporate identity guidelines;
• the placement of ancillary logos for branches, agencies, etc;
• the placement of core/utility navigation links and search facilities to provide a
baseline 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 corporate
layout is essential. Without buy-in authors, editors and developers may be
reluctant 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 and
lead to “bending of the rules”.

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

Where government sites are hosted on the corporate content management

system, templates can be supplied which will enforce the basic framework of the
corporate template. However, there is no way of preventing developers in
individual departments from modifying those templates to break corporate layout
rules. It is essential therefore that the layout guidelines and recommendations
provide enough leeway so that rules are unlikely to be broken yet still strict
enough to ensure some level of consistent identity and usability.

3. Overly prescriptive layout rules which inhibit rather than encourage good
usability.

It is generally not feasible or advisable to create a layout without consideration for

the nature and structure of the content that must be fitted into that layout. Each
website 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.

Page 2 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 three
columns spanned by a branding banner. Primary (or global) navigation is split
between a top navigation/utility bar (below the banner) and a navigation menu in the
left-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 contacts
page;
• a search facility for medium to large sites (small sites with only a few pages
are unlikely to require a search facility).

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

The right column may be spit into to further columns to be used as website owners
see fit. Typically the right column would be split into two – one column for the main
content 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 a
copyright 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. The
right-hand column contains subsection navigation (navigation for a key content area).

Page 3 of 16
Pilot layout issues
The pilot layout may become the “corporate strait jacket” we wish to avoid. The
layout lacks the flexibility required to meet the varying needs of large and small
government sites:

1. For large sites with a deep hierarchical structure the left-hand

navigation/three-column layout model is not suitable.

Main department websites must necessarily guide users to a very broad range of
resources and therefore tend to have a deep hierarchical structure, often deeper
than three levels. To provide usable navigation using a left-hand navigation
menu 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 is
not necessary: Small sites containing just a few pages only need one
navigation menu.

3. Departments might wish to make use of redundant space to the right of the
department 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 apply
one navigation model to all websites. A much better solution is to allow individual
sites flexibility to utilise a layouts and navigation models which best suit the structure
of the content contained within the site.

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

The BBC group of websites provide an excellent example of how to maintain

corporate 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 and
feel;
• uses portal and two/three column layouts sometimes alone or in
combination 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-hand
navigation menu. There are a number of disadvantages with this approach. Sites
with a broad range of resources must fit a large number of items into the menu
leading to:

• over-crowding and placing some links “below the fold” – that is, the user must
scroll down to see the entire menu;

Page 4 of 16
 • overly brief link text that prevents the user from inferring what the link will lead
to – this forces the user to make blind decisions;
• the use of cascading menus that depend on JavaScript to function presenting
a 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 layout
when compared to vertical (or horizontal) cascading menus and furthermore users
actually 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 for
each key content area (normally arranged in columns). Maximum use is made of the
visible screen area to display a large number of links in addition to brief summaries of
what the user can expect in a highlighted key content area. This allows the user to
quickly scan each area for topics of interest.

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

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

Page 5 of 16
Figure 3 – The BBC Science & Nature mini- Figure 4 - The BBC Science & Nature Animals
portal site - an example of a "target-site" that can be
reached 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 be
structured as a single, double or triple-tiered hierarchy easily. In this situation a
two/three column layout with a left-hand navigation menu as used for the pilot layout
becomes 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/three
column layout. The left navigation menu contains categorised news channels (key
content areas) and is persistent across all pages of the site. The second column uses
a portal style layout on the homepage and the main pages for each key content area.

Page 6 of 16
Figure 5 - The award winning BBC News website – Figure 6 - The Northern Ireland "key content area"
a “target site” that uses a two/three column layout main page on the BBC News website.
with a left-hand navigation menu containing key
content areas.

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 that
are consistent across all sites to aid recognition and minimise the need for users to
readapt and reorient themselves on each website. It should be possible for users to
move from one department website to another and find elements like a link to the
homepage 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).

Page 7 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 of
the 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 branding
banners.

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

• A link to the Northern Ireland Executive portal and a link to Online NI (since
the 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 the
corporate bar because it could be misinterpreted as being a global search of all of
government sites when in fact the search facility is context sensitive and always
searches the current site. The BBC have dealt with this problem by representing the
search box as a colour-coded tab using colours which match the branding banner of
current site thereby giving the impression that the search facility belongs to that site.
It is felt that the position of the search facility in the pilot layout (in the top navigation
bar beneath the branding banner) provides a more explicit indication that it searches
the current site and is therefore preferable to the strategy adopted by the BBC.

Page 8 of 16
The combination of a corporate bar, branding banner and a top navigation bar
containing core navigation and utility links plus a search facility very neatly provides
the user with:

• a mental model of the hierarchy of government websites they are currently

located 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 the
portal;
• a department logo to indicate which department site they are viewing;
• an ancillary logo to indicate which key content area of the department they
are 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 few
fundamental additions and changes.

The most important addition is inclusion of a corporate bar at the top of every page of
every 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 proscribed
two/three layout with a left-hand navigation menu in favour of flexibility to permit
portal style layouts and two/three column layouts depending on the needs of each
individual 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 placed
to 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.

Page 9 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 NI
Executive portal (e.g. Departments, News Releases, A to Z Index) and a link
to 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 must be 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 logo
for the "Targeting Social Need" key content area.

Department logos must conform to the rules specified in the NICS Corporate Identity
Manual.

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

2. There should be a protection zone of space surrounding the logo of exactly

14 pixels. In effect, this means that the top leading edge of the logo should
be 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 the
same position on all sites.

Top navigation
Top navigation should contain text-based core navigation and utility links.

A link to the website homepage must be included and must be the very first link
(reading from left to right). The following utility links may also be including depending
on 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 a
search facility (smaller sites do not) and should be placed to the right.

Page 10 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 layout
with left-hand navigation (or some hybrid) will depend on the structure of content
contained within a site. Designers and developers must have the flexibility to use the
most appropriate layout to ensure usability and accessibility. It is critical however
that when different layouts are used within the same site that they are consistently
used. For example, if a portal layout is used on the homepage reverting to two/three
column layout for a key content area then every key content area accessible from the
homepage should use a two/three column layout.

A portal style layout will probably be the best choice for main department
homepages. 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.

Page 11 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 or
channels of the site and/or of a key content area. Left navigation may also contain
additional navigation items where it is not feasible to place these in the top navigation
bar or in a footer navigation bar.

Right column

This can be used as authors/designers see fit. The entire space may be used for a
portal style layout (for key content area index pages) or for main body text of an
article. Or the space could be split into two columns – one for main body text and one
for 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 the
following features:

• Should be persistent and consistent across all the pages linked to. If the
items in the menu differ from page to page this will likely lead to confusion for
the 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.

Page 12 of 16
 • If cascading menus are used, developers should ensure they are usable and
accessible.

Example templates

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

Standards and accessibility: The templates are e-GIF complaint and will be
constructed to meet W3C WAI Priority 2 checkpoints (otherwise known as AA
conformance). This will be the minimum accessibility requirements for UK
Government 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 such
aspects as the fonts, colours, borders and background images.

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

Figure 14: Portal style homepage in the Corporate Template

Page 13 of 16
Figure 15: Three column layout in the Corporate Template

Page 14 of 16
Figure 16: Two column layout in the Corporate Template

Page 15 of 16
Figure 17: Single column layout in the Corporate Template

Page 16 of 16