The relationship between UX wireframe and UX research

When we consider website design, the first thing most of us think of is branding and brand style, the colours and features it throws out as soon as the page loads, and how enticing that is to propel us through our journey in achieving what we need from it.

Before that page of striking images, cleverly written copy, and whirling bells and whistles becomes a living, breathing page of code, there are many more procedures and practices required to get each team to a stage where the branding and delivery can be put together.

Each design process starts by considering what the stakeholders need from their visitors and what they need from the stakeholders. The discussions that drive the delivery of every goal are helped along their way with in-depth research, ideas, presentations, and prototypes.

UX—user experience—is the enjoyable interaction and transaction of the user within your website process. The goal is to provide a user experience that encourages them to complete, to come back, and to recommend quickly, efficiently, and as effortlessly as possible.

Wireframes are a valuable tool used in the first stage and subsequent discussions of each design journey.

What is a UX wireframe?

A wireframe web design is the simplest representation of your website, typically during the earlier stages.

Wireframes help us imagine how the customer journey looks and feels to the user, decide which elements are important, where they should sit on the page, and how to drive the user to the next stage in achieving their goal.

A UX wireframe guides communication, organisation, and workflow. It keeps designers and researchers focused on the concept, its users and features, and are quick and easy to deliver or apply changes to the workflow.

At any stage where design, research, and workflow come together, efficiency is paramount to timescale and deadline. So, you need a tool that can reframe the ideas from your latest deliberation that doesn’t have to go back to a designer or presentation team just to move forward a few simple steps.

Why wait days or weeks when a pen and paper can do the same job in a few swift strokes?

The 3 levels of UX wireframe design

Low-fidelity wireframe design
Mid-fidelity wireframe design
High-fidelity wireframe design

Depending on where you’re at in the process and the research you’ve already carried out, wireframe web design can look as simple and scruffy as rough sketches (low-fidelity).

They’ll progress to more organised (and more common) professionally presented options using software that delivers smarter, even easier to imagine layouts and workflows (mid-fidelity).

At the top of the pile, wireframes feature pixel-perfect layouts (high-fidelity) with professionally presented pages, only a few steps from your next-stage prototype versions.

For first meetings, pen and paper are usually enough to get the ball rolling.

With additional research, further thought, and deliberation, something more organised can help each team consider which elements are working and which aren’t and provide a better, more structured plan for how to proceed.

Finally, those high-fidelity presentations deliver a hopeful, nailed-down version that designers, test subjects, and stakeholders can tweak before moving along to the next stage. These are the wireframes that keep everyone on the same page—they’re the blueprints to build the next stages of the process.

Why use a UX wireframe?

A wireframe helps designers decide which content, information, and features each platform needs, how it could and should be structured, how the hierarchy works, and what that means for user behaviour and expectation.

Will your platform satisfy your users’ needs? A UX wireframe should be able to provide the following advantages:

Quick and easy to create, amend, delete, or rework
Helps teams, stakeholders, and operatives involved in the design process to understand each opportunity, to remain focussed, and stay on the same page
Defines and presents features and operations without using complicated descriptions, or design jargon
Early-stage manual testing without opting into time and tech-expertise hungry options
Stakeholders can consider if the product or platform meets requirements
To determine logical flow between pages, screens, and actions
Detecting gaps in, and understanding, the customer journey

UX wireframe – the discussion starts here

Where, how, why? These are the questions you should ask of each element of your site.

Your answers define the UX and UI of your website, app, or other digital platforms, so each UX or UI wireframe helps you, your users, and partners to see the big picture more clearly within a defined structure.

The disadvantages of wireframe testing

They’re static, so they’re not the best method of testing by today’s standards. They’re helpful for debate and discussion, yet not so great for revealing actual reactions and user revelations.
It’s a poor option for presenting the power of animation, transitions, and effects on user attention and reaction. There isn’t the same facility to consider user emotion on imagery that alternative design research tools reveal.
Wireframes take imagination. Designers will have that abundance, yet you can’t guarantee your clients and test users will have the same depth of vision.
It takes time to create the deliveries that everyone can understand. Getting each party on to the same page could take several rounds when it comes to convincing them. Superior tech or practices could get them there sooner.

How to create a UX wireframe

Keep them simple.
Drop all colour; it only acts as a distraction—stick to black, white and grey.
Don’t use photographs, decorative fonts, or branding (that all comes much later).
Use the simplest symbols, placeholders, and representations of the elements we’re used to seeing on similar pages.

You should be able to strip out, scribble over, and reproduce every element with every new and valuable suggestion, alternative, or requested overhaul. The process is designed to pursue eventualities and opportunities quickly and easily, after all.

Don’t be precious with your wireframes. Their job is to be deleted and easily replaced—that’s why we keep them simple. If one route doesn’t work, ditch it, and put together the next one that might.

UX wireframes are about feedback. What works, what doesn’t, and what could make everything ten times better for your visitor, achieving their goals quicker and happier throughout their journey.

Which is better: sticking to simple sketches or using professional wireframe tools?

Either and both. It depends on your system, where you are in the process, and the facilities you’ve got to hand.

Different teams will have different processes with different plans and skillsets; we should all play to our strengths, so expect your designers to deliver in alignment with theirs. It’s all about getting the job done, the best way they know how to, as simply and as straightforward as they can. Most start simple and work up the fidelity ladder as elements and processes become more concrete.

UX research meets UX wireframe

When redesigning a dated or failing platform or creating something new, your UX research defines the data and drives of your users.

Each wireframe opportunity helps to uncover alternative and preferable workflow options. During the next stage, prototyping reveals how users feel, and finally, everything comes together at the design stage, showing how it should work as a finished product.

Where do we apply user research?

When it comes to research and wireframes, the same fundamental steps are as necessary as when starting from a blank page project. The difference being, we apply our research data to:

Organise the workflow
Assess the sequence
Assign functionality
Deliver a layout ideal for the user’s optimum experience

Using defined research during those first steps provides an educated platform to build on, providing accuracy over assumptions to the entire workflow and any smaller sections.

Interviews, focus groups, surveys, and studies can provide instrumental and workflow-driving data at the beginning of each project.

What do we learn from such research?

UX research reveals the goals for each application, possible pain points, typical behaviours, needs, and desires. Looking into existing competitors’ or previous workflows can highlight the key challenges and successes of past operations, delivering discussions into how to do things better.

Mapping out workflows and sequences in wireframes provides a visual journey that’s much easier to understand, and also define the number of steps required to achieve any given goal.

How should we apply those findings?

The enhanced functionality of each improved system needs to include all the valuable elements with the unnecessary parts removed. By examining the workflow, combined with user needs and reactions, we can deliver each fresh layout with an upgraded user experience.

Will prototyping tools replace UX and UI wireframes in UX research?

Each wireframe is a skeleton of your UX design at that point. Its goal is to deliver a view that everyone can understand, see where the process currently stands, and discuss where it may lead.

As the technology we use becomes more innovative and intuitive, each of the tools we use to present workflow and drive discussion becomes easier to work with. They provide far better crossovers and options for UX researchers to use as part of the design and research journeys.

We see prototyping tools steadily take the place of wireframing in UX research, as prototyping provides far more opportunities for testing and feedback, as well as usability. They also deliver far superior opportunities to physically test flows and processes in real-time digital arenas.

Delivering useable data takes more than sketches and introductory dialogue

In the research field, we strive for the data that drives decision-making. High-fidelity prototype options provide far more of what we need than most first-stage wireframe conversations.

With the ease of operation of all digital tools becoming simpler, it’s a seemingly simple jump to prototyping instead of paper and pen or even custom wireframe software. If they deliver higher-quality results, making moving through the process a little more seamless, straightforward, and speedy—especially in the hands of UX researchers—then why shouldn’t they be the tools to utilise and depend on moving forward?

If you would like to know more about wireframing and how to conduct UX research with wireframes email us at hello@ux247.com.