Downloaded 38 times
More Related Content
Similar to E learning design principles
E learning design principles
- 1.
- 2. INTRODUCTION Knowledge one-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 Informationpresentation 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. Organizethe 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 : LOGICALFLOW 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 : LOGICALFLOW OF INFORMATION One of the ways is to break your electronic text into easily recognizable “chunks”. 6
- 7. 2: ADEQUATE INFORMATIONON 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 SHORTERLINES 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 INFORMATIONON 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 : USEWHITE 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 : BADINFORMATION PRESENTATION 11
- 12. WHY BAD? 1. Toomuch 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 : GOODINFORMATION PRESENTATION 13
- 14. WHY GOOD? 1. Headerswith 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.
- 16. INTRODUCTION First decideon 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 OFDESIGN 17 BALANCE PROPORTION DOMINANCE RHYTHM UNITY
- 18. BALANCE Balance isthe 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 Figure2A, 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 isabout 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 principleof 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 drawsthe 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 isthe 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 establishespattern 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 conceptof 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 inthis screen comes from the movement of the blue ribbons.
- 28. UNITY 28 Figure 6is 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 thesaying 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.