3 Ideas How to Make Wireframe More Useful

Wireframes are created every day. Many of them are generated by UX teams and agencies. Among them there are a lot of good works, but there also are many of them that are hard to call good ones. Common mistakes are made during wireframing processes, and they stop wireframes from becoming really great ones.

Below is the common wireframe type. The positions of the elements are well represented in it. In any way, several things are missing there. Their absence stops this example from communicating user needs. So what are these things?

1.Firstoneisthevisualheat. Use different shades of gray to show where user focus will be. This method is known as Niehaus technique. We have written about it before. Remember that this is not about how to create the focus. It is only about describing where it would be.

2.Nextstepistoaddrealisticdatatothewireframe. Put all icons, navigation labels and text that are available. This will provide the ability for better user testing and for creating valuable case scenarios.

For example, without realistic information on the testing stage you could ask the user: ‘Can you see facilities?’ Mainly, you would obtain positive answers.

Everything goes in another way when you are testing wireframe with realistic data. In this case, you could ask more general questions. For example, ‘Do you want to stay in this hotel?’ The user's answer could be that they would like to stay at a hotel with a big pool, but are afraid that there will be too many kids in it. Analyzing this answer you can understand that user noted key features and how they referred to the user. We can also understand what information is important for future users.

So, for testing usability it is better to use wireframe without data, but in case you want to study user experience, use the one with realistic data.

3.Thelaststepistoconsiderimages. The boxes could tell us the size and the position of the future images. But what is this image about?

If this is a hotel page, we need some hotel photo. In the hotel case, some studies were done, and it was investigated that the user didn’t want to see on the biggest image the outside hotel look. They preferred the image which shows how the rooms look like. So, already on the wireframing stage of the design process we could find out exactly what images users preferred.

In addition to using real photos, you can also use sketches or just write what would be in this picture. Just do not leave boxes only with the text ‘Image’.