NEPA/DO-12 Web Based Training Design Document October 10, 2004 Lisa Bradshaw, Annie Persson, Keith Regensburger Prototype URL http://clem.mscd.edu/~bradshaw/it6960/npsprototypemain.htm Prototype Pages The design prototype consists of three types of pages: the Main Screen, the Begin Lesson Screen and the Lesson Content Screen. We understand that the navigation for login and between lessons will be handled by the MLM interface. The Main Screen introduces the learner to the course, the Begin Lesson Screen introduces the topic for the lesson, and the Lesson Content Screen can be modified as needed to include text sections, photos/graphics, callout text, self check boxes, and areas for other links as needed. NPS Prototype Main Screen Color Scheme Based on the audience analysis, the prototype uses natural, earthy colors as the most suitable and familiar to the learners. The color scheme is based on shades of green, to reflect colors found in nature and to emphasize the topic of natural resources that the training addresses (Lohr, 145). To meet NPS standards, we are using colors from the browser-safe hexadecimal palette (December, Weinman). The dominant color is a medium green, with a darker shade of green as the secondary color, and lighter green for balance and to provide part of the background. The footer is in a dark green to tie together the top mountain header with the bottom of the page. Using the same shade of dark green as part of the header and in the footer frames the page and creates a feeling of balance and symmetry (Lohr, 150). The framing elements create a focal point for the center of the page, which is the body text. The background of the Back/Next and Begin links at the bottom right of the screen is assigned the medium shade of green, providing contrast with the text (Lohr, 159). 1
We include a contrasting maroon accent color in the navigation bar and Reference/Quick Links menus, creating a complementary color scheme of red and green (Lohr, 142). For the main text background, we use a light ivory color rather than white. The ivory background softens the page, adds warmth, and does not have a glaring effect. A softer background color for text is easier on the eyes and for readability (Bernard, How should text be presented within a website?). The main text is black, to provide the most contrast and optimize the figure-ground difference. For titles and headers, black text is used on ivory, medium or light green backgrounds except the page header, which is dark green to coordinate with the dominant color. White text is used over dark green or maroon backgrounds, again to provide the strongest figure/ground contrast (Lohr, 159, 175). The use of white rather than ivory in the text helps to provide the appearance of an additional color. CCFFC 99CC99 336633 66000 FFFFC NPS Prototype Begin Lesson Screen and Color Scheme Page Element Color Description Hexadecimal/ Browser Safe Number Mountain Header Dark Green 336633 Mountain Header Medium Green 99CC99 Mountain Header Light Green CCFFCC Navigation Bar Maroon 660000 Navigation Selection Pale Maroon 996666 References Bar Maroon 660000 Search Field White FFFFFF Main Text Background Ivory FFFFCC You Are Here Column Dark Green 336633 Footer Bar Dark Green 336633 Begin/Back/Next Bar Medium Green 99CC99 Screen Elements and Assigned Colors 2
Page Layout The layout of the prototype screens are designed to have a natural sense of flow. Vertical and horizontal planes help guide the viewer s eye from the prominent logo in the upper left, through the text and down to the footer and the lower right navigation links that direct the learner to the next page. This takes advantage of the tendency of the target audience to read from left to right and top to bottom, and establishes reading hierarchy for the learner (Lohr, 210-212). Consistent, predictable use of page elements such as the NPS logo, photographs, color schemes, navigation and page layout enhances learner confidence in their ability to navigate the site (Lynch and Horton, User-centered design). The header area for each page will have a mountain graphic in a horizontal plane across the top, composed of the three different shades of green. A light green box is used in the upper right corner within the banner to draw attention to the drop down Quick Links and References menus. The top four inches of the page are the most efficient in revealing the page s options to the viewer (Lynch and Horton, Page headers and footers).the navigation bar is placed horizontally across the top of the page below the header area. The location for the header area and top navigation elements are predictable and maintain the identity of the pages throughout the site (Lynch and Horton, User-centered design). The left column, a vertical plane, will contain a photograph of a natural scene as a shadow background in the medium green range, extending into the footer below it. The shadow photograph adds texture and perspective, helping to create a sense of depth (Lohr, 147, Campbell, 48). A text box with a lighter ivory toned background will overlay the left column photograph, depending on the content required for the page. The text will be placed in columns optimized for readability, with horizontal line lengths of 35-75 characters or 4-5 inches (Lohr, 96). The main content text is left aligned for better readability (Lohr, 163). The other text elements are left-aligned except the Back/Next/Begin footer links and the links in the maroon navigation bar, which are centered in their background areas for balance. In the body of the text, graphics and/or more callout text such as self-test questions can be used to break up the paragraphs. Photographs will be added for visual appeal (Lohr, 188). The screens are designed to fit onto the page in resolutions as low as 800x600, without the need for scrolling, since the need to scroll is often viewed as an obstacle and some users prefer not to have to scroll (Campbell, 26, 43). Using paging rather than scrolling can help users move through pages faster (National Cancer Institute, Reading & Scanning). Fonts The prototype uses Verdana, a sans-serif font which is optimized for Web display, and typically considered easy to read on screen (Lohr, 77). Using a familiar font helps to improve reading speed (National Cancer Institute, Font/Text Size). We use different sizes, colors, and weights to provide variety and contrast. Below are the specifications for each text element: Text Element Size Weight Color Description Hexadecimal/ Browser Safe Number NPS Title 14 Bold Black 000000 Screen Title 18 Bold White FFFFFF Navigation Bar 10 Bold White FFFFFF Search Text 10 Bold Black 000000 References Link 12 Bold White FFFFFF References Menu List 8 Bold White FFFFFF Page Header 18 Bold Dark Green 336633 3
Page Subheader 12 Bold Black 000000 Main Text 12 Normal Black 000000 Footer Bar 10 Bold White FFFFFF Self Test Header 12 Bold White FFFFFF Self Test Text 12 Normal White FFFFFF Callout Header 14 Bold Black FFFFFF You Are Here Header 14 Bold White FFFFFF You Are Here Text 10 Bold White FFFFFF Callout Text 12 Normal Black 000000 Begin/Back/Next Bar 10 Bold Black 000000 Screen Text Elements and Assigned Colors NPS Logo Location The NPS logo appears at the top left corner of each page, reinforcing the organization s identity (Lynch and Horton, User-centered design). The NPS logo appears to point down to the left column, to draw attention to the contents of that column (Lohr, 210). When the column contains callout text, this will help to emphasize it. Since the typical reading pattern for our audience is from left to right and top to bottom (Lohr, 203), the upper left corner placement makes the logo prominent and easily recognizable by the learners. Navigation within Lessons The unit, number, and time estimate text cues in the footer indicate to the user where they are and how long the lesson will take to complete. These cues give learners a sense of pace and help them to manage their training time. Knowing how far along they are in a unit, how many lessons remain, and the time estimate per lesson enables students to focus on the content of the lesson rather how to navigate through the pages (Coe, 12). If the pages are customized so that some students see pages that others do not, the page numbering structure will be revised or removed. Navigation Unit, page number, estimate NPS Prototype Lesson Content Screen and Navigation 4
The links at the bottom right for Back/Next and Begin allow linear or sequential navigation through the screens. The Quick Links and References menu will allow non-linear navigation to screens containing specific information. Using both types of navigation allows the user to choose between types of access they prefer to the information, or use both types (Coe, 139, Campbell, 77, 91). Site Map/Course Structure It appears from our discussions that the learners will be asked to take the lessons in sequence. The MLM interface is expected to keep track of which lessons the users have taken and which they need to complete. Page headings contain the lesson number and name, providing orientation cues to the learner reflecting the organization and structure of the pages. Well-designed headings also help learners to scan text and place material in context (National Cancer Institute, Use Well-Designed Headings). The You Are Here map on the Begin Lesson screen helps the learner understand where they are in the larger scheme of the training. The footer also tells the learner where they are in the units and the lesson. As mentioned earlier, if the pages are customized so that some students see pages that others do not, the page numbering structure in the footer will be revised or removed. In addition, we include a link in the maroon navigation bar to a complete site map page with an outline of the whole site to help the user quickly see the depth of the site and the structure of its content (Lynch and Horton, Site Guides). If the user clicks one of the links in the navigation bar, the link for the page being viewed will appear in a lighter maroon color than the others, as a visual indicator to the learner which page they are currently viewing in the site. If the link is a drop-down menu, the menu background will be in the same light maroon color. Cues such as these help the learner with navigation by giving them a general idea of the overall contents of the site (Coe, 241). A Search feature is included on each page, allowing the user to enter keywords to search the site, and as a complement to the menu navigation system (Lynch and Horton, Search features). Reference Materials Reference materials and Quick Links drop-down menus display on each page, for easy access and consistency. The drop-down menus will be set to stay open for a specific time frame (number of seconds) or until the user clicks the menu again, to accommodate users with mobility problems. The References menu will contain links to descriptions of the Laws, Acts, and Executive Orders that the learners will need to use as resources, and the Quick Links menu will contain reviews of information for users who have taken the course and just want to use it as a resource to look up and review what they have learned. Learners can be intimidated by pages with too many links, and drop-down menus and submenus can link to submenu pages such as the References and Quick Links page, directed to a more specific audience (Lynch and Horton, Menus and subsites). 5
Drop-down menu NPS Prototype Main Screen with Open Drop-Down Menu Justification References Bernard, Michael L. (2003) Criteria for optimal web design (designing for usability). Optimal Web Design, Software Research Usability Laboratory. Retrieved October 2004 from http://psychology.wichita.edu/optimalweb/text.htm Coe, Marlana. (1996) Human Factors for Technical Communicators. New York, NY: John Wiley & Sons, Inc. Dabbs, Alistair. (2002) Interface Design. New York, NY: Watson-Guptill Publications. December, John. (2004) Safe Hexadecimal Color Codes. Retrieved October 2004 from http://www.december.com/html/spec/colorsafe.html Lohr, Linda. (2003) Creating Graphics for Learning and Performance. Upper Saddle River, NJ: Pearson Education, Inc. Lynch and Horton. (2002) Web Style Guide. Retrieved October 2004 from http://www.webstyleguide.com National Cancer Institute. Research-Based Web Design and Usability Guidelines. Retrieved October 2004 from http://www.usability.gov/guidelines/index.html Weinman, Lynda. The browser-safe web palette. Retrieved October 2004 from http://www.lynda.com/hex.html 6