Design One

The Design Framework

“The Design Framework defines the overall structure of the users’

experience, from the arrangement of functional elements on the screen, to

interactive behaviors and underlying organizing principles…” It is comprised

of the interaction, visual design and the industrial design frameworks.

The Interaction Framework

At this stage the scenarios and requirements are used to create rough

sketches of screens and behaviors. This is where the use of storyboards in the

design comes into play. It is also a high level design which uses components

and related functionality as opposed to actual widgets since we are only

interested in the interactions. This is the most important step as it sets the

stage for the others even though this they can be done concurrently.

We will begin the interaction design by defining the operating environment of

the system. The i-JIS is a web application (may by later used as a kiosk) and

will use a keyboard and mouse as its main input methods. The functionalities

include searching, displaying information, filtering search and navigating

multi-media content. From this we can begin to define the components.

Component Functionality

Search & Searching and filtering search

Filter

Media Shows media content and other information such as site

Display advertisements.
 This area will display updates, highlight events, and show
information on selected option from map.

Media Manipulates media content. E.g. adjusting volume

Control

Sort Control Sorts data from search or media library

Map Provides links to information on sections of interest; triggers

navigation media content

Table 1

Interactive Framework Sketch

The following sketches depict the high level framework. More detail will be
included when we discuss the key path scenario.

Fig.
1: Main Page Setup - explained in Table 1 above

The Interface has two display options, the Map interface and the Media
Library interface. The Map is the primary user interaction screen while the
Media Library provides an expanded view of the Media Display.

The Key Path Scenarios

Key path scenarios are use cases which are frequently executed, usually on
a day-to-day basis. Such use cases will be the major focus of design and it is
important use a story board to illustrate these tasks. From the previously
established use cases we derive the following key path scenarios:

--Navigate to Parish
--Search
--View Multimedia Content

Fig 2a: Navigate to parish Figure2b: The parish

Clarendon is selected

The parish screen is accessed via the main map by clicking in the relevant
area. The parish page is similar to the main page but only displays
information relevant to the selected parish.
 Fig 3: Search

How Search Works:

Search is a straight forward process largely due to its high frequency of use.
The information is entered, filters are used if desired and the result page is
displayed.

The results are displayed in the Media Display window on the screen. These
results are listed as links allowing the user to select their most desired
response.

The search results are specific to the map or area of the map displayed.

Ie. If the entire country is displayed then the search will return results for the
entire country however if only a parish is selected as in Figure 2b above,
then only results for that parish (in this case, Clarendon) will be displayed.
The use of Filters: Filters help to refine the search by returning only
selected data for the specific search.

For the purposes of this demonstration, only a few filters are shown however
other filters include popular search categories such as Entertainment, Sports,
and Religion etc. This helps to narrow the search and zoom in on more
relevant data.

Fig 4: navigate to media library.

Picture, video and audio content are of special interest and is therefore easy
to access.

The Visual Design Framework

This stage of design focuses on the visual appeal of the screens and the

presentation of the media content. To clarify this idea, the development of

Aero Glass for windows vista is a part of the visual design framework. The i-

JIS will be influenced minimally by this aspect of the design framework,

largely due to the integrated visual styles of operating system which the user

will use. However, this will be a major part of the design when migration to a

kiosk is being considered. This aspect of the web design will be revisited

further in the design after the interaction framework becomes more mature.

The Industrial Design Framework

This aspect of the design will only arise when migrating the system to a kiosk

where there will be special hardware considerations.

 Design Two

This initial map interface will display all the parishes, the arrows above
denote that each parish has its own sub categories which can be
further explored by the user.
Once a parish is clicked by the user, it will be displayed in more detail
with a popup of the categories of interest which can be browsed.
Each category has sub categories which are all visible on this screen,
the one chooses will be highlighted and other will be suspended for the
user’s convenience. This option will allow the user to mouse across to
another category if so desired.

Display Area

The display area on the right of the screen will display

information on the selected category of interest. By default
an introduction of the parish is shown there giving the
unaware visitor a preview of the major highlights of the
parish.
The display area may be extended to suite the decisions
made in creating the final design.
 MOCK-UP DESIGN

The Mock-Up Diagram aims to achieve several principle concepts,

 The principle of Coherence, both internally and externally

 The principle of Aesthetics

 The use of colourful objects that are there to appease the user, to
keep them interested and focus on the interactive map.

 The principle of Focus

 The principle of grammar

 The principle of feature exposure

 the features of the i-JIS are simply exposed so the user can develop
a sense of familiarity quickly to determine the interactive actions
and options.
The mock up shows an abstract real world prototype of what the system
should actually look like, the use of the colourful and universal recognizable
objects is purposely done to interact with the user, regardless of the
language they speak, the assumption is made that users of all countries can
relate to the material of the system.

The Mock-up objects make references to the following Culture, Leisures and
Public Institutions in Jamaica:

 Sports

 Water Activites

 Vegetation

 Religion

 Music

 Retail Stores
 Caner Banana
Centre Industry
Hair
Negril Salon American
Beach Jewellery
Dolphin
Cove
Citrus National
Farm Stadium

The diagrams in the picture above are examples of how the different areas of interest will
be depicted. Items denoting places will allow locations to be easily identified when
browsing the map.

For example, when browsing St. Ann, the following icons will be present:

Fish/Dolphin – Depicting a marine facility such as Dolphin’s Cove, Beach – Depicting

beaches, Jamaica Flag – Depicting historical places
 i-JIS Storyboard

User Accesses Site via client terminal The IJIS System

om
www.ijis.c
I need

Browsing St. Ann

User requests page

…St. Ann
in
see places of
t’s
interesting, le
This m ap is

Places are represented by special icons

on the map and information on any
selected place is displayed in the green
display area on the right
 Some Places in St. Ann Page returned to user , User browses content
really nice
’s
interesting, it
Place Hmm n…
Location

Discovery Bay Historic Site

Discovery Bay

Dunn's River Falls

Ocho Rios

Dolphin's Cove
Ocho Rios

Cranbrook Flower Forest

Laughlands

Chukka Caribbean Adventures

…
Ocho Rios sounds fun
… Dunn’s River

User makes further selection as desired

go.
House
eat
Liberty Hill Gr
else I can of
significance
see where
the historical
so far, let’s t is
I wonder wha
been cool
This has
 This i-JIS site
is
cool, I’ve gotta
conv in ce m y
girlfriend to pa y for
my visit to Du
nn’s
Rive r Fa lls &
Liberty Hill in
St.
Ann, Jamaica
Because I spen
t all
da y onlin e lo oking
for jobs I’m go
nna
need some
recreation
User needs satisfied Page displays information
This sounds
inte re st ing , le t me
navigate to th
e
website
Let m e se e w ha t
Historic pl ac es of
interest are in
St.
Ann
directly.
interest. User may choose to visit website
i-JIS provides information on place of
 JUSTIFICATION

This design uses the screen real estate effectively to leverage the user’s
understanding to effectively communicate between application and user. If
too much information on a single screen is shown then the users would have
to wade through the ensuing clutter and if too little information is shown the
users would have to guess their way to their destinations. Also the amount of
information that was placed on a single screen means less scrolling. Less
scrolling means fewer motor tasks and less cognitive load, because now with
more information on a single screen, comparative tasks are more likely to
involve information that is currently viewable.

The design chosen however was mainly for usability; it has the following
factors:

1. Ease of learning and memorability

2. Efficiency of use
3. Subjective satisfaction

With this design it will be easier for the user to find detailed information
about the attractions and activities around the Island. Seeing that it is user
friendly and attractive (appropriate colours, font sizes and pictures will be
used) this will not deter users from the system and will attract more persons.
 Weaknesses and Strengths of Design One

Costs and Benefits of Design Decisions

Design Benefit Cost

Deep information
Clean, reduced clutter More clicks to find info
architecture

Large font Easier to read Less information per screen

See all selections at all Additional space required,

Check boxes
times clutter

Quick recognition once

Icons learned, aesthetically Must be learned
pleasing

Must be read, do not stand out

Text links Always understood as actionable items as much
from other text

Abbreviations Save space Must learn or recognize

Full text Easily understood Requires additional space

Keyboard
High speed of data entry Must be learned
shortcuts

Point and click Intuitive Additional time required for

 interaction due to increase
motor skills required

Weaknesses and Strengths of Design Two

Costs and Benefits of Design Decisions

Design Benefit Cost

Shallow
information Fewer clicks to find info More clutter
architecture

More information per More difficult to read for some

Small font
screen users

Selection amongst many

Drop-down box choices using limited Hidden choices
space

Quick recognition once

Icons learned, aesthetically Must be learned
pleasing

Must be read, do not stand out

Text links Always understood as actionable items as much
from other text
Abbreviations Save space Must learn or recognize

Full text Easily understood Requires additional space

Keyboard
High speed of data entry Must be learned
shortcuts

Additional time required for

Point and click Intuitive interaction due to increase
motor skills required
 References

Lecture slides based on Benyon Chapter 19, Edited by Dr. Ashley Taylor

http://www.desk-trainer.com/images/work_comp_overfin.gif

http://www.uiaccess.com/accessucd/images/roger2.gif

http://www.nickhalstead.com/wp-content/computer-user.jpg

http://devedge-temp.mozilla.org/viewsource/2003/inner-browsing/inner-
browsing.gif

http://www.cincylatino.com/modules/edito/images/uploads/Ocho%20Rios_Log
o_001%20copy003.jpg

http://www.happynri.com/common/images/process_1.jpg

http://www.rcs.k12.va.us/mces/clipart/computer_typing_animated.gif

http://www.seapalms-jamaica.com/aboutochorios.htm

http://www.libertyhillgreathouse.com/

Group Members

Tashana Allen

Wayon Elliot

Sherrie Francis

Lyndon Lathan

Crystal Gayle