How To Improve Wireframe Usability

Freelance Technical Writer

Often many elements are missing from wireframes, making them less useful than they should be. Most wireframes clearly show exactly where elements must be placed on the page, and precisely where they need to be. There are numerous issues that designers and developers are not informed of that ultimately affect the users that you test with. So how do you go about improving wireframe usability?

Technical Writing

Visual Priority with Shading

The above wireframe example gives no indication of what users should be looking at. There are no visuals to focus on and therefore the action required from them is unclear. User-centred design processes allow you to acquire information regarding what the business wants the users to do on this page. This type of wireframe is a problem because it communicates no insight to the designer.

    • Remove all harsh lines around elements and add shading to allow certain elements to be more prominent than others, thus giving them visual priority. This will allow the page to be more focused, and the darkest element on the page – such as a Proceed button – will clearly show users what the next step should be.

Some elements need to be more eye-catching than others. How that visual priority is achieved is up to the skills of the designer and what call-to-action they need.

Be Aware of using Color

Usually color on a wireframe is used for annotation. It can also be used to showcase error messages and target areas you need the client to focus on. However, it is advisable to remove all colors from the wireframe before testing. You want to avoid colorful elements from distracting the user and upsetting the results.

Wireframing allows early detection of design flaws that prevent dramatic failure in the final stage.

Use Real Data

Populating your wireframe with real data is extremely important. Anything that the user can interpret must consist of real information – from page titles, navigation tabs, icons, form labels and content. This is a fantastic way to plan for a disaster. Once your site is populated with data and images, you want to be assured that it will work properly. Even more important is the need for accurate insight from a test user by creating a believable experience. It is impossible to get a true perspective if a tester has to use their imagination, as it drastically limits the questions you can fairly ask them.

    • Asking questions which lead the participant in a specific direction is not going to help you. An example: ‘Do you see the key features?’ will alert the tester to fact that they are there and will not give you an accurate answer. ‘Yes, there they are’ is less insightful than ‘No, what are they?’ or hopefully ‘Yes, instantly’.
    • Using actual icons and content allows you to ask more pertinent questions, such as, ‘How do you feel about this business?’’. ‘It looks great, but they have one breakfast option and I hate eggs’ is far more beneficial an answer than a simple yes or no questionnaire.

You will now be accurately aware of which key features have been spotted, as well as their response to the icons and language being used. Testing a data-less wireframe only tests its usability. Rather test the user experience by adding real information.

Ensure Everything Totals Up

Once you have added all that real data, it is imperative that you ensure the user journey is consistent on every page throughout the site. The user will be distracted from their task if, for example, a basket page wireframe has two products of $1 each that add up to $5. It is easy to miss such errors, which is why it is always helpful to have somebody else go through them.

Ensure Appropriate Affordance for Interactive Elements

Elements that are interactive need to visually appear the way they work. An example would be buttons, which should look clickable. Testing will give you a clear indication of how clear calls-to-action are, and show which elements need affordance.

Technical Writing

Work using Real Pixels

This is not important if you are using HTML, but working in pixels removes guesswork when creating flat wires. Not working in pixels can cause some issues when going into design. Elements can be correctly placed and sized on the page in the final design when actual pixels are used.

Create a Change Log

This keeps everybody working on the website informed of what changes have been made and which ones need reviewing. It is always a good idea to include the document version number, the name of the person who made the changes and page references for the exact changes made.

No Black Lines

Wireframes tend to look cluttered with boxes, bullets and lines. Strong black lines make this worse. Rather use shaded boxes to group items together and use thin grey dotted lines if you really need to.

Use and Describe Images

Images are a fundamental part of the user experience and aid in making decisions regarding products and services. They affect perceptions of your business and site quality. However, wireframes consist of huge grey blocks with cross lines in them to represent where images will be.

    • You do not need every image for the site. You simply want to portray insights into the types of images that will be used.  This will help eliminate any aspects that might confuse users, such as whether shirts come with ties and hats, for example. Now you can eliminate the ties and hats to ensure the reader understands the shirts.
    • Image descriptions should imply the kinds of images that will be shown to give the user some idea. It is unnecessary to make them as prescriptive as the actual images. It is worth including this in order to gain insight during research.

Hopefully now your wireframes will be more usable and ensure your testing gives you accurate information to use in the final design. The more user-friendly they are, the better your analysis will be. This involves making the wireframe as close to the final concept as possible, so that the tester has an actual design to work with.