Mapping the campus

We’re currently looking at a project which involves maps of the Ormskirk campus which – if you read my 125 by 125 blog – I find quite exciting. Maps are important for lots of things the University yet we’ve never had very good maps. We have access to lots of them, but nothing that’s quite suitable.

For example, our own campus map has all the buildings labelled and is pretty up to date but it’s not to scale or plotted against a real grid system.

We also have a 3D drawing of campus which is used in the prospectus and online in the interactive campus map. It looks nice but again it’s not accurate enough for plotting real positions and it’s a pain to keep up to date.

Google Maps is to scale but missing lots of buildings and some websites are moving away from it to other services because they’ve started charging for heavy users, not something I think they’d do to us but they could add advertising:


View Larger Map

Microsoft’s Bing is even worse:

The Ordnance Survey have released some of their data, and we also have access to it through Digimap, but questions remain over licencing and the frequency of updates.

We can do better than this by building on what has already been done by OpenStreetMap.

I’ve mentioned OpenStreetMap several times before going back three years:

[Mapumental's] base mapping layer is from OpenStreetMap – a project to create a free (as in beer and speech) map similar to the ones available from Google Maps, or even from the OS. It’s created by volunteers who go out with GPS and plot the routes online. Almost all major roads are on there already and certain areas have excellent quality coverage – take a look at South Liverpool for an example of how good it can get.

The quality of mapping on OSM for Edge Hill hasn’t been great – in the past I’ve taken the odd GPS track or paths around campus and added them but generally it’s been pretty poor as you can see from this recent capture:

Edge Hill Before (CloudMade)

Recently though, the quality of aerial imagery available in the OSM editor has vastly improved making tracing over the campus a viable option where it hadn’t been before (buildings going back as far as the Faculty of Health were missing from Yahoo!’s images). A few hours work has resulted in a much more complete map of campus:


View Larger Map

As I write it’s still not perfect but all the buildings are plotted along with roads, footpaths and many of the facilities we have on campus like cafes and shops. OpenStreetMap allows anyone to make corrections and add missing features which will help keep it up to date.

Now that we have an up to date base map we’ll be looking at ways we can make use of it in some exciting forthcoming projects which I hope we’ll be blogging about soon!

The Cookie Monster is here

Cookie Monster

The UK’s implementation of EU Cookie regulations come into force this Saturday and the web design world is frantically trying to work out what to do! Firstly a bit of background into cookies and why we are where we are!

Cookies make the web go round – they’re how a website remembers who you are so you don’t have to remind it every time you load a page; they allow websites to personalise what you see; they make online shopping possible by remembering what’s in your shopping basket and they allow website owners to track the performance of sites to determine what’s working and what isn’t. Suffice to say without cookies the web would be a sorry place.

But they also have the potential to be abused. They can reduce your privacy on the web by tracking what you do on the web. By linking information together it could be possible for sites to build up a detailed profile of your online behaviour and the EU decided to act to better protect users’ privacy.

The UK’s implementation of the EU regulations is being enforced by the ICO who have issued guidance but things are never that simple! There isn’t – so far – an accepted “right” solution to compliance. The ICO themselves have taken quite a hardline approach – a bar across the top of every page asking for permission to set cookies. When this launched it had a devastating affect on their ability to analyse site usage which is vital if you’re going to build good websites.

BT and the BBC take a bit more of an opt-out approach by telling site visitors they will receive cookies unless they say otherwise.

These show the first time a visitor comes to the site and in BT’s case disappears after 10 seconds – much less off-putting and probably clearer than a simple “Do you want cookies?” prompt, but is it enough to satisfy the ICO? Only time will tell!

While the implied consent may still be unknown one thing that is generally agreed is that providing the user with more information in a form that they can understand is a Good Thing™ so that’s where we’ve started.

[I should note much of what we've implemented so far is based on a very pragmatic post by James Cridland of Media UK]

  1. We’ve added notices to key login pages like GO to say that you’re going to have to accept cookies if you want to log in. We’ll expand this to other services like the online shop and Rose Theatre ticket office in due course.
  2. We’ve added a Cookies page the the site listing how we use cookies and what for. I’m sure this isn’t 100% complete so if anyone would like to let me know gaps then please shout!
  3. We make a distinction between cookies which link to personal information and those that don’t.
  4. We link to instructions on how to manage cookie settings and mention “private browsing” modes in modern browsers as an easy alternative.

As James says in his post #3 is the most contentious:

ICO is primarily concerned with personal information and personal data – and I’m registered under the Data Protection Act and take personal data very seriously. However, Google Analytics and AdSense cookies, etc, are anonymous, and will only ever contain personal information if you deliberately log in to Google services (and even then Google claims not to link Analytics or AdSense with your Google account anyway). The same goes for Twitter and Facebook too. And the ICO go out of their way to say, in their advice: Although the Information Commissioner cannot completely exclude the possibility of formal action in any area, it is highly unlikely that priority for any formal action would be given to focusing on uses of cookies where there is a low level of intrusiveness and risk of harm to individuals. Provided clear information is given about their activities we are highly unlikely to prioritise first party cookies used only for analytical purposes in any consideration of regulatory action.

What does this look like? The cookie page is linked to from the header and footer of every page:

The Learning Edge landing page is a bit more explicit about how it makes use of cookies:

Depending on feedback from our users and others in the sector we may roll out some form of non-interrupting information box along the same lines as the BBC’s approach. We have also done some work on a cookie level chooser like BT have but the technical implementation across multiple in-house and third party systems is non-trivial.

If you have any feedback or questions about Edge Hill’s approach to cookie legislation compliance please leave a comment or get in touch and I’m sure there will be more changes to come!

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 www.gov.uk. 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 = 'http://www.edgehill.ac.uk/';
};
</script>

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!

Senior Web Designer

Hot on the heels of our web applications developer vacancy we’re also recruiting a senior web designer.

Over the last twelve months we’ve completely redesigned our website and moved to using WordPress to manage Faculty and Department websites but there’s still more to do and this post will be responsible for managing the design aspects of projects undertaken by Web Services.

The person specification has the details but please drop me an email if you’d like an informal chat.

 

Web Applications Developer

We’re currently recruiting a web applications developer. The post will join the web development side of Web Services working on a variety of systems that power the Edge Hill website and portal.

The majority of code we write is PHP, often using the Symfony web framework for bespoke developments or WordPress as the basis of lightweight content management for departmental websites.

The deadline is 17 February 27 February but if you would like an informal chat email me direct.

Event Tracking with Google Analytics

 

Previously we’ve showed how we’re starting to make use of A/B testing to measure the proposed improvements to our site. We’ve also started using other more advanced features of Google Analytics on our site.

The problem comes from some of our designs which use JavaScript to create advanced designs. The homepage for example has a feature area showing four key news stories, events or promotions but Google Analytics only registers the page loading – previously we had no way to determine which slides were being looked at.

The solution is event tracking. With this, GA can record activity other than page views. In this example we register as an event an interaction with the feature area. These are logged as “Switch 1/2/3/4″ when the corresponding slide is displayed. Loading the default slide isn’t recorded – we can get that figure from the number of page views – but clicking the thumbnail link does trigger the event.

In many ways the results are unsurprising:

Event Action Total Events Unique Events
Switch: 1 606 491
Switch: 2 593 466
Switch: 3 454 359
Switch: 4 311 255

So the further left the more often the content is viewed. We also record the title of the tab for easy reference – it’s hard to remember what story was in each position on a particular day:

Event Label Total Events Unique Events
University of the Year 2011 592 465
Jennifer Saunders in Conversation 453 358
Postgraduate Study for 2012 311 255
Scholarships for 2012 218 178
Scholarshipsfor 2012 147 129
Graduation ceremonies today 135 101
Awards ceremonies will be held as scheduled 104 87

“Scholarships for 2012″ is doubled up – there’s still some debugging to do extracting the slide labels from the H3 tag but early results are very interesting.

This type of event tracking applies to a couple of different designs based on our feature area JavaScript so we can start to measure the success of slides on the About page – Campus and Location (position #5) is second most popular link.

As will any type of statistics, the hard part is in analysing what they mean but already this has proved to be a useful additional metric we can use when reviewing our site.

 

WordPress 3.3

We’ve just upgraded WordPress to version 3.3 on the blogs.edgehill.ac.uk site. Take a look at some of the new features:

If everything goes well we will be upgrading WordPress-powered sites on the corporate website early in the new year, ignoring this helpful advice from Twitter :-)

A/B testing the mega menu

This week we’ve started experimenting with A/B tests on elements of our site design. The first results are coming in and show us some small but not insignificant improvements can be made.

Spot the difference in our mega menu:

We’ve been testing how many people visit the Undergraduate homepage from the mega menu – Google Analytics stats show many more people go straight to the courses page than to the top level page.

Using Google’s Website Optimizer we can test the two versions with and without the heading underlines to see which performs better. After four days the stats show the version without the underline performs 9% better at driving people to the Undergraduate homepage.

This was a very small experiment but in future we’ll be testing more fundamental elements of our designs. Apologies if this makes you feel like a lab rat!