Category Archives: Design

All about design – ideas, experiments and opinions

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”:http://24ways.org/2009/what-makes-a-website-successful 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

Cartoons on the Homepage

Screenshot of old site

What we used to get away with

First of series of trips down memory lane with the aim of rediscovering some of the lessons of our history.

A review of the web presence of the University has just been completed and that process of examination has made me reflect on the strengths and weaknesses of our current site and the way that we are doing things. To that end, i thought it’d be useful to take a look at the way we used to do things and see where we’ve improved, how the web world has changed and what lesson our particular history tells us. It might also be an educational journey for those who don’t remember some of the things we’ve done.

My five year old could do better

As critiques of University web pages I’ll bet that not many have had that particular sentence thrown at them. It all came about when we decided that the existing style of home page that we had at that time was not really appealing to our target audience, so we resolved to produce something more in line with a younger audience. Looking back through at older versions of wired.com and my sketchy memory it seems that the web at that time was louder, bolder and brighter.

Web guru Jeffery Zeldman’s site from then was very different. The language of the time was the limited color palette, bold, often pixelated graphics and blocks of color. We were all using tables for layout back then. It’s funny looking back through the archives of pages I remember, and illuminating that the general excitement and enthusiasm of the time seems to come across. It was in that context that we decided to be bold and create some character illustrations that would be different from the stock images other places used at the time.

I’d produced some illustrations for various parts of the site and I’d love to be able to say we did some in depth user testing, allied to extensive market research but that would be a lie. In fact we spoke to the representative from marketing at the time and outlined our plans to take the site in this very bold new direction and to his/her credit they went with the idea.

So how far have we come?

What strikes me during this meander down memory lane is the lack of links – eight in total, linking to broad categories of information. The absence of a search button reveals that we were very much in the business of guessing what users might want and laying out browsable options for them. In the intervening years the web has changed very much to a searchable medium, where users expect a quick interaction will deliver the info that they require.

The intense demands for space on the modern day homepage make it feel that we need to revisit our search and really explore how it’s being used and how we can improve it. Perhaps the desire to be up front and on the homepage stems from anxiety about all the stakeholders’ information being discovered. The decision to put things in these broad categories was , i remember taken with marketing. The overall site was smaller which probably explains how it was possible to collect things in these areas.

The size of our site has grown dramatically, reflected in the 60+ links currently on our homepage. As a team we will need to really examine the function and purpose of the different parts of the site, and reassess the role of the homepage in that process. Should the home page function like a table of contents, or a brochure, or a billboard, or a directory, or a storefront. All the analogies are relevant but if we try to do all of them in one place then we will end up failing at them all.