Wireframing, user experience, user interface design and wireframe tools

May 9th, 2010

I’ve spent months trying to find the ultimate wireframe tool and not found it, yet.  So what’s stopping me? I mean, there’s lots of wireframe tools, so what is this “ultimate” I speak of, that doesn’t seem to exist?

Just to re-iterate a definition of a wireframe, so we’re all on the same page:

“A wireframe is a visualization tool for presenting proposed functions, structure and content of a Web page or Web site.” 

Traditional wireframes – paper sketches – static

So, my understanding is that traditionally, a wireframe would be a sketch, on paper, simply of CONTENT of a webpage.  And there would be multiple wireframe pages drawn.

These would then be presented and discussed iteratively with the design or business team or the stakeholders/client – and at the stage of presentation the FUNCTIONALITY would be presented and discussed.

The paper would have no ability to click, move, respond – so all interaction would have to be carried out in word – either by drawing explanatory words on the page, or by describing during presentation.

Evolution of wireframes – Photoshop templates – static

So the traditional sketching above was moved onto computers – and the sketching and drawing that took place with pen and paper could take place on screen and evolve more dynamically.  I would suggest this is what the majority of user interface designers use as a weapon of choice today.

Adding behaviour and interaction

So the above approaches worked great before Web 2.0 -  a click on a webpage would just take you to another webpage.  We’re one step up from the green screens of old, but not much further, and it’s not rocket science to present from a UX or UI perspective to someone who is more interested in an irate customer and how this conversation is going to affect their bottom line.

But over the last 8 years or so, as Web 2.0 has taken full hold, the web interface is wholly interactive – event- and user-driven.  And clicking an element (button, banner ad, Flash image) can often provide interaction that isn’t a click-through to a whole new webpage, but interaction on the CURRENT webpage – a popup dialog box, an update on the right hand column, etc, etc.  How are we supposed to demo this?

So we see lots of beautiful tools that attempt to pull all this together – most are online, most are complex, cleverly written Flash apps, and most are not free and are subscription-based, aimed at web development companies and design agenices, such as ourselves – here’s a list of of the top 20 wireframe tools

So what’s my point?

Well, now we’re on the same page, I’ll make my point.

It’s not the presenting to the client or the superb qualities of the current tools.

It’s the ability of no tool to grab the timeline evolution of the thought process behind user interface design.

Here’s a real world example that’s prompted me to post today -

  • We have a client who is going to launch a big, beautiful, e-commerce shop.  It’s not your average shop, but it’ll be a superb user experience – I can’t say anymore just now – but basically the way it’s gone so far is -
  • We want to create something visual/something representational that can grow the earliest, smallest conversations of:
  • Website objectives
  • Split across into website areas / functional areas
  • Split down into webpages, including homepage, product category pages
  • So when we get to that webpage – we want to:
    • DESCRIBE in words, what the goal of the webpage is
    • Take the goals and map them as CONTENT, simple LAYOUT, FUNCTIONALITY and INTERACTION

And herein lies the wireframe problem – the above is simple.  It’s capturing the process, from start to finish, and then re-iterating it, in one tool – that NOBODY has done thus far.

What do I want from the ultimate wireframe software tool?

I think the wireframe concept needs the same injection as mindmaps provided to time-based, linear lists.  The above is a time-based, linear list.  The output as a wireframe is a flat diagram, that hides the previous steps.  A mindmap starts with the goal/centre and grows out, evolves, from that centre, with nodes mapping to thought process.

An aside – just read a wonderful article when looking for integration between Basecamp and wireframing titled “the future of wireframes” written by Nishant Kothary, the Creative Director of MIX Online – check it out, if you have any interest in this field.

I’ve spent months trying to find the ultimate wireframe tool and not found it, yet.So what’s stopping me?  I mean, there’s lots of wireframe tools, so what is this “ultimate” I speak of, that doesn’t seem to exist?

http://visitmix.com/Articles/The-Future-of-Wireframes

Mark

About Mark

Mark is the CEO of LogicSpot and loves his job. He still gets up every day and is happy to be in a career that he loves. From a young age he wasn't sure whether to go down the route of IT and software development, or art and design - both being his flair through schooling along with music. He chose the embodiment of both - designing beautiful websites and applications with his team that deliver beyond client expectations with finesse and grace