I draw boxesA blog on user experience & design

June 19, 2008

First impressions of Axure software

I’ve spent the afternoon installing and reading about Axure web prototyping software. It takes Visio functionality to the next level, by adding the ability to define and output complex interactivity and AJAX-style controls.

Axure takes Visio functionality to the next level by adding the ability to define and output complex interactivity and AJAX-style controls

You work in an interface that is similar to Visio’s – but you can definitely tell that the software is specifically designed for web prototyping. Whereas Visio is a planning and diagramming software that allows you to do architectural layouts etc., Axure is built from the ground up to enable you to plan web sites in an engaging and accurate way.

This offers an intriguing possibility for me – that of creating interactive mockups of web sites as a part of my IA. I’ve always worked by producing flat, 2D documents that describe the interactivity that should occur with descriptions and a variety of page layouts. I have become extremely fast with Visio over the last couple of years and am quite used to communicating ideas for interactive systems in 2D media.

But Axure really looks like it could be the good IA software I’ve been waiting for. More updates to follow.

June 16, 2008

Wireframes are simply facilitators for discussion

The title of this article should really be: IA documentation is simply a facilitator for discussions. And the key point is this: in a web project we’re all (as a team) trying to develop a set of complex shared understandings about what this product will be and how it will work. As long as the IA documentation helps us do this in the most effective way, that is all that matters.

I was just reading a couple of blogs by Cennydd Bowles and Lee McIvor on the fact that IAs and UEs need to be multidisciplinary in their skills set – which I certainly agree with. They were also discussing the variety of ways we can document our IA or UX planning – with interactive prototypes, or hand-drawn sketches, for example.

We’re all trying to develop a set of shared understandings about what this product will be and how it will work

In my old job I was repeatedly asked for ‘wireframes, wireframes, wireframes’ – I almost felt like a wireframe monkey. Whereas for me IA is about coming up with some ideas for a web or digital project, and then communicating and refining them as effectively as possible within the team.

Sometimes IA documentation will take the form of bullet points, hand-drawn sketches, paragraphs of text, high-res visuals, or conventional wireframes. I have even used small squares of paper and blu-tack in my time to brainstorm ideas.

I have no problem with people creating interactive demos, and will probably move that way in the future, but I can work incredibly fast in Visio and often find flat diagrams with annotations communicate ideas really well. Whatever’s best in terms of efficiency of time and effectiveness of communication is best I guess.

Use your IA documentation as a facilitator for discussion rather than some kind of autocratic dictat handed down from an ivory tower

I also think it’s incredibly important to work with the team throughout the process – and use your IA documentation as a facilitator for discussion rather than some kind of autocratic dictat handed down from an ivory tower or set-in-stone proposal. Technology and art direction are vital to the success of a web project, and deeply affect the ultimate user experience. Therefore they must be taken into account at the planning stage.

At the end of the day some people in the team know more about certain areas of the project than you – that’s what they’re there for. Taking their views into account and reflecting them in the product is important – just keep the user front-and-centre.

So the key thing is to build as much of a shared understanding as possible, through whatever means necessary. Where projects go wrong in my experience is where a certain amount has been ‘assumed’ or there is a breakdown in understanding. ‘But I thought it was going to work like this’ – ‘no it was always going to work like it does’ can be minimised through detailed planning and many iterations of documentation.

The stupidity of rel=nofollow

I am truly baffled by the existence of the rel=nofollow attribute on wordpress comments. Even more so by that fact that it is enabled by default, and can only be disabled by installing a plugin.

It seems to me that inter-linking between blogs is exactly what the web is about. Democracy of content, freedom of speech and sharing opinions. Why shouldn’t a commenter on a blog get some search engine ‘credit’ from the page they have chosen to enrich by commenting on?

A human user can see the comment links between one blog and another, so why shouldn’t google?

The idea of using rel=nofollow to reduce the amount of comment spam seems totally outdated and not useful in any way. Akismet is a genuinely useful comment spam filter, and most people manually vet their blog comments before they appear on the site anyway.

As for search engines, I thought the whole point of google’s pagerank was to provide an accurate and ‘honest’ reflection of the web and what is important within it. This to me means providing the search engine spider with an experience as close to that of a human user as possible.

A human user can see the comment links between one blog and another, so why shouldn’t google?

Cards on the table, this annoys me directly because I am trying to raise awareness of this blog by reading around the IA community blogs and commenting on them where I have something useful to add. Readers will see my comments and link back to my blog, but search engines won’t?!

PS rel=nofollow is disabled on this blog thorough the quality DoFollow plug-in

For more check out 11 reasons against nofollow or the WordPress article

Good books

Two books that have changed the way I look at design.

The design of everyday things

By Don Norman

This has to come first in my book recommendations because for me it is an absolutely seminal work. It will totally change the way you look at the world and how it is designed.

The burden of responsibility moves from the supposedly ‘stupid’ user who can’t understand something to the designer, whose job it is to ensure people can understand how something works from its form

You will start to look at products you can’t use easily or don’t understand and wonder why that is the case. The burden of responsibility moves from the supposedly ‘stupid’ user who can’t understand something to the designer, whose job it is to ensure people can understand how something works from its form.

With practical, fascinating examples of good and bad design from everyday life, Norman reveals the key points in the way users’ minds work when evaluating a product: what it does and how to make it work.

From the set of double-doors that are so confusing someone got trapped in between them, to the fridge that is nigh impossible to program, Norman identifies key weaknesses in these products and opens your mind to simple ways we can make life easier as designers.

Although this book does not deal specifically with digital products, the ideas and concepts apply universally to all types of design. Read it. It will change your life.

Buy the design of everyday things on Amazon UK »

Don’t make me think

By Steve Krug

The genius of this book is its simplicity. Designed to be read in a few hours, Krug’s irreverent style is engaging and entertaining. He makes so many great points this is likely to be word-for-word the best book of its kind.

The genius of this book is its simplicity. Designed to be read in a few hours, Krug’s irreverent style is engaging and entertaining

Using a very visual combination of text, cartoon-style drawings, thought-bubbles and the like, Don’t make me think is a whirlwind tour of key online usability advice. Simple things such as creating a clear visual hierarchy on a web page, and making a tab actually look like it contains the content it should, will form the foundations of all web design, IA and graphic design decisions you make in the future.

Another key theme of the book is that usability testing, per se, should not be ‘big, expensive and rare’ but rather ‘quick, cheap and often’. With the rise of usability testing as big business these days, managers are often put off performing testing due to cost or time inplications.

But it doesn’t need to be this way – ‘little and often’ testing is more useful but rarely takes place. This is certainly borne out by my own experience. People think ‘we need to spend a lot of money to get expert usability testing’, but Krug maintains art directors and IAs can do their own testing with excellent value-for-money results.

Buy don’t make me think on Amazon UK »

June 12, 2008

Yes/no questions: dropdown, radio buttons or checkbox?

Today I came across a dropdown menu in a web form for a yes/no question, and it didn’t sit well with me. Far too much for the user to think about when making their choice.

To enable the user to express a preference in this way you could use:

  • Radio buttons
  • A checkbox
  • A dropdown menu

After googling around I found this interesting discussion and poll on the Isocra consulting blog.

I’d definitely go for radio buttons every time. The priority has to be ease of understanding and speed of cognition for the user.

I’d definitely go for radio buttons every time. The priority has to be ease of understanding and speed of cognition for the user

Nielsen has written that users dislike dropdown menus in general, and I’m inclined to agree – particularly in this case. The user has to consider what the box is asking them, note the ‘please select’ instruction, then [click], consider the options, make a decision, then [click].

A checkbox is technically the correct choice of interface element (it was designed to allow the user to select ‘yes’ or ‘no’ to something). But the supporting copy must be worded perfectly to make it clear to the user what they have selected. Confusing labels are increasingly common in this area, for example “Check this box if you DO NOT want to receive email updates”. So you’re making a positive selection when you’re actually saying ‘no’ to something. Hmm.

So I’d go for radio buttons because:

  • The user can quickly scan both the question and possible answers in one go
  • It is immediately obvious to them that they have 2 options, ‘yes’ or ‘no’
  • They only have to click once to make their simple choice
  • The user is forced to make a choice one way or the other (if neither radio button are initially selected)

Powered by WordPress