We're currently designing a checkout process for course registration at a University. One step of the process is to check the student has the required prerequisite courses in their academic history. The mockup below shows the proposed interface for this step, at a point when the user has failed to meet prerequisites for the courses they're registering for (in the case below they've failed 2 out of the 5).

The part that we're having difficulties with is clearly directing the user to make the right set of actions. They have a number of options at this point:

  1. Send a message requesting help, and exit the registration process by exiting the browser.
  2. Do not send a message, but continue with registration for the remaining courses.
  3. Send a message requesting help, and continue registration for the remaining courses.
  4. Do nothing, exit the registration.

So unusually, this interface has two completely optional, and yet not mutually exclusion paths the user can take. Given the mockup below:

  1. Does the current UI communicate these choices optimally?
  2. If not, how can we effectively communicate this to our users without extensive instructive copy? Particularly, if the user isn't paying attention and doesn't read the second option of continuing with their remaining courses.

Prerequisite registration http://matt.titchener.me.uk/misc/prerequisite-registration.png

3 Answers 3


You can tweak your UI based on the main action(s) you like the users to take. When breaking up the contents (error items + success items) based on the options available for each one, in your case students see a list of not qualified and qualified courses with options below each one, it makes it hard to get an overview of what actions are available on this page.

One way to organize this a bit is to group the list of courses (both qualified and not qualified) together and group the actions together as well. See the attached mockup:

enter image description here

The upper portion contains a list of all courses in the cart separated by its status. After a list of courses, you can present the user with the option to continue with registration or send a message in response to the prerequisite required courses. You can switch the order of the course status or flip the "Continue Registration" with "Need help with prereq" based on what actions you like the users to take since users will most likely see and click on the first option they see.

  • First of all, thanks for the effort! We actually have something in place similar to top portion of your suggestion. We had initially shied away from including all the courses together, so as to clarify/emphasis the failed courses. Given your suggestion we might have to revisit that layout.
    – Matt
    Sep 23, 2013 at 22:41

The obvious answer is to put the green panel above the red one.

The green panel will always be smaller than the other, so the red one is likely to be visible on the screen. The user can either action the green panel or read and action the red one. At least he won't have to scroll to find the bottom panel.

A little rewording will be necessary, of course.

  • In this scenario that would encourage users to miss the red panel entirely—they'd then wonder why only half their registration has gone through. If that sounds unlikely, I can assure your our user base is large enough, and young enough this would happen quite frequently.
    – Matt
    Sep 23, 2013 at 15:33

When presented with unusual problems, I start to question how we ended up in such an odd place—"why haven't others stumbled on this issue much before?" Given that question, it became apparent that we should linearise the process (effectively changing the business process). Now users must take action "resolving" failed prerequisite courses before they can continue registration.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.