How to Use Patterns

You may find yourself involved in a project to redesign a website or application on campus. The best way to understand patterns and their use is to learn by example. In general, patterns may be used individually or combined to arrive at a complete layout.

This Could Be Your Problem

You are the developer responsible for redesigning part of a website that allows students, faculty and employees to sign up for a semester parking permit. The site needs to fit into an existing, larger site. Your customers want to compare prices before they order a permit. Because permit processing takes several days (the pass is created and mailed home to the customer), your customers want to come back and check the status of their order. This has the added benefit of alleviating all those calls to the front office from customers asking when they will get their passes.

This Could Be Your Solution — Combine several patterns together.

wireframe

What Patterns Would You Choose?

This scenario requires several screens to implement. General patterns can provide a framework across all the screens and more specific patterns can provide guidance for more specific problems on one part of a screen.

We recommend the following patterns, from general to specific, to assist in developing this parking permit ordering site.

  1. Inverted L Navigation — Allows you to develop your section navigation within an existing, larger site.
  2. Sign In  — In cases where some parts of the app require Calnet authentication and others don’t, generally provide a sign-in link that is globally available to give the user some control. For those aspects of the application that require authentication, give them an indication that it is a necessary part of the process that benefits the user.
  3. Multi-step indicator  — When the user has to complete multiple steps over many screens, give them an idea of how many steps and where they are in the process.
  4. Forms  — Efficient and effective form design makes the user’s task faster. Use the right form elements and controls.
  5. Action buttons  — Label buttons clearly so the user knows exactly what the form is doing. Only use buttons that are necessary. Avoid extra buttons that can confuse the user (cancel/reset) and cause errors.