Templates and Examples for User Interface Specifications

Jump to:

Conceptual Level

The conceptual design identifies the set of objects and actions the user needs to know about in order to use the system. Describe the conceptual model in terms of objects, relations between objects, actions on objects, and attributes of objects.

Identify the objects and actions that the user should know about, along these lines:

Conceptual Model


Object Attributes:

Object Relationships:

Actions on Objects:

Actions on Object Attributes:

Actions on Object Relationships:

Semantic Level

The semantic design documents the semantic specification for each action you have identified in the conceptual design, plus any other actions which are needed. The semantic specification includes a description of the function, including its parameters, feedback, and potential error conditions.

Document each action from the conceptual design along these lines:


Parameters (Both explicit and implicit):




Semantic Design Example

A typical semantic specification for a single function:


Add a symbol to the display


1. Which symbol type?

2. Where on the display?


An instance of the symbol is created and added to the display at the designated position. The instance becomes the currently-selected object, such that succeeding operations apply to it. The previous currently-selected object is no longer selected.


The instance is drawn on the display, and is highlighted because it is the currently-selected object. The previous currently-selected object is de-highlighted.


1. The symbol type is unknown (can be engineered out by use of a menu for selecting symbol types).

2. The symbol position is outside the viewport (can be engineered out by constraining positioning device to viewport).

Syntactic Level

Formally define the syntax using state diagrams. Start with a top-level state diagram of the system, and document each sub-state including sequences of user actions and feedback. Make sure you stay at the syntactic rather than the lower lexical level.

Show a high-level state diagram of your system.

Show a detailed state diagram for each sub-state, including sequences of user actions and feedback.

Syntax Specification Example

A state diagram specification of the syntax of a portion of a graphical editor:
State diagram example

Lexical Level

The lexical level design defines each of the actions identified in the syntactic level (the "tokens") in terms of actual hardware or system operations.

Simply give the definition of each of your tokens.


For more background, see: R. Jacob, "Using Formal Specifications in the Design of a Human-Computer Interface," Communications of the ACM 26(4) pp. 259-264 (1983) [PDF].