Personas; decentralised web publishing; the web turns 20 (again)

Here is this week’s selection of articles and resources.

Don’t let user experience design methods die

Some debate on user experience design methods such as personas and user journeys. Rian van der Merwe argues that such techniques are useful for large organisations.

At large organizations, not everyone is focused on and has an understanding of what experience design is about. There’s often a lot of “I am the user” thinking going on, and an inability to see interactions from the perspective of users. In those circumstances, personas and user journeys in particular can be enormously beneficial to help the organization see their products from a user’s perspective.

Data driven design research personas

A set of slides containing some more tips on personas.

They keep you out of the user.

Decentralized publishing equals amateur web management

Gerry McGovern calls the decentralised publishing model “disastrous”. The tendency is for organisations to view web management as a technology problem that would be solved by buying software, when it reality it is more of a people problem. Gerry McGovern advocates a mixed approach: a central team with expertise in writing for the web, navigation and search; and decentralised staff members who are the subject experts.

In most situations, the decentralized publishing model has been disastrous. The people trained tended to be relatively junior staff, for whom publishing to the website was just one more responsibility. The result was lots and lots of poor quality content that was never updated or reviewed.

The world wide web is 20 years old! (Sort of.)

Cern re-creating first web page to revere early ideals
New Cern project to restore first-ever website
Restoring the first website

As we know here at St Andrews, all great institutions celebrate their significant milestones over a period of a few years. The same is true for the world wide web, which is celebrating yet another of its 20th birthdays this week. Depending on what you mean, the world wide web was born in either 1989, 1991 or 1993. This week marks the anniversary of the day Cern announced that they were making the web free for all. To mark the occasion, Cern have launched a project to restore the world’s first website and preserve the original hardware and software used at the birth of the web.

Gov.uk wins design award; usability for teenagers

I have begun to share interesting articles, along with my comments, with some staff members internally. It has been suggested that it would be good to publish these on the web team blog as well. So here they are.

---

Government Digital Service design principles
Government Digital Service content principles

This week Gov.uk won the Design of the Year award. It was up against some strong competition, including the Olympic cauldron, the Raspberry Pi computer, and medicine kits designed to be distributed in the gaps in Coca-Cola crates.

Gov.uk combines all of the UK Government’s digital services into one single website. The clear and simple design is strongly focussed on meeting users’ needs, not the government’s needs. This what we should aspire to. The GDS have been very open and inclusive about the design process. Their list of design principles contains a wealth of insight into the thinking that is making their website so successful.

Teenage usability: designing teen-targeted websites

This is important from our perspective as many of our target users are teenagers. It is a mistake to think that young people are better or smarter at using the web. This article looks at how teenagers use websites, busting a few myths in the process.

The main thing I took away from this article is that teenagers come across all of the same usability problems that adults do. Moreover, they are more easily upset by usability problems, so are even more likely than adults to be driven away by a badly designed website.

Teens are not technowizards who surf the web with abandon. And they don’t like sites laden with glitzy, blinking graphics. Teens are often stereotyped as only wanting things that are bold and different. They’re also often viewed as being fearless about technology and constantly connected to some form of media. Although this might be partially true, it’s an oversimplification and letting this steer your design can lead to disastrous outcomes.

Teenagers (Ages 13-17) on the Web (excerpt)

An excerpt of the original report mentioned above. This contains some interesting information about teenagers’ security fears surrounding certain types of content (such as opening up new browser windows), and restrictions placed on internet usage by people’s parents and schools. Many users report being unable to use Flash or read PDFs because they are not allowed by their parents to download any software or browser plugins, or because they are blocked on schools’ networks.

“You have to download it. I would go somewhere else, because I don’t have Acrobat Reader on my computer.” — 16-year-old male

“Why do I need Acrobat Reader to see this page? Any Acrobat program is hard to get and it’s expensive. Most people that go on here will not have it. I don’t have Acrobat Reader at home. It’s expensive.” — 14- year-old male

New website for the Writing Room at St Andrews

A few weeks ago the web team had a visit from Jonathan Falla, a local award-winning author and course leader for both the Creative Writing Summer School and now The Writing Room at St Andrews. It was about the latter that he came to see us about.

The Writing Room at St Andrews is an online creative writing course that is part of the University’s Open Association programme which begins in October and runs through to March the following year. Jonathan wanted a new ‘brochure’ website to help promote the course.

Having listened to Jonathan’s requirements, and having sketched out a rough page structure Jonathan went off and wrote the text for the site. Ah! What a refreshing difference working with a professional writer: it was short, clear and submitted exactly when he said it would be.

The Writing Room at St Andrews

We decided very early on that we’d use WordPress, using the Twenty Twelve responsive design because that’s the platform we use now for this kind of site, and Jonathan already has experience of using WordPress. It made sense as we just wanted to get the site up-and-running as soon as possible.

This has possibly been one of the fastest multi-page websites I’ve worked on, taking a little over four hours to complete, including image selection and editing. I’m pleased with how the site is looking, it’s been a fun short project to work on and I definitely, definitely recommend using a professional writer when requiring well-written copy… more of that please.

A change in role

This month, I have begun a secondment to Admissions. I will still be working on web projects. But my focus for the next 18 months will be on webpages for Admissions and Corporate Communications.

From my point of view, there are a few different motivations behind the move.

1. After over three great years working as part of the web team, I felt like it was time to try something new.
2. The Admissions project will give me the chance to sink my teeth into an important project, which is quite exciting. Being seconded to Admissions will give me the space required to push on without being diverted.
3. The coffee at St Katharine’s West is nicer.

Progress so far

For the past few months, I have been participating in Lean sessions with a group of staff from Admissions and the wider University community. We were only able to meet for a total of five days spread across roughly as many weeks. Despite the stop-start nature of our meetings, I think the results of them have been very good. Together, we have come up with the foundations of a strong information architecture, and some great ideas on functionality.

Over the years I have been involved in a few different sessions looking at information architecture with different departments. Often, such sessions run into problems. Many people become fixated on their own small sections of the website, at the expense of the bigger picture. Worse still, some try to structure a website based on the structure of the organisation, even if this would be confusing to the user.

Thankfully, the Admissions Lean group has (for the most part) avoided these pitfalls. There is strong agreement within the group that webpages should be user-centred, and that we should avoid imposing University structures or jargon on anyone that doesn’t need to know it.

I have really enjoyed participating in these Lean sessions. They avoid the need to get too bogged down in rigid processes. They also provide the scope and freedom to come up with creative solutions, without too many cheesy appeals for blue sky thinking.

For these reasons, I am excited to be working on the Admissions web project, and optimistic about what we can achieve.

New website for the Andrew Marvell Society

While the majority of our work in the web team involves developing and maintaining the main University website, using our enterprise content management system TERMINALFOUR Site Manager we do occasionally get asked to develop sites for other areas of the University such as schools and research centres. It is one such request that I’ve been working on for the last couple of months.

Sometime during the last quarter of 2012 we were approached by Dr Matthew Augustine of the School of English to migrate the websites of the Andrew Marvell Society from their current location, hosted by St Edward’s University in Austin, Texas to a new, custom-built site hosted here in St Andrews.

WordPress

During initial discussions about both features and resources we decided to use our new installation of WordPress multisite. This is something that we’ve been keen to use for many years; a simple lack of resource to support it was, I think, the main hurdle to getting it installed.

While I’ve done quite a lot of work with WordPress as a standalone application, and as part of the hosted WordPress.com service this is the first time that I’ve had to develop for a multisite-enabled installation, and actually the first serious work I’ve done with WordPress for about five years (having been developing with it since version 0.7).

Theme development

Development, I am pleased to report, has been fairly straight forward. We decided to start with a pre-developed, responsive theme (GoodSpace by Goodlayers) and customise it to our requirements.

I selected this particular theme for a number of reasons:

• Similar design
  It was very similar to the design that I’d loosely sketched out on paper with Dr Augustine. (He had wanted something that was comparable to the look and feel and tone of the Milton Society of American website; Marvell himself was a friend of John Milton.) 
• Page builder and shortcodes
  I was very impressed with the theme’s built-in page builder and shortcodes, which seemed to offer a simple way of creating complex page layouts. After all, once I hand it over I’m not going to be the person who is maintaining the site.
• Speed
  This approach got us up-and-running much quicker than if I had needed to develop a new theme from scratch, even basing it on one of the default WordPress themes.

Having used premium themes before I was pleasantly surprised by the quality of the documentation shipped with this theme. The theme also came with an example site XML file which I imported and then spent a day exploring to understand how the various built in plugins and features worked.

Agile development

I’m using an Agile-style iterative approach to development, with one week iterations (or sprints), regular meetings and demonstrations with Dr Augustine, and using Trello to plan and manage iterations. I’ve really enjoyed this approach.

Planned sprints for the next three weeks.

One of the principles of the Agile manifesto is “responding to change over following a plan”. I had scoped out the project for the first four sprints, planning to implement a new feature at the end of each sprint (join up form, migrate the newsletter from another WordPress site, implement a bbPress forum, etc.).

I had planned to implement the join up form this week, but I got an email from Dr Augustine on Monday morning saying “my next priority is to get the old newsletter rolled over to the new site”.

Great! So, that’s my next priority now too. I swapped the order of two columns in Trello, renamed them sprints 2 and 3 accordingly and got to work researching custom post types.

That’s the story so far.

We launched the site last Tuesday, three days early, and as you may be able to see from the fuzzy image above we’ve still got things planned out for the next few weeks. In good Agile style, we wanted to get a working site up and running and then incrementally add to it. Which has also been a really satisfying and motivating way to work.

This is fun… I’m going back to work now.

Footnote

By the way, if you’re wondering who Andrew Marvell is, he was an English metaphysical poet and politician who lived between 1621 and 1678. You can read more about the life and work of Andrew Marvell on Wikipedia.

Also, this has been unexpectedly one of the hardest projects I’ve worked on in terms of spelling the person’s name right! His name is Andrew Marvell. I work in St Andrews where we have a halls of residence called Andrew Melville Hall. How many times have I written Andrews Melville?

Website roadmap

A couple of weekends ago we upgraded our enterprise web content management system, TerminalFour Site Manager, from v.6.2 to v.7.2 This has been a major upgrade, and something that we’ve been gearing up to for the last two years.

Prior to the upgrade we held a number of demo sessions to show users what the new version would look like. Feedback has been, generally, very positive.

At those sessions we also handed out an information sheet informing users where we see ourselves heading in the next year or two. The following is a slightly updated version of that roadmap.

Roadmap

As part of the upgrade to the new version of Site Manager we have been reviewing the following areas with a view to improving the user-experience for both content editors and website visitors. The following is a summary of changes that will be implemented during the coming months.

Infrastructure

Over the summer and autumn we have been upgrading the website infrastructure, for example moving to new, faster servers. There are a few other enhancements that we are currently testing which will improve the reliability and reputation of the website.

Related content

We plan to simplify the way related content is managed. This will remove the need to tediously hunt down rel_{something} sections. We also plan to make things more efficient by using existing data for contact details, for example, pulled from central databases.

Faster publishing

The new version of Site Manager is significantly faster than the previous version. While the main university website used to take 40 minutes to publish, it now takes just under five minutes enabling content to be published more frequently.

Lowercase URLs

Since the launch of the website in 2007 URLs have been published using a mixture of upper and lowercase letters. To improve consistency and make URLs more predictable we have now switched the website to use all lowercase URLs.

Standards and consistency

We are in the process of looking at how to improve and standardising many elements of the website content to offer a more consistent user experience.

Style guide

We are in the process of updating the web content style guide. This will be published online in the coming months and will cover guidelines on spellings and formatting, as well as certain Site Manager elements like naming conventions.

Writing for the web training

We would strongly recommend that you attend writing for the web training. We run courses regularly; please check PDMS for dates of the next course.

Users

We have recently removed around 130 user accounts: 70 accounts that have never been used since attending a Site Manager training course and a further 60 accounts that have not been logged into during the past 18 months. Coupled with an issue of some users requiring to update content only once a year, this has highlighted a need to reduce the number of content editors but increase the remaining editors’ skills.

Review user accounts and permissions

Changes in the way that Site Manager v.7 manages users means that we need to review how permissions and editing rights are assigned to our current users. We will continue to monitor which users are accessing Site Manager infrequently to ascertain whether they really need access or not.

Training

We plan to run more frequent Site Manager and writing for the web training courses (see PDMS for dates).

Design

The web is continually evolving and we need to respond.

Mobile web

We will be moving to a design that is more responsive to mobile phone and tablet devices, as well as the laptop and desktop devices that the current website is optimised for. It’s an exciting time for web development, particularly as the new HTML5 and CSS3 standards continue to take shape offering new possibilities.

Using Trello from within Microsoft Outlook 2010

Trello board

If you’ve been following this blog for a while then you’ll know that almost a year ago we moved our Agile board to Trello. It has been a great success.

Last year the University also moved both our email and meeting scheduling software to Microsoft Exchange. I’ve been a fan of Outlook since about 2000, first synchronizing it with  my Psion PDAs and then with a Windows Mobile smartphone. I do pretty much all my planning in Outlook. Or at least I did, until I discovered Trello.

So my question was: how can I use Trello within Outlook? Then I remembered Outlook’s little-used shortcuts feature.

1. Open up a Trello page in your browser. It doesn’t really matter which browser. I’m using Google Chrome 23 beta for speed.

2. Now drag a bookmark onto your desktop from the address bar .

Browser shortcut from Trello page on PC desktop.

3. Next, open up Microsoft Outlook and click on the Shortcuts icon in the left-hand navigation pane; it has a shortcut key of Ctrl+7.

Shortcuts sits beneath Mail, Calendar, Contacts, Tasks, Notes, and Folder List

4. Now drag the icon from your desktop onto the label “Shortcuts”. It won’t work unless you drop it right on the word “Shortcuts”.

5. Next, right-click the new icon (which will by default show the URL) and select “Rename Shortcut” from the context-menu, to give it a more user-friendly name.

Drag the shortcut onto the Shortcuts label, then right-click to rename it.

6. Click on the new shortcut link. Now you have Trello displaying within Microsoft Outlook. You can have as many shortcuts as you like, to as many boards as you like but remember you can always change boards within Trello too.

As far as I can see (using findmebyIP.com) it’s using the Microsoft Internet Explorer 7 engine to render the page, so obviously if FogCreek Software stop supporting IE7 in Trello then this top tip will stop working.

Trello being displaying within Outlook 2010

Update

If you want to take the Outlook/Trello integration even further you can now use Emello, which allows you to send emails directly to lists within your Trello boards. I’ve not used the service myself, but it certainly looks useful should you require that functionality, and the website looks slick and professional.

IWMW 2012 in Edinburgh

Neil Allison presenting on Experiences in User Centred Design at the University of Edinburgh

About a month ago (this blog post has taken ages to write) I travelled down to Edinburgh with my colleague Duncan for the annual Institutional Web Management Workshop (IWMW) which this year was being hosted by the University of Edinburgh under the theme of “Embedding Innovation”.

Venue

This was my fourth or fifth IWMW conference, since I started working in higher education in 2006, and was by far the easiest to get to. I know Edinburgh fairly well, having lived there for five years; two of those years was spent in Marchmont, just a stone’s throw (using a bionic arm) across the Meadows from the conference venue at Appleton Tower, which I discovered was named after physicist Sir Edward Appleton (1892-1965).

Appleton Tower—bless it—isn’t the bonniest of buildings, either inside or out. It is joked that Appleton Tower offers one of the best views of the Edinburgh skyline as it is the one view that absolutely guarantees that Appleton Tower isn’t a part of it. In my experience, it wasn’t the most comfortable conference venue but it also wasn’t the worst.

The accommodation on the other hand was lovely, at nearby Pollock Halls.

View from my room at Pollock Halls

In fact, it was lovely in both my rooms. I noticed that the shower was broken in my first room, which had a pleasant view (above) of the accommodation office and St Leonard’s Hall, which you’ll notice was built in the Scottish Baronial style, so I was moved to a room with a fabulous (and gently uncomfortable) double bed and a view of the Salisbury Crags.

Workshop sessions

I signed up for three workshop sessions:

1. #A2: Experiences in User Centred Design at the University of Edinburgh, with Neil Allison (University of Edinburgh).
2. #B3: Large-Scale Responsive Websites: Tools and Techniques, with Keith Doyle (Navopia) and Paddy Callaghan (University of Bradford) .
3. #C1: Responding to the Cookie Monster, with Claire Gibbons (University of Bradford) and John Kelly (JISC Legal).

Each ‘workshop’ session was 90 minutes long—too long in my opinion, and suited more for those whose learning style has ‘lectures’ right at the top. The thing about workshops is that I expect to leave it with something useful, something usable. To my mind ‘workshop’ implies a more hands-on approach, more discussion, more trying-it-out for ourselves.  The word ‘workshop’ implies that something is going to be built; the context implies that it’s me that’s going to do the building. Criticisms aside, I enjoyed at least something from each of the sessions.

A few things that I took away from each of the sessions:

Experiences in User Centred Design

I particularly enjoyed Neil Allison’s explanation of user personas: “hypothetical archetypes of actual users” who represent real users during the design process, such as departmental secretaries, heads of school, international students, etc. One neat tip was to use alliteration in choosing their names to make them more memorable, e.g. Angela Admin, Herbert Head-of-school.

I would have enjoyed working in a small group to create a persona for ourselves, as an exercise. That would have really given it more of a hands-on feel.

Large-Scale Responsive Websites: Tools and Techniques

This was a very popular session that would have had the building’s fire officer sweating with worry; in fact it had us all sweating the room was so packed.

This workshop was in two parts. Paddy Callaghan gave a high-speed tour of a recent responsive web design project he’d been working on. There were two main elements here: the design decisions about what should show or hide at different sizes, and the practical coding of the responsive site (meta tags used, how media queries work, etc.) I would have appreciated 90 minutes on this alone—even given my previous comments about workshop length.

Keith Doyle then gave us a tour through a design pattern library for responsive sites, which I found particularly interesting and helpful. I took copious notes… and then lost my notebook on the train on my journey home. Bah!

I wasn’t surprised how popular this session was. Responsive web design is on a lot of people’s radars. My only criticism, really, is highlighted in a post by Garr Reynolds about scope vs depth. This presentation tried to cover both. In the end I experienced quite a bit of information-overload. I would have happily listened to half of the material but in greater depth.

Responding to the Cookie Monster

Ah! The session looking at the recent EU cookies legislation was, as you might expect, popular; unlike the legislation.

While it was interesting listening to someone from JISC Legal, I didn’t leave with any clearer an idea of where we go from here. Except that I now have a sneaking suspicion that we need to do more about this.

Conclusion

Like many of these conferences the most valuable thing that I got was the opportunity to network with members of other university web teams, to make new connections and build on existing relationships.

A huge thank you to everyone who was involved in making IWMW 2012 such a success. I’d better go now, I’ve got some innovation to embed…

Website help redesign

Redesigned website help page

In many ways it has felt like that saying about the cobbler’s shoes: we spend so much time fixing other people’s websites that we don’t have the time to fix our own.

But no longer!

This week we finally redesigned the website help pages.

The old pages had been there since we launched the website in 2007; very little had changed and a lot of the information was wildly out of date (sorry about that!).

In this redesign we’ve highlighted two things that we get asked most: how to report a problem and how do we book onto training sessions for T4 or writing for the web? These are now our biggest buttons on the right-hand side.

Combining sections

We’ve also moved the terms and conditions pages (which includes information about privacy and cookies) into this website help section, as well as the information about T4 Site Manager. It’s nice to have those consolidated at last. It made sense to group them under “website help”.

How to…

In moving things around I also discovered twelve pages about “How to…” in T4 that were written by Duncan and have been waiting for approval since 2010!

I think the original idea was also to include videos (screencasts) but when that never happened some pages that should not have been forgotten were lost. As Tolkien might have written.

Even without videos the pages were packed with really useful information, so they’re now live finally.

Conclusion

All in all, it’s been fun to get our own house into order. One of the drivers for this redesign was a project that I’m currently working on to standardise various areas of web development here at St Andrews, including a standard coding framework, design guidelines and coding style. I needed somewhere to put them… and now I have.

Now… back to playing Asteroids, which I’ve just learned was made by Atari and not Konami.

Essential web developer skills

Lazy Guy photo by David Clark (iStockphoto)

In the next few months we’re going to be gearing up to fill two posts (one replacement and one new post) to join the web team: a developer and an apprentice. So I’ve been thinking about a couple of things:

1. What skills we are looking for in new team members?
2. What skills do we already have that we’re maybe not using to their best potential within the team, or which have become a little sloppy and undisciplined that we need to work on.

I liked this comment in an article by Dan Frost on .net; it is point 6:

That search for ‘essential web developer skills’ brings a nice answer from Michael Greer (The Onion’s CTO) on Quora:

Laziness:

Refuses to do anything twice: writes a script or algo[rithim] for it.

Cowardice:

Thinks to test, worries over load and code impact.

Recklessness:

Tries new stuff constantly, launches same-day ideas.

Cowardice is a nice way of phrasing ‘attention to detail’.

— “10 things web developers must know to become truly amazing” on .net

I remember a conversation years ago with an architect who said that he valued lazy people, because they showed him how to do things with the least amount of effort. It was from him that I also learned about cowpaths (“look where the paths are already being formed by behaviour and then formalize them”).

I like how Greer put it: refuse to do anything twice. Don’t repeat yourself; the DRY principle. Use frameworks, save snippets of code that you use often (my coding editor allows me to collect code snippets in an in-built library), don’t reinvent the wheel again and again.