A drawing of a boogeyman with a skeleton made out of web and app wireframes.

From snotty to scary

How wireframes support an improved user experience

Melanie Berezoski
3 min readOct 23, 2022

--

This article is day 23 of a 31 day series. A mash-up of the Inktober 2022 prompt list and UX terminology. Read more about the challenge here.

Day 23 | Inktober prompt: Booger | UX Term: Wireframes

Booger really?

I don’t know what good could possibly come from this prompt. At least that I would want to look at. I guess it really challenges you to think outside of the box. Are there alternative definitions for booger that I’m just not aware of? Apparently booger can be another term for boogeyman. I think someone made that up (not the boogeyman part, I know he’s real) just because like me, they didn’t like boogers.

Good enough for me.

But I don’t really have any boogeyman stories to share either, or insights on how to effectively use boogeymen? boogie people? to improve user experiences.

Now wireframes on the other hand. I could talk all day about the good that can come from them.

What is a wireframe?

I like the term wireframe because for one, it’s not a term for a mythic creature used to scare children into good behavior (ah, parenting at its finest), but also because it’s been around a while, and it’s covered a wide range of applications. Essentially it’s been put to the test for effectiveness and proven itself time and again. For this reason, you may have heard of wireframes and wireframing before. But just in case, and to be complete, wireframes are the skeleton of a site or app. They are a simple but effective way to represent the pieces of a site. You look at a pile of bones, and it could be a wolf, a person, or a boogeyman, but you look at a skeleton and oh… it’s a bear. Cool!

Now skeletons don’t tell the whole story. That’s why you see dinosaurs represented so many different ways. Maybe they had lizard skin, maybe they had more feathers. But there are details you can be more confident about, like that one walked on all fours, or that one was an herbivore.

Why is it important to UX?

I’ve covered a lot of mysteries today, the boogeyman, dinosaurs, being a decent parent… but the one mystery that we are really curious about is how this all applies to user experience.

To effectively create an incredible user experience, we need insights, and we need confirmation of those insights. We need the flexibility to be able to try out different options, and to iterate quickly. We see these needs reflected throughout the UX design process. Wireframes allow us to get ideas down in a form that makes sense for review by others and to gather feedback.

Depending on the type of feedback we’re looking for we may adjust the fidelity, anywhere from low-fidelity as a sketch on paper, to high fidelity, where we’re closer to the real thing.

Beyond testing and having the design reviewed by potential users, wireframes do a great job of helping to share the design with developers who will have the task of putting the skeleton together. The clearer that can be represented, the better the result.

Have you ever done those exercises where you work with a partner, and one of you is drawing while the other is describing an image, and neither of you can see what the other sees until the end? Yeah, without wireframes it would kind of be like that.

Takeaway

Wireframes are integral to the UX process and helping users to have that incredible user experience. Just like boogeymen are integral to properly traumatizing children before they can turn into bad people. You know, because we love them.

Use wireframes as a tool to represent your design to others whenever you need it, be that for testing, or eventually for development. They are a tried and tested method for relaying the information necessary to take your designs to the next stage of the process.

Now go check under your bed, and then get to work.

--

--

Melanie Berezoski

I believe you truly understand something when you're able to laugh about it. So here I am, trying to make you laugh about design.