Wireframing 101: Back to Basics
This article was originally posted on the Sand Dollar Design blog.
In this article, we provide some tips and advice on how to design low fidelity wireframes that not only solve design problems, but also make the designs easy to understand for everyone who interacts with them.
Based on my experience, you don’t have to be a seasoned UI or graphic designer to create low-fidelity wireframes. There are a couple of basic principles about creating great wireframes that need to be understood by both novice and experienced UX Designers. But first, let’s start with the reason we are creating wireframes in the first place.
Why do we create low-fidelity wireframes?
Wireframes help designers explore and come up with solutions to design problems in a very quick and cost-effective way. You can share them with team members and stakeholders to obtain early feedback. Low-fidelity wireframes can be evolved to higher fidelity, visually appealing screen designs at a later stage, but it is critical to first understand the flow of the various tasks, the structure of the system and the screens within the system, as well as the contents and features contained within the various steps.
Here’s some advice you may find useful when creating wireframes:
1. Get your ideas down.
Very important, just get your ideas down, it doesn’t have to be perfect and it definitely doesn’t have to be visually appealing. Low-fidelity wireframes are created just after the research phase of the project plan. It’s for you to get your ideas out of your head while they are fresh and on canvas as quickly as possible.
Don’t get “stuck” between the detail of one part of the problem, you can always come back and iterate! Focus on the whole forest, not only on the tree in front of you.
It should be quick and dirty concepts at first, but should quickly evolve into screens with standards and UX best practices applied.
2. Ask basic questions before and during your design.
Take a leaf from the book of our esteemed frenemies, the Business Analyst, and ask some of the basic 5 “W” questions when starting off your design process:
Questions you must have answers to before wireframing:
- What am I designing? (What does the proposed solution entail? Is it an app or a website?)
- Why? (What problem is this solving)
- Who is it for? (Who are the different users that will use the solution)
The answers to these questions are typically found in activities such as conducting User Research and creating a UX Strategy before you get to the wireframe design. If these activities are not done (which often happens when teams try to shortcut the design process), then you will not be able to answer these basic questions.
Questions your users will have when viewing your screen designs:
- Where am I?
- Where did I come from?
- What can I do on this screen?
- Where can I go from here?
You must be able to illustrate the answers to these questions within your proposed solution.
3. Always refer back to Best Practice.
In most instances, established patterns and best practice examples exist for a very good reason: it’s been tried and tested many times over. Despite this, we still find that some basic standards and UX best practices and principles are not being followed and implemented by many designers.
When you have identified all design elements required within your wireframes, try searching for UX best practices and principles for design elements on Google and stick to these standards.
For example, search Google for:
- “UX best practice for mobile/desktop menu”
- “Dashboard, UX best practice”
- “Checkboxes and radio buttons UX best practice”
Some useful links for UX Standards and Principles to refer to:
PRINCIPLE OF CONSISTENCY AND STANDARDS IN USER INTERFACE DESIGN
DESIGN PRINCIPLE: CONSISTENCY
https://uxdesign.cc/design-principle-consistency-6b0cf7e7339f
CONSISTENCY: MORE THAN WHAT YOU THINK
https://www.interaction-design.org/literature/article/consistency-more-than-what-you-think
USER INTERFACE DESIGN GUIDELINES: 10 RULES OF THUMB
User Interface Design Guidelines: 10 Rules of Thumb
4. Be aware of “cognitive load”.
One of the key principles of UX Design is that we try to reduce the cognitive load of our users when they interact with the systems we design. In psychology, cognitive load describes the mental effort that’s required to learn new information. In UX design, we can think of cognitive load as the mental processing power needed to use a product. If you have too much going on within a screen, users won’t find content or actions easily and they will have difficulty completing tasks.
Some useful links around reducing cognitive load, Gestalt Principles and Mental Models of Users:
MINIMIZE COGNITIVE LOAD
https://www.nngroup.com/articles/minimize-cognitive-load/
MENTAL MODELS
https://www.nngroup.com/articles/mental-models/
GESTALT PRINCIPLES
7 Gestalt principles of visual perception: cognitive psychology for UX | UserTesting
5. Follow the golden thread.
When referring to the golden thread within UX design context, we are talking about the ability to trace your designs back to your research and strategy, making sure that your designs address and solve the problems you have discovered, and incorporates design ideas triggered during research and journey mapping activities.
It is important to have a golden thread running through your research, strategy and design. In doing so your designs will address the correct business requirements and user needs and this will stop you from designing something that is not valuable, wasting time and money. The golden thread holds all parts together and creates traceability from research, through various iterations of design to the end-product.
Some useful links around following the golden thread:
THE GOLDEN THREAD
6. Make conscious design decisions.
There is no worse feeling than when stakeholders or colleagues ask you why you have made and implemented a certain design decision and you are unable to answer. Always remember, for each design decision you make, you must be able to explain why. Or better, take the stakeholders on the problem-solving journey with you, so they really understand your design decisions.
At the end of the day, by making conscious design decisions coupled with UX best practices and principles, you will feel comfortable when presenting or explaining your design choices. This will help you get buy-in from stakeholders and teammates.
Some useful links around regarding making conscious design decisions:
MAKING DECISIONS AS A UX DESIGNER
https://uxplanet.org/making-decisions-as-a-ux-designer-949bcfd537bf
In summary
As a UX Designer, your first responsibility is to make sure you are solving the right problems, coming up with usable solutions that not only meet the user needs while achieving the business objectives but also delighting users throughout the experience. Applying the techniques described in this article should help you achieve those lofty ambitions on a more consistent basis, leaving you with happier stakeholders and more satisfied users.
About Sand Dollar Design
Sand Dollar Design is an Experience Design Consulting firm that helps organisations create business value and delight their staff and customers alike, by re-imagining the User Experience, through innovative digital solutions.
Find out more about our services at www.sanddollardesign.co.za