Home | Overview of the Profession | Usability Overview | What Is Working | Definitions | Resources | Articles

 

What Is Working:
Examples of Great User Interface Design

by Adele Sommers

 

Editorial note: These are just a few of the many examples of exemplary user interface design that you might encounter in software applications or on the Web. For extensive additional examples, please refer to sites such as http://www.pcd-innovations.com/web_site_designs.htm and http://www.pcd-innovations.com/samples.htm.


Great user interface design is all about making tasks fast, easy, and pleasant to perform. The challenge of creating a helpful interface, however, increases with the complexity of the users' goals and tasks. Interfaces that go beyond good design -- and actively support goal definition and task performance -- deserve special recognition and attention.

According to Gloria Gery in her timeless article, Attributes and Behaviors of Performance-Centered Systems, some of the notable characteristics of performance-centered systems include:

  • Aiding the performer in establishing goals
  • Embedding knowledge into the interface
  • Reflecting a "best practice" approach to completing a job or task
  • Providing options, next steps, and resources
  • Automating the tasks required to accomplish the goals
  • Observing, advising, and providing contextual feedback to the performer
  • Providing alternative views of the interface and/or resources.

In the case of a complex process such as planning, we can see in the example that follows how several of these features were implemented.

The SFSU "BSS Webvising" Portal

The BSS Webvising portalIn October 2002, software developer, educator, and performance best practices expert Chet Leighton spoke to the SLO STC chapter, introducing a new student advising Web portal he co-designed for San Francisco State University (SFSU).

The new portal appears in Figure 1 at right. (Click the image to open at full size in a separate window.) Note that I have annotated certain screen shots with yellow callouts to focus attention on key points.

The "BSS Webvising" portal replaced a static repository of information that students and faculty had used for years to sort through degree program options. One shortcoming of the old system was its inability to help students actually plan a program.

To help take the guesswork out of this complex process, Chet and co-designer Andrew Roderick (Director of Computing Services for the College of Behavioral and Social Sciences at SFSU) introduced a dynamic planning system. The system provides the information visitors need to make decisions about current or future degree goals. Using the "Webvising" portal, students (or prospective students) can investigate degree options, select courses to meet degree requirements, and schedule classes according to when they are actually offered. As a side note, the full extent of the system is visible to visitors who create user profiles; however, an alternative view of the interface -- an explanatory overview -- appears to the casual observer.

Within the system, visitors can create multiple plans to try out different undergraduate scheduling options, or even strategize graduate degree programs. Visitors thereby have access to a "what-if" scenario-builder that can help them evaluate issues such as alternate degree paths and schedule conflicts. At each stage, the system makes available appropriate options, next steps, and resources. Based on the visitor's choices, the system automatically generates a program plan.

Start by researching and selecting a major

Research and select a majorTo initiate the process, visitors start by picking a major for one or more planning scenarios. Figure 2 at left shows the information pertaining to the Psychology degree. It outlines the major, the courses, the application process, how to obtain an advisor, and other relevant facts.

(Click the image to open at full size in a separate window.)

As the visitor works through the planning process, the system filters and updates the information dynamically.

Pick a starting timeframe

Pick a starting timeframeVisitors next pick a starting point for the planning scenario, as shown in Figure 3 at left. After selecting a major and a starting semester, one is ready to start planning in earnest!

(Click the image to open at full size in a separate window.)

Begin planning and scheduling courses

Plan and schedule coursesFigure 4 at left shows a general sequence of events once one has identified a major and starting point:

1) Select desired courses to meet the selected major, minor, and general education requirements

2) Schedule desired courses to meet the selected major, minor, and general education requirements. The resulting schedules can be printed for record-keeping and use in discussions with advisors.

3) Follow graduation checklists of various types to stay apprised of important milestones. Apply for graduation online, if desired.

(Click the image to open at full size in a separate window.)

Select the semesters to include in the plan

Select semesters for the planFigure 5 at left shows how one would choose the semesters for a given plan. This feature enables visitors to selectively skip terms, as well as project ahead well into the future.

(Click the image to open at full size in a separate window.)

Choose specific courses to include in the plan

Choose specific coursesFigure 6 at left illustrates how one can select specific courses to fulfill requirements for the major, minor, and general education. The selected courses will automatically populate the plan.

(Click the image to open at full size in a separate window.)

In this example, I've gone a little "overboard" in selecting a heaping plate of statistics courses. The system alerted me that not all of these courses were required, but that I could schedule them if I wished. The system's response represents a good example of contextual feedback.

Marry selected courses to a schedule

Marry courses to a scheduleFigure 7 shows the plan nearing completion! With specific courses identified, the only remaining step is to associate them with the particular semester(s) in which they will be taught. The visitor can print this plan for future reference as well as maintain it online.

(Click the image to open at full size in a separate window.)

By including information from faculty planning, the system will help coordinate the "supply and demand" for future course offerings.

Follow the checklists to success!

Follow checklists to successFigure 8 reveals a portion of one of the checklists available online to remind students of various requirements and milestones. In this respect, the planning system is helping to establish and reinforce the long-term goal, as well as structure the necessary task sequence.

(Click the image to open at full size in a separate window.)

Students can check off milestones as they are completed, which causes the information to be stored in the planning database.

In summary, the SFSU BSS Webvising portal demonstrates that in order to effectively help visitors perform a complex task such as planning, it must do more than merely supply information -- it must provide tools to help people act on that information in a variety of different contexts.

The tools should enable visitors to define their goals, understand and weigh their options, make decisions, model alternatives, create and save plans and profiles, and analyze results. Ideally, the system would also support ongoing task performance, such as with the assistance provided in the checklist in Figure 8 above. While the BSS Webvising portal is not intended as a substitute for the human advisory process, the insight it provides enables students, instructors, and advisors to plan far more accurately and intelligently than they could without it.


Links referenced in this article:

Reference to Attributes and Behaviors of Performance-Centered Systems: http://www.pcd-innovations.com/piq_199.htm

Reference to Chet Leighton in October 2002: http://www.slostc.org/events/oct28.html

Reference to SFSU's new BSS Webvising portal: http://bsswebvising.sfsu.edu/


The "BSS Webvising" system is copyright (c) 2002 San Francisco State University. This article was written in December 2002.

^ Back to top ^

Disclaimer & credits