1. E-LEARNING DESIGN PRINCIPLES
EDU711
1

2. INTRODUCTION
 Knowledge on e-learning / online learning design is
important
 Good content but bad design
 Good content and good design can eliminate the need to
use/buy expensive e-learning authoring tool
2

3. INFORMATION PRESENTATION
 Information presentation is one of the key principles
in determining if an online instructional medium has
met the instructional goal
 Interface design should be consistent and
aesthetically pleasing to orientate the learner and
gain their attention
3

4. INFORMATION PRESENTATION
1. Organize the information on the web page clearly,
and in a logical flow
2. Place adequate amount of information on a screen
3. Use shorter lines of text if the web page is intended
to be read on-screen
4. Place the key information at the top of the web
page
5. Use white space appropriately to increase the
page's visual appeal
4

5. 1 : LOGICAL FLOW OF INFORMATION
 Be purposefully aware that the information presented
on a course web page should be organized in a way
that facilitates information processing and
reading
 Educational web design’s purpose is not just to
present information, but also to assist students in
understanding the information presented
5

6. 1 : LOGICAL FLOW OF INFORMATION
 One of the ways is to break your electronic text into
easily recognizable “chunks”.
6

7. 2: ADEQUATE INFORMATION ON SCREEN
 Shotsbergerin (1996) indicated that, scrolling should
be minimized
 A single screen of endless scrolling data, even if
broken into headings, creates a navigational and
comprehension barrier
 When information is not appropriately “chunked”,
students will become overloaded with information
and retention will decrease.
7

8. 3: USE SHORTER LINES OF TEXT
 Reading information from a computer screen can be
as much as 30% slower than from a printed page
(Debra, 1996; Wright & Lickorish, 1983).
 "Chunked" layout delays fatigue and increases
comprehension (Debra, 1996).
 The ideal measurement for displaying text on screen
is the 50% column “rule”, which is about 40 to 60
characters per line
 CNN
8

9. 4: KEY INFORMATION ON TOP OF PAGE
 Important information such as the title of the
courseware, topic or subtitles, should be placed at
the top of the page, and
 Using colors that is distinguishable from all the other
content.
 Just like signs on the road, this will help learners to
always know where they are on a page.
9

10. 5 : USE WHITE SPACE APPROPRIATELY TO
INCREASE VISUAL APPEAL
 Since text should only take about 50% of the space
on a page, what fills the rest of the page?
 Nothing.
 The print world calls this “creative use of white
space”.
 The balance of the space is filled with navigational
elements, appropriate graphics, and “nothing” (white
space).
 White space helps to divide the “chunked” portions
of the screen so that they are more easily read.
10

11. SAMPLE : BAD INFORMATION
PRESENTATION
11

12. WHY BAD?
1. Too much information is presented in one screen.
a. Page is divided to 3 separate sections.
b. Navigational bar has both vertical and horizontal scrolling.
c. As a rule, generally horizontal scrolling is more objectionable than
vertical scrolling.
2. Important information such as the courseware title or topic is not
displayed on the top page of all of the slides.
a. Instead, topics are displayed in the topic navigational bar on the left,
which is also using the scroll bar inappropriately (see Visual 2: point no.
1)
3. The white space is not utilized appropriately as this page appears
cluttered and dirty, because it contains too much information in just
one page.
4. The hierarchical chart displayed is also too small and having too
much info.
a. It will help if learners can click on the chart to view a bigger image, but
this option is not utilized in this learning resource page.
12

13. SAMPLE : GOOD INFORMATION
PRESENTATION
13

14. WHY GOOD?
1. Headers with various sizes are used as a form of
“chunking” divided to separate information within the
same page.
a. Without “chunking”, students may be overloaded with
information and comprehension will drop.
2. However, it will be better for the learners, if this
information is “chunked” and broken into smaller
digestible information, instead of laying it all in one
“vertical scroll” page.
3. White space has not been utilized to the max in this
information presentation.
a. As a learner, still that there is too much information on the
page for me to digest.
b. Too much information results in comprehension barrier!
14

15. VISUAL DESIGN
15

16. INTRODUCTION
 First decide on the color scheme
 Refer to Color Wheel
 Then consider layout
 Effective graphic design is not a haphazard
collection of elements.
 It is an arrangement of objects into a visual
composition with the intention to communicate
effectively
16

17. FIVE PRINCIPLES OF DESIGN
17
BALANCE PROPORTION DOMINANCE
RHYTHM UNITY

18. BALANCE
 Balance is the concept of visual equilibrium.
 It relates to our physical sense of balance where two
opposing forces in a composition work together
 Balance unifies a Web page or Courseware page.
18

19. BALANCE
• In Figure 2A, the combination of texts in the course menu and the slide
content make the overall composition lopsided to the upper left.
• The addition of an image in Figure 2B balances the overall composition.
• Balance creates a unifying effect as it blurs the individuality of each
element on a page into one piece, allowing the viewers’ eyes to flow
seamlessly from one element to another.
19

20. PROPORTION
 Proportion is about the relationship between two
objects, whether it is one to another, or a part to the
whole.
 In a visual composition, proportion can convey
weight, distance, and interest.
 Proportion affects weight, distance, and interest.
20

21. PROPORTION
• Using scale (the size of the twenty dollar and ten dollar bills) and color
(the dollar bills vs. the percent sign) creates the illusion of depth.
• Imagine what would happen if the dollar bills were of the same size, and
the percent sign was colored differently. There would be neither depth
nor gradation of interest. The graphic would be flat and dull.
• Creating a page that is well proportioned reduces the feeling of visual
clutter; sometimes less is more.
21

22. DOMINANCE
22
 The principle of dominance creates degrees of
importance and interest.
 The lack of dominance creates visual chaos and loss
of direction.
 Establishing levels of dominance minimizes
confusion and draws the eye to the intended starting
point of the composition.
 Dominance draws the user’s eye to the instructions
on this page.

23. DOMINANCE
23
• Dominance draws the user’s eye to the instructions on this page
• The designer considered that the learner is familiar with the overall
purpose of the course menu and the banner indicating the current item
on the menu.
• As a result, the user’s eye goes immediately to the instructions on the

24. RHYTHM
24
 Rhythm is the principle of design used to create a
sense of movement and pattern.
 It is typified by a repetition or alternation of elements
in set intervals
 Rhythm establishes pattern and helps to support
concepts without requiring long explanations.

25. RHYTHM
25
• Rhythm establishes pattern and helps to support concepts without
requiring long explanations
• A single image representing the idea of “days off” would not have
sufficed.
• To capture that concept, images of activities in shapes of equal size

26. UNITY
26
 The concept of unity refers to the relationship of the
parts to the whole;
 it is the principle that makes seemingly unrelated
elements work together as a whole.
 Without unity, a courseware page containing a
collection of elements is nothing more than that, a
collection, rather than a composition.

27. UNITY
27
• Unity in this screen comes from the movement of the blue ribbons.

28. UNITY
28
 Figure 6 is both the landing page and
the main navigation page of a course.
 It consists of texts varying in size, color,
style, and weight and a navigational
graphic (nine puzzle pieces) made up
of individual graphic buttons.
 The text making up the welcome
message on the top of the page
creates a link with the navigational text
(the modules of the course in simple
text buttons) at the bottom by stretching
across the page from left to right.
 The title text element (Basics of
Employment Standards), in blue,
connects to the navigational graphic
(each piece representing a module in
the course) and the corporate logo
using color.
 The “movement” of the blue ribbons
flowing across the graphic towards the
text suggests the link between the two
types of navigation.

29. CONCLUSION
29
 As the saying goes, “A picture is worth a thousand
words.”
 Design is an acquired skill, the basic of which anyone
can apply
 Design is about user experience.
 Knowing that there is a correlation between design
aesthetics, first impressions, and its subsequent impact
on the overall learner experience is a step in the right
direction.
 Do your learners a favor and invest the time, effort,
and resource to create an aesthetically pleasing
learning environment to make the learning
experience that much more powerful.