Wireframes are created every day. Many of them are generated by UX teams and agencies. Among them there are many good works, but also there are many of them that it is hard to name a good one. Common mistakes are made during wireframing processes, and they separate wireframe from becoming really great one.
Below is the common wireframe type. The positions of the elements are well represented in it. In any way, several things are missed there. Their absence stop this example from the communicating user needs. So what are these things?
Common wireframe type. Work with this wireframe right NOW:
http://mockupbuilder.com/Gallery/334
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 had written about it before. Remember that this is not about how to create the focus. It is only about describing where it would be.
Wireframe with visual heat. Work with this wireframe right NOW:
http://mockupbuilder.com/Gallery/337
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.
Wireframe with realistic data. Work with this wireframe right NOW:
http://mockupbuilder.com/Gallery/338
For example, without realistic information on the testing stage you could ask user: ‘Can you find see facilities?’. Mainly, you would obtain positive answers.
Everything is going 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 answer could be that he like a big pool, but he is afraid that there will be too many kids in it. Analyzing this answer you can understand that users spotted the copy and the key features as they referred to them. We also can understand what information is important for future users.
So for testing usability is better use wireframe without data, but in case you want to study user experience use the one with realistic data.
3. The last one 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 what exactly images users preferred.
In spite of using real photo, you also could use sketches or just write what would be on this picture. Just do not leave boxes only with the text ‘Image’.
Wireframe with images. Work with this wireframe right NOW:
http://mockupbuilder.com/Gallery/339
Now you could compare two wireframes. The one from which we start and the second after adding all things described above.
So if you want to create great wireframe remember three things:
- Show visual priority by using shades
- Do not use lorem ipsum
- Consider and describe pictures
Article is done based on the presentation of Steve Cable.