Learning Unit

(Navigation and Interactivity)

Before-Reading
Questions
Reflect on the following questions:
 What is the purpose of navigation in a multimedia
application?
 When have you experienced interactivity with an
application?

Learning Outcomes

At the end of the topic session, the students are expected to:
1. Identify the different navigation structures for
designing multimedia applications.
2. Identify the uses of each interactive component.

Time Frame

5 hours in a week

What is Navigation?
 Navigation controls enable the user to move across the screens in a
multimedia application

Two Navigation Structures

 Linear
 Non-Linear

Linear Structure
 Navigating through a Linear Structure: Controls include Next, Back,
and Repeat Example: Slideshow

Non-Linear Structure
 Navigating through a non-linear structure: Control is through a MENU

Menus
A main menu contains the major topics available in the application. The sub
menu contains sub topics that fall under a main menu item.
Note: Not all main menu items must have a sub-menu.

Sample Multimedia Project about Pregnancy

 For example, look at a multimedia project about pregnancy. The outline lists
the main topics and sub topics. Given the outline, how many items should be seen on
the main menu screen? There should be 6 main menu items on screen. Which among
the main menu items have a sub menu? Only the Body Mysteries item.

Designing Menus
Menu interfaces can be designed in many ways. It can be tricky to figure out
which menu interface will best fit an application. Typically, buttons are used for
menus. But there can be other options that you may try such as Text-Based Links,
Icons, Tabs, Custom Images, and Irregular Shapes.
In fact, some menus may even take up the entire screen of the application.
Other menus share a theme with the application.
Whichever menu design is selected, ensure that the options in the
application are clear to the user. Simple menus are the best option to use.
Note: In the main menu screen, avoid too much clutter because the things
available in the application must be clear to the user.

Interaction
The term interact is a verb that means that means to act upon one another.
Examples of interacting are touching someone, speaking to someone, etc.
The term interaction is a noun that means reciprocal action or influence. This
means there are at least two entities involved, one initiating the action, and the other
reciprocating.
In multimedia application development, we consider the interaction between
the user and the computer.

Power of the Click

 The computer allows us to interact with it through the different input-output
devices. But the most powerful action with today’s technology is the “click”. Imagine
the mouse, as a device, celebrates more than 40 years of interaction among us. This
simple click has maintained the same whilst the evolution of the Windows OS (or
Macintosh OS) and the personal computer. Even if computers and operating systems
have higher technology both are still dependent on the mouse and its clicking power.

What is an Interactive Component?

An interactive component is a trigger towards an action. There are different
types of interactive components as follows:
 Hyperlink  Combo Box
 Buttons  Text Fields
 Radio Button  Playback Controls
 Check Box  Functional Buttons

These are known as the traditional forms of interactivity.

Hyperlink
A hyperlink is typically in a text form. It can be a single word or group of
words. It is usually triggered with a mouse click. A hyperlink has three states as
follows:
1. Unclicked – when the hyperlink is in its original, neutral state
2. Roll-over – when the user has placed the mouse pointer over the
hyperlink
3. Clicked – when the user has clicked the hyperlink
For hyperlinks, each state may have a different link color depending on the
state it is in. But it is very much dependent on the designer. Some designers
maintain a single link color for all states. However, it is best to have a different color
for each state to know whether a link has been clicked or not.

Button
The button is typically rectangular in shape and has a text label. It is also
triggered with a mouse click. A button has two states as follows:
1. Unclicked – when the button is in its original, neutral state
2. Clicked – when the user has clicked the button

For buttons, each state may or may not show a difference in color. Some
buttons are designed as if they are “protruding” when it is in the unclicked state and
“pressed down” when they are being clicked.

Radio Button
A radio button is circular in shape with a label beside it. A set of radio buttons
must contain at least a pair of options. Only one option can be selected at a time
from the set. The selected option is seen as the option with a dot. Radio buttons are
also triggered with a mouse click. A radio button has two states as follows:
1. Selected – when the user has clicked the option and a black dot appears
inside the button
2. Unselected – when the user has not clicked any option
All radio button sets provide options for the user. But remember, only one
option can be selected per set.

Checkboxes
A checkbox is square in shape with a label beside it. A set of checkboxes may
contain one or more options. Unlike the radio button, checkboxes can have more
than one option selected at a time from the set. The selected options are seen as the
options with a check mark. Checkboxes are triggered with a mouse click. A check box
has two states as follows:
1. Selected – when the user has clicked the option and a check mark appears
2. Unselected – when the user has not clicked the option
All checkbox sets provide options for the user (just like radio buttons) and the
user can select one or more options.

Combo Box (Drop Down List)

A combo box also known as a drop-down list is rectangular in shape and has a
list of values as options. It is also triggered with a mouse click. A combo box has two
states as follows:
1. Clicked – when the user has clicked the box and the menu is visible
2. Unclicked – when the user has not clicked the box
Combo boxes are used when you have a long list of options. It saves space on
the screen compared to using so many radio buttons. Usually, you will see combo
boxes for date selections, country selections, and year selections.

Text Fields
A text field is rectangular in shape with a label describing it. It is triggered
with a keyboard input. Typically text fields are used for receiving data from the user
through forms or a series of data entry questions.

Playback Controls
Playback controls are used to control audio and video. They are small in size
and iconic by nature. Some examples of playback controls are the rewind, play,
forward, pause, and stop button seen in media players.

Functional Buttons
Functional buttons trigger actions pertaining to data, documents, or files. This
could be an action to store or retrieve files/data or actions to connect to storage
devices and other peripherals. Save, Load and Print functions are very common in
most application software.
A multimedia project may or may not have these depending on the design. If
the project doesn’t require any input from the user, then there is no need to save or
load any data. Sometimes the user is just meant to view the contents of the
multimedia application. Printing might be a useful function for educational
multimedia projects that provide learning content (recipes, review notes, summaries,
lessons, tutorials).

Modern Interactivity
Traditional interactive components are still used today in most software and
Internet applications. They are still efficient for navigation, data collection and
storage, and user selection. However, with the advent of Adobe Flash, modern forms
of interactivity can be designed for applications. These include the following:
 Hotspots
 Rotation
 Magnification
 Zoom In / Zoom Out
 Drag and Drop
 Dynamic Color Change
 Object Layering
 Simulations
 Text Personalization
Hotspots
Hotspots are clickable areas on the screen, designated for irregularly shaped
objects. Its function is similar to a button. In the sample images, we see the hotspot areas
defined by the numeric labels. If you click a hotspot, notice the entire object becomes
selected (like the chair, monitor and printer). Hotspots are mostly used to add interactivity
to graphics and images.

Rotation
Interaction today is much advanced to the point that it can be used to view an object
at any angle. Before objects can only be viewed at its front and back and sometimes at the
sides. Today, objects can be viewed at any angle within 360-degree angle.

Magnification
Magnification is used to emphasize or view a very detailed object up close. It is
common in objects where small details are important such as jewelry, shoe stitches, and
engravings.

Zoom-in / Zoom-out
Zooming in enables the user to see a closer view of the object. Ability to zoom in is
possible which make it very useful when it comes to looking at the details of object up close.
It is quite similar to magnification except that zooming provides you levels of depth that you
can control. Magnification is primarily fixed to a single scale of view that is pre-set.

Drag and Drop

Dragging objects on screen became very common with Flash applications. It is now
useful for user-customization and layout of objects on screen.

Dynamic Color Change

The color of objects can be changed immediately as the user selects a color option.
This interaction provides the user an immediate view of his choice and helps the user make
a decision whether he likes the color or not. It saves space on screen as well, since you do
not need to display the same object in many different colors explicitly. In some situations,
you can end up with 5 images of the same object in different colors. With dynamic color
change, you just need one object and the color selection palette.

Object Layering
Object layering allows the user to see multiple objects being previewed on screen at
once. It is common for customizing products online like cars, snacks, shoes, clothing, etc.
The layers of objects can be seen at one instance or at the same time.

Simulations
Simulations are tools that show change according to variables. In multimedia
projects, these provide interactivity for tutorials like Science and English language tutorials.
They are seen as controllable animations. Sliders or buttons are designed and used to
manipulate the objects in simulation.

Text Personalization
Customizing objects online is a very common interactivity. Text personalization
allows the user to type in text, select the font, and sometimes even select the font size or
color. It is common for customizing awards, glassware, caps, shoes, towels, t-shirts, and
jackets.

Value of Interactivity in a Multimedia Project

 Having seen both traditional and modern interactive components, it is quite clear
that experts have put in much importance on how people use applications, how people
select options, and how people preview what they select.
It is imperative that multimedia applications be interactive and non-linear. With this,
it gives the user a richer experience and excitement and encourages them to explore the
application more. Nonetheless, it will be boring and dull if you will stick to pre-set
applications.

GENERALIZATION:
o Navigation controls enable the user to move across screens in a multimedia
application with two structures - linear and non-linear.
o Linear structure is a one-way flow of screens.
o Non-linear structure provides more control over what the user wants to learn.
o A main menu contains the major topics available in the application.
o Menus can be designed in many different ways.
o Interaction means the reciprocal action or influence.
o The traditional interactive components include hyperlink, buttons, radio buttons,
checkboxes, combo box, text fields, playback controls, and functional buttons.
o The modern interactive components include hotspots, rotation, magnification, zoom
in/out, drag and drop, dynamic color change, object layering, simulations, and text
personalization.
o Given the different interactive components, it is highly important on how people
use and explore application with these components.