System Interface Design - Techniques and Notation

Introduction

 In an attempt to help you standardise the presentation of your interface

designs, the following interface techniques and presentation formats are
outlined

Wireframing

 Wireframing is typically a first draft interface design technique. Using

pencil and paper (or some easy to use interface builder), the designer,
with the aid of the client, attempts to draft the provisional structure and
layout of the proposed system.

 A Wireframe is thus a simple sketch of how the layout of each system-

screen should look and behave.

 Key screen elements and their location are decided on and drafted.

 Proposed behaviour, structure, and navigation are all captured within

the Wireframe.

 The Wireframe should include specific details that are important to the
intended user-group.

 Throughout the Wireframing process, the client should be consulted to

ensure that the provisional designs provide the required system
structure, navigation and functionality.

 Typically Wireframing documents are kept as an appendix within the

report

 The client should approve all Wireframe design before subsequent

design documentation is attempted.

 Let's see some examples:-

Wireframe Examples

Figure 1 - Home Page Wireframe

Figure 2 - Portfolio Management

Storyboarding

 Storyboarding allows the designer to extend the idea of Wireframing to

provide a detailed, formal presentation of the major components of the
proposed system interface.

 A completed set of storyboard designs should provide comprehensive detail

for the following critical areas: -

a) System Navigation
b) Screen Structure
c) System Functionality (Behaviour)
d) Screen Display Sequence and Dependencies
e) Feedback and User Error Support Mechanisms.

 The most common documents to be included within the storyboard package

are outlined below: -

1) Overall System Navigation Diagram

 The system navigation diagram aims to provide an overview of all system

screens and illustrate all navigation pathways throughout the system.

 Fig 1.1 provides an example of the format/content for the system navigation
diagram.
  Notice the presence of key system information:

a) Screen Name: Each screen should be labelled with a title that indicates
clearly its purpose.

b) Screen Reference No: Each screen should be allocated a screen reference

number so that it can subsequently be designed/viewed and its relative
position within the system is clear.

c) Navigation Arrows: Arrows between screens are included to illustrate the

navigation pathways possible throughout the system.

Example Navigation Diagrams

Figure 3 - Client Side Navigation Diagram (GW Properly Maintenance Site)

Figure 4 - Server Side Navigation Diagram 2 (GW Properly Maintenance Site)
2) Screen Mock-ups

 For each screen of the system, a detailed screen mock-up should be included
to illustrate essential screen information.

 Typical graphical content and textual narration should include:-

a) Purpose of screen.
b) Layout and structure of screen
c) Application of design principles illustrated on the screen.
d) Screen functionality
e) Required user inputs/input format.
f) Error messages
g) Presentation information, including colours and fonts.
h) Position and relative size of graphical components
i) Navigational information

 Screens should be referenced using the screen title and reference number
allocated within the navigation diagram. (See Fig 1.2)

Figure 1.2 Example Screen Mock-up

 Screen Mock-up Examples

Figure 5 - Example Home Page Screen Mock-Up (GW21)

(1) Logo and Header

New company logo and page
header. This will be displayed on all
of the websites pages. It
incorporates the specified colour
scheme and the picture relates to
property maintenance.
(2) Staff Photo
Photo of the companies staff
members.
(3) Company Description
Concise description of the company
demonstrating that they are a
friendly, family run company. This
section also explains that they
provide both domestic and
commercial services.

(4) Services (5) Suppliers (6) Contact Us (7) Colour Scheme

List of hyperlinks to all services.
This will allow user to quickly
navigate to the information they
require.
Section explaining that only high quality
goods are used and displaying the logos of
the main suppliers.
Hyperlink button to give
users a quick way of finding
the contact us page.
Mr Walters requested that
warm blues were used for the
website colour scheme. As such
all website page will contain
the same blue background
colour and blue hyperlink
buttons.
 Figure 6 - Example Management Portfolio Page Screen Mock-Up (GW01)

(1) Page Title

This will help the user identify which page
they are currently viewing.
(2) Upload Picture
This section should allow the user to select
an image from their computer and provide a
description for the image. Once all the
required information is entered and the
upload button clicked the image and its
description should be displayed in the
manage picture section of the page.
(3) Manage Pictures
This section should list all uploaded pictures,
their description and their order. Each row of
the list should be selectable.

(4) Manage Picture Buttons.

These buttons allow the user to move the selected list item up or down in the list. They also allow the user to edit the pictures description or delete
the picture from the system.

3) Activity Sequence Diagrams

 Once screen mock-ups have been developed for each of the screens within
the system, activity sequence diagrams should be created to demonstrate
navigation pathways for key user activities within the system.

 Activity Sequence Diagrams are comprised of two components.

1) A flow chart element showing the sequence of screen navigation and

any conditional component display.

2) A corresponding screen display diagram, showing what would be

displayed on screen, at each stage of the process.
 It should be noted that the level of detail in the activity sequence diagrams,
screen display area, does not have to be as extensive as it was in the screen
mock-ups. Rather it should give the flavour of the changing content and
layout for each key system activity.

 Typically Activity Sequence Diagrams are used for key system events, such
as:-

a) Logging into the system

b) System Search/Display Activities
c) User data entry screens.
d) Or any non-linear, conditional event, essential to system operation.
Activity Diagrams Examples

Figure 7 - Contact Us Submission - Activity Sequence Diagram (GWA01)

Figure 8 - Testimonial Submission - Activity Sequence Diagram (GWA02)