“It’s all about the journey, not the destination.”
Or so say many new-age philosophers. But these Birkenstock sages don’t work in web design, where it’s impossible to separate the destination from the journey. Users aren’t spiritual seekers when they come to your website. They don’t want to take the scenic route or the road less traveled.
They want to get to where they’re going as efficiently as possible. Obstacles, detours, and traffic jams all must be eliminated. From a web design perspective, the best way to create a pleasing journey to the intended destination is by using wireframes for preliminary layouts.
Low vs High
A wireframe is the basic layout that users will see on a screen. It shows where the elements will go, from CTA buttons to visuals and navigation menus. Each page of a website will have its own wireframe in utero, so to speak. The sequence of pages that a user advances through is often called the user journey.
The wireframes of this journey can range from low to high fidelity. In other words, a wireframe can be a simple sketch on paper with ink–that is an example of low fidelity. Platforms like Figma allow teams to create more high fidelity wireframes that are digitally enhanced and stored on the cloud.
Price Is an Object
But first, you might have to convince clients that a wireframe process is worth the time and expense. It’s understandable that clients want deliverables as fast as possible at the lowest price possible. They might not grasp why a wireframe is necessary to get the best results.
Since price is an object, you have to be clear that a wireframe is worth the expense in the long run. Again. have them think about the destination and the journey.
Are We There Yet?
Not all websites serve the same purpose, but each one has to have some main goal in mind. Obviously, buying and selling remain huge components of e-commerce, and usually one or the other (or both) determine the destination that users seek as they enter a website. If users want to buy something, then the entire design of that website must center on that primary function.
There’s a big difference between a user who wants to buy a lawn mower and a user who wants to hire a lawyer. Both are forms of e-commerce, but these destinations will require users to take very different journeys. A sitemap can outline the journey that users might take. But without nailing down the destination before you begin plotting out a website, the path users go on might become very meandering.
No Friction
When a user’s journey to the destination becomes bogged down for any reason, the user is said to have encountered “friction.” Friction often creates heat in the form of user frustration, and UX quickly sours. The entire point of web design is to remove these points of possible friction, and the best way to do so is through the use of wireframes.
Wireframes can illustrate a journey so that designers can map out the expected user flow. The individual pages need to work together so that in effect form equals function. Each of these pages need to be connected in some way, akin to how the plot of a movie has a clothesline to tie the action together. And just like movies, websites should also be storyboarded, so that each page has its own singular purpose.
Friction arises when the individual pages don’t add up. If users want to see product reviews before checking out, this task should be easy to execute. When users have to go hunting for what they want, then something is amiss in the design.
Rank the Info
Friction sometimes gets created because the information on a page isn’t logically presented. To avoid a haphazard array, you need to rank-order the value of the information that is on a page. This hierarchy will allow you to structure in a wireframe that most rational approach you should take. You should determine the exact content that should be highlighted, the order that the information should follow, and the space that you plan to allot.
You should be able to justify these choices to your clients. You could add annotations to your wireframe that explains your thinking, especially how this arrangement of elements helps users get to where they want to go. If you really can’t articulate what the purpose of a page is, you might want to reconsider why you have it in your website.
Visual Clutter
Another source of friction that wireframes can assist with is in avoiding visual clutter. Wireframes force designers to strip away all that is unneeded and drill down to the most essential components. Sometimes, designers can get up in “info fever,” and feel the need to dump everything that a client wants into a landing page.
But too much information can make users shut down entirely. Instead a page having a well-defined purpose, a kind of rummage-sale aesthetic takes over and users don’t know where to turn next. This can happen when designers try to shorten the process and eliminate steps like storyboarding and wireframing. Without exacting preparation, designs can go awry.
YOU MAY ALSO ENJOY
