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
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
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
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
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.
