Wireframing is a vital tool in the app or website development process. It allows you to map out where the most important elements on the page should be, it simplifies communication between you and your client or development team, and it helps the designer spot potential issues in the structure or flow of your site.
These days, tools like Balsamiq® Mockups and Axure RP make it easy to continue the process from wireframe to interactive prototype without writing any code. However, knowing the basics of paper-based or whiteboard wireframing is an essential skill for the workplace. The following are 8 essential tips to remember when wireframing.
Start with low-fidelity site flow.
Wireframing can come in various forms, from working on the back of a McDonald’s napkin to near final mock-up. But before you get too detailed with your wires, it’s important to know what pages will go on the site and which pages should link to each other. This allows you to design call-to-actions that lead users through the right page flow.
Site flows also give you a good idea of the app’s navigational hierarchy. You can get a good feel for the scope of the navigation. If navigational pathways become too complex, you can simplify. If the navigation gets too large in scope, you can combine pages. All this makes for a simpler navigation experience.
Having a site flow map also helps developers focus on which pages link to each other, helping them to avoid erroneous or missing links.
Don’t confuse site flow with user flow.
Creators often confuse site flow with user flow. Both demonstrate page flow, but with a different perspective and for different purposes.
A site flow is like looking at a map in bird’s eye view. It gives you a general idea of directions and where you might travel. This satellite view allows you to understand the scope and complexity of a site.
A user flow is like looking at directions from street view. You can see which routes are available, where to turn, and how long it will take to get to your destination.
The user flow view allows you to feel how much time and effort the user will take to accomplish his or her navigational goal. It helps developers learn how the structure interacts with the user. How will the app react to certain user behaviour, like resetting a password or filling out form fields? Developers can obtain these answers using user flow.
Keep it about structure.
Try and focus on where things on the page will go and how prominent they will be. At this stage in the game, it is best to only use lined squares or boxes with x’s. This stripped down and barebones wireframe means you don’t have to worry about your client being distracted by color, content or detailed design. This helps to keep the discussion on structure and flow and not on visual elements.
Follow the F-shaped pattern.
Research and eye tracking software have shown that the human eye follows an F-shaped pattern as it moves across the page. A user interacting with your app will typically start at the upper left corner, go across almost a full width of the page, and then work her way down the page along the left-hand side. The process repeats as the eyes again scans the top and moves from left to right. This results in a pattern that resembles an F. As the developer, you will want your most important elements – logos or calls to action – to be located on the left side of the page, with the upper left corner as your locus.
Don’t let wireframing software be a barrier.
If you’re using software to wireframe, don’t let it bog down your idea-making machine. Focussing too much on features of the wireframing software reduces the time to invent and create. The program could end up being a barrier to your free expression.
Wireframing software can take time to master. Software requires more resources than simple sketching and low-fidelity wireframing.
Finally, this software can be expensive—Axure and Justinmind cost hundreds of dollars for a yearly license and iRise can cost thousands of dollars.
Keep it simple.
It’s tempting to jump quickly to something that will look like the final design. But that is another step in the process. Keep your wireframe simple and mutable.
The human mind is easily distracted by details. Your wireframe is intended to communicate broad ideas – the navigational model, page layouts, and task flow – and these concepts may get drowned in the details of a complex, high-fidelity mock-up.
Remember, every wireframe will need to be paid for in the code. Keep in mind the time and budget of the project. The goal is to create a minimum design as quickly as possible in order to test it with a user.
Present the wireframe as a story.
Present the frame as a story. Stories help people visualize a possible reality, and helps guide the customer to their intended goal.
Link wireframes in a slideshow presentation, and narrate it using a persona and user environment.
Explain the design decisions that were made to the customer: the page structure, the layout, hierarchy, and interactions. It helps the customer to understand your story, and it avoids misunderstandings that could crop up later.
Include in your presentation jettisoned drawings, documents, notes, and prior sketches. Customers or team members will relate to your wireframe better if they appreciate its history.
With rapid ideation as the goal, prepare for rapid change and pivot of your wireframes. Try not to be tempted to think of your wireframes as final products, because they aren’t. Wireframes are a design tool, not a customer product. Having said that, don’t become emotionally attached to your wires, as they will change.
Have any other user interview tips you’d like to share? Leave us a comment below.
If you find this post interesting, subscribe to our newsletter to get notified about our future posts!