Design Guidelines

These math website design guidelines were developed as a result of our usability evaluations of freely available online math resources and a literature review related to universal design of math resources and general web usability. Each guideline includes comments with background information and specifications for use, sources, and an example. Where relevant, considerations to ensure accessibility are included.

1. Vocabulary: Display of Definitions

Guideline

Provide definitions of all math terms proximal to the context of use of the term.

Comments

Explanations of mathematical concepts involve substantial math-specific vocabulary. Comprehension of a concept often depends on knowledge of vocabulary in conjunction with previously learned concepts. Definitions provided proximally to the context of use aid recall without the distraction of navigating back to the context of use after reviewing vocabulary elsewhere, e.g. on another page.

Accessibility

Vocabulary shown proximal to context of use should be accessible to a screen reader and to alternative inputs (i.e. other than point-and-click, such as keyboard navigators). It is also helpful to have definitions print with content, as many people print math resources to have available as they work. If proximal display is not available in a given device, the vocabulary should still be available in the page.

Sources

Beck et al (2002); Anderson-Inman and Horney (2007); Koyani et al (2006); Fadden et al (2008).

Example

Definition displays proximally to context of use:
screenshot of proximal display of vocabulary
screen shot of vocabulary display at bottom of page

When alternative technologies are used, and proximal display is unavailable, definitions should still display on the page and be printable.

2. Graphic and Tabular Displays for Reinforcement of Concepts and Patterns

Guideline

Use graphics and tables to describe mathematical patterns and concepts in addition to text in outline form.

Comments

Use of graphic organizers has been shown to support student comprehension. Visualizations of patterns reinforce relationships among elements and are conducive to analysis and synthesis of ideas.

Accessibility

Tabular data should use proper html to describe relationships among cells, rows, and groups of data. Relationships depicted visually should also be explained proximally in text and/or video (with transcripts). While a strength of graphic organizers is depiction of relationships and patterns, these will not be apparent to all users. Use of html ‘long description’ to describe the visual is not encouraged as people with visual and cognitive difficulties who do not use screen readers will miss the valuable text description of the content.

Sources

Robinson et al, 2006; Ives and Hoy, 2003; Koyani et al, 2006.

Examples

example of graphic representation of exponents patterns
example graphic representation of exponents patterns

3. Text: Readability of Content

Guideline

Review content for readability of text, using research-based guidelines and/or software.

Comments

  • Avoid complex sentence structure, including: passive construction, split infinitives, use of multiple prepositional phrases.
  • Avoid symbolic (metaphoric) phrases and images, e.g. “We’re going to do an icebreaker;” “I’m raising the bar with this assignment,” “This is a black-and-white issue.”
    network icon Spheres with lines and dots can be symbolic of a network, but the necessary interpretation should not be assumed. It would be helpful to include a text label with the icon.
  • Avoid jargon, and explain it if it must be used. Reinforcing math language is important, but is only useful if the concept is understood. Using a combination of ‘natural’ language and math language can enhance understanding.
  • Reflect the semantic structure of the content through the use of HTML to indicate hierarchy such as headings and bulleted lists.
  • List math examples independently from text explanations. For many people, math sentences incorporated into paragraphs are difficult to evaluate. This creates extra cognitive workload, diminishing capacity for work on understanding the given math expression.

Accessibility

Use of HTML for semantic markup, such as headings and bulleted lists, supports the user’s ability to preview content. Markup can be accessed with assistive technology for this purpose. For example, there is a browser add-on that will display and/or read all of the headings on a page. This is useful toward understanding the context of the page’s content.

Sources

Koyani et al (2006); Caldwell et al (2008).

Examples

Example with math example listed independently, and combined use of math language and natural language. A heading is used to describe the text that follows.
example of math expressions displayed discretely from paragraph
Example of lack of readability: Math examples are written in paragraph form and comprehension of math vocabulary is assumed.
example of math expressions written within paragraph

4. Hints and error messages reference actual numbers in problem

Guideline

When a page displays a hint or error message related to a math problem, the message should be specific, describing the actual error, including details of the numbers and/or symbols that are incorrect.

Comments

  • Specific error messages and hints reduce the user’s workload, offering information to help fill in a knowledge gap.
  • Participants in usability evaluations of math resources were persistently worked to understand the math behind the practice exercises on each site. They were frustrated when explanations were vague or not offered. Conversely, when specific hints were given, participants persisted in working to solve the problems independently.

Sources

Koyani et al (2006); Fadden et al (2008).

Examples

In the example below, the answer is not provided, however specific information is given to explain why the answers are incorrect. In this exercise, the user can click on the question mark to receive an additional hint and explanation.
screen shot of math activity with error message

5. Scaffolding of Complex Concepts

Guideline

It should be assumed that a reader may need to refresh their memory about basic math concepts used in solving a more complex problem. Explanatory supports should be offered proximally to the content, when possible.

Comments

This guideline supports persistance by building a bridge between previously learned concepts and new concepts.

Accessibility

If scripting, such as javascript, is used to make support information available on-demand, the script should hide the content as a progressive enhancement. If the viewer is unable to make use of javascript, the support information should still be available in the page. It is also helpful to have basic concept information print with the main content, as many people print math resources to have available as they work.

Sources

Anderson-Inman and Horney (2007); Koyani et al (2006).

Examples

screen shot of math explanation with reminder of basic math in callout on the side

6. Step-by-step Explanations of Solutions

Guideline

Explain solutions to math problems are step-by-step, including concepts that may be assumed to have been learned in previous coursework.

Comments

This guideline supports learning and persistance.

Quotes from Usability Evaluation Participants

“I would rather have a tutor explain something to me. A human can explain why and show me step-by-step. You can’t just put it up there. I keep hitting a brick wall and it’s still not explaining to me why.”
“It should show the steps in between. It doesn’t show you how to do the steps.”
“I like how they have a heading of exactly what I was looking for and then they have boom, boom, the steps.”
“I don’t even know how they’re getting these numbers.”

Sources

Koyani et al (2006); Anderson-Inman and Horney (2007).

Examples

screen shot of example broken out step by step

7. Page Printability

Guideline

Ensure that when the page is printed, all math-related content fits within the page.

Comments

  • Student participants in math learning resource usability evaluations and interviews indicated that they print math materials to use in studying for tests and for learning new concepts.
  • Site navigation (e.g. header and sidebars) are not necessary in the print version of a page.
  • It should not be necessary to open a separate print version of a page. Cascading style sheets (CSS) can be used to identify display styles specific to print.
  • Hidden elements, such as vocabulary definitions and related basic concept explanations should be included in the printed page.
  • CSS can be used to display the full hyperlink in addition to the more readable link title text that is typically displayed in the web browser. In print, it is useful to have the full link, as you can not click on the text to see where the link takes you.

Sources

Koyani et al (2006); Fadden et al (2008).

Examples

Here is a screen shot of the print version of one of this website’s pages:
screen shot of printout of page

8. Consistent Site Navigation

Guideline

Provide links to the website’s home page and to the main sections of the website in the same location on every page of the website. Provide cues to the user to indicate their present location in the relation to the website’s navigation structure.

Comments

Consistent site navigation is a common guideline not specific to math learning resources, but is included here because it posed a significant problem in the websites we tested.

Accessibility

All navigation links should be available to users navigating via the keyboard or other input method. For example, flyout navigation and drop-down menus, unless programmed for accessibility, will be unavailable to many users.

Sources

Koyani et al (2006); Fadden et al (2008).

Examples

example of consistent website navigation

  1. The left side of all pages of the Algebra Learning Resources website contain links to the main sections of the website, as well as links to the content within those sections.
  2. The navigation highlights the name of the current page and does not display it as a link. The word in the link is repeated in the page title.
  3. ‘Breadcrumb’ links are offered at the top of the page to reinforce current context. Designers should not rely on breadcrumb navigation, as research has not proven it to be an effective navigation scheme.

9. Placement of Advertisements

Guideline

If advertisements must be used, they should be placed outside the visual flow of content and site navigation.

Comments

  • It is often difficult to distinguish between a website’s internal links and advertisement links when advertisements are placed proximally to page content or within a website’s navigation (persistent area of links to other pages).
  • Do not display advertisements that expand or pop-up when they receive focus, e.g. when the mouse hovers over them or the users tabs through the page. These are considered unexpected actions that diminish the user’s control over their experience.
  • Graphically distinguish areas of advertisements through the combined use of a heading, background color, outline, and location to facilitate recognition.

Quotes from Usability Evaluation Participants

“This advertisement really bothers me. Things moving around disturbs my thought process. I’d probably look somewhere else.”
“I notice there’s a lot of reading and there’s lots of ads and clutter, so I have no idea what I’m about to read, or what it’s about.”

Accessibility

The distraction of moving advertisements requires the reader to re-focus attention on the content and adds to their cognitive workload.

Sources

Koyani et al (2006); Fadden et al (2008).

Examples

Problematic Example: These ads, placed just below the website’s internal links, were frequently mistaken for links to the website’s content by usability evaluation participants. Users often scan blue links on a page when they are looking for something and miss the “Ads by Google” text.
screen shot of single-line google text advertisements
screenshot of sidebar with misleading advertisementThe “Algebra Homework Answers” advertisement in this screen shot was frequently mistaken for a link to site content by usability evaluation participants. It uses the same color as the website’s navigation and is placed in a primary location, at the top of the website’s sidebar. The Amazon.com ad, however, uses the Amazon logo and a black outline to very clearly identify that the links will take you to a different website.

References

Anderson-Inman, L., Horney, M. (2007). Supported eText: assistive technology through text transformations. Reading Research Quarterly, 42(1), 153-160.

Beck, I., McKeown, M., Kucan, L. (2002). Bringing Words to Life: Robust Vocabulary Instruction. New York: Guilford Press.

Caldwell, B., Cooper, M., Guarino Reid, L., Vanderheiden, G. (2008). Web Content Accessibility Guidelines 2.0. Retrieved from http://www.w3.org/TR/WCAG20/ May 2, 2008.

Fadden, S., Strothman, J., Engstrom, E. (2008). Math Learning Resources Usability Evaluation: Common Themes. Unpublished findings.

Ives, B., Hoy, C. (2003). Graphic organizers applied to higher-level secondary mathematics. Learning Disabilities Research & Practice, 18(1), 36-51.

Koyanl, S.J., Bailey, R.W., & Nall, J.R. (2006). Research-Based Web Design & Usability Guidelines. Retrieved from http://usability.gov/pdfs/guidelines_book.pdf October 24, 2007.

Maccini, P., Gagnon,J. (2005). Math Graphic Organizers for students with disabilities. Retrieved from http://www.k8accesscenter.org/training_resources/documents/MathGraphicOrg.pdf July 29, 2008.

Robinson, D.H., Odom, A., Hsieh, Y., Venderveen, A., Katayama, A. (2006). Increasing text comprehension and graphic note taking using a partial graphic organizer. Journal of Educational Research, 100(2) 103-111.