30May2008

A Better Way to Create Information Architectures, Wireframes and Prototypes

I've often wondered why there are no good tools for easily developing information architectures and producing wireframes.

Visio tends to be the standard, although I regularly use PowerPoint due to its ubiquity. Thanks to the PowerPoint Prototyping Toolkit you can produce quite good results.

The problem with Visio (other than its cost) is that it tends to get pretty fiddly/messy. Sometimes it seems that I'm spending more time fighting with the software in order to get everything laid out properly than actually designing.

The GUUUI Web Prototyping Tool is a great help, but it still doesn't get past the fact that you're using Visio.

"There must be something other than Visio and PowerPoint," I've thought to myself as I've searched the web without success. I like Jumpchart but it's designed more around content development than wireframing and prototyping.

Which is why I was so interested to learn about Oversite (thanks again to GUUUI), an application for creating IAs, wireframes, web page mockups and prototypes (for Windows/Mac/Linux).

Oversite makes it easy to create and — more importantly — manipulate an IA and display it as an attractive sitemap.

'Screenshot of a site map produced in Oversite

I also tested out the tool to see how easy it was to create a prototype for a web site account creation process. Laying out a multi-stage form on separate pages was easy and I could even populate the options in my select fields.

It's far easier than Visio to link everything together and create fully functioning web pages. To test your web prototype out all you have to do is to select the "Click-thru" tab or export the whole thing to HTML.

This is the most full-featured and easy-to-use IA/wireframing/prototyping tool that I've come across and frankly I'm amazed that I've taken so long to discover it (it's been around for 3 years).

I didn't mean this post to turn out to be such a sales pitch, but I really like this tool. You can download the software to try it out and it's only $35 to register it.

Posted on: May 30, 2008 | 12 Comments

12 Comments Posted

Looks good. I gave Jumpchart a go the other day and was pretty impressed at how easy to use it was. Was able to collaborate with a non-technical user too: I did the basic setup and then they filled out the rest of the details once the structure was in place.

1. Posted by John Faulds on May 30, 2008

Perfect timing actually, I've been looking at various tools and not quite happy with anything so far, so this is definitely something I'll try out (and register if it works well!)

2. Posted by erica on May 30, 2008

Thanks for posting about this. I hadn't heard of Oversite, though I've done a good bit of digging for this type of tool myself. I'm going to give it a shot alongside the new version of AXURE RP, which has supposedly addressed the major issues I had with the previous version. If you haven't looked into Axure, give it a shot - it's a different approach from Visio, but I really like the fact that it produces working prototypes and documentation as you go. The implementation can be a bit rough at times (docs can get really long) and sadly it's Windows only, but I'm more and more tempted to try using it for a real project.

3. Posted by Alex Jones on May 31, 2008

Thanks Christian, this sounds great. I'm a PC user, though I have a few Mac buddies whom every then and again I drool over their OmniGraffle. It's a sweet app, and is nicely designed to figure out the mechanics for you, leaving us with the responsibility of the IA and not how the chart flows. Very nice. OS X only, but I know there are some Mac Heads out there. Check it out.

4. Posted by Justin Bianchi on May 31, 2008

What about Writemaps? I've found them very useful with my clients as they can edit if I want to give them access.

5. Posted by chris on May 31, 2008

Alex — Axure looks good, although it's a little pricey. Now that I'm aware of it I'll check it out some more.

Justin — yes, I'm familiar with Omnigraffle, but as a non-Mac user have never tried it out. Which is too bad, because resources like Graffletopia look really useful.

Chris — I've tried Writemaps before but just didn't find it to be full-featured enough to be useful.

By the way, I just came across a nice collection of design stencils from Yahoo! which look interesting.

6. Posted by Christian Watson on June 01, 2008

As an interaction designer I'm using Adobe Fireworks. It's not cheapest software out there but it's very powerful and quiet easy to use.

7. Posted by Igor Jovic on June 03, 2008

I've used Axure for over a year and while it is pricey it provides interaction design which is tough to communicate with the traditional 2d tools. Specifically it provides the ability to make changes in a master (such as the footer) and have that change propagate to all affected pages saving a ton of time. Also it can generate an HTML prototype which provides users with a more realistic picture of how the site will behave.

I'm on a mac and I install VMWare Fusion and XP just for the program. There is a new online tool called protoshare (protoshare.com) that is still in beta and looks interesting.

8. Posted by Rob Grady on June 04, 2008

Thanks for the post. I use Fireworks to design my wireframes. I stumbled on this piece of software, gliffy. Wondering if anyone was using it or had thoughts about it?

9. Posted by Michael Swartz on June 06, 2008

Thanks! I've been looking for a good prototyping tool, and this one looks really easy to use.

10. Posted by EE on June 15, 2008

Christian, thanks for your comment over at my blog. I posted my response: http://tinyurl.com/5sebdl
Would love to hear your added thoughts. -ross

11. Posted by Ross Popoff-Walker on June 24, 2008

Probably should add Polypage - jQuery plugin for building wireframes in HTML - as another tool worth checking out.

12. Posted by Christian Watson on December 21, 2008