Knowledge on e-learning / online learning design is
Good content but bad design
Good content and good design can eliminate the need to
use/buy expensive e-learning authoring tool
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
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
5. Use white space appropriately to increase the
page's visual appeal
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
Educational web design’s purpose is not just to
present information, but also to assist students in
understanding the information presented
1 : LOGICAL FLOW OF INFORMATION
One of the ways is to break your electronic text into
easily recognizable “chunks”.
2: ADEQUATE INFORMATION ON SCREEN
Shotsbergerin (1996) indicated that, scrolling should
A single screen of endless scrolling data, even if
broken into headings, creates a navigational and
When information is not appropriately “chunked”,
students will become overloaded with information
and retention will decrease.
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
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
Just like signs on the road, this will help learners to
always know where they are on a page.
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?
The print world calls this “creative use of white
The balance of the space is filled with navigational
elements, appropriate graphics, and “nothing” (white
White space helps to divide the “chunked” portions
of the screen so that they are more easily read.
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
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.
3. The white space is not utilized appropriately as this page appears
cluttered and dirty, because it contains too much information in just
4. The hierarchical chart displayed is also too small and having too
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.
1. Headers with various sizes are used as a form of
“chunking” divided to separate information within the
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
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!
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
FIVE PRINCIPLES OF DESIGN
BALANCE PROPORTION DOMINANCE
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.
• 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.
Proportion is about the relationship between two
objects, whether it is one to another, or a part to the
In a visual composition, proportion can convey
weight, distance, and interest.
Proportion affects weight, distance, and interest.
• 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.
The principle of dominance creates degrees of
importance and interest.
The lack of dominance creates visual chaos and loss
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.
• 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
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.
• Rhythm establishes pattern and helps to support concepts without
requiring long explanations
• A single image representing the idea of “days off” would not have
• To capture that concept, images of activities in shapes of equal size
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.
• Unity in this screen comes from the movement of the blue ribbons.
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
The “movement” of the blue ribbons
flowing across the graphic towards the
text suggests the link between the two
types of navigation.
As the saying goes, “A picture is worth a thousand
Design is an acquired skill, the basic of which anyone
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
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.