What are wireframes, and why does your website need them?

One of the most misunderstood UX deliverables are website wireframes. Maybe it's because they are lo-fi, or maybe it's because they are sometimes filled with scary decisions, or maybe it's just because some clients want to get to the fun "marketing" part: creative design. I'm not really sure. But, here's how I usually explain wireframes to clients when they encounter them for the first time. 

What are wireframes?

Wireframes are a visual guide to elements on a page. They represent function, content elements and features, and express navigation and wayfinding.

Though wireframes underpin the visual design, they are not one-to-one layouts of the future creative design composition; rather, they serve to influence and guide the design process.

In development and coding, wireframes transition into a functional specification for the build. 

Why does your website project need wireframes?

The short answer: because someone has to plan for what the site is going to do and how it is going to do it, captured in a language that designers and tech folk understand. Wireframes are these blueprints. 

If you've ever envisioned a new website before (or even a part of one), you know that you have a goal or a strategy in mind. Wireframes are the bridge between these strategies and the technology required to implement them successfully for users. 

What do you need to know before you start wireframing?

Basically, it boils down to these things: 

  • Awareness of client's wishes, strategy, objectives or goals. 

  • A content outline, beginnings of a content strategy, audiences identified, analytics, calls to action, success measures, etc. 

  • Understand the PROBLEM. There is always a problem; take it on.

When it's time to start, look at the content outline or sitemap and decide what should be illustrated. Ask yourself:

  • What content templates or page types will the site need?  
  • Are there processes that should be paper-prototyped? Paper prototypes are essentially wireframes that express a workflow. For example, a registration process or shopping cart.  
  • Is there a content management system (CMS)? If so, do you know the CMS's capabilities? If you do, great! Try to work within these capabilities. If not, talk to tech people as you go and prepare to adapt. 

Once you've produced the wireframes, expect tweaks throughout the rest of the project. Though "approved," or even endlessly vetted with coders, developers, designers and the client, nothing is ever final on the web.

An observation on categorizing

There's a bagger at my local market who frequently packs my groceries. He's very organized.

Here's a breakdown of today's purchases to illuminate his orderliness:

3 Fettuccine Alfredo Lean Cuisines
3 Macaroni and Cheese Lean Cuisines
2 pints ice cream (don't judge)

Here's how he packed the items:

1 plastic bag: 3 Fettuccine Alfredo Lean Cuisines
1 plastic bag: 3 Macaroni and Cheese Lean Cuisines
1 plastic bag: 2 pints ice cream

Then he packed the three bags into a brown paper bag, and then the paper bag went into another plastic bag for a grand total of five bags for 8 items, but only one bag to carry.

Now, I suspect that the bagger in question has a compulsion or something else going on. But, that's beside the point. The lesson in this story is for information architects, and that lesson is twofold.

1: How you categorize or group items may not match how the user would group items. If I were packing my bags, I'd put it all in one or two plastic bags, jumbled together.

2. You could be going overboard, categorizing and consolidating for the sake of imposing order, rather than usefulness, resulting in an unnatural effect for the user. 5 bags! 8 items! Enough said!

Now, back to that ice cream...

Information scent and my search for spices.

Here's a true story that serves as a metaphor for why your website needs good navigation and information scent. 

This weekend I conducted a search for chaat masala. I had a Mark Bittman recipe variation for dal, and figured I could just get it at my local super-sized grocery store. This store is, in fact, the largest grocery store in southwest PA, and I had gotten garam masala at smaller stores before. I checked all the obvious places: International, spices, where they keep boxed dinners, to no avail. 

Since I live in an area with a significant Indian population (for Pittsburgh), I am rather close to two Indian groceries, and I knew they would carry my spice. 

Grocery K

I walk in, and it's dark. The store is crowded with products, and things are everywhere. To me, it seemed like the organizational principle of the place was "put the product wherever there is room."    

Grocery M

I walk in, and it's brightly lit. The store makes sense instantly. Dry staples like beans, dal and rice are along one wall. Across from the rice and beans, rows upon rows of spices, herbs, tamarind, sesame seeds... Another aisle has boxed dinners, another for frozens, prepared foods, and even mark-down section. Candy is in front of the register. 

Why I chose Grocery M

Grocery M is familiar. Sure, the other shoppers were speaking in another language, and my knowledge of what I was looking for was slim (spice blend?). But, it was organized. A glance at the store's shelves told me what was in each section, and I found the spices in seconds. Once I found the spices, it took a little while to find my specific spice, but after I briefly browsed the shelves, there it was. 

Organize your content like store M, not store K.  

  • Make sure your store is clean and brightly lit. Can someone glance at your website and get the gist of its contents? Or is it cluttered with distractions?  
  • Are your aisles organized? Your content organization and navigation structure should make sense and feel natural. 
  • Can a new shopper transfer knowledge? I had keywords, nothing more. But based on my experiences at other stores, I had a general idea where to look. I had a mental model. 
  • Did the customer convert? Ultimately, I found what I was looking for at store M. Store K? Honestly, I bailed. I knew there were other stores in town, and I didn't want to waste my time. Ask your users and check your stats: are users fleeing your content because they can't find what they are looking for, or did they successfully complete their task? 

7 UX & IA websites worthy of adding to your reader.

I'm going for less-obvious, of course. Everyone (should) know about UX Mag, Jakob Nielson's Alertbox, A List ApartBoxes & Arrows...I could go on.  

In no particular order...

1. UX Myths

http://uxmyths.com/
Ever know that something is just not true, but you find yourself in need of backup? UX Myths has a fantastic list of debunked myths, and all the supporting link goodness to back them up. You might want to print the article on the "3-click rule" and pass it out to everyone you meet.

2. Scott Berkun's Blog

http://www.scottberkun.com/blog/
On innovation, presenting your ideas, project management, writing and so much more. Plus the infamous blog post about asshole-driven development. You might want to pass that one out too. 

3. What Makes Them Click

http://www.whatmakesthemclick.net/
A blog and a book about the psychology behind user behavior on the web. It is also insightful about relationships (see #46: The more uncertain you are, the more you dig in and defend your ideas.). It also provides further reading and/or research citations, which spells credibility. 

4. Luke Wroblewski

http://www.lukew.com/ff/
Do you love data? Go here. Also form design goodies, his notes from conferences, etc. 

5. 37 Signals Blog

http://37signals.com/svn/posts
Inspires awe and jealousy. Design, business, technology. 

6. UX Booth

http://www.uxbooth.com/
A collective that produces a ton of quality blog posts and resources. I love that this straddles the complete user experience/content strategy realm with topics like user research, interaction design and IA/content. 

7. Brain Traffic Blog

http://blog.braintraffic.com
Of late, the posts have been a tad dodgy, but check out the archives for great content strategy articles.