1 / 37

Web Based Education

Web Based Education. Layout and Design Considerations. Mission. Aid the reader in locating the page's features quickly and efficiently. Layout. Defined overall visual arrangement of the elements in your document. Layout.

valmai
Download Presentation

Web Based Education

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Web Based Education • Layout and Design Considerations

  2. Mission Aid the reader in locating the page's features quickly and efficiently

  3. Layout • Defined overall visual arrangement of the elements in your document.

  4. Layout • Not concerned with the placement of individual text elements on page. • Layout involves the number of elements on a page, how they are arranged and how much white space is around them.

  5. Layout • Make your page pleasant to read. • Deliver the content quickly and effectively which is everyone's desire in the information age.

  6. Step #1: Identify the Audience • Knowing your audience is critical.

  7. Identify the Intent • The intent behind a document - educate, persuade, or question plays a major role in your design.

  8. Identify the Intent • If your goal is to inform, you are less inclined to include numerous eye catching displays and more inclined to direct readers' vision to the highlights of the information your document contains.

  9. Identify the Intent • If your goal is to persuade or try to hook the readers' attention with compelling visuals and riveting testimonials, and then you follow through with the important details.

  10. Outlining • Identifying the topics and major elements. http://www.htmlgoodies.com/tutorials/getting_started/

  11. Outlining • Outlining content plays a key role in establishing links and presenting readers with visual clues on how to read and navigate the information in your document.

  12. Outlining • Creating an outline before you start writing (or programming in HTML, for that matter) is usually sufficient to help you organize your information.

  13. It includes such elements as: a table of contents/index a set of common controls Superstructure

  14. The TOC (table of contents) • From a lifetime of exposure to printed materials, we've come to expect a table of contents that lays out the topics and coverage at the beginning of most documents..

  15. Design Consideration : Index or Table of Contents • The beauty of hypertext is that you can build links that take readers directly from any entry in the TOC to the corresponding information in the document. Thus, the TOC becomes not just an organizational map f or you document, but a convenient navigation tool

  16. Design Consideration: Common controls for all screens • Promotes readability and familiarity.

  17. Common controls for all screens • If you include a search tool for keywords in the document, make the tool accessible from any point in any of your documents.

  18. Common controls for all screens • Whatever you do, establish a common look and feel for your pages; then your readers can navigate much more easily • Consistency may be "the last refuge for the unimaginative," but it does promote familiarity and ease of use!

  19. Design Consideration: Motivation • Emphasize the high points that your research shows to be of interest to your potential readers.

  20. Motivation: Grab the Audience's Attention • Grab your readers' attention when they first glimpse your page. • Nothing does this as effectively as an image coupled with a brief, compelling introduction to your page.

  21. Motivation • Include information that tells why your page is important, what it contains, and how to get around. Get your readers interested, get them oriented, and then they'll be hooked!

  22. Design Consideration: Identify Key Content • Follow each main idea with any relevant information that makes your case, proves your point, or otherwise substantiates what you're saying.

  23. Key Content: What Should They Remember? • A well-known educational principle reports that people exposed to new materials generally remember ten percent of the content at best.

  24. Key Content: What Should They Remember? • When designing your web documents, keep asking yourself. What ten percent do I want my readers to remember?” • This question helps you focus on the really important ideas so that you can direct the audience to them and reinforce them throughout your web pages.

  25. Key Content: What Should They Remember? • Raise the issues to be queried early on and provide pointers/prompts to additional discussion and related information afterward.

  26. Key Content: What Should They Remember? • This sometimes means presenting less information than you may otherwise be inclined to convey, in the interest of concentrating on what's really important.

  27. Important Rules of Thumb • Use short, direct sentences. • Keep your focus on the topic(s) at hand. • Use the superstructure to emphasize your content. • For a complex web site, you can include a link to an "About this site" page for those who want to understand the site's structure and function.

  28. Establish Effective Links • lntradocument linking provides a way to move from one location to another location inside the same document. • Interdocument linking provides a way to move from one document to another document.

  29. Using Graphics Effectively • First impressions are critically important. • You want to use your most potent, eye-catching images on the initial page.

  30. Graphics • Flash animations or other eye catching multi may mean longer download times-especially for dial-in users. • Be aware of the size of the files your inputting and their relation to download time.

  31. Effective Use of Graphics • Use graphics only when they add to the impact, intelligibility, or value of a page. • A picture can be worth a thousand words (e.g. a flowchart of a complex process) landcover.usgs.gov/ urban/umap/htmls/procs.asp

  32. Overcoming two-dimensional thinking • Avoid the overwhelming tendency to make their hypermedia documents read like books.

  33. Color Schemes • Utilize strong contrast between text and background colors. • Yellow and black or white and black are the most legible combinations.

  34. Font Size Type • No more than two legible (easy to read) font sizes.

  35. Quantity Text • No more than seven lines of text per slide

  36. Web Accessibility Guidelines • Read W3C: Introduction to Web Accessibility

  37. Sources • HTML for Dummies by Tittel. Ed & James, Steve. (2003). HTML for Dummies. Foster City, CA : IDG Books. • Instructional Media and Technologies for Learning – seveth edition; Heinnrich, Robert; Molinda, Michael, Russell, James D.; and Smaldino, Sharon. Merrill/Prentice-Hall Publishers, 2001, NJ. • Roblyer, M.D. & Edwards, J. (2003). Integrating Educational Technology into Teaching, Third Edition. Upper Saddle River, NJ: Prentice Hall

More Related