Principles of Design
A well-designed, exemplary course is one which is both usable and accessible for all users. Usability and accessibility arise from three principles of good design: careful presentation, consistent navigation strategies, and adherence to ADA/Section 508 specifications. Courses demonstrating these three principles of design provide exemplary models for learning.
Definitions
- Usability: Web site usability is determined by a variety of factors, but for our purposes these are the most important:
- ease of learning
- user ability to remember the organization and its functionalities,
- efficiency, and
- low likelihood of errors while performing the tasks for which the site has been designed
(For example, finding the information needed or returning to previous course pages.)
Usability is aimed at making the target populations of the web site happier--students, in our case--and making the web site itself more efficient and effective.
“Usability is very much like quality: you typically notice it only when it is missing.”
- Accessibility: A web site is accessible when its content is available to everyone, including people with disabilities. Such web sites are accessible--i.e., easily perceived--in spite of physical, sensory or cognitive user disabilities, and technological barriers. Their content is presented in a clear, understandable, and simple manner, and understandable navigation is present within and between pages.
Accessibility is aimed at making the web site open to a wider user population. Essentially, a site is accessible if those with disabilities can use it as easily as those without.
NOTE: Quotation and information on usability and accessibility are from UsableNet, a software and accessibility-testing Web site: http://www.usablenet.com/.
(See also http://www.usablenet.com/accessibility_usability/accessibility_usability.html)
Top of Page
CCCOnline Usability Standards
Exemplary courses demonstrate usability features that allow students to focus on class content and learning rather than on trying to figure out what is meant or where to go next in a course. Such courses increase ease of learning and efficiency while enhancing the student’s ability to understand the course organization and avoid confusion. Exemplary courses exhibit the following characteristics of good design.
Usability Principle I: Careful and Consistent Presentation
Elements to be considered:
A. Course Homepage
Provide logical structural indicators, including these essentials, so that users perceive the structure of the course and know how to move forward. Includes these elements:
- A welcome from instructor
- Course overview
- Directions for how to begin and/or proceed through the course
B. Unit Homepages
Provide consistent, logical clues to organization and content that guide the user’s expectations and indicate what to do next. Includes these elements:
- Overview of the unit
- Unit outcomes
- Directions for how to proceed through the unit
C. Visual Identity
IBM’s Web Design Guidelines indicate it is important to establish and maintain a consistent visual identity “by using related visual elements throughout your site. A consistent visual style gives a site a sense of unity and reinforces users' experience that they are rooted in a certain place.” (“Maintain consistent visual identity,” http://www-3.ibm.com/ibm/easy/eou_ext.nsf/Publish/602)
Establishing a visual identity comes about through attention to these elements:
- Color – Maintain consistent colors throughout the site and within courses (WebCT frame, background, text). This fosters a “CCCOnline” identity for students.
- Graphics – Use pictures and images to provide visual interest:
- Use the same graphic images from page to page to designate redundant presentation of essential information or course elements. (This will also increase page download time.)
- Use animated graphics minimally and carefully. Remember the “3-loop rule.”
- Movement attracts attention, so moving images or text may seem more important than the content and distract from learning. They may also become irritating. It’s best to stop animation after 3 “loops” of motion.
- However, animation is good at explaining ideas which involve changes in time or position and for demonstrating processes, so it may be useful for such course content. (For an example, see “Creating animations that enhance explanation,”
at: http://www-3.ibm.com/ibm/easy/eou_ext.nsf/Publish/604.)
- Page Design – Keep wait time for page downloads to less that 5-6 seconds, preferably. Reducing wait time lessens frustration and increases efficiency, as users know what to expect.
Usability Principle II: Clear, Consistent and Efficient Navigation Strategies
Adopting a clear, consistent and logical navigation style across the entire web site helps users understand the site and accelerates their familiarity with how to navigate complex course sites.
(from the World Wide Web Consortium’s (W3C) Web Accessibility Initiative site, http://www.w3.org/WAI/bcase/benefits)
Elements to be considered:
- Navigation Bar / Unit Navigation Links: Maintain consistent menu and unit organization and layout among courses, identical when possible and equivalent when not, to foster understanding of and familiarity with site navigation.
- Contextual navigation: Give clear and consistent navigation directions on course pages, providing context for users (where are they in the site? where can they go? how can they go back?). This will result in more efficient and more accurate maneuvering within and between course pages.
Top of Page
CCCOnline Accessibility Standards
Exemplary courses demonstrate accessibility features thatenable all students, whether disabled or not, to easily understand how to navigate through the course and to easily perceive course content.
Accessibility Principle: Adherence to ADA/Section 508 Specifications
Elements to be considered:
A. Consistent and Understandable Site Design
Users with cognitive and perceptual problems are helped when site organization and course pages reflect a consistent layout and provide understandable navigation tools and orientation information.
- Provide clear and consistent navigation mechanisms (same as Usability)
- Similar Navigation bar layout and content from course to course
- Redundant layout within a course for similar course pages
- Provide context and orientation information
- Include directions and/or links in course pages indicating where students are, where they have been, and/or where to go next
B. Understandable and Easily Navigable Content
- Focus on keeping page lengths short – no more than 2 or 3 screen lengths. For longer pages, make use of “chunking,” i.e., divide large blocks of information into more manageable groups and link to those chunks rather than to one long page
- Create visual clarity: Design pages to be easily scanned by users, so that it is quickly obvious what they cover.
- Use headers, bolded words (but not underlined), bulleted lists, tables, and other visual structures to make it easy for users to quickly grasp key points on a page
C. Color and Contrast
An accessible site ensures that all users will be able to easily see and understand content.
- Provide adequate visual contrast. Use dark text on a light background and avoid patterned backgrounds that may obscure text.
- Use colors and fonts easily seen by those with color blindness or other visual perception problems. Avoid large blocks of red or green text.
- Indicate important text with more than color alone. Use color (which those who cannot distinguish colors may not see) only as a redundant method of highlighting information in text also bolded or italicized, which all users can perceive. (For an example of what happens, see Jim Thatcher’s Special Cases: http://jimthatcher.com/webcourse7.htm#Webcourse7.1.)
D. Provide equivalent alternatives for visual content (graphics)
- Provide alternative text for content-related images, so screen readers will “see” them.
- Hide non-content-related images from screen readers with empty ALT tags (alt=“”).
- Use flashing text and a nimated graphics minimally and always adhere to the “3-loop rule.” This will prevent non-stop, annoying, and distracting motion and will help
Resources
Here are some additional sites with helpful design information:
|
