I draw boxes

May 9, 2010

My review of UX Intensive Amsterdam 2010

Filed under: Information Architecture,Interface design,User Experience — Chris @ 11:03 am

UX Intensive - WelkomLast week I got back from the UX Intensive training course run by Adaptive Path in Amsterdam. It was a four-day training course covering a variety of topics in user experience. Day one was on design strategy, day two was design research, day three was information architecture and day four was interaction design.

My knowledge of Adaptive Path started a number of years ago when I first heard about Jesse James Garrett’s famous diagram entitled The Elements of User Experience (which has since become a book). In the diagram Jesse compares informational web sites against web applications and the processes that are involved in creating both. I used to have it up on my wall (at work!) back in 2004 when I first started reading about IA. JJG founded adaptive path soon after publishing the diagram in 2000.

So this was an exciting opportunity for me – the chance to learn from the best in the business, from a company who’s founder was one of my first influences in IA and user experience.

We flew out to amsterdam on the Sunday night and had a great seafood meal at Lucius to start the trip. As someone who was vegetarian for 25 years and only recently started eating meat the meal was an amazing experience. The food was so fresh and pulling out all the winkles, cockles and snails from their shells with all sorts of tools was really fun.

Sticky note creativityThe next day the course started and we were welcomed into a nice venue with a comprehensive pack containing all the printed slides for the course, as well as a notebook, stickers, post-it notes and a sharpie pen. This was a nice, professional touch. Good hygiene.

Day one started with design strategy presented by Henning Fischer, the head of Adaptive Path’s new Amsterdam office. He began by introducing the ideas of Michael Porter, a professor at Harvard Business School. He focussed particularly on the business strategy of Swedish furniture chain, Ikea. Key elements of Ikea’s business strategy that he highlighted were:

  • Self-selection by customers
  • Low manufacturing cost
  • Modular furniture design
  • Limited customer service

Henning then went on to describe the process of putting together a business strategy with the following steps: focus, definition, customer value, and scope. We also completed a variety of exercises to put together a design strategy for a fictional hotel.

Amsterdam canalOverall the day was good but I would have preferred a bit more of an interactive style (involving the audience), some background to Adaptive Path to kick-off the course, and some examples that were more up to date than flickr, blogger and nike+. On the plus side the Michael Porter work was interesting and there was a great exercise on prioritising business opportunities – a scoring system to force clients to make informed choices and tradeoffs when defining strategy.

After the day ended we stumbled across a fairground in Dam Square so had a go flinging ourselves around on a ride ridiculously high in the air! Fun times.

Day two was design research with Paula Wellings, and was all about interviewing users and finding out what they like and dislike. We did a number of exercises noting down our thoughts on post-it notes as the interviews took place, and then grouping the common themes and ideas to form concrete deliverables such as personas and user experience diagrams.

Things started to hot up on day three with Kate Rutter talking about information architecture - Kate had a real rapport with us and her energy pulled us through a genuinely intensive day. For me personally it took me back to when I first started learning about IA 4-5 years ago, with references to the polar bear book, Jesse James Garret’s original diagram, and discussions about metadata and organising information.

Delegates listen intentlyThere was also a welcome nod to the present and the future with a quote from the recent Richard Saul Wurman keynote at the IA Summit, as well as some great slides at the back of the presentation on future trends in IA. These included the firefox operator toolbar which locates metadata within a page, an innovative classification system from wine merchant Best Cellars, and ideas around ‘fluid data’ including Moritz Stefaner’s revisit (for displaying tweets) and Tom Taylor’s Boundaries which uses user generated photo tagging to help define neighbourhoods.

On the final day we were taken on an interaction design journey by Andrew Crow. He took us through a process of first opening up ideas during the research phase and then closing them down, before moving in the the interaction design stage which also involves opening up during ideas generation (or ideation) and then finally closing down when developing a prototype.

I was surprised by the variety of outputs that are possible in interaction design. Andrew showed us not just prototypes but mental model diagrams, venn diagrams, matricies, pie charts etc. etc. I’m going to try to be a bit more creative in the way I think about diagramming my ideas.

Overall the course was a great experience and I learnt a lot. I’m going to follow up on some of the ideas in the future of IA. It also reassured me about my readings and practices over the last few years – I have been reading relevant publications and considering may of the right aspects of my work. The only thing that would have topped it off was a visit from JJG!

January 19, 2009

My first usability testing

Filed under: Information Architecture,Interface design,Technology,Usability,User Experience — Chris @ 9:33 am

Ever since reading Steve Krug’s Don’t make me think a few years ago, I’ve wanted to run my own usability testing sessions. Usability testing is where you sit with people who have never used a site before, (preferably not web professionals) and discuss the site with them as they try and use it. Often their comments and mouse movements are recorded so you can go back and review what they said and did.

The idea is that when you are working on a site you can become so immersed in the project it is easy to forget what normal people actually want out of the website. Business objectives (e.g. “we must sell products and gather email addresses”) and technical constraints (e.g. “we can’t build that function and we have to display the data in this way”) often get a lot of priority on a project, and it’s the job of an IA to focus on the end user.

Usability testing is where you sit with people who have never used a site before, and discuss the site with them as they try and use it

Usability testing is a key tool in doing this – and importantly it provides evidence with which to inform your judgements and back up decisions. A video of representative users saying “I don’t want to give over my email address” or “I don’t understand the data when it is presented in that way” can be a powerful persuasive tool for making changes.

Another important point is that you can test sites when they’re in the prototyping stage – i.e. they don’t have to be fully built. You can create a clickable web mockup of full colour designs, or even wireframes and still get invaluable feedback from the process.

The bottom line for me is that it just seems such a simple and easy way to vastly improve your web sites. At my previous job I wrote a proposal offering to run low budget, ‘lost-our-lease’ usability testing sessions as advocated by Krug. The idea was to do cheap, frequent testing rather than expensive agency testing (which happened about once a year).

In the end they never went for it, and continued to outsource the work. But my new employer seems to be a bit keener to do usability testing, and let me loose to test the configurator for a large car brand we’re working on. A couple of weeks ago I ran my first ever usability testing sessions, with 6 volunteers from my work spending around an hour with each of them on the site.

The bottom line for me is that it just seems such a simple and easy way to vastly improve your web sites

The product

The website I tested was a car explorer and configurator system designed to give users a visual tour of various car models (the ‘Explore’ section), before allowing them to choose and configure their own car (the ‘Configure’ section). The ‘Explore’ section was already fully functioning and live on the web, while ‘Configure’ was in prototype form. I created a clickable version of the visual designs for users to interact with in the test.

In the Explore section you can view one of four models of luxury car in 3D, navigate around it, look inside at the dashboard and interior and change the colour and wheels with real-time updates. In ‘Configure’ you can pick your options from a list and see the price and car photo update in real time.

The outcome

The aim of the exercise was to get 4-6 key recommendations for improving the product, which could then be implemented to improve the user experience. We achieved this and made recommendations to the client, including video clips and justification for the points we made. Overall it was really good to see the users interacting with the system and I’m convinced we made genunie improvements to the system. I hope we can do it again on another project.

July 9, 2008

Structuring my presence on the web

Filed under: Information Architecture — Chris @ 2:46 pm

Since I started I draw boxes I’ve realised that I’d like to have more on my website than just information architecture resources. Which leads me to wonder what the best way to structure my site is.

I’ve started to think about resurrecting my old site that died about a year ago

It’s great having an IA blog – it works for me because I like having a place to write very specifically about my work. Blogging is quite a personal thing and if you’re not motivated to write, then the blog dies. I am mostly motivated to write about IA, but occasionally would like to write about other things I enjoy, such as personal geeky projects, music festivals or nights out with friends.

So I’ve started to think about resurrecting Sainsbury.org – my old site that died about a year ago following a server crash. I’ve had a portfolio website since 1999 when I started my degree course, and it might be good to start Sainsbury.org again in a new format, to compliment I draw boxes.

Do I integrate the two sites or have 2 separate ‘sister’ sites?

In the past I’ve always just had one site, and I started I draw boxes because I’ve made the decision to specialise in IA and want a site that represents that. But I’m now beginning to wonder whether this is the right decision. Maybe I should bring I draw boxes into Sainsbury.org as a site section? That way I just have one site, but with a couple of different audiences.

So the question is, do I integrate I draw boxes into Sainsbury.org or, instead, have 2 separate ‘sister’ sites?

I’ve summarised the options in the following diagram (click the image for a larger version):

Diagram showing structure of I draw boxes and Sainsbury.org

Although I like the neatness of the 1 site option – it gives me a single place on the web and a consistent look and feel – I also like having all my IA stuff in one place. I don’t want my friends reading about information architecture or IA people reading about my latest night out. Well, I don’t mind if they do, I just want it to be a concious choice by them rather than accidentally stumbling across inappropriate content. And that, in essence, is the main argument for keeping the two separate.

I don’t want my friends reading about information architecture or IA people reading about my latest night out

The downside with the 2 sites option is that the user will occasionally be transported to the other site – the portfolio section is particularly problematic. This bothers me because transporting the user to another site (i.e. URL, navigation, look-and-feel) can be disorientating, particularly if they’re not expecting it.

The thing is that my interests do not necessarily fit into neat site sections or categories. My professional life is not just limited to information architecture. I enjoy and have experience of loads of other aspects of making web sites too. Also I’m lucky enough to do a job I enjoy, so business and personal interstst often overlap as well.

I’ve tried to represent all this in the following Venn diagram, annotated with example content from each sphere of interest. Click the image for a larger version.

Venn diagram representing my interests

The 1 site solution mentioned above essentially groups everything within the information architecture sphere on the I draw boxes site, and everything else on Sainsbury.org, which could work. Although I draw boxes could include all the professional sphere – which is what I need to decide.

Audiences

Another factor I’ve not yet considered is target audiences. They can be summarised as follows:

  • Information architecture/user experience professionals
  • Web designers and developers
  • Employers/potential employers
  • Colleagues
  • University students (I was at uni for 8 years as both a student and a teaching assistant)
  • Friends

The top 5 (all except for ‘Friends’) are really the target audience for I draw boxes. Which makes me wonder if I even need a second site. Do I even care about a site for friends when I have Facebook?.

Maybe the answer is to beef-up I draw boxes with a bit of additional non-IA content and use Facebook for everything friend-related.

Conclusion

For now I’m going to continue building I draw boxes, and see how it develops. I need to get my full portfolio of work up online soon, and whether I add that to the IA portfolio on I draw boxes or set it up on Sainsbury.org remains to be seen.

I’m definitely leaning towards the 2 site solution shown in the diagram above, I just need to give some thought to ways of cross-linking (clear signposting etc.), and also to designing the look-and-feel so the user still feels they are within my site, even though there are 2 sites with different URLs.

–

Update 16th July

It seems this essay has a lot to do with my own grapplings with personal knowledge management, which is being discussed by a few bloggers around the place. In particular Gene Smith in Personal information architecture and Peter Merholz in The Tension between the Personal and the Public.

Although this issues are slightly different (flickr and del.ico.us rather than personal web sites) the underlying problem is the same. The tension between personal and public is something that I have not fully resolved in my own online presence.

July 7, 2008

Should IAs be involved thoughout the web development process?

Filed under: General musings,Information Architecture,Interface design — Chris @ 5:49 pm

A fundamental question for me relating to the information architect role is how we fit in to and interact with the wider web team, and to what extent IAs should be involved throughout the web process.

Information architecture is in many ways the ‘bridge’ between technology and design

My own opinion is that information architecture is in many ways the ‘bridge’ between technology and design – while keeping the user in mind. Therefore IAs should have input at every stage of the project.

Another view is that IA is simply another step in a linear process – a process that goes something like: Strategy > Requirements > IA > Visual design > Build > Test > Release. In this model the IA simply drops in at the beginning of the project, produces some documents, and then disappears as soon as the wireframes are handed over to the design team.

If an IA is doing his or her job well they will make sure they are at the centre of the project

I have worked on projects where both ways of working have been the norm. I think if an IA is doing his or her job well they will make sure they are at the centre of the project. But to do this takes a certain amount of confidence. We have to prove our worth within a team, and this often takes time.

The plain fact is that many web teams have been producing pretty good websites without information architects for many years, and will continue to do so unless we show we can add value.

But information architects are being hired. They seem to be in great demand to me – although there are relatively few roles in total (compared to say, designers) there are even fewer practitioners. So there are people who see value in our role. It’s more about shaping that role once we’re in the door and proving value in our interactions with all members of the team.

When faced with project managers or art directors who believe the ‘thanks for the wireframes, bye-bye’ approach, I think all we can do is try and offer insightful opinion when appropriate and mention that we’d like to be involved throughout the process.

I still believe fundamentally in the integrity of information architecture as a unique role

I still believe fundamentally in the integrity of information architecture as a unique role. We have skills that cross the traditional creative/technical boundaries, and while we are not specialists in these areas we can offer a degree of planning, consideration and communication that produces genuine savings in time and increase in quality of outcome.

This note would not be complete without mentioning Jesse James Garrett’s 9 pillars of successful web teams. His beautifully simple diagram and accompanying essay show information architecture (labelled as ‘abstract design’) as the central ‘pillar’ of a web team, touching every role within the team and providing links between strategy and tactics, and design and technology. Garrett is an IA himself, so he is naturally inclined to argue that IAs are central to any web project – but I agree, and it’s what initially attracted me to the role.

So if team members don’t initially see the value I (as an IA) can add to a project, then I see it as my responsibility to prove my worth to the extent that they seek out my opinion on key issues – and in the end produce a better product as a result. This may take time, but it’s about evolving the notion of a web team and making our own small contributions to the progression and acceptance of our role.

June 19, 2008

First impressions of Axure software

Filed under: Information Architecture,Interface design,Technology — Chris @ 5:55 pm

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

Filed under: Information Architecture — Chris @ 4:20 pm

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.

Good books

Filed under: Books,Information Architecture,Interface design — Chris @ 11:06 am

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?

Filed under: Information Architecture,Interface design — Chris @ 3:09 pm

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)

May 30, 2008

Raison d’être

Filed under: General musings,Information Architecture — Chris @ 1:59 pm

So this is my first post…

I’m not sure what this site will develop in to – if anything (useful). But I’ve created it because I think it’s important to share ideas relating to making and planning web sites. Information architecture is such a new and evolving discipline, I wanted to get involved in the community to let other know what it is to me, and to find out what it is to them.

I’ve created this blog because I think it’s important to share ideas and get involved in the community

I’ve been a full-time IA for nearly a year now, and in that time have come across such a variety of ways of practising the work. That’s partly what I love about the role – it’s quite fluid and multidisciplinary. Whereas project managers, designers or developers have their job specs fairly closely nailed down by now, I get the feeling IA is still being defined.

So on these pages I intend to share ideas on:

  • Day-to-day issues and problems I come across
  • Projects I’m working on (often this will have to be in the abstract, due to client confidentiality)
  • Discussions of past work and IA strategies
  • Things I’ve read online or heard at conferences
  • The nature of information architecture, usability and interaction design and the relationship between the three
  • The relationship between an IA and the rest of the web dev team, including: Project Managers, Account Managers, Clients, Front- and Back-End Developers, Graphic Designers, Analysts etc.
  • Share practical and techinical information about software and technology, including Visio, and also geeky stuff like LAMP

And so I draw boxes is born… I hope it becomes a reasonably interesting resource.

A brief note on the name…

The name of this site is blatantly inspired by Boxes and Arrows. I love the simplicity of the name because it encapsulates what I do for a living nicely – although of course spectacularly fails to communicate any of the thinking involved. But hopefully the rest of the site will do that.

Powered by WordPress