User experience blog

A to Z or not?

By Yeevon Ooi on 12 January 2011

A question was raised during a recent presentation on why we recommend avoiding using alphabetical lists for organising the content pages for a website. It was an interesting question because alphabetical lists are rarely used except under specific circumstances. So when exactly and why do we use or not use alphabetical (A to Z) lists?

Why A to Z lists don’t work

The simple answer is we don’t hold mental models of the world around us in an A to Z list.

If we want to go to a store, we don’t populate an A to Z list of the stores in our heads. Instead we make decisions based on criteria which we deem as important while choosing which store to go to (e.g. distance from home, opening hours, availability of products we’re looking for, price etc).

Similarly, when we navigate around a website, we have specific goals in mind.

Think trying to pay council tax online. Most of us will probably look for keywords such as  ‘Pay …’ or ‘Council Tax’ on the homepage (which could potentially be in two different places if it were to be listed in alphabetical order). It’ll make little sense to us if a list of options on a council website is being presented in a long alphabetical list. In fact, most council websites now have standard ‘Pay it’, ‘Report it’ and ‘Apply for it’ sections to make it easier for site visitors to complete main tasks online. In this case, if one is trying to pay council tax online, he or she will most likely go to the ‘Pay it’ section as it clearly reflects the user goal of wanting to pay one’s council tax.

How should we organise information if not from A to Z?

User research such as interviews and usability testing while thinking-aloud can reveal how people search for information, suggesting ways to organise content according to people’s mental models.

Card sorting is also an effective method in finding out how people organise a set of specific items. By understanding how site visitors expect items to be organised on a site through a card sorting exercise, a better site structure can be created to match that mental model.

When does an A to Z list actually work?

It can work if people know what they’re searching for. It can also be effective for listing items from a very specific category which has fixed terminology (e.g. a list of all the countries in the world).

Having said that, most information can be organised based on other criteria apart from A to Z. This is because we have different experiences and goals which account for the way we organise and search for information. Providing sorting options (e.g. by relevance, price, popularity, recency, and etc) is a popular way to cater for these different needs that people have while browsing a website.

Enhancing traditional books with technology

By Philip Webb on 11 January 2011

In a previous blog, I explored the idea of merging interaction and narrative. But what about using interactive technology as a complement to reading?

Now that books can be read on a dedicated e-reader or tablet device, the possibilities for enhancing or changing the experience of reading narrative text (either fiction or non-fiction) are truly exciting. Marcus du Sautoy, the author of The Num8er My5teries, a book about bringing maths to life, makes use of a gaming app and web content to supplement the static text with visual interactive material so that readers can try out the puzzles for themselves. His excellent article Into the Unknown discusses some of the opportunities and limitations of this new publishing technology.

My reservation is that the act of reading is such a singular and focused experience, that any interactive add-on to the text on a device may just interrupt the flow. Reading may seem passive but the interaction between reader and book can be highly active whereby the reader re-creates the world of a novel in the mind. Apps that offer complementary content such as interactive family trees, maps, glossaries and author interviews need non-intrusive interfaces that don’t distract the reader from the main experience. Mobile Art Lab’s Phonebook allows an iPhone to be placed inside the covers of a book to deliver content appropriate to the current page. Such seamless augmented reality solutions offer a way for physical books to be enhanced by interactive technology.

The Alice app for the iPad offers animated scenes using artwork from the original Alice in Wonderland book to ‘bring the characters to life’ which is more a re-invention of what a book is than a complement to the text.

What’s interesting is that the possibilities for interactive technology lie at any point along the spectrum between complementary apps for traditional paper-based books and complete re-imaginings of what a book can be. And often the nature of the content itself can determine what blend of traditional linear text and interactive content will work.

Saving jQuery accordion state on post

By Steven Datt on 7 January 2011

Here’s something I picked up by experimentation during the development of a CRUD system, which managed users, inventory, orders and reservations. The question was, how do I have page specific forms to add, update, and delete entries?

The answer was the accordion.

The problem with using the accordion in this way from a usability perspective is it won’t save the tab you were on if you post a form (e.g. if you have an update form in tab 2, where you select an ID from a drop-down box and submit to populate the form fields with the information in the row selected).

“Remembering” the state can be achieved with a PHP statement:

if (!$_POST['update_select
'] && !$_POST['delete_select']) {
?>
<script type='text/javascript
'>
$(function() {
$(
'#name_of_accordion').accordion({ collapsible: true, active: false });
});
</script>

This code says if an update or delete id select form hasn’t been posted, initialise the accordion without any tabs active. (active: false).

Right underneath that, add the next conditional statement:

}
if ($_POST[
'update_select']) {
?>
<script type=
'text/javascript'>
$(function() {
$(
'#name_of_accordion').accordion({ collapsible: true, active: 1 })
});
</script>

This statement adds a new property, active: 1. This tells the accordion that this tab should be open when the page loads (note: if you’re wondering why it’s 1 instead of 2, it’s because arrays always start at 0).

The last part of the statement handles the delete selector:

}
elseif ($_POST[
'delete_select']) {
?>
<script type=
'text/javascript'>
$(function() {
$(
'#name_of_accordion').accordion({ collapsible: true, active: 2 });
});
</script>

This statement does exactly the same as the update_select section, but corresponds to the delete selector. Now simply close off the elseif statement and you’re ready to roll:

}
?>

I hope this tip helps you as much as it helped me!

Photo credit: Crevier via Flickr/Creative Commons

What’s happening at Webcredible

By Trenton Moss on 5 January 2011

2011 is now here and a happy new year to you all from the Webcredible team! The Webcredible offices shut down between Christmas and New Year and it’s always strange to be back in the office after this time off.

Much of December was spent winding things down in the office, with more and more people seeming to be off on holiday in the run up to Christmas. I spent my time finishing off our selection process for our new head of business development role, with us offering the job to one of almost 100 applicants.

We also had our annual Christmas party, which was as fun as usual, this year featuring some late-night crimes against music in the karaoke booth. Fortunately, we had it on a Friday night meaning no meetings to get up for the next day. This was in stark contrast to last year’s which was on a Thursday evening, meaning I struggled rather significantly at my meeting the next morning!

We’ve got an exciting year ahead of us here at Webcredible and I’m really looking forward to 2011. One of the items top of the list is our website redesign, which is badly needed. When we rebranded last year we didn’t have time to properly look at the website so simply did a bit of a face-lift on the old design so it fitted with the new logo. There’s no fixed go-live date for this but it’ll likely happen in late-Spring.

We’ll also be launching a couple of new services (which I can’t reveal just yet…) which we feel are very innovative and should hopefully do well for us. Watch this space!

Other than this, 2011 should see us continuing to deliver on user experience research and design projects to our clients. This past year we’ve started to do more and more work on mobile apps (iPhone and Android mostly) and definitely expect this to increase. We’ve also started getting our feet wet with game usability and also expect to be doing more of this throughout the year. We write quite a bit about this too so you can read our game usability blog posts if this is your thing.

So, there’s not much else more to say other than… have a great 2011!

Do-it-yourself ‘Magic Whiteboard’

By Alexander Baxevanis on 4 January 2011

User experience design is a visual craft and for each of our projects we tend to dedicate many square metres of wall space for sketches, diagrams & brainstorming notes. Fortunately, we can stick whatever we want to the walls of our office and most of  them are constantly covered with whiteboards, sticky notes, flipcharts and Blu-Tack.

Running meetings & workshops outside our office is another story - we often have to use meeting rooms equipped with nothing more than a single flip-chart stand and could do with some extra wall space. In these cases, Magic Whiteboard has been a great solution, allowing us to create whiteboard-like surfaces on walls without leaving any marks behind.

However, there were a couple of things I didn’t like about Magic Whiteboard: each A1 sheet costs more than £1, the packaging is rather bulky, and it’s not always easy to come by in a stationary shop. So one day, when I was sitting on a train coming back from a client meeting, I put my engineering hat on and thought:

Wait a second - this looks very similar to the cling film you can buy in the supermarket. I wonder if that would work equally well?

A few days later, I walked into the Tesco across the street from our office, and went out with a package of cling film (priced at about £1.70).  I tried sticking it on the wall and write on it, and you can see the results below:

DIY Magic Whiteboard

It looks like you can write on it, you can erase it with a standard sponge or just a paper napkin, and it sticks reasonably well, although quite a bit more creased than a Magic whiteboard. It sticks much better on anything that’s a very flat surface such as metal, wood & glass (if you’re lucky enough to be in a meeting room with windows):

Cling film on a window

I don’t thing we’ll be using this trick anytime soon as a full-on replacement of our Magic Whiteboard stock, but I’m sure it will come in handy one day, if we forget to take our Magic Whiteboard into a meeting and there’s a supermarket nearby!

Do you have any other DIY tricks for setting up the perfect meeting environment? Let us know in the comments below…