30/10/2023

Design for
Multimedia
Software

Discussion :
• Main design in construction multimedia
• Application of information design, interaction, and presentation in
software construction multimedia
• Build quality multimedia software

1
 30/10/2023

Design for Multimedia Software

• Information Design
• Interaction Design
• Interface Design

Different forms of design

Forms of design Description

Information design Designing the content

representation
Interaction design Designing the navigation

Interface design Designing the ‘visual’

appearance

2
 30/10/2023

Information Design
• Explain the purpose of software
• Organize the contents of the software (to achieve the above goals)
• Information design process usually in the form of a Flow Chart

Information Design
• What do you want to do?
• What information or experience want to convey
• Who is the user?.
• The result:
• Project Plan
• Information structure

3
 30/10/2023

Information Design
According to Robert Gagne: transfer and information conversion takes
place in humans memory in sequence

Attention
Identify the form of lesson content
Reproduction of information
Practice
Information Coding
Information Storage

Information Design
Behaviourism Theory Implementation in
multimedia courseware
Students have to be Show the objectives of
provided with a stimulus learning before learning
starts/ Show a video to
stimulate response
Students have to be given a The scores of students’
response performance were shown
after exercise/tutorial
Specific changed of Students are assessed to
behaviour is expected at the see whether they changed
end of the lesson in behaviour

4
 30/10/2023

Learning theory &Teaching methods

Example: Learning Strategies

5
 30/10/2023

Example: Task-based Strategies

Example: Inquiry based Learning

6
 30/10/2023

Information Design
Gagne's 9 Stages of Learning
Objective: Identify triangles equilateral

Stages Task
1. Get it student attention Show some example of a triangle
computer generated

2. Give learning objectives Ask a question :"What is a triangle?

the same?"
3. Recall Past learning Review the definition of a triangle
4. Give stimulus Give the definition of a triangle
same
5. Drive learning Show how construct an
equilateral triangle

Information Design
Gagne's 9 Stages of Learning
Objective: Identify triangles equilateral

Stages Task
6. Generate response Ask students produces 5 different
examples
7. Give feedback Check all examples right/wrong

8. Achievement value Show picture object – request

students identify equilateral
triangle
8. Strengthen Give the score and recovery
retention/Transfer

7
 30/10/2023

Information Design: Learning Strategies

1. Drill and practice
• Questions are given one by one to students to train the skills of a
concept
2. Simulation
• The learning atmosphere similar to the real situation
3. Games
• Based on the lose or win principle
4. Tutorials
• Explanation of a concept through examples different and
appropriate questions; first analyze the level of student
achievement

Information Design: Learning Strategies

5. Learning through search methods:
• The process of forming an understanding of something concepts
by students independently;
• Students are given problems to find solutions;
• To solve the problem, students form a model the mind of a
concept;
• This method is also the main concept of the theory constructive
6. Problem solving:
• Involves higher cognitive processes(like critical thinking)4 steps
to problem solving:
a. identify;
b. planning;
c. doing work; and
d. implement (Lockard, Abrams and Mary (1990)

8
 30/10/2023

Information Design: Learning Strategies

• A strategy that is always used in
software/apps are:
• Training
• Tutorial
• Simulation
• Educational Games

• A combination of 2 or more strategies is

called "hybrid" design

Group Activity

Identify a Strategy Learning and describe how

it can be applied in your multimedia project.

9
 30/10/2023

Interaction Design
Interaction
• Communication process between students and computer

Interaction Design
• Allows students to control software

Interaction Design
How will it work?
• To what extent is the user's
control software?
• How users will use software?
• Software usability.

The result is the construction of

a software storyboard

10
 30/10/2023

Interaction Design
Information design transfer process to interactive design involves
a. Motivation to users
b. An exciting adventure
c. Exploration opportunities
d. Roam as much as possible

Interaction Design
• Design process interaction involves time, money and technical skills
• Complexity of interaction, cost high and skilled is needed
• Power to control (interactivity) depends to the content lessons

11
 30/10/2023

Interaction Design
The basic principle of interactivity it must be:
• Clear
• Concise
• Easy

Basic concept Interaction Design

Orientation:
• Provides the current information orientation sing software

Image & Metaphor Map :

• Main navigation screen (main menu, web page etc); use of map
images
• Metaphor is a special image map; information is presented in the
form of objects, location or electronic device

12
 30/10/2023

Basic concept Interaction Design

Navigation :
• Construction of a helpful interface for users move in the software;
• Depending on the flow chart that is built.
• Features:
• Minimal roaming
• Minimum depth
• Minimal overlap

Basic concept Interaction Design

Navigation :
• Direct access - connecting the two location; minimize roaming
steps
• Level of Achievement
• Access to new topics
• Access between topics
• Random Access

13
 30/10/2023

Navigation structure

Navigation structure

14
 30/10/2023

Navigation structure

Navigation structure

15
 30/10/2023

Basic concept Interaction Design

Usability :
1. Reduce barriers2
2. Minimize work
3. Provide feedback
4. Explain the meaning
5. Tolerance

• Build deep interaction software

• Use of existing icons.
• Added an interaction control using 'scripting' or’ programming' for
enable interaction that customized implemented.
• Integration with the program external (external) or’ import'/'link'.

Presentation Design
What does the software look like?
• Style and appearance
• Layout
• Uniformity of structural elements, control and media to be
consistent and "coherent “

The result is
• Prototype (Functional Prototype)
• Design Guidelines

16
 30/10/2023

Presentation Design
Interface Element
1. Screen background
2. Windows & panels
3. Buttons & controls
4. Text
5. Image
6. Audio
7. Videos
8. Animation

Presentation Design
Screen background
• Fills the empty space in the screen
• Selection of the appropriate background color with other elements
in the screen
• Can also be formed with a big picture
• Consistent background usage(color or picture)

How to use it
• "Opacity" technique reduces image clarity when used as a
background

17
 30/10/2023

Presentation Design
Windows and Panels
• Text color & color customization background

Buttons and controls

• Used to browse software
• Button features:
• Standard button shape (standard)
• Has a universal feature
• Appropriate button size
• A simple button shape
• Available in word form
• eg: EXIT
• Also available in the form of "roll-over“
• eg: when the mouse pointer is on above the icon, the word is displayed

Presentation Design
Text
• Used to convey information to user
• The use of text that needs to be taken into account
• Color, size, fonts, spacing
• Quantity of text
• Text position
A. Text color
• text color must contrast with color background
B. Quantity of text
• on one screen 10 - 12 medium long sentences displayed
C. Text position
• consistent & fixed and margin spacing

18
 30/10/2023

Presentation Design

Presentation Design
Graphic/image
• Images related to the content of the lesson
• Appropriate image position
• Rational image size (not too big or small)

19
 30/10/2023

Presentation Design
Audio/Video/Animation
• Audio is an element of sound (music, sound effect, voice)
• Audio is not all the time
• Audio does not read content
• Video reinforces understanding of the content lessons
• Audio & video can be controlled by the user

Presentation Design
Guidelines
• Simple screen
• The concept of balance
• The concept of unity/sameness
• Design based on content
• The concept of interface continuity
• Use of screen titles & page numbers
• Use of facilities / special effectsreasonable
• Use of graphics
• Use of text
• Consistency
• User friendly concept

20
 30/10/2023

Presentation Design
Guidelines : Simple Screen
• Not too much information on one screen
• 12 - 16 lines of text
• Break the text into paragraphs
• Each paragraph 4 - 5 sentences
• Spacing between paragraphs
• Percentage distribution of the focus of the viewtop of the
presentation screen(interface)
• The percentage of the focus value involves the element element
multimedia (text, graphics, video)
• Appearance and size of the element
• Balance is achieved through design symmetrical or asymmetrical

Presentation Design
Guidelines : Balance Concept
• Guide to achieving balance on the screen
• an even number of elements
• balance small and big elements
• increase the percentage of focus on the text (like put text in a box or
use a colored background)
• Effect of elemental balance
• Size - large object
• Position - object on screen
• Color - emphasizes the importance of the object
• Space - not too close, compact and confused

21
 30/10/2023

Presentation Design
Guidelines : Unity Concept
• Cooperation between the elements in interface
• Strengthen message delivery & information on the screen intra-
screen unity and inter-screen unity
• Continuity of information and design in the main menu up to the
content the content of the information to be convey

Presentation Design
Guidelines : Use of title and page no
• Avoiding users from "lost“ while browsing the software
• Use uppercase and lowercase headings
• Page usage

22
 30/10/2023

Presentation Design
Guidelines : Use Special effects
• Facilities such as text flashing, colors, sound effects and video
• In a controlled manner
• Will disturb the concentration process learning, if uncontrolled,

Presentation Design
Guidelines : Use Graphic
• Graphics in the form of pictures, sketches, diagrams, figures etc
• Helps convey complex information or abstract
• Graphics are ancillary media, then only use if necessary

23
 30/10/2023

Presentation Design
Guidelines : Use Text
• Avoid "scrolling" because it is not convenient
• Break the text into sheets
• Avoid the concept of delete-overlap

Presentation Design
Guidelines : Consistent
• Consistency in terms
• Use of color
• Button position
• Background color
• Title position, lesson content,
instructions and pictures
• Screen display format and menu

24
 30/10/2023

Presentation Design
Guidelines : User friendly
• Has complete instructions and guides
• FAQ (Frequently Asked Questions) such as:
• Where am I now?
• How did I get here?
• What is going on
• How can I get there?

25
 30/10/2023

Group project
Prepare a storyboard your multimedia project .
Make sure you take calculate software design
interaction and the performance that has been
discussed.
Present in class.

26
 30/10/2023

Class Activity
• List out the THREE icons/menus that you want on a
screen courseware
• You are designing the mainscreen for a
courseware. On the given storyboard, arrange the
position of the icons/menus as they would appear
on the main screen.
• Arrange also the position of the main content of
the courseware.
• Give THREE reasons for your arrangement.

Thank You

27