INTRODUCTION

Communication is a two-way process, therefore, multimedia is a two-way

relationship between user and computer. Interface is the first thing you see when
you run any multimedia application. The users perception towards an
application is influenced by the design of the interface, long before the user can
interact and obtain information from other applications. Therefore, a good
interface design must be consistent and suitable with the theme and objective of
the message to be conveyed.

T
T
o
o
p
p
i
i
c
c
4
4

Interface
Design
LEARNING OUTCOMES
By the end of this topic, you should be able to:
1. Indicate the importance of interface design in the process of
multimedia development
2. Explain six good design criteria and five types of interfaces; and
3. List five interface components and six design principles.
TOPIC 4 INTERFACE DESIGN

61
DEFINITION OF USER INTERFACE
4.1






















Self Check 4.1

Observe the scenario shown in the following picture. From your
observation, what is the problem faced by the woman?


Various aspects about human computer interaction (HCI), and relationship
between computer and user have been discussed since computer was invented.
But, around the 1950s and 1960s, researchers have started to assume the
computer as the facilitator aspect of human creativity and as problem solver. Due
to this reason, the need to define and structure human interaction with computer
has become more and more apparent.

If we look back, there are a lot of researches on the relationship between human
and computer, including the design issues of computer software are categorized
under term user interface.

Dix et al (1998) quoted, human-computer interaction provides very important
input for those who are involved in the design of learning packages. It is also an
important part of the designing process.

According to Johnson (1992), in general, user interface can be defined as the
interface between user and computer and can involve both hardware and
software.

TOPIC 4 INTERFACE DESIGN


62
Lewis and Rieman (1993), gave a more complete definition and quoted that basic
user interface should include things like menu, panel, keyboard, mouse, beep
sound and other sound produced by the computer. This includes all information
that enables human and computer to interact.

The influence of human-computer interaction is more than just the relationship
between input and output devices. Computer systems user also needs to
understand the meaning and effectiveness of a command that enable certain
tasks to be accomplished. The design and presentation of these instructions, and
the user-friendliness level that is achieved in a system form the cornerstone of
discussion about the design of human-computer interaction




REFERENCE
To obtain more information about HCI (Human Computer Interface) and
understand more about how design decision is made during the development
of interactive multimedia system, refer to Chapter 7: Human Computer
Interaction in Designing Interactive Multimedia Systems by Mohammad
Dastbaz, 2002



THE IMPORTANCE OF INTERFACE DESIGN
4.2
Designing an interface to help the development and learning process is not
something new. A typewriter has a standard interface to ease the learning
process. The same interface design that was transferred to the computers
keyboard smoothen the migration process. As an example, by taking and
transferring typewriters keyboard interface (QWERTY) to computers keyboard,
its migration to computers keyboard will not cause many problems, particularly,
to users who are used to the traditional typewriter.

Multimedia application designed for entertainment, education and
announcement will take the same concept and approach where the interface
developed relates to the everyday things or lifestyle of a user. This will prevent
the uncomfortable feeling and confusion with new things. As an example,
edutainment application like Just Grandma and Me uses interface based on story
books metaphor where the navigation control to go to the next page or screen is
at the bottom of the screen, similar to the actual story book. Multimedia elements
like graphics, texts, animations found on the screen will excite the user without
interrupting their concentration on the information or story to be conveyed. By
using familiar interface, user will find it more comfortable to navigate and learn
from the application.

TOPIC 4 INTERFACE DESIGN

63
Interface design is the backbone of where the multimedia elements and
navigation are placed, and how the overall application is structured. Developer
can produce multi-sensory environment that supports the contents and
multimedia messages through a good interface. It must be remembered that
application interface is the product of multimedia elements, contents and
navigation system. If messages and contents are not managed properly and
difficult to find, or user feels bored or lost, your application will fail to meet the
developments objective.




























Read and understand the attached passage from a newspaper. What is
the main cause of the accident and how to overcome it? Try to relate the
accident with the interface design of the multimedia application that you
are about to develop. Discuss with your classmates.
Activity 4.1










TOPIC 4 INTERFACE DESIGN


64

Reference: Designing Interactive Multimedia Systems, Mohammad
Dastb, 2002: ms 109-110




Activity 4.2
1. What is the relationship between Human Computer Interaction (HCI)
and interface design?




TOPIC 4 INTERFACE DESIGN

65

GOOD INTERFACE DESIGN CRITERIA 4.3
An interface design must be consistent with the themes and objectives of a
message. It is not effective if the interface design is energetic and exciting but the
application needs to convey a serious and formal message. Therefore, ensure that
the interface design suits to the theme and concept of the overall application. The
following criteria are of a good interface design.
4.3.1 Understanding Target Audience
The developed interface must be suitable with the target audience of your
multimedia application. The types of the target audience and interface to be built
must be decided in the early phase of planning. Therefore, make sure you know
the users needs well. You may do some research about your target users by
answering the following questions:-



Are the objectives of your multimedia application development consistent
with the target audience?
What are the demographic, life-style and behavior?
How many roles will the users play in an application? Active or passive?
What is the expertise level required for an application?
By knowing more about your target audience, it will help to decide on the type of
graphics and navigation control that are needed in an application. Applications
developed for teenagers are definitely different from the applications for
corporate companies in terms of language, colour, theme, etc. By selecting
effective colour, sound and animation, you can attract the attention of your users.
By understanding your target audience, you can choose the best combination of
multimedia elements to deliver a message in a more effective way.
4.3.2 Identifying Important Elements
Today, authoring software has become popular with more and more software
that supports multimedia elements (text, graphics, animation, sound and video)
in both Windows and Macintosh platforms. In our enthusiasm to produce
attractive and great applications, we may want to include all these elements. This
may be a good idea if they are really needed to support the message that we
want to convey. If not, they will confuse the user!

TOPIC 4 INTERFACE DESIGN


66
4.3.3 Reducing Information Overflow
CD-ROM technology enables designers and multimedia developers to load a lot
of information onto a disk. However, the contents displayed are not balanced
with the total information that can be processed or recalled. Clutter is a design
principle that needs to be avoided. Moderation is the key, especially on web page
where the display area is limited (i.e. maximum 600 X 400 pixels).

Ensure moderation on the interface screen so that information can be conveyed
quickly. It is better if users can quickly and instantly concentrate, remember and
process the information in the application. Hence developer has to choose
contents that are really important for the application. It is the quality but not the
quantity of the information that counts.
4.3.4 Providing Alternatives for Interface Control
One of the ways to solve the problem of information overflow on the screen is to
provide shortcut keys or alternative keys on the interface control. This provides
user with more than one ways to navigate to the following screens. In addition,
designers can also provide a few alternatives to start and end an application.

By preparing alternative ways to exit or pause an application, users are free to
control the situation. Users will not feel that they are forced to end an application
if they are not interested to do so. Multimedia application should be developed
in a comfortable and conducive environment for learning.
4.3.5 Accommodating Various Users Expertise Levels
Users from different levels should be able to interact with the application
developed. This is true especially for those applications distributed to a wide
market. As an example, an interface can provide users with options to start an
application according to their expertise level like Beginner, Intermediate or
Advanced.

By providing choices for users to explore the application according to their
expertise level, indirectly you are allowing users to learn based on their own
capability and comfort.



TYPES OF INTERFACES
4.4
As an interface usually has its own theme and message, therefore, it is important
that users identify with the look and feel of an interface. This includes knowing
the various structures and approaches used. There is no limit on the type of
metaphors that can be used in an application.
TOPIC 4 INTERFACE DESIGN

67
It is good if users can identify different types of interfaces available so that they
will not be burdened by the task to understand the meaning of an interface while
(at the same time) trying to process information on the screen.
It is good if users can identify different types of interfaces available so that they
will not be burdened by the task to understand the meaning of an interface while
(at the same time) trying to process information on the screen.

Some of the various interfaces used are: Some of the various interfaces used are:
Newsroom interface: for applications that convey information like: The
CNN Newsroom: A Global View.
Newsroom interface: for applications that convey information like: The
CNN Newsroom: A Global View.
Story telling metaphor: for edutainment applications that convey
information while providing entertainment. Suitable for children.
Story telling metaphor: for edutainment applications that convey
information while providing entertainment. Suitable for children.
Game approach: for applications where user become a character in a game
and explores the application by collecting points or solving mysteries
before the end of the application.
Game approach: for applications where user become a character in a game
and explores the application by collecting points or solving mysteries
before the end of the application.
Book metaphor: for applications where user navigates through an
application the same way as navigating a book.
Book metaphor: for applications where user navigates through an
application the same way as navigating a book.
High technology metaphor: for applications which require to display
sophisticated and stylish theme.
High technology metaphor: for applications which require to display
sophisticated and stylish theme.
Menu approach: for applications like customer service industry, restaurant
and theatre.
Menu approach: for applications like customer service industry, restaurant
and theatre.




If youd like to see a few examples of different types of interfaces for
different users specifications, visit the following web page:
http://www.g3.net
to see a few examples of different types of interfaces for
different users specifications, visit the following web page:
http://www.g3.net








INTERFACE COMPONENTS

INTERFACE COMPONENTS
4.5
Interface consists of various types of components. Each of them is unique and has
its own functions to provide the best support tools to the users. If these
components are used wisely, they can help to simplify the delivery of the
messages of a multimedia application to the users. The frequently used interface
components of an application are:
Interface consists of various types of components. Each of them is unique and has
its own functions to provide the best support tools to the users. If these
components are used wisely, they can help to simplify the delivery of the
messages of a multimedia application to the users. The frequently used interface
components of an application are:

Background and texture Background and texture
Buttons, icons and picons Buttons, icons and picons
Rollovers and sliders Rollovers and sliders
Hot areas, highlights and menu Hot areas, highlights and menu
Feedback Feedback
TOPIC 4 INTERFACE DESIGN


68
4.5.1 Background and Texture
The background is the most basic interface layer and provides attractive ground
to display contents. Background comes in many forms. Most authoring software
packages like Adobe Authorware includes functions for user to design
background in solid, patterned, or gradient coloured form. Background in
texture or graphic form can be imported from various external sources.
Background can be in any form but it needs to look attractive to user.

Background plays a role as the visual symbol to the contents and provides the
transition from one part of the application to another part. However, it needs to
be remembered that the use of background cannot be treated as the focus of the
screen. Background needs to blend with the screen to allow user to concentrate
on the information displayed on the screen. It is not supposed to divert users
concentration to its beauty (or vice versa).
4.5.2 Buttons, Icons and Picons
For navigation, button is among the most popular component used in interface.
Button can be designed easily in various forms and sizes. Nowadays, it can be
found in many authoring packages. For example, Adobe Director and Corel
Draw include tools to design buttons for applications whereas Adobe
Authorware has a ready-made button gallery for users to make their selection.

Icon is another navigational tool that can help user to navigate an application.
Icon is a small visual symbol that shows the functions of the part it represents.

Picon is a pictured icon and also a visual symbol like icon. It can also bring a
more abstract meaning. For example, most probably it is difficult to find an icon
that represents the concept of duration. However, picon that uses a graphic of
a clock can represent this concept very well.

Button, icon and picon should not be too small and must have appropriate
colour. They should not be too small for users to locate nor too big or have
striking colours that divert users attention from the screen.
4.5.3 Rollovers and Sliders
Rollovers are one of the interesting features that can be found in interface.
Rollovers are applied on cursor. They are placed on parts that have been
predefined on the screen and trigger different multimedia reactions when cursor
is pointed at the parts. Authoring programs like Adobe Director and Authorware
provide functions to build rollover events into an application. Rollovers can also
be used to give tips for certain functions.
TOPIC 4 INTERFACE DESIGN

69
Sliders give user some indication about their position in an application. They are
used as a navigation map and can be instructed to give response based on the
path chosen. If your want to move quickly along the application, you just need to
drag the slider to the end. Application will give immediate response and bring
you directly to the position of the slider. It also gives visual sign to user about
how many screens are still left in an application before the application ends.
4.5.4 Hot Areas, Highlights and Menu
In most multimedia applications, making an area interactive means making it
hot. This means, an object needs to be defined as a hot area and a set of
instructions can be associated with it when the object is clicked. Hot areas can be
graphics or texts and can be distinguishable from other objects which are not
interactive by their colour or changes in cursor. For example, in web page,
interactive text or hypertext is represented by the colour blue and underline.

Menu is an alternative to button and hot areas, and it can be loaded with more
information. This is because the screen has limited size hence it is difficult to
place all navigational controls onto it. By combining and arranging these
navigational controls in the form of menu, it can reduce the amount of
information displayed.



Figure 4.1: Example of an interface design which applied hot area where the word
photos will change from the colour white to black and the image of photos album will
be displayed once you click on it.
Source: www.riverministries.net/multimedia.htm
TOPIC 4 INTERFACE DESIGN


70
4.5.5 Feedback
Interactivity is a two-way process, so another important component of interface
is feedback. The function of feedback is to provide user with the reactions based
on their input to the components of the interface. Feedback can be triggered by
clicking button, icon, picon, menu, etc. and can produce sound, video clip,
animation or screen that displays information.

Feedback can be used to arouse users curiosity and encourage user to explore
the application in further detail. The important point is feedback is useful to
provide user the verification or validation to their actions.



Figure 4.2: Example of interface design that seeks responses from the user based on the
given scenario



1. What is the difference between rollovers and sliders?
Activity 4.3









TOPIC 4 INTERFACE DESIGN

71

PRINCIPLES OF INTERFACE DESIGN 4.6
The three issues on design discussed earlier are the needs of effective design and
components that form an interface. These issues will be further discussed by
looking at the layout approach which can be taken into consideration by interface
designers to further enhance the way information is processed. As a visual
designer, you have the power to control the way how a user process the
information on the screen by placing only a few information on the strategic
locations. In another word, layout of an interface also influences the information
that will be processed by user and how it retains the information successfully.

The task of interface is to guide user effectively on the information found on the
screen and provide supporting tools that can be identified easily. Visual literacy
is an important issue to understand because it influences the way an interface
design is formed.

To understand the visual literacy, you have to understand a few interface design
principles. These principles are just served as guidance and not regulations that
must be followed. These are:
4.6.1 Position
As we know, the interface of an application has many components. However,
there must be some interface elements that are more important than the other.
The overall focus of an application must be on its content. It is the task of a
designer to ensure that users eyes are focused on important information on the
screen before going to the other peripherals information. Research on eyes
movement has shown that readers will be attracted to the page or screen that has
strong elements and is visually attractive. Therefore, graphics and photographs
are items that the users will first see when they look at the interface or the screen.

Screen is always divided into contents and navigation area. The ratio used by
designer is two-third (2/3) for contents and one-third (1/3) for navigation and
menu. This ratio will give user an idea about the elements on the screen that
needs to be given attention. By making the contents area larger than the
navigation area, user will be automatically attracted to the information before
continuing to identify the navigation area.

TOPIC 4 INTERFACE DESIGN


72

Figure 4.3(a): An example of a typical frame for most applications



Figure 4.3(b): An example of a typical frame for multimedia applications
that display video clip
4.6.2 Balance and Perspective
There is no perfect design without balance and perspective on it. Computer is a
two-dimension device, hence all objects placed on it are flat and has the same
dimension as the computers. This situation is different from our daily life. Our
world is three-dimension where there is depth and shallow in everything that we
see. In order to transfer this situation into multimedia environment, we need to
have allocation for depth and balance on interface design.

Perspective provides users eyes with relative positions of the elements on the
screen to avoid the screen from being flat. This is important when the interface
uses related type of metaphors. For example, an interface that uses news room
metaphor, elements that normally found in the news room will be placed at the
TOPIC 4 INTERFACE DESIGN

73
related positions. Hence some elements will be placed in the background,
whereas elements that need more attention from the user will be placed in the
position closer to the users view (foreground).

Besides perspective, an interface also needs to be well-balanced. Balance on the
screen refers to the distribution of optical weight on its layout. Optical weight is
the capability of elements (i.e. graphic, text, headline, etc.) to attract users eyes.
Every element has an optical weight that is decided by its natural characteristics
and size. For example, a beautiful scenery photo has optical weight more than a
line of text of the same size.

Balance is decided by the weight of each element and its position on the screen. If
you divide the screen into four parts, a well-balanced layout will have same
weight in each part. A balanced layout can be achieved through symmetrical and
asymmetrical layouts. Symmetrical-balanced can be achieved through the
arrangement of the same elements like two graphics which have the same optical
weight. Whereas asymmetrical-balanced can be achieved by arranging different
elements.

In general, symmetrical layout is static, more formal and organized. Symmetrical
layout may be suitable for multimedia applications that focus on the corporate
image of an organization which is conservative such as bank and insurance firm.
In contrast, asymmetrical layout is more suitable for multimedia applications
with entertainment theme. If both balance and perspective are implemented
properly, interface will become more effective.
4.6.3 White Space
The term white space is taken from the traditional printing industry. It is
referred to the amount of white space allocated between text and graphic on a
page. The more white space between text and graphic, the more the user will pay
attention. In contrast, if the white space is less and there is too much visual on a
page, the user will find it difficult to read and understand.

When this concept is adapted to the electronic multimedia environment, white
space should be used to divert attention to the focus point of the screen. Since the
electronic environment is smaller than traditional paper, the usage of white space
has become more important to separate different objects on the screen. This will
become obvious when you use various media elements to convey a message.
Screen may need the combination of text, graphic, video and animation to convey
a message successfully. Nevertheless, by using appropriate and suitable amount
of white space, these elements can be arranged effectively. User will not feel as if
there are too many things on the screen that need to be understood.
TOPIC 4 INTERFACE DESIGN


74
4.6.4 Colour
Using colour is one of the ways to make your interface design more attractive.
For example, game course software provides attractive interface where its screen
display has many exciting colours. Based on a research in psychology, it shows
that colour gives a deep impact on students (Valdez & Mehrabian 1994).
According to Horton (1991), colour can influence the psychology of an individual
like blood pressure and brain wave pattern. Therefore, most game software
packages use various colours for their interfaces. Bright colours and bright
yellow are the most preferred colours because these colours can stimulate the
brain to become active. In contrast, darker colours stimulate the feeling of anger
(Sanders & McCormick 1987). Colour selection is highly emphasized when
developing applications, particularly games-related applications because these
applications usually stimulate students to play by instinct and emotion.

The following is a brief explanation on background and foreground colour.



TOPIC 4 INTERFACE DESIGN

75
4.6.5 Consistent Navigation Panel
The navigation panel is an important part of an interface since it provides users
with the supporting tool to guide the user to navigate a screen. Since the
navigation panel is part of the interactive component of an application, it needs
to be easily identified by the user. Due to this reason, the navigation panel needs
to be placed on a consistent place on the screen to allow the user to see it easily
and immediately, and relate its functions without any problems.

The position of the navigational panel needs to be consistent. This is important
because it is the place where many unique buttons and icons are attached to and
users need to learn these. Therefore, these panels need to be placed consistently
on the screen to enable user to relate the objects with their functions. The more
frequent the user interacts with the application, the more familiar the user is with
the navigational panel. This could only happen if the navigational panel is
always at the same place.

In terms of its location, the suggested space is one-third of the screen and it can
be placed at the bottom or the side of the screen.


Figure 4.4: Navigation panel
TOPIC 4 INTERFACE DESIGN


76
4.6.6 Unity
Unity refers to the blend of various elements found on the screen. Unity stabilizes
the message or theme of a screen (intra-screen unity) and gives consistency to the
overall application (inter-screen unity). Unity can be achieved if the shape,
colour, text style and application theme are consistent and blended together.

In multimedia application, unity involves interactive design where a user
navigates from one screen to another. Unity also involves the design of each
screen and its parts in an application. Even though unity is the goal that most
multimedia applications would like to achieve, however, for games and
entertainment applications where exploration and surprises are important, unity
may be boring.



Figure 4.5: Example of a website which uses unity element to emphasize
the theme on the screen
Source: www.cuti-cuti.com.my


REFERENCE
To gain more knowledge on Interface Design Principle, refer to Chapter 18:
Screen Design Principles in Multimedia Literacy by Fred T. Hofstetter, 2001.



TOPIC 4 INTERFACE DESIGN

77







1. One of the interface design principles is the unity. Describe it.
Activity 4.4


COMMON ERRORS WHEN DESIGNING A
MULTIMEDIA APPLICATION
4.7
Multimedia applications must be easy to understand and simple to use - user
friendly. In addition, it must fulfill the design requirements of the system as
discussed earlier. Hence, the design process is very important and you must not
make common mistakes as described below:
complex interface
too many interactivity levels
non-relevant information
too many texts
extreme-coloured interface
no controllers for audio and video
4.7.1 Complex interface
Interface is the most important component in multimedia application because it
is the area where user interacts with the application and where all activities
occur.

Therefore, a suitable, simple and clear interface is very important. The lack of
basic understanding of interface design may produce multimedia that confuses
the user.

Some of the reasons why an interface produced confuses the user are:
interface screen consists of too many functional buttons
graphics that resemble buttons but not functioning as buttons
interface that has only one button and after the user clicks on it, the
program works like automatic slides that cannot be controlled or stopped.

When designing an interface, use navigation that is easy to read and gives clear
feedback to users action.

For example, when the user places the cursor on a button, the button must be
able to give feedback or signal that it is the place where the user can click.



TOPIC 4 INTERFACE DESIGN


78
Users of application, especially a new user will give up easily if the application is
not clear and confusing. If the multimedia application interface designed by you
is too complicated and unorganized, the user most probably cannot focus on the
information that needs to be conveyed.
4.7.2 Too Many Interactivity Levels
Have you ever felt lost when visiting a website that has too many interactivity
levels? This happens because the website or program is too complex until it does
not have a direct way to go back to the original spot.

For example, you wish to search for a topic on knowledge management in the
Internet, but at the end without realizing it, you have been taken to an interface
that has no information on the topic, but has many video clips and entertainment
news. This situation will disappoint you after spending a lot of time searching for
the information.

Do not design a multimedia program that has too many levels of interactivity. If
you want to produce a program that has various interactivity levels, then you
must include progress mark, navigation guidelines or navigation map for the
users so that they will not be lost.
4.7.3 Non-Relevant Information
When you are searching for information about a topic, it is easier if the
information is organized and classified in orderly manner. You will not be
diverted from the original objective while searching for information from one
level to another level.

If the interface of a main menu has too much information or non-relevant topics,
the user will face difficulties with a lot time spent on searching the required
topics.

A good strategy is to manage the information into a menu that has logical
hierarchy and good structure.
4.7.4 Too Much Text
Do you like to visit an interface that only has texts? If the interface is crowded
with texts, the user will feel bored.

Therefore, it is important for us to plan earlier the elements that need to be
placed. For example, placing graphic or animation to replace texts on the
explanation or instructional part will make the interface look better and easier to
understand.
TOPIC 4 INTERFACE DESIGN

79
4.7.5 Extreme-Coloured Interface
Is your monitor able to display thousands of colours? Ensure that you do not use
all colours at one time! Interface that has harmonious colours is the most
preferable.

When you design the structure of an external interface, you should consider
colour choices and graphics that the user can accept.
4.7.6 No Controllers for Audio and Video
A good interface should be able to interact well with the user. An application that
has multimedia characteristics like audio and video is attractive, but if it does not
have controllers to adjust or close them, then it will be disappointing.

If a video clip is placed on the interface of an application, you must place the
controllers for audio and video so that user can control and use it easily.


Figure 4.6: the usage of video control

The passage below is about the graphical approaches that can work and to be
avoided when producing multimedia application.


TOPIC 4 INTERFACE DESIGN


80

(Reference: Multimedia Making It Work, Tay Vaughan, 2001: ms)
TOPIC 4 INTERFACE DESIGN

81















1. What is the difference between Line-Oriented Interface and Full-
Screen Interface?
2. List four common mistakes during the design of a multimedia
application interface.
3. Explain the importance of interface design in the development of
multimedia application.
4. What is the meaning of white space in the traditional printing
industry?
Activity 4.5


Disk Operating System (DOS) that was used 10 years ago requires users to type
certain instructions for an application. Now with graphic user interface (GUI),
you just need to have the skill to click. This soon improved the interaction
between human and computer. Interface design is very important to enable users
from all walks of life to use computer easily.

Interface design need not be a difficult process. It needs to be remembered that
the success of an application is in the hand of users. Therefore, interface design
should be complementary and support the way users process information. It
should, at the same time allow some uniqueness in the presentation to achieve
the perfect unity between creativity and familiarity.

With this, we have reached the end of Topic 4. Before proceeding to the following
topic; lets go through again the important issues in this topic to strengthen your
understanding. As usual, test yourself by answering the questions prepared
above.