Archive for the ‘design’ Category

We received an enquiry about the BUCS website, which I initially built a few years ago. I planned the information architecture based on a card-sorting exercise where users identified where they would look for specific topics.

I put each page title from the old site on a card and invited the card-sorters to organise them into categories. I allowed them to decide the categories (so it was an open card-sort).

We are using the OpenCms content management system.  This allows good workflow; permissions are fine-grained, and allow some users to contribute content and others to review and publish it.

The initial re-draft of the BUCS site was done by two students; one was studying for an MSc in Science, Culture and Communication, the other for an MSc in Human-Computer Interaction. Then we handed it over to a team of five editors, who had publishing permissions, and the rest of the department were able to contribute content but not publish.  Subsequently the department recruited an overall content editor who manages the site, and she has also done a lot of work on the information architecture in consultation with users and department members.

I used the strict hierarchy model from this tutorial on information architecture models as being the most compatible with the design of the template which someone else had already come up with.

From subsequent user testing and feedback, it became apparent that people ignored the horizontal menu and just looked at the left-hand menu.  This is why we have opted for just having a left-hand menu in our new design. But it is still a strict hierarchy IA model.

New study website
New research website

As part of a major project to look at the online branding of the University, we held a workshop on the 22nd of May. It was led by Laura Francis, a consultant on user centered design (a brief bio can be found at the end of this post), and attended by 15 representatives from various departments including RDSO, Admissions, School of Management, Corporate Communications, and IDPS.

The goal of the workshop was to create a design brief that I as the web designer can use to create a new online identity, that stems from the combined input of eveyone present and conforms to criteria agreed at the workshop. In addition, a full report on the workshop was created and I will be publishing some extracts from that within this post (italicised text).

Continue Reading

Off we go! by Tom Natt

Off we go! by Tom Natt

Why do paper prototyping?  It’s cheap.  It’s fun.  You get to move small green pieces of paper around, and play with scissors and glue.  And you can reinvent your information architecture several times in a day just by moving a piece of paper or two.

We started by reading an article about paper prototyping on A List Apart, which was helpful, but we could also have used more of the principles of card sorting, which is a similar exercise.  There are two types of card sorting – one with predefined categories, the other where the category title emerges from the grouping of the content.  We started by thinking that we had predefined categories, and then discovered that actually we needed to change the name of a couple of the categories, so perhaps the second type of card sorting approach would have been more appropriate.

Grouping complete, by Tom Natt

Grouping complete, by Tom Natt

Because of this confusion, we produced a storyboard but not many actual page mock-ups.

However, the paper prototyping approach allows a group of people to gather round a storyboard and discuss what content fits where, and try out moving it to a new location.  Having the bits of paper in front of you gives an overview of the structure of the site, which is harder to visualise with a directory tree.

It’s also easy to change the name of a section; all you have to do is write a new post-it note.  You can use different coloured notes for category headings and pages, which helps with visualising the structure.

Completed prototype, by Tom Natt

Completed prototype, by Tom Natt

Making a page mock-up was a lot of fun.  We created widgets and sections out of different-coloured post-its and stuck them to a sheet of A4.

This is a mock-up of the research homepage, with a searchbox, featured news and themes, and sections about the RAE, managing our research, publications, research jobs and postgraduate opportunities, a title section with research-related images, and global navigation at the top.

Note the fabulous drawings by Yvonne and Alison, and the lovely rounded corners on the various widgets and sections (much easier to do with scissors than to implement in a cross-browser compatible way).

You can see the drama of the paper prototyping as it unfolded on Tom Natt’s Flickr set.

In SCRUM there’s an essential role that has to be fulfilled by someone who can’t partake in the work tasks from a project. They are called the SCRUM Master.

That isn’t to say that the SCRUM Master doesn’t have tons of work to do. In fact, if they don’t do their job properly, the “sprint” of tasks the team are to undertake isn’t properly organised and hence affects their productivity.

So if you’re not the SCRUM Master, surely you’d think that it’s unfair as you’re doing “actual” work rather than “mere” project management? Well no, in fact. The SCRUM Members (it’s not an official term I don’t think – I made it up. I’m imaginative like that) actually have it easier. Your entire focus is on your task at hand, nothing else, and that task should have been broken down into a working day-sized chunk but no more. You have nothing else to worry about, even when you get to a point that you can’t do your work – that’s for your SCRUM Master to do! They deal with impediments on your behalf you see :)

A recent example was when Phil had a pile of support queries to deal with which were stopping him from getting on with his project work. His SCRUM Master Andy Male took those tickets away from Phil and dealt with them, allowing Phil to get on with his tasks.

Essentially, it’s the SCRUM Master’s role to make it as easy as possible for you to get on with your work and from my observation that takes a lot of effort. With all that hassle taken out, working becomes much easier for the members.

A truly fair management style! The rest of Web Services seem to agree.

As part of the latest sprint for the online prospectus, we looked at the possibility of reusing the Course Structure diagrams that are part of the printed brochure.
As the old adage goes, a picture paints a thousand words (and these pictures have words on them as well, so that’s probably something like a million words worth of content in each graphic…), so it was essential we found a way to use them online.

One issue we had to resolve was the legibility of the text contained within the diagrams when they were downscaled to work within a web browser – of particular concern was the fact that all the text was faced in a Serif font. A few hours of research and playing with real world examples and we came to the following conclusion: in general, there is no difference with legibility between Serif and Sans Serif fonts – it comes down to the end user’s familiarity with the font and therefore their ability to ‘interpret’ it. Alex Poole has published a really good essay on this matter.

Continue Reading

Alrighty then.

Firstly, many thanks to Alison for thrusting me into the limelit microscope that is this blog :)

As some of you may know, I have worked as a web designer for almost 10 years now – in fact for those of you interested this is my very first professional website (circa 1999).

Yes, it’s terrible - I was young, I needed the money.

Thankfully, times have moved on and my current portfolio is – hopefully – a little more illustrious (and sans nested tables).

Continue Reading

© Copyright University of Bath. All Rights Reserved.