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?

hotel reservation wireframe

Common wireframe type. Work with this wireframe right NOW:


1. First one is the visual heat. 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.

hotel reservation wireframe

Wireframe with visual heat. Work with this wireframe right NOW:


2. Next step is to add realistic data to the wireframe. 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.

hotel reservation wireframe

Wireframe with realistic data. Work with this wireframe right NOW:

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. The last step is to consider images. 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’.

hotel reservation wireframe

Wireframe with images. Work with this wireframe right NOW:


Now you can compare two wireframes. The one from which we start and the second after adding all things described above.

hotel reservation wireframe

So, if you want to create a great wireframe, remember three things:

  1. Show visual priority by using shades
  2. Do not use lorem ipsum
  3. Consider and describe pictures

Article is done based on the presentation of Steve Cable.


Create your wireframe right NOW!