Posts Tagged ‘wireframing’

Wireframes and user testing: a changing love affair

Posted in Usability, Wireframe on April 12th, 2010 by admin – Be the first to comment

“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.

Why wireframing your interface

Posted in Wireframe on April 1st, 2010 by admin – Be the first to comment

Wireframes are without a doubt the key to an efficient interface. They have been used to think and define webs and apps before developing them. From sketchy drawings to high-fidelity functional prototypes, a wireframe can be used for many purposes, before and even during development. Here we´ll see how you can significantly improve your user interface by using wireframe and/or prototype.

Defining personas
Once you´ve got a first idea of your website, you need to think about the kinds of person that will use it. These user profiles are called personas. Once you ´ve done this, you can start thinking about your web interface always thinking about human interactions and your personas behaviours.

Wireframing user interface
You can now start sketching your website on a piece of paper. More for clients than final users, this part is important for client as wireframes help defining specifications and ultimately are used for the client validation.

Prototyping user interface
It´s important to prototype the user interface with at least, the main interactions being functional. The server side doesn´t need to be protyped, however, with the arrival of the web 2.0, RIA and dynamic websites, data request can be essential to an interface. Some prototyping software like Justinmind Prototyper actually allow you to create the interface and even simulate data, dynamic behaviours.

Carrying out user tests
Once the HTML prototype is done, it´s essential to share it to gather critics and feedbacks on what should be changed or not. This does not only help you to improve the interface but will also help you to gather requirements to include in your specification documents. Along with the prototype, it´s also important to include all kinds of diagrams and navigation flows that will help people and users to understand the information architecture of your website or application. Justinmind´s  HTML prototype even allows you to integrate analytic tools to track clicks and views (Google Analytics, CrazyEgg or ClickTale..).

Whether you want to build a brand new interface or simply improve user experience of your website, all these processes are keys to an efficient usability. This part of defining and conceiving your interface is by far the most important one, as the development and success of your app depend on it.

Justinmind wireframing contest is finished! And the winner is…

Posted in Wireframe on February 26th, 2010 by admin – Be the first to comment

Justinmind Prototyper 3.0 Beta period is coming to an end as our Beta testing contest is officially closed. We´d look like to thank all of you who particpated, sending us your comments and prototypes. Thanks to you all, we have greatly improved Justinmind Prototyper and we´ll be officially launching Justinmind Prototyper 3.0 sometime next week, as it will be available for sale on our website, so don´t go too far ;) !

Right, after 6 weeks of fierce battle between 173 testers, it´s now time to declare the winners and the prizes they just won:

Final hall of fame of Mac testers:

Wireframing contest-final hall of fame for Mac

Wireframing contest-final hall of fame for Mac

Complete Hall of Fame

Final hall of fame of Windows testers:

wireframes contest - last hall of fame for Windows

wireframes contest - last hall of fame for Windows

We´ll proclame the winner for the best interactive prototype next monday, stay tuned ;) !

Wireframe contest – Last week!

Posted in Wireframe on February 24th, 2010 by admin – 2 Comments

Justinmind Prototyper 3.0 Beta testing contest is coming to an end, we´ll soon be launching the final version. The race for the best wireframe will finish on Friday, February the 26th 2010 at noon. My fellow wireframers, the end is near, so give everything you´ve got and send us your best prototype. For those of you who learn about it just now, it´s still time to join the challenge as building a wireframe with Justinmind is really quick and easy.

For Windows users, go to TryBeta.com, sign in as a tester, search for Justinmind and download the program.

For Mac users, go to MacDeveloper.net, sign in as a tester, search for Justinmind and download the program.

We´ll be announcing the winners on the same day in the afetrnoon. Until then, good luck!

Wireframe Toolbox

Posted in Wireframe on October 24th, 2009 by alex – Be the first to comment

The great and unique comparison between all wireframe and prototyping tools.