Evaluating wireframes requires you to think about the purpose of each component on a page. These components should make up a cohesive user journey that the wireframes allow you to explore before creative work gets underway. Providing feedback that helps clarify that journey will lead to a better overall product.
There are different types of wireframes that you make come across. Regardless, each must serve its purpose. When giving feedback on wireframes, these seven areas will always require your attention.
If you don’t understand the goals of a project, evaluation is impossible. Ask for explicitly stated goals, then evaluate the overall effectiveness of the wireframes based on how the designs serve the overall objectives of the project.
Call out where elements might be clouding the intentions of the project or contradicting the stakeholder’s requests. With each frame, ask: how is this serving the greater user journey?
As projects progress, oftentimes what stakeholders want can change. That’s why starting with a standard wireframe that accurately delivers the stated goals is so important. You don’t want your team to fall into the mistake of getting too creative too quickly, and then having to re-do their hard work.
Visuals and Branding
Visuals and branding usually remain minimal at this stage in the design process, so they don’t dominate the structural importance of the wireframes.
If your team wants to adjust mainstay wireframe elements like colors, fonts, and shapes, suggest that they don’t. These treatments may seem trivial, but they can easily confuse stakeholders, cause rifts between UX and design, and impact overall cohesion.
When evaluating for visuals or branding, focus on clarity. Regardless of how complex a project may be, don’t allow designs to veer away from standard style points.
Bad navigation can impact UX, SEO and other key aspects of a project. If you fail to catch navigation errors in your wireframe, you could cost your design or dev teams a lot of time down the line. The technical education website Treehouse states, “Areas like navigation and layout determine how the rest of the project proceeds. If there’s a problem, it’s better to tackle it at the start, rather than later with hi-fi prototypes, where you may have to redo some work.”
To avoid navigation problems, put yourself in a user’s shoes. Envision each page from their eyes when providing feedback. Chances are if you don’t feel a fluid navigation, the user won’t either. Consider elements such as:
To avoid navigation problems, put yourself in a user’s shoes. Envision each page from their eyes when providing feedback. Chances are if you don’t feel a fluid navigation, the user won’t either. Consider elements such as:How many clicks does it take to reach a page?
- How many clicks does it take to reach a page?
- How many steps are involved in sign ups, points of sales, etc?
- Is important content readily available?
- How easy is it to find what I’m looking for?
If any of the answers above don’t feel right, speak up. Don’t let work move forward until navigation is clear.
Much like project goals, each page should have a purpose that can be clearly understood. Think, why is this page here? What does it want me to do? Is it important that I do what it’s asking?Again, put yourself in the user’s shoes. Every page needs a specific reason for being there. Otherwise, goals won’t be met.
Again, put yourself in the user’s shoes. Every page needs a specific reason for being there. Otherwise, goals won’t be met.If a page fails to support a logical navigation or could help achieve goals better with some modifications, state your observations. Make sure every page has its purpose.
If a page fails to support a logical navigation or could help achieve goals better with some modifications, state your observations. Make sure every page has its purpose. Content
Wireframes help prioritize content. When critiquing this area, look for content placement, spacing, and grouping.
Regardless of if you use actual content or placeholders, consider how the layout creates a content hierarchy and how that hierarchy serves the goals of the page.
When real content is available, it should be used. Review the content for clarity. Make sure it conveys the purpose of the page and serves the greater goals of the project, just like any other element.
Calls to Action
This is an area where you may find yourself making the most suggestions. Web Ascender tells us that CTAs come before other elements: “Forget about colors and styles so you don’t get ahead of yourself and determine your call to actions. Start by asking yourself, ‘What do I want a user to do when they get to my site? What steps do I want them take?’ By removing the element of design, you will be able direct your focus to these important aspects of your website.”
Evaluate if it’s clear how visitors will engage with the page. Much like purpose and goals, if this isn’t crystal clear, the wireframe needs further work. CTAs need to have clear goals with effective messaging. If they fail to do so, conversions and other KPIs will be impacted. Look for CTA issues in your wireframe, such as:
- Image conflicts with CTAs
- Too much or too little content
- Placement of CTAs
Consider these and other aesthetic elements when evaluating. You may find yourself involved in several rounds of CTA edits. This is normal and all part of the feedback process. Continue brainstorming until the clearest, most actionable phrasing is determined.
If a wireframes layout is difficult to understand, the actual design is going to be a nightmare. Point out areas that might confuse or overwhelm. Give feedback on components like content placement and page order.
Furthermore, focus on readability. One problem wireframes run into is trying to fit too much content on a single page.
Don’t be afraid to suggest nixing an entire section or separating one page into two. It’s important to strike a balance between content-rich and content overload. Make a note if you feel your team hasn’t achieved this mark.
If you focus on these key elements, your team’s wireframes should always hit the mark. Remember, wireframes are about defining goals and ensuring utility; they’re not about beautifully polished designs.
A well-produced wireframe serves as the roadmap for your project’s success. Your feedback will be integral to how the project proceeds. Wireframes; they benefit us all.
Searching for the right diagramming tool?
Check out Cacoo, a cloud-based diagramming tool for team collaboration.