A prototype is worth a thousand words | Boagworld - Web & Digital Advice

Web & Digital Advice

Digital and web advice from Headscape and the addled brain of Paul Boag... tell me more

Leigh Howells Posted by: Leigh Howells On Thursday, 15th December, 2011

A prototype is worth a thousand words

Leigh shares some thoughts on why a functional prototype is worth a ten thousand word specification.

Better UX Design:
The estimated time to read this article is 8 minutes

Steve Job’s once said:

“Design isn’t just how it looks, Design is how it works”

Wireframing is important.  I don’t think I need to labour the point about this, Its something most designer folk involve themselves with at the start of the design process.  If you don’t, you really should.

Most of the effort in wireframing is gathering together the outline of what will be on each page and where it will sit within a page hierarchy, we create a blueprint for our website when we wireframe.  Equally of importance, however, is the interaction design on each page,  between pages and how the site is navigated as a whole.  This is when we start to think beyond isolated wireframes.

Wireframing - the blueprints for your starship

Wireframing vs Prototyping.

When we start to move beyond single page wireframes and begin to demonstrate interaction we start to build low fidelity prototypes.  A prototype reveals how the site will be used, how it will be navigated and how the interaction features assist navigation and the overall experience of the site.

Planning with a prototype

I like to build the main sections of a website as a working prototype near the start of the project.  During this process a lot of thought is put into the whole framework to ensure no stone is left unturned.   The  prototype poses a lot of questions and demands answers. It challenges the designer to get stuck in and problem solve at the planning stage where they belong.  Building a prototype prevents assumptions being made and important decisions being overlooked which will inevitably reveal themselves later on in the process.  Later on it can be too late to make changes, changes which are time consuming, or simply impossible.

Planning with a prototype forces us to think things through from the beginning.  When we start navigating around our embryonic site and setting ourselves tasks, we can quickly begin to see when things are working and what the experience will be like.

The working prototype is the plan and becomes the specification for the site.  It’s a page by page model – a bit like a 3D styrofoam model an architect may build to demonstrate and explore a building from different angles.  The prototype becomes the master plan and the functional design.

Everyone wins

Clients love to see prototypes.  Development teams love to see prototypes.  The prototype acts as a central hub for everyone involved in the project, offering something tangible to explore and consider, and to show to others without getting bogged down in more aesthetic design decisions.   It helps to focus the attention on any problems that need to be solved with the site, and becomes a basis and focal point for discussion.  What’s more, a prototype shows progress, real visual progress – rather than a written document specification which may be hard to digest and visualise.

User testing

A good working prototype is a great tool for testing on real users.  Rather than waiting until more time, love and effort has been invested into aesthetic design,  testing the prototype early on can reveal any shortcomings in the information architecture, navigation, calls to action and interaction design.  The prototype can be tweaked quickly and less painfully at this stage, and this can offer huge rewards.

Showing ‘Flow’

You may think you can just demonstrate how a site is going to work with static wireframes by simply describing how it’s all going to work.  Yes you can.  But it’s really not the same.

You get a far better idea of whether a solution is really working when you can click around as it would actually be used.  Static wireframes, or approximates with notes saying ‘This will slide down’  don’t give such an effective demonstration of the interface, whether it really works and flows or whether sliding down is such a good idea.  The final solution for the site should be fluid, intuitive and logical.   Prototyping helps to demonstrate this flow, and therefore it needs to be able to work as near as is possible to the intended solution in the finished version of the site.

Building your prototype

We need the right tool to build our prototype.  We need a tool which is both fast, for getting our basic wireframing ideas together and powerful enough to add interactivity to our prototype later to create a fully navigable set of pages.

The tool must be easy to use and intelligent in the way it handles repeated elements across multiple pages so we can change things around without pain and maintain consistency.

So just build it in HTML, right?

The most effective option is probably to build it all in html from the beginning, giving us a framework which can be re-used throughout the rest of the project.  Much has been written about this, and I respect the approach.  The trouble is that building our prototype in code becomes slow and clunky (even with my many years of production HTML/CSS experience), and is far from being ‘rapid’ prototyping.  Getting bogged down in HTML and CSS and Javascript can become seriously time consuming if we start moving our page layout around on the fly.  Even though there are huge advantages in taking the HTML approach, it can limit the outlook and we can become lead by code rather than being lead by ideas and the best solution for the site.

Finding the right tool

I’ve tried wireframing in a lot of tools over the last couple of years, including; Balsamiq, Mockingbird, Flash, Flash Catalyst, Fireworks, Powerpoint, Keynote, Sketchflow, Visio, Flairbuilder, HTML, various online solutions and of course pen and Paper.   Yes, pen and paper can be great for getting initial ideas down in some meetings.  However, my experience of flip charts, whiteboards or passing paper around is that things can quickly get messy. Constantly redrawing page ideas from the beginning becomes tedious and often I’ve ended up with a pile of meaningless scribbles at the end of the meeting which can easily be misinterpreted.

Wireframing in software during client meetings can also have huge pitfalls such as; losing data, discovering the client has a lower resolution projector than anticipated, or software/hardware which starts to generally misbehave for no good reason.  All things considered it is still my preferred method and worth the occasional pain.  It allows decisions to be made which all can see and read, keeps everything fluid and gives a realistic idea of how much usable space is available on a page.

Most tools suck

I’ve rebuilt entire prototypes in tool B rather than tool A because tool A was causing so much pain.  But, to be honest they all cause pain sooner or later.

I want a tool that aids creativity and helps to inspire original solutions. I want to be able to create new interaction ideas as well as being given a bunch of preset components. I want to be able to show large hover ‘mega’ menus, I want to show large sliding panels, interface elements with fixed positioning and show how items will open and close and how the rest of the page flows naturally as with any regular HTML page.  But demonstrating all this is quite painful with all the wireframing/prototyping tools I’ve tried to date. Hopefully things will improve in time.

Current tool of choice

I’m currently testing Axure.  It solves the fundamental issues of being both fast for quickly throwing ideas together, but it’s also powerful when needed.  It has some great features for both creating and presenting working prototypes.  As well as all the usual simple drag and drop components, It has really powerful interactions, dynamic panels with multiple states, master elements and a feature I particularly love, a slider control to decide how linear or ‘sketchy’ you want the whole thing to feel.  It will even output a complete specification document from all of your notes and page comments if that’s something you are required to produce.

It’s not perfect though of course. It’s also very expensive compared to some other tools. But building a prototype is important work, and worth investment just as Photoshop is worth the investment for graphical work.

Things to consider

A few of the things I consider when looking at wireframing/prototyping tools:

  • Is it regularly updated and developed?
  • Does it have a development team, rather than being developed by an individual?
  • Does it have a thriving community?
  • Is it stable?  (Some of the tools I’ve used repeatedly fail).
  • Has the community built a downloadable libraries of preset objects if you need them?
  • Does it let you assemble wireframes without fuss – could you use it quickly infront of a room full of people?
  • Does it have a complete site map allowing quick jump from page to page?
  • It is fast and responsive even with large projects?
  • Can you build a working prototype with it in a fraction of the time it would take you to build in HTML?
  • Does it allow the creation of complex interactions when you need them?
  • Does it allow the creation of realistic forms?
  • Does it allow logical operations, ‘if’ statements etc?
  • Does it have templates, or a library function of updatable objects to ripple changes rapidly across your model?
  • Does it have layers, to lock elements down in the background so they don’t get in the way?
  • Does it have a selection of basic design tools in case they are needed?
  • Can you choose if you want it to look ‘sketchy’ which can be distracting – or more ordered and linear?
  • Does it let you collect notes about pages or elements to assemble your thoughts?
  • Is the viewing mechanism easy to distribute to team members or a client?
  • Is the final output built in HTML – therefore pages can be navigated more realistically rather than Flash?
  • Does it allow feedback from these viewers?

Conclusion

Building a good set of wireframes that become a working prototype helps your web project get off to a flying start, it becomes the hub of the design and development project which everyone involved can refer back to.  You need to find the right tool to build your prototype. It must be capable of demonstrating how everything will work, whilst not being a complex or fickle beast you have to battle with. Ultimately you need a tool to help shape your thoughts and create a tangible model which is robust enough to be tested with real users and take you through to the next stages of the design process.

Become a web expert with our newsletter

Receive invaluable advice every three weeks and get two free video presentations for subscribing. You can unsubscribe in one click.

Blog Updates

You can follow all my posts by subscribing to my RSS feed or signing up to my email newsletter above.

Podcast Updates

Subscribe to the podcast via itunes or RSS. You can also subscribe to my quick tips via itunes and RSS too.

Social Updates

I am completely addicted to Twitter so try following me there. I also have a Facebook page which contains considerably less waffle.

Comments

Boagworld is a community, not just the voice of one blogger. You've read the post, now its time to get involved.