World Usability Day in Bristol

Last week, the World Usability Day Bristol was hosted in MShed, a building that is home to Bristol’s city museum with the same name.

The view from MShed

World Usability Day 2013 happened in lots of cities all over the world. This local edition was organised by Nomensa, a digital agency based in Bristol. The conference featured speakers discussing a variety of subjects, including interaction design, accessibility, dark patterns and the possible future of the web. It was well organised: the venue had a great view of Bristol, lunch, scones and tea were all taken care of and all of tickets were very affordable.

My focus here will be on three talks that I particularly liked, about practical abstraction, the BBC’s super accessible olympics website, creating cross channel user experiences.

Dan Klyn: practical abstraction

In his talk, Dan Klyn focused on architecture, rather than design or usability. He tried to connect ancient Roman architecture principles to modern information architecture principles.

In Roman architecture the triad of firmitatis, utilitatis and venustatis were considered the main principles of architecture. Roughly translated, they correspond to strength (or firmness), commodity (or utility) and beauty, respectively.

In Roman architecture the triad of firmitatis, utilitatis and venustatis were considered the main principles of architecture.

Different architects in history can be said to adhere to different equations of those three principles. Buildings that were designed by the American architect Frank Lloyd Wright often had leaking roofs, they lacked firmitatis, but they were both useful and beautiful. A software example: Apple’s first release of Apple Maps for iOS tended to show people plainly wrong directions, but its use could easily be seen and it looked beautiful.

There are also examples of two properties giving rise to a third. The architect Johnson was famous for designing buildings that were strong and beautiful buildings, and therefore functional. One could say their utility derived from those former two properties. The German architect Gropius, the founder of Bauhaus, designed buildings that were strong as well as useful, and therefore beautiful. One could say its beauty derived from those former two properties. An example of this from software design is Craiglist: its beauty is in the combination of its strength and utility. Rather than having one property derive from the combination of the others, one could also ‘add’ one of the properties to a combination of the others. Gumtree is an example of this: it is strong and useful, and a visual design layer has been added to that, as a third property.

Other principles from architecture that we might want to apply to web design: order, arrangement, proportion, symmetry, appropriateness and budget-friendliness.

Alistair Duggin: the BBC’s accessible olympics website

Accessibility was a high priority in building BBC’s website for the London 2012 olympics. Front-end developer Alistair Duggin shared some of his experiences working on this huge website.

The BBC aimed to deliver content about the Olympics to as many channels as possible, such as tv, radio and internet. On the internet, the BBC aims for a high degree of accessibility. “The BBC is paid for by everyone and therefore must be accessible to everyone, otherwise the BBC is not the BBC.”, said Michael Grade, Director General BBC 2004-6.

The BBC is paid for by everyone and therefore must be accessible to everyone, otherwise the BBC is not the BBC.

The website was built around a sports ontology: athletes connected to countries and events, events connected to a ventue and sport. All of these ontology items had their own pages, so there were pages for all of the 10000 athletes, 205 countries, 36 sports, 304 medal winning events and 30 venues, and they were all interconnected.

Making something accessible is not as easy as it sounds. An extra complication was that all the templates had to be right when the site was put in use, which was when the Olympics started. During the Olympics itself, there was a code freeze (except for very urgent bug fixes).

The website was a great succes: it was viewed by 37 million UK browsers (57 globally). Many have viewed it on mobile (9.2 million mobile browsers, 12 million requests for video from mobile devices, 34% of all daily browsing by mobile).

These things helped making the BBC’s London 2012 site more accessible:

• usage of a front-end style guide, to keep code consistent (more consistency is better for users)
• front-end was built component-based; a component could generally drop in most parts of most pages
• progressive enhancement was used: pages were built in ‘layers’, so that the basic content was accessible to anyone
• content was added in logical order, alt text added to images that needed it, tables had captions, abbreviations had their full text in the code
• in the HTML the team used: the HTML5 doctype, lang-attribute, skip-links, a unique <title> and <h1> and WAI-ARIA landmark roles, hierarchical heading structure, no duplicate links, alt text if they would not duplicate, links that were sensible outside their context, correctly coded forms and tables
• in CSS, the team was careful not to implement barriers with CSS; display:none was only used when strictly needed, focus-styles were defined, outline:0 and !important were avoided, colour contrast was checked and the lay-outs were checked without JS and images
• *in JavaScript, the team used feature detection, generated only valid HTML, updated state labels such as ‘open’ and ‘close’ appropriately, made all content accessible via keyboard and took care not to add keyboard traps
• WAI-ARIA was used as an enhancement for those users with devices that support it, for example to keep users informed, manage focus, implement keyboard controls and provide hidden instructions

Andrea Resmini: cross channel experiences

Andrea Resmini talked about how websites have gotten more deeply integrated in our world, and cross channel services.

The difference between multi channel services and cross channel services is that the former serves A, serves B and serves C, whilst the latter includes A, B and C.

Computing used to be bound to a very specific time and place, e.g. a computer would not follow you. Today, cyberspace is very deeply integrated into the world around us. It has become much like a layer.

In a city we are said to ‘know’, we have a mental map of that city. In the first few days in a new city, we are able to create such a mental map. Now with digital products, this is not much different. A digital product like Facebook is much like a city that we have a mental map of. Their app on our phone is part of this, and so are the friends we know to be online in its chat service.

The architecture of information spaces comes down to the information architecture of places.

We ‘know’ a place, because we know specific characteristics of it. Those characteristics make up our memory of the place. If we want to create a cross channel experience that is easy to navigate, we should concentrate on creating characteristics. The architecture of information spaces comes down to the information architecture of places.

Recommended reading: Manovich, The language of new media