I draw boxesA blog on user experience & design

July 9, 2008

Structuring my presence on the web

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?

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

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)

May 30, 2008

Raison d’être

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.

« Newer Posts

Powered by WordPress