Designing for information

Lately I’ve been thinking about how we design information. We spend a lot of time thinking about the design of the homepage, top level areas and Faculty and Department sites but when it comes to content, all too often it’s a copy-and-paste job from a Word document.

The move to WordPress for many parts of the site will mean that the people who know about the information will have more control over how it’s presented on the web but there is still a risk that it will remain dry blocks of text because that’s the easiest way to get it online.

I want us to take a new approach to much of the content we have. We need to address each area of the site and look at what is important and the best way to display it.

One site I believe does this really well is the new beta Government website They’ve taken what can be quite detailed information and extracted the important points, structured it and presented it clearly.

Take for example times that the clocks change. The current Government website Directgov has the information on a page titled Bank holidays and British Summer Time but when the clocks go forward is only shown towards the bottom and requires the user to think:

Compare this to the new GovUK site where clock changes are shown on a page on their own titled When do the clocks change?:

Front and centre on the page is the information that probably 99% of people want – the next date that clocks change.

This is basic information but making it easy to find and consume is invaluable and it’s the type of information that universities have in bucket loads!

These pages get thousands of views per month and that’s just the start. Unstructured content can be redesigned too by breaking it down into stages and identifying the goal of publishing it online.

Changing how we design information is a big task and will involve us working closely with content owners but the benefits to our users, and the university, are enormous. Work starts now.

Lazy Page Loading

Computers on campus have a number of default tabs when you open a web browser. IT Services were recently asked to add the Students’ Union website to these default tabs which threw up a couple of concerns. Firstly, we were occasionally finding that the site caused some versions of IE to crash (this has now been fixed by the company who create the website) and secondly, the more tabs opening simultaneously the slower the browser is when it first loads up.

To solve these problems we created a lazy page loading script. Lazy loading is a technique commonly used within a web page to defer loading parts of the page until they needed. For example, a long page containing lots of images won’t show the images until you scroll down towards them.

With browser tabs, a similar issue is present – we were loading three large pages when typically only the first would ever be seen. Using a lightweight web page with a bit of JavaScript we’re able to set the tab title and then redirect to the real page only when you switch tab. If you’re interested, here’s the JavaScript:

<script type="text/javascript">
window.onfocus = function() {
location.href = '';

You can see it in action by opening this lazy load link in a new tab before switching to it. The change to student PCs is being made as I type so we’d be interested if you notice any difference in speed when you open a browser on campus!