Confidential

20040217
Technical Memo 2004RD1053
2008 Oc-Technologies B.V.

R&D
Technical Memo 2004RD1053
Title

Ocean; Proposal Style Guide for Oc

desktop applications

Author

iD

Author's Initials

arei, vto, jahj, aeme, mlmv

Department

id

Project Name / Research Topic

Keywords
Component
Next Milestone
Internal Documents Referred To

2002rd4413, Vanilla 2.0 Styleguide for Oc

Webapplications

Total No. of Pages

21

Date published

20040217

Status

Completed

Limited Circulation

No

Colour

No

To
Albin Stoderschig

Copy
Ron Notermans

Confidential

David Stabel
Fabian Libion
Eric van Meerbeck
Greg Arnold
Jennek Geels

20040217
Technical Memo 2004RD1053
2008 Oc-Technologies B.V.

Jan Cornelissen
Guus Lambregts
Roelof Hamberg
Peter Aragon
Peter Cornelissen
iD

Confidential

20040217
Technical Memo 2004RD1053
2008 Oc-Technologies B.V.

Table of contents
1 Introduction ................................................................................................. 5
1.1

Goal............................................................................................................................. 5

1.2

Scope .......................................................................................................................... 5

1.3

Intended audience ..................................................................................................... 6

1.4

Structure of this document ....................................................................................... 6

2 General UI mechanisms ............................................................................. 7

3 Primary Window Components................................................................... 8
3.1

Title bar....................................................................................................................... 8

3.2

Menu bar..................................................................................................................... 9

3.3

Window frame ............................................................................................................ 9

3.4

Size grip...................................................................................................................... 9

3.5

Status bar ................................................................................................................... 9

4 Secondary windows.................................................................................. 10
4.1

Message window...................................................................................................... 10

4.2

Dialog windows........................................................................................................ 10

4.3

Tool palettes............................................................................................................. 11

4.4

Scenario windows & Wizards.................................................................................. 11

5 Navigation within windows ...................................................................... 12

5.1

Navigation Bar.......................................................................................................... 12

5.2

Views and panes ...................................................................................................... 13

5.3

Split panes................................................................................................................ 14

5.4

Scrolled panes ......................................................................................................... 14

5.5

Tabbed panes........................................................................................................... 14

5.6

Pane Headers ........................................................................................................... 15

6 Menus ......................................................................................................... 16

Confidential

20040217
Technical Memo 2004RD1053
2008 Oc-Technologies B.V.

7 Toolbars ..................................................................................................... 17
8 Controls...................................................................................................... 18
8.1

Buttons ..................................................................................................................... 18

8.2

Selection Controls ................................................................................................... 18

8.3

Adjustment controls ................................................................................................ 18

8.4

Indicators.................................................................................................................. 19

8.5

Text controls ............................................................................................................ 19

8.6

View controls............................................................................................................ 19

8.7

Graphic design of controls in the Ocean style ...................................................... 19

8.8

Grouping Controls Group boxes........................................................................ 19

9 Listviews .................................................................................................... 20
10

Icons ........................................................................................................ 20

11

Additional Application parts ................................................................. 21

11.1

Installation............................................................................................................. 21

11.2

License .................................................................................................................. 21

11.3

Application desktop icon ..................................................................................... 21

11.4

Splash screen ....................................................................................................... 21

11.5

Online Help............................................................................................................ 21

11.6

About box.............................................................................................................. 21

12

Appendix A, Colour table ...................................................................... 22

Confidential

Introduction

20040217
Technical Memo 2004RD1053
2008 Oc-Technologies B.V.

Release note
This is a preliminary version of the style guide that will be
published in the near future. Therefor this document is called
proposal. Its published for two main reasons:
- To be able to have discussion about feasibility and needed
resources for implementing the style.
- To be able to get feedback of the Ocean Communication
Circle about the structure and content of the style guide to
be able to optimise it for the first official release.

This document is the first version of the Ocean style guide for
Oc desktop applications. The Ocean style is designed by Oc
Industrial Design department.
1.1

Goal
The goal of the Ocean style guide is to provide a common look
and feel for Oc desktop applications. On the level of look the
purpose of the Ocean style is to create a strong and distinct
corporate identity. On the level of feel the behaviour of
application elements is compliant to the standards of the
platform on which the applications are running, to support
optimal productivity and ensure the maximal ease of use.

1.2

Scope
This style guide covers all Oc applications running in a
standard desktop environment. The standard desktop
environment is an operating system installed on a PC and using
the metaphors of desktop, windows and direct manipulation by
means of a cursor. A desktop environment is based on the
object-action paradigm in which a user identifies an object and
an action to apply to that object [WIN]. We distinguish 3 main
standard environments at this moment: Microsoft Windows,
Apple Macintosh and Java. The examples in this style guide are
based on Microsoft Windows, being the platform used by the
majority of Oc users.
This style guide does NOT describe the guidelines for Webbased applications, however, in the long run the Web-based
applications will be incorporated in the Ocean style. The style for
web based application is specified in 2002rd4413 (see ref.).
This style guide does NOT describe the guidelines for dedicated
control panels of Oc engines (touch screen, soft-keys),
although desktop applications and control panel interfaces have
a lot in common.
All Graphical information in this document should be considered
to be graphical proposals, in the final version of the guide
graphical detailed specification will be added.
The basis of the Ocean style lays in the look and feel standards
of the common desktop platforms. The distinct Oc identity is
achieved by modifying certain visual aspects of the existing

Confidential

20040217
Technical Memo 2004RD1053
2008 Oc-Technologies B.V.

platform elements. These aspects are described in this style

guide, next to the most important information on the elements
behaviour. For in-depth information on the behaviour please
refer to the following sources:

1.3

[WIN]

Windows User Experience Guidelines:

http://msdn.microsoft.com/library/default.asp?url=/libr
ary/en-us/dnwue/html/welcome.asp?frame=true

[MAC]

Apple Human Interface Guidelines

http://developer.apple.com/documentation/UserExperi
ence/Conceptual/OSXHIGuidelines/index.html#//appl
e_ref/doc/uid/20000957

[JAVA]

JAVA Look and Feel Guidelines

http://java.sun.com/products/jlf/ed2/book/

Intended audience
This document is intended for designers and developers of Oc
desktop applications.

1.4

Structure of this document

The content of this document is structured in three main parts.
- General mechanisms of Desktop UIs (Ch 2)
- The elements of a desktop application. (Ch 3-10)
- Additional application parts (Ch 11)
The main part of this style guide deals with the standard
elements of a desktop application User Interface (Ch 3-10). In
these chapters first the design of the primary and secondary
windows is given followed by the navigation within the windows
and finally all smaller elements within the windows.

Confidential

20040217
Technical Memo 2004RD1053
2008 Oc-Technologies B.V.

General UI mechanisms
The desktop application designed in Ocean style should be
compliant to all general mechanisms of the standard platform it
is developed for. These mechanisms are not described in detail
here. It is the responsibility of each project to incorporate the
common mechanisms, such as selection behaviour, menu
structure, contextual menus, drag-and-drop, keyboard support
et cetera. The applications should be also compliant with
Section 508.

Confidential

20040217
Technical Memo 2004RD1053
2008 Oc-Technologies B.V.

Primary Window Components

A typical desktop application uses one Primary window and
several secondary windows (Ch5). The Primary window has the
elements described in the following sections.

Title bar
Menu bar

Window frame

Status bar
Resize handle

3.1

Title bar
Behaviour
The title bar is the handle of a window, using the title bar, the
window can be replaced, maximised, minimised and closed.
The title bar holds the corporate brand logo and application
name and is therefor one of the main elements contributing to
corporate image.
Sub elements:
- Application title.
- Title bar background
- Windows buttons

By left-clicking the title bar, the window can be dragged

across the desktop.
The title bar has a [context menu] (see Ch 6), which is
reached by right-clicking anywhere at the application title
and title background, the context menu contents all actions
common to windows for the platform.

Confidential

20040217
Technical Memo 2004RD1053
2008 Oc-Technologies B.V.

By double left clicking, the default action from the context

menu will be performed.
The window buttons are used to maximise, minimise and
restore the window.

Graphic design
The graphic design of the title bar is combined with the design of
the menu bar (3.2). By combining these two elements, the space
and opportunity to introduce a corporate element is created.
3.2

Menu bar
Behaviour
In the main window the menu bar is compulsory.
The menu bar includes a set of entries called menu titles, which
provide access to dropdown menu composed of a collection of
menu items or choices.
All commands available in the application can be found in the
menus (redundant to toolbars and context menus)
The behaviour and design of menus is given in Chapter 6.
Graphic design
The title bar and menu bar form one graphic entity.

Application title

Title Background

Window buttons

Menu titles
Open
(dropdown)menu
3.3

Window frame
The window frame is the boundary that defines the window
shape. Windows can be resized by dragging the frame.

3.4

Size grip
Even though the window can be resized by dragging every point
of the border, the size grip in the downright corner gives extra
visual cue for the possibility to resize the window.

3.5

Status bar
A status bar is used to give information about processes within
the window.

Confidential

10

20040217
Technical Memo 2004RD1053
2008 Oc-Technologies B.V.

Secondary windows
There are several types of secondary windows with specific
goals. Secondary windows are all part of the main application,
so by closing the primary window, also all secondary windows
will close.
Graphic design
Main colours used in secondary windows are bright green, dark
blue and two kinds of grey. The bright green header of a
secondary window distinguishes it from the main window, where
blue is the dominant colour.
In this styleguide we distinguish 4 types of secondary windows.

4.1

Message window
A message-window is a secondary window that displays a
message about a particular situation or condition.

4.2

Dialog windows
A dialog provides an exchange of information or dialog between
the user and the application.
A dialog window typically has a series of command buttons at
the lower right of the window, to confirm the settings/actions
done in the dialog window.

Confidential

11

4.3

Tool palettes

20040217
Technical Memo 2004RD1053
2008 Oc-Technologies B.V.

Palette windows are modeless secondary windows that present

a set of controls. In Ocean at the moment we dont use tool
palettes
4.4

Scenario windows & Wizards.

Scenario windows / wizards are windows that are part of a
logical series of steps where a user can walk through to fulfil a
certain task.
Scenario wizards typically have [next] and [previous] buttons.
Graphic design
Scenario windows and wizards, as an exception to other
secondary windows, use illustrations in all layouts.

Confidential

12

20040217
Technical Memo 2004RD1053
2008 Oc-Technologies B.V.

Navigation within windows

Within windows, functionality is in most cases divided and
grouped, which makes navigation through the areas necessary.
The Ocean style makes use of a left placed navigation bar as
main element to navigate between views.

5.1

Navigation Bar
Behaviour
The navigation bar contains entries to different views.
Sub-elements:
- Background
- Items (selected and non selected state)
- icon
- text
At any time there is one item at the navigation bar selected,
unelectable items at the navigation bar are not possible.

Graphic design
The graphic design for the navigation bar defines:
- Colour of background
- Three states for each item (Selected, Unselected, Rollover)
- Distance between and size of elements

Confidential

13

5.2

Views and panes

-

20040217
Technical Memo 2004RD1053
2008 Oc-Technologies B.V.

Each item in the navigation bar opens a complete view

A view consists of one or more panes.
There is at least one pane in a view.
A pane has a header (see 5.6)

Confidential

14

5.3

Split panes

20040217
Technical Memo 2004RD1053
2008 Oc-Technologies B.V.

Panes can be split into sub panes, the relative size of the panes
can be changed by dragging the border between the panes.
5.4

Scrolled panes
Panes can contain a larger area than the visible area, scrollbars
are used to access the complete content of the pane.

fig: Pane split into two sub panes, each sub pane is a scrolled
pane.
5.5

Tabbed panes
Panes can be laid on top of each other by using tabs

Fig: tabbed panes

Confidential

15

5.6

Pane Headers

20040217
Technical Memo 2004RD1053
2008 Oc-Technologies B.V.

Behaviour
Views and panes have headers to identify the view or pane by.
The header is also used to offer navigation functionality (not in
first version of Ocean style)
Sub elements of the header
Background
Title of view or pane.
Sub navigator
Graphic design
The colour and size of the header is defined by the Ocean style.
When there are more headers in one view, they all have
different colours (see appendix 1).

Confidential

16

Menus

20040217
Technical Memo 2004RD1053
2008 Oc-Technologies B.V.

Behaviour
Menus present lists of items, commands, attributes or states
from which a user can choose.
There are two common ways of using menus.
Menus reached from the menu bar by left clicking a
menu title.
Contextual menus that pop up when right clicking an
object in the interface.
For the behaviour of menus we refer to the style guides
mentioned in Ch2.

Graphic design
- colour
- spacing
- colour of selection
- design of dividers
- design of icons

Confidential

17

Toolbars

20040217
Technical Memo 2004RD1053
2008 Oc-Technologies B.V.

A pane containing objects (most commonly a list) can have a

toolbar.
Toolbars are always coupled/attached to a header
Sub elements:
- toolbar buttons
- icon
- text
- separators
- dropdown element for combined buttons
Behaviour:
Tools are always related to (elements) in a pane/list.
Toolbar buttons have different states:
- enabled
- enabled rollover
- pressed
- disabled
Graphic design

The graphic design of the toolbar specifies the following:

- spacing of the items
- background colour
- icons in all states
- text under the icons and the spacing
- design of the separators
- design of the dropdown element for combined buttons
- use of fonts/strings

Confidential

18

Controls
-

20040217
Technical Memo 2004RD1053
2008 Oc-Technologies B.V.

An interface element that a user can manipulate to perform

an action, choose an option, or set a value. (JAVA)
Controls are graphic objects that represent the properties or
operations of other objects. Some controls display and allow
editing of particular values. Other controls start associated
commands. (MS Windows)
Controls are graphic objects that cause instant actions or
visible results when the user manipulates them with the
mouse. Standard controls include push buttons, scroll bars,
radio buttons, checkboxes, sliders, and pop-up menus
(Apple)

Above three definitions for controls as found in the User

Interface Guidelines. There are different types of controls:
8.1

Buttons

8.2

Selection Controls

8.3

Adjustment controls

Confidential

19

8.4

Indicators

20040217
Technical Memo 2004RD1053
2008 Oc-Technologies B.V.

Indicators are controls that show the users the status of

something.
8.5

Text controls
Text controls are all controls that display text or take it as input.

8.6

View controls
View controls give the user the abilityb to control how
infromation is presented.

Example of a view control, by clicking the column header the

presentation of the list will change to another order.
8.7

Graphic design of controls in the Ocean style

We will not make customised designs for Controls, we will use
the controls used at the platform, for platforms with many
different look and feel themes like KDE we will choose a theme
that best fits the Oce Ocean-style.

8.8

Grouping Controls Group boxes

Behaviour
Group boxes are used to group controls to logical groups. This
way its easier to understand the relations between controls.

Confidential

20

Listviews

20040217
Technical Memo 2004RD1053
2008 Oc-Technologies B.V.

Lists are very common to display domain objects like printers,

jobs, templates, users etc.
Behaviour
The behaviour of lists is according to the platform style guide.
A list in the ocean style always has an icon in the first column.
Graphic design
The graphic design of a list specifies the following:
- Spacing between lines
- Use of column headers
- Use of icons
- Use of fonts
- Selection colour

10

Icons
Ocean uses a 2.5D icon style of which some examples are
given below.

Confidential

21

20040217
Technical Memo 2004RD1053
2008 Oc-Technologies B.V.

11

Additional Application parts

A desktop application consists of several parts with which the
user interacts during the application lifecycle.

11.1

Installation
The installation happens either automatically, without user
interaction, or by means of an installation wizard. In this wizard
the user is guided through the necessary steps before executing
the installation. The Oc corporate identity is already present at
that point. The wizard itself is designed based on the platform
guidelines.

11.2

License
To use an Oc application the user needs to have a valid
license. (s)He activates the license by means of a License
Activation Wizard. The UI guidelines for building a License
Activation Wizard can be found in [SLM].

11.3

Application desktop icon

The application is accessible to the user after it is installed by
means of a desktop icon. By clicking this icon the application is
started. Apart from the desktop the application icon is also found
in the Start menu, task bar and in the window title bar of each of
the applications windows.

11.4

Splash screen
When starting up the application the splash screen is displayed.
It contains the name of the application plus its version, the name
of the manufacturer and the identification of the user to whom to
application is licensed.

11.5

Online Help
The Help information is accessible to the user in the Help menu
in the menu bar of the application. The Help is displayed in a
secondary window. The content and visualisation of Online Help
is beyond the scope of this style guide.

11.6

About box
The About box can be opened by clicking About in the Help
menu in the menu bar of the application. The About box is a
secondary window providing Oc copyright information of the
application.

Confidential

22

20040217
Technical Memo 2004RD1053
2008 Oc-Technologies B.V.

12

Appendix A, Colour table