Effectiveness of Wireframe Tools and Rapid Prototyping

You can get your team on the same page with your wireframes by collaborating with them online using effective wireframe tools. Visually diagram the structure and flow of your website or app to see how everything fits together.

Wireframes and Evolving Rapid Prototypes

Rapid prototypes, as well as an additional set of wireframes as a resort really helps in plans, you can screen capture pages and create your own specification document using the excellent screengrab! plugin. On-screen annotation tools make it simple to add comments to your prototype, removing the need to include footnotes with your screen captures. However there are no excuses for not getting rid of those wireframes still, when you can simply grab the pages with the comments shown!

All About Design Wireframes

In website wireframe, they outline what goes where for a set of UI screens in the same way that architectural drawings outline what goes where for buildings. Wireframes typically outline the screen's components as well as any associated behaviours, such as what happens when a button is clicked and where a hyperlink should go. They do not show how a screen will look exactly, only how it will be composed and behave.

An Example Wireframe

UX wireframes are typically created by a UX designer (or designers) prior to any visual design work and are created using diagramming tools, as well as design and drawing tools. They are typically part of a system's functional specification, outlining all of the requirements for each screen, and as such, are usually annotated (as in the example above), often in excruciating detail.

Reasons to Move Into Rapid Prototyping From Wireframes

So, what's the big deal about wireframes, Well! wireframes aren't necessarily bad in and of themselves; it's more the type of design behavior they encourage and the way they're frequently used (and abused) in projects. Here are some reasons why wireframes should be discarded for the vast majority of projects.

Wireframes (by definition static) are unsuitable for defining dynamic on-page interactions such as expanding content, AJAX style reveals, and animations. Wireframes are no longer sufficient as the lines between web and desktop applications become increasingly blurred and on-page interactions become more common.

Wireframes are difficult to use (which is kind of ironic for a UX design tool). Project stakeholders are frequently intimidated by what they perceive to be highly technical documentation and struggle to understand what wireframes are and what they depict.

Wireframes are notoriously difficult to interpret. Because wireframes appear to be very precise and specific, but because behaviors and interactions must be described, they are inherently open to interpretation. A wireframe can be read very differently by one project stakeholder than another, resulting in confusion and misinterpretation.

Wireframes can encourage designers to ""throw it over the fence."" Designers can spend hours meticulously creating, annotating, and updating wireframes before tossing them over the fence for the development team to build, confident that everything is documented and that any dialogue can be avoided.

Wireframes can be overly directive. Many visual designers believe that wireframes reduce their role to little more than a coloring-in exercise, one in which they apply the necessary branding and look and feel for each screen rather than carrying out proper design work.

Wireframes frequently add unnecessary stumbling blocks to the design process and can encourage death by documentation (a particularly nasty way to go). Creating and annotating detailed wireframes takes time and effort, which is usually better spent iterating and improving designs rather than specifying them.

Reasons to Adopt Rapid Prototyping

What is the alternative if wireframes are so flawed - simply put, the alternative is to skip wireframes entirely and go straight from sketch / outline designs to developing working code (in an Agile fashion), or web page mockup as is more commonly used, use a rapid prototyping tool to create a prototype. There are now numerous excellent rapid prototyping tools available, including Axure (my personal favourite), Balsamiq, EasyPrototype, and iPoltz. If you have mad web design skills, you can always create a prototype in HTML and CSS.

Advantages of Rapid Prototyping Over Wireframes

MockFrame is a tool for prototypes are much more effective at communicating a design. It's much easier to gather feedback from designers, developers, product owners, and, of course, users when everyone can see how things might work with their own eyes.

Prototypes are easier to use. People are often put off by wireframes, but everyone understands what a prototype is (just make it clear that prototypes are very different from the finished article).

Prototypes require less documentation because they are less open to interpretation and can be mocked up on-page interactions. If you do need to document your prototypes (hopefully with an emphasis on 'just enough' documentation), you'll find that a prototype requires far fewer comments than a set of wireframes.

Prototypes aid in user-centered design. Usability testing is much easier with a prototype than with a set of wireframes, and getting lots of juicy feedback from users in general is much easier.

Prototypes necessitate less effort. Prototypes typically require less work than wireframes because you'll need to write (and maintain) less documentation if you're careful to prototype 'just enough' to get the feedback you need.

Of course, prototypes, like wireframes, can be abused. A common mistake is to completely mock-up a design some how using mockup generator and then throw it over the fence for the development team to build. Because prototypes can be even more prescriptive than wireframes, it's easy for visual designers to become frustrated because they feel left out of the loop. This is why it is critical to always prototype 'just enough' to obtain the necessary feedback and to approach prototyping as a collaborative exercise. Designers, developers, product owners, and, of course, users should all be involved in the process of developing, critiquing, and evaluating prototypes. This is why I believe it is best to sketch designs before touching any prototyping tools.

Conclusion

If you work in an environment where documentation is still king and the project manager looks at you like you're crazy if you tell him that a prototype with some comments is all the specification needed, don't worry. If you absolutely need wireframe-like documentation, you can get by without them because some rapid prototyping tools, will generate specification documentation for you. Granted, the results aren't spectacular, but it's a lot easier than having to maintain a website prototype, as well as a separate set of wireframes as a last resort, you can always use the excellent Screengrab! plugin to screen capture pages and create your own specification document. On-screen annotation tools allow you to easily add comments to your prototype, eliminating the need to include footnotes with your screen captures. You can simply grab the pages with the comments shown, so there are no excuses for not getting rid of those wireframes!