Justinmind Blog

“Is my new website going to look as sketchy?” I’m sure you’ve heard this kind of comment after presenting a wireframe to a client?

Wireframes can often lead to confusion, especially during usability tests with users who don’t know much about the project. But you can use a new agile methodology that will put everybody on the same page.

Wireframes VS user tests

In any IT project, usability tests are essential to get feedback on the overall user experience from random users. Unfortunately, most of them are not quite sure how to respond or interact with a wireframe. Often, they don´t know what they should be doing, and some don´t even realize they´re actually looking at a webpage. This lack of context adds cognitive troubles to every step of the process. In the end, this confusion means less relevant answers and opinions.

Most wireframe tests occur with good-willing, though unsophisticated users. They generously agree to test, figure, be puzzled and answer questions as best as they can. This cognitive gap is often due to blurry definitions on what they should or should not be focusing. “Look at the forms but don´t pay attention to images.” “forget about the design, tell me what you think of the layout” “check the font size but not font itself.” Anyone would get mixed up with such questions.

Design and visual impressions like colors, fonts and images are key to using a site, and these details are important to any usability test. Users won’t be able to use a page properly if they don’t see links or can’t read what you expect them to. Information architects, however, tend to stay away from these features so that they don´t step on designers’ shoes. After all, “a wireframe is no design”.

Design & wireframes

Or is it? The role of an information architect should really be focused on clarity, and getting the message across.

Originally a “wireframe” was a quickly rendered 3D model showing the model’s structure while engineers were still working on it. They were much faster to work with than the full rendering. Interestingly, they are not used anymore since modern tools and techniques are fast enough… that should give us a hint!

Why build wireframes and not straight final design?

Information architects don’t design final webpages, instead, they build wireframes instead of designing final pages. There are several reasons to this:

- Wireframes are faster to build and work on

- A wireframe forces the viewer to focus on the content and not on the visual design.

Unfortunately, all these tasks are geared for the project-team. Wireframes aren’t built for external audiences and this is why most users have a hard time grasping the essence of wireframes.

From wireframe to high-fidelity prototype

IT professionals are thus increasingly mixing wireframes with more functional HTML prototypes. These interactive prototypes are so close from the final output, in their design and interactivity, that it became a lot easier to carry on relevant user tests. These HTML prototypes can even integrate analytical tools like Google Analytics to carry out remote user tests. This use of wireframe and prototypes is changing the way IT project are carried out as it´s now possible to know what´s the best app to build for users before having even started the development process.

Projects can benefit a lot from this more agile methodology as it avoids long, time-consuming changes and cut rework drastically.

Wireframes & prototypes didn´t use to be a priority  for IT professionals. But as the IT industry develops, it becomes essential to build websites or apps on solid foundations. Here comes a non-exhaustive list of why we should all be using wireframes and prototypes more often.

• We speak different languages

Imagine an English developer having to explain a future website to his client, a chinese businessman… I think this speaks for itself. But we don´t need get to such extremes, the very same word can have different meanings for people that speak the same language. But simply because they have different backgrounds they won´t intend the same things behind a common concept.

• We need to visual the future product

An image is worth a 1000 words! This is actually why we wireframe in the first place (and incidentally, reading all the specs doc of a future website is a pain, I wonder how many actually do it). Even if it´s only a sketchy wireframe, at least everybody sees where is what and how it looks like.

• Clear up your ideas

Get things clear! Wireframes and prototypes help you to organise and share your idea avoiding misunderstanding. You´ll see what´s possible and what´s not.

• Save time (it´s quick)

Because with a prototype in hands, you know what to expect as a final outpout. Hence prototyping will save you time during development and avoids rework being done too. A prototype is also quickly shared & commented among collegues and you can apply ongoing changes to it so you see in real-time what´s being done.

• … and money (it´s cheap)

Time is money, everybody knows it! Whether it´s on conception, design or development, saving time most certainly means less man-month! Plus, the whole point of a prototype is to save time, so it´s usually developed using cheaper & easier technologies than the one that will be used for the final product.

• Anyone can do it

No need to be a high-profile developer to do a prototype. Actually, it´s quite the opposite. If you want to build a good user interface, you might want to ask a UX designer, or designer to build what usually a simple HTML prototype. Moreover, with high-fidelity prototyping softwares like Justinmind, everybody can create fully functional prototypes in no time and without a single line of coding.

• Run user testing before development

This is probably the main advantage of prototyping! Prototyping the UI of a website or an app lets you carry out user tests before developing the final thing. This is also a big difference between functional prototypes and static wireframes, as the latest doesn’t allow you to do this. Go prototyping!

All in all, although wireframes are very useful when it comes to define and analyse a website or an application, these arguments shows that it´s best to prototype. Prototyping will “fluidifies” all processes of any IT project, from design to development and testing. With RIA & dynamic websites the need for prototyping will hopefully be increasingly present.

Hi everyone,

This short post just to let everybody know we´re offering free licenses to those of you who´d be willing to write and publish a review about our wireframing tool: Justinmind Prototyper 3.0!
Test it and review it, and we´ll give you a full perpetual license of the Enterprise Edition once you´ve published the review on your blog.

Remember the wireframes of Justinmind’s site?

I’ve transformed (well, half-transformed) them into a prototype. Look at it live here.

The first 10 pages are almost identical to the real site (well, some things are more to the right, others to the left, and I must fine tune some events, but it’s a pretty good job for 2 hours of prototyping after lunch, isn’t it?