Introduction:
While crafting a product, designers must keep their focus on both the relevant features of their design but also the organisation of this. At the beginning of the design process, this may be difficult to achieve. A wireframe map is a solution to this dilemma.
A wireframe map combines two tools: wireframes and sitemaps. By matching wireframes to the sitemap of a product, a wireframe map allows team members to understand the path a user must take to accomplish a certain task (user flow). This article explores four simple steps you can use to make a high-yielding wireframe map.
Step 1: knowing your users
Before using wireframes, invest time into user research. A good product design begins with a holistic understanding of users and their needs. This will also save time and effort in the long run.
Defining user goals:
User goals refer to descriptions of the end states that users want to reach. An example of a user's goals is if a person visits a medical website, their end goal is to book an appointment. All user goals are based on real-life situations.
It is important to understand user goals at the beginning of your design because the content and features of your product need to fulfil these goals.
You can use user research methods to pinpoint user goals. User research methods can be divided into two categories - quantitative and qualitative. At this stage of design, focus on qualitative user research such as in-depth user interviews and contextual inquiry to determine the needs and wants of potential users.
Understanding what you need to offer:
Once you have determined your user’s goals, you need to figure out what you can offer them to help them achieve their goals. There exists a systematic approach to assist the product team to determine which exact features to offer. It is called Jobs to Be Done (JTBD), and it is a framework representing user needs derived from user research. The framework involves identifying how things are today (the issue is present), and how the designer wants things to be (the issue is solved). This framework will help you understand the goals, context and even the steps involved in interaction with your product.
Use storyboards to visualise scenarios of interaction:
Once you know why users will be using your interface, you must determine how they will do this. To effectively do this, creating a storyboard of interactions with the app will help you see your product from the perspective of your user, which is invaluable. Storyboards allow you to see the tasks your user will accomplish and how they will execute this. Make sure to storyboard the most important aspects of interaction with your interface.
Step 2: Defining the sitemap
After the central interactions with your interface have been defined, use a sitemap to create a hierarchy of content and features. A sitemap gives a visual overview of the pages, information and content of your interface, and how they link and interact with each other. The sitemap will act as the basis for the wireframes we will create, which will be explained soon.
Breaking down tasks into individual actions:
Designing a product experience is easier when the tasks a user wants to accomplish is broken down into smaller, individual actions they can take to do so. For example, when a user is trying to purchase a product, they will typically go through the following:
- visit the homepage of the site
- Search up a specific product
- Read the description of the product
- Add the product to their cart
- Pay for the product
- Wait for a receipt in their email
All these actions can be conveyed in separate screens to help the user purchase their product with as much ease as possible.
Site-mapping:
A site map can be used to show the connections between individual pages on your interface. It uses the format of a tree diagram to show the hierarchy of pages.
Evaluating your hierarchy of pages:
When creating a hierarchy, designers should aim to reduce the number of steps a user has to take to complete a specific goal.
As the user’s effort in interacting with a product increases, the less positive the user experience becomes. You want the user friction to be as small as possible. An example of creating an effective hierarchy is placing product pages and indices near the top of your hierarchy, and ensuring that important content is conveyed in a clear manner.
Evaluate your hierarchy with card sorting:
After you’ve created your hierarchy, you must check that this hierarchy can be easily interpreted by your audience. You can do this through card sorting>
- Write the titles of your pages/screens on index cards
- Gather a group of people who represent the target audience and ask them to sort each card into categories which make sense to them.
Step 3: Designing wireframes
If you think of sitemaps as an outline of your entire product, wireframes are an outline of each page/screen within your interface. Wireframes show the content and elements in each page/screen. A wireframe will help your team members and stakeholders understand the flow of your product and how each page interacts with each other.
Determining the purpose of each wireframe:
Every wireframe should contribute to a particular aspect of user flow. For example, the wireframes of an e-Commerce website would include the landing page, product-details page and product-listing page. Each page plays a crucial part in the user’s flow. For instance, the landing page intends to hook visitors and convey popular items.
Ranking your content:
The content of your interface is arguably one of the most important aspects of your interface. It is why users click on your website or install your app. Thus, you must determine the specific positions of your content in your wireframes. You can use these questions as a guide to designing your wireframe:
- What content should I show on this particular screen?
- How should I order the content?
The answers to these questions will influence the layout of your screen.
Here are some tips to help your wireframes be more efficient:
- Conduct research to determine the goals of your business and the needs of your user. This will help you create content which answers these goals and needs.
- Prioritise your content such that the most important information is in a location where users can easily see it, such as at the top or centering it.
- Steer clear from visual clutter. Visual clutter can lead to information overload and so can have a negative impact on user experience. Information overload means that the amount of information available in a particular moment exceeds one’s processing ability. This rule applies to wireframes as well. Adopt a minimalistic approach throughout the design process to avoid an excessive buildup of content.
Use annotations to describe your rationale:
Due to the schematic nature of wireframes, it can be difficult for reviewers to understand your design. For this reason, use annotation to explain what they see on each wireframe and how this is connected.
In your annotations, make sure to do the following:
- Explain why you’ve ranked content in a particular order in a wireframe.
- Outline the function of interactive elements (for example buttons) so that reviewers can understand what will happen when users come into contact with such elements.
Connecting wireframes:
Use arrows to connect your wireframes in a way you believe the users will interact with them. For example, connect the action (clicking an element) with the response of the system (going to another page). At the end of this, you should get a better vision of the future UI experience.
Testing your wireframe maps:
After you have designed a wireframe which maps all your pages, you must test your design to ensure that it is functioning as intended.
Identifying areas of disharmony:
Get feedback for your wireframe maps from actual or potential users. You can use a clickable version of your design to understand what works for them and what doesn’t. Once this is completed, you can eliminate all aspects of your design which creates friction or requires more energy for the user to comprehend. The great thing about this is that you do not need to run many testing sessions at all. As a matter of fact, 85% of usability issues can be identified with only five participants.
Conclusion:
Your design process can most definitely be strengthened with the use of sitemaps and wireframes. While sitemaps break down the product into pages, wireframes provide a blueprint of what each page/screen will contain. Together, sitemaps and wireframes can help you understand user flows and will assist you in achieving the most ideal user experience possible.
