Page design can be defined as the intentional organization of screen elements to facilitate how users perceive and process information contained in the page. Since we are most interested in creating web pages that promote learning, we might also amend this to indicate that we want users to achieve certain instructional goals or objectives.
In applied terms, what this means is that we want to design a page that first, gains and holds the student's attention; second, emphasizes the important information while de-emphasizing the less important information; and third, organizes the information in a meaningful way to assist students in their learning.
To do this, we need to do a multitude of tasks including planning an effective layout for each page, deciding what size, color and style of text to use, identifying the appropriate pictures and deciding how to let the student browse or navigate within and among the pages using buttons, hot spots, and images. This is a lot of work, so lets get started!
The first thing you should realize is that what is displayed on the computer screen may look like printed pages, but it is not, at least in any functional way. First, the resolution of the text and pictures is less than good printed copy, making it necessary to present information in larger text or less detailed pictures. Second, the web page is much more dynamic, that is, it can be changed, reshaped, and can contain moving displays or video clips. This all makes it much more like television and that requires a lot more careful attention on the part of the learner. The third difference is that a web page can represent information in a variety of ways, even the same information. We can show the learner things in text form, graphical form, live video, or database form. The web is truly a multimedia experience and we, as the designers, must design pages that make this experience rewarding for the student.
There are five basic principles of good page design that you should let guide you whenever you are creating web pages or sites. Keeping these in mind will assist you in most of your design decisions and help you turn out professional pages. these include:
Information should be clear and concise, and users should be able to interact with it in short periods of time.
There should be a consistent "look" to the entire web site so that all pages seem to be part of a unified whole. Observe standard symbolic and graphical conventions in each page, such as similar buttons, fonts, colors, and layout formats.
Navigation, text reading, and links should require little thinking or interpretation when students interact with them.
Navigation and other tasks should be obvious or logical and students should not have to "figure them out."
This means that students should be actively thinking rather than just observing or browsing when they are on your site. you can accomplish this through the use of rhetorical questions and activities embedded in the pages.
Each web page has many parts and features. every one of these can be used to make your student's exploration of your site an effective educational experience. To do this, though, you need to specify how each one of these features should look, work, and be placed. Let's see what the average page looks like.
One of the important concepts of page design is "functional areas." This means that the designer should designate specific areas of the page to consistently display certain kinds of information. For instance, the very top of any page should always hold the title or main heading of the page. This frequently includes stylized text or a graphic, or both and is usually referred to as the signature graphic or banner. Most importantly, it should always appear at the same place, the top of the home page (with more abbreviated versions at the top of all other pages).
Another functional area appears just below the signature graphic and is usually dedicated to the introductory information about the site or the page. Sometimes this may also include a menu or list for activating links to other parts of the page or to other pages. This is where you should place the main content of the page, whether it is text or pictures.
Frequently, near the bottom of the page there is a functional area where navigation and other linked information appears, usually including your e-mail address.
As you can see, it is not as important where information is placed, as it is how consistent you are about placing the same type of information in the same place on each page of a site. In this way, students will be able to find the needed information easily, on any page.
A significant feature of web sites and pages is the ability of users to move around the page or site and even out on the World Wide Web in a convienient manner. Most of this activity is accomplished through the appropriate placement of links and their activators such as buttons, hot text, or hot spots on pictures. Navigational tools are varied and not always apparent to the casual browser. Your job is to maker them obvious and functional. They also should be aesthetically pleasing and fit into the overall design and look of your site.Let's take a look at some of these and see how to best incorporate them into you pages.
The oldest and most common means of linking within or among web pages is the hot text link. These are easy to create and have the advantage of being part of the content and therefore easy to understand. They may not always be appropriate or meaningful. Text links must be constructed in a way that make it obvious that they are links and what those links mean. The text that is highlighted in the link should relate to the link destination clearly, and not be a simple "click" here that leaves the user wondering what "here" means. Use descriptive terms in the text to form the basis for the link or make it a separate listed item that is part of a comprehensible menu list.
In the last section you saw how easy it is to specify the color of linking text as well as the colors that can be assigned to selected and visited links. When you specify these colors, be sure that they do not interact with the background color to the extent that they become unreadable. Remember also that a large number of links in a single passage may be visually annoying to the viewer and might better be treated as a list following the text.
These are the next most common types of link activators and usually add an additional dimension of visual interest if they are well placed. Most computer users today are familiar with buttons as long as they appear to be buttons. Make sure that any buttons you use are obviously intended to be clicked and include an identifying label either on or near the button.
Remember buttons are really just pictures that have been made into link activators with the appropriate HTML tag. This means you will need to find the right graphic image somewhere to use as the button. If you intend to use an icon on the button or as the button you also need to be sure that it is meaningful, that is, that it really represents the action or link you are using it to activate. Unclear icons are extremely confusing to new users as well as younger students.
Sometimes you will see entire pictures where the user can click on different parts of the image to activate a link to a particular location. This is very useful if you want the student to click on a map location or on an area or part of a picture of a machine to get addditional information or go to other pages related to that information or part. Imagemaps are somewhat more difficult to create than single clickable image links, but they do work well in terms of having the student understand the context of the link.
Usually it is much easier to use an HTML editor to create imagemaps than to do all of the HTML yourself, but in the long run they will be a useful tool for instruction if they really are meaningful in terms of explaining the content.
Most of us are very comfortable with using menus to select items and to activate links. In a web page, a simple menu is sometimes far better than a lot of text embedded hot links because they are all shown together. Menus of this type are really just ordered or unordered lists which have been made into activators by linking each line to a different destination. Try to limit the number of items in any menu to seven or fewer. More than that will start getting confusing and may mean that you need to break the list into more subcategories for the sake of clarity.
Placement of navigation activators is always a matter of what content you are presenting and how the students will be interacting with it. If at all possible, keep the number of links and buttons to a minimum to avoid cluttering the screen. Putting as many of the buttons at the bottom of the screen will also help to clean it up and allow students to interact with most of the content without having their attention drawn off to other destinations. By placing the navigation tools at the bottom you can also keep students from leaving the page before they have finished reading all of the text.