(ProTip Tuesdays are a weekly series of simple, practical UX tips that you can share with your non-UX colleagues. Come back next week for another one!)

A wireframe IS a planning document. It IS a technical instruction document for the “builders”. Wireframes allow us to say insightful stuff like “Oops, I forgot the main menu!” in the same way an architect could say “Oops, I forgot the front door!”

But this week’s ProTip isn’t about what a wireframe is. It’s about what a wireframe ISN’T.

The following is a list of how wireframes can be used incorrectly. See if you recognize yourself in any of the Top 5 unforgivable (!) wireframe sins:

1) Wireframes are not a basic sketch.
Often we treat wireframes like a quick and dirty sketch, or like step 1 of the design. “Just make a wireframe for now!” They aren’t. Wireframes specifically exclude design, to show how the site/app will work, not how it will look. Those napkin drawings you (and I) make at the beginning are important for sorting out our thoughts, but they’re not wireframes.

Explain early concepts/thoughts in words and pictures, not with wireframes. Show flows as icons, hand-drawn sketches, site maps, slides, or user stories instead… they’re better, faster to make, and easier for the client to understand.

2) Good wireframes take time.
I know they look basic, but there is a lot of thinking behind those empty rectangles. Every little piece must be planned, placed carefully on a specific page. Every link needs a destination. Every page needs a link (on another page) to get there. Every button needs to be where the user needs it, and not to be where the user doesn’t need it. Wireframes are 90% thinking, 10% drawing. Make sure everyone respects the need for the 90% part!

3) Wireframes aren’t presented in phases.
Everything made by humans goes through “drafts” as we perfect our ideas, but wireframes are either ready or they’re not. If they’re not finished it is because something isn’t solved, isn’t organized, won’t work, will be hard to use, or is missing. If you can’t start to build, the wireframes are a work-in-progress. Don’t be afraid to say that to a client or your manager! Making decisions based on half-ready wireframes is a nightmare waiting to happen. I say this from experience.

4) Wireframes should be taken seriously.
I have watched people move a printed wireframe (on paper) from one section of a site to another because it “feels” better. I have seen a 70-page set of wireframes for a social network that didn’t have a profile page (designed by one of the top ad agencies in the world!). I have seen user-generated content that cannot be generated anywhere. I have seen a client cross out a “register now” button because it’s “ugly” in the wireframe. I have seen a site designed & launched by a global agency without a main menu (you thought I was joking when I said that, didn’t you?).

These may or may not seem like a big deal, but each is an example of a crippling mistake that could destroy a product or service.

Plan enough time for wireframes — especially in large projects. Label and describe (i.e. — “annotate”) each element of each page, so a developer never has to ask you what a button is supposed to do.

5) Wireframes are not meant for display.
I die a little every time I see wireframes colored blue and presented in a stylish way. Immediately I know that the people behind those wireframes have no respect for what they’re doing: they have not used color with meaning (red for warning, etc.), they have tried to pass important things by a client/boss by making them prettier, and they have put the focus on the “look & feel” in a document that is primarily for technical purposes. Making a wireframe look like a blueprint is the equivalent of using Comic Sans to write a contract.

And that’s what a wireframe isn’t. Were you surprised? Tell me about it on Twitter!

Have a great week!

Just now, on Facebook, I saw a friend’s status:

“I can barely keep my eyes open, is it too early for bed?”

Give that a moment of thought. She is so tired that she is fighting against it. But wait… why is she fighting against it?

The same thing often happens at work when you ask people to join you for lunch at 11:00 in the morning.

“I’m gonna eat. You hungry?”

“Yeah, but it’s too early for lunch.”

These are very basic examples of people who will avoid something they need, based only on social habits.

When you surround people with a behavior that everyone else does, the reason for doing that becomes… wait for it… the fact that everyone else does it. Nothing more.

It’s irrational.

There is no gain other than our psychological comfort.

The problem happens when you try to change an irrational behavior. People eat food because they are hungry and will die without it. But we eat food at “lunch time” because of social expectations. Even when we are alone.

The only negative consequence for eating at another time is… well, there is no consequence, and that’s kind of my point.

The same is true with “bed time”. There is no such thing as a bed time! It is merely a rule that has been built into our collective behavior so the business world can run on a schedule or so parents can get young kids to sleep.

If you’re exhausted, staying awake is the most irrational thing you can do. What’s the worst that can happen? You get a good night’s rest? Sounds awful.

And it’s not just about times. Those are just easy examples. Ask yourself why a swear word is a swear word. Unless you’re a linguist, you probably have no idea what is so bad about the word “fuck”. And outside North America, the word “shit” is used by little kids. And their teachers in school. And politicians on television. And priests in church.

If you’re fighting the urge to think that other countries are less civilized because of this, congratulations! You are now aware of your own culture.

We often judge others based on the rules we are “supposed to” follow ourselves, even though they are entirely cultural and irrational. Your inner voice says, “If I have to do it, they have to do it, it doesn’t matter why.”

We consider it “disrespectful” when someone doesn’t follow the rules we expect. Swear words are offensive because we’ve been taught to be offended when we hear them, not because they mean something to us.

This makes life more complicated than it has to be.

But even worse, these social obligations create an opportunity for other people to manipulate you. If they know you are willing to do something only because other people expect it, they can control the way you see a situation.

Your boss can tell you that it is “standard” to get a raise of 2% and somehow we start to feel guilty that we are worth more than the “standard”.

When you do what everyone does, you get what everyone gets.

As long as you are following social obligations without question, you can never truly begin to understand human behavior as a concept. You are welcome to follow those obligations because you prefer them, but you must be aware of your other options before you can choose what you prefer.

If my memory serves me correctly Jakob Nielsen coined the term “F-Pattern”, based on eye-tracking studies. It is the pattern that people’s eyes follow when they are reading or scanning a column of content.

(ProTip Tuesdays are a weekly series of simple, practical UX tips that you can share with your non-UX colleagues. Come back next week for another one!)

How the F-Pattern Works

The first thing a user will look at is the biggest, highest contrast piece of text. We usually call that a title (although the logo can play this role sometimes). Make sure you have one, because when the user reads the title or the first item in a list, from left-to-right, it is the top of the F.

Then the user will scan down the left side of the content block until the next piece of text that catches their eye. Then they read it left-to-right. That is the middle of the F. And so on.

This pattern is repeated over and over. This is why in a horizontal menu (or a set of tabs) the popularity of clicks is usually from left to right. The 5th option is only seen by people who have not clicked option 1, 2, 3 or 4.

So why does this matter?

When we create a layout we usually think of the text as a box, or a block. But we should think of it as a line or an edge. A vertical edge down the left side of the text. Look at any layout and find the main edges created by the text; even this post has an F-Pattern!

When we put things like buttons and icons on that line they get noticed more often. When we put them away from that line they might be missed. The closer they are to the line, the more noticeable they will be.

So should we put everything on the line? Hell no! Only the important stuff. Put the important items on the left of a menu. Put the Call-to-Action button on the line, under the text. Etc.

We should also try to create those types of lines in our layouts to keep the user moving down the page. Fewer lines also means more focus, and every time a user has to jump to another line we interrupt their experience, even if it’s just for a microsecond.

Exception to the Rule:
I want to point out that the key point is not “put things on the left”. The key point is put things on the line if you want them to be noticed. If you right-align everything it is on the right. If you center-align everything, the line is in the middle, but our left-to-right reading habit can fight against you, so be careful.

If you make columns of text, every column has a line. If your content is in boxes or groups, each box or group may have a line. Pinterest, for example, is scanned as little F’s all over the page (starting with each image). Not one big F.

For more examples of F-Patterns, check out my eye tracking board on Pinterest.

An F-Pattern-friendly design makes people say that it has “clean lines”. A design with a lot of F’s looks more random and jumbled. Make the lines point to your important design elements if you want the user to see them.

And that is why the F Pattern rules.

Have a great week!