Monthly Archives: January 2010

Designing a Course Details Page

Have been looking at improving some of the previous ideas I’ve had for our course details pages. They are a crucial part of our site, so I wanted to have a good think about the way they should work. An essential part of design is clarity about the different priorities of the information you have to convey. If everything you have to say is of equal importance then that could be reflected in the visual representation. However, this rarely happens, and there is usually a definite hierarchy from the most important information down. An often tricky set of decisions when organising a home page, the structure of a course information page should be a little more obvious. This set of priorities then informs the semantic structure of the page.

To help me arrive at a sensible page structure, I had a ponder about what someone might want from a course detail page. This page should collect as much relevant info about the course and secondly, supplemental info that might help someone make a decision. Marketing have provided the broad headings that most of the information comes under, and these are pretty common across other University’s course pages.(give examples) So, a user would click through to the course page about English, and see a summary that helps them to decide if they are on the right page. If so, then the other headings are designed to give them more detailed info that would help them to decide, whilst hopefully making them interested about the possibility of studying that course.

Ideally, once someone has read enough of the exciting words about the course, then they would want to act upon what they’ve just read. To enable that the sidebar has a set of links with a variety of designs, to attract attention and emphasise that there are things the user can do. There’s a link to apply online, to book and open day, to contact the university. Hopefully with more similar tailored tools to follow. Currently styled with a predominantly blue theme I envisage there being versions based on the faculty color themes.

Further down the page there boxes with related info. Based on the presumption that all the previous info didn’t quite match what they were looking for, these are provided as jumping off points. There are links to related courses, Links to different parts of the site to Fees, Accommodation and a Parent focused site.

It’s best to keep this info all together as much as possible, rather than spread it across multiple pages and the attendant difficulty of managing links and urls. A consequence of that is that the page would potentially be very long. I don’t mind long pages myself, but it’s a good choice for the user to give them the option about which sections are relevant to them. Putting them in an accordion interface puts that control back in the hands of the user.

As per “Paul Boag’s article”: I think it’s really important that we try to create pages with very clear ideas of why they exist and what we would like them to achieve. If we can manage that then that clarity will benefit the people who use the site.

I tried a more rigid representation of this hierarchy, with the ‘Information’, ‘Links’, And ‘Tools’ block following one another in a single column. As you can see, it’s probably not a good idea to enforce such a rigid hierarchy.

Annoted design idea

I looked placing the tools on the left,but felt that they then became too prominent, since the info block is designed to be read first. It’s common practice to have in-page navigation on the left, and ordinarily I can see that it’s a convenient place to put things to make it easy to move around. However, since these pages are designed to be an end result of a search, it would be counter productive to then give links to take a user away the same visual priority as the main information

Annotated Design Idea

In the end I’ve settled on a right aligned tools block, with the idea that it’s easily placed for jumping off, but doesn’t demand too much attention. The task priority on this page would then be

  • Read
  • Act
  • Continue Searching

Annotated Design