svg image

Why clickable wireframes have become such a valuable tool




Since becoming advocates of the Lean methodology and in our pursuit of reducing wasted time - clickable wireframes have become an integral part of our process. The ability to create something very quickly, which we can test on users means that when we do come to the coding stage the client has far more confidence that what we are creating is the most appropriate solution.


Here are a few notes from my experience of creating these wireframes:

  • Creating complete wireframes for different screen sizes can double or triple your workload; therefore I’d recommend choosing the most appropriate size for you project, and just focusing on this first. You can then be selective about the pages or sections of the project that do need wireframing at different sizes, as it's unlikely that all will need doing.
  • Creating a wireframe that generates a HTML prototype means that prototypes can be shared easily and reliably in all browsers and on all devices. It really doesn’t matter if the HTML it generates is of no use when it comes to actually coding the project. Being able to demonstrate the project in Safari on an iPhone for example creates a far more realistic experience for the user, which is the primary consideration.
  • Choosing a wireframing tool that has the ability to use logic statements and store variables means you can demonstrate a user’s experience through a project in detail from start to finish. For example being able to add and remove products from a cart for an e-commerce project means the full experience can be demonstrated and thoroughly tested.
  • Wireframes can be as high fidelity as you want them to be. I tend to create them devoid of style for the initial prototyping, and then add style to key elements, testing the interactive design later on.

From our experience clients love wireframes. Really love them. This is because they’re able to have an incredible insight into how the product is going to work at a very early stage of the project, and can share them around stakeholders and potential users in order to get really accurate feedback. We’ve had several clients that have secured further funding for projects off of the back of these wireframes, and so they really have become an invaluable part of our process.

22nd August 2016
Dash line

More UX

Web Pysch 101: The science behind keeping it simple