Wire framing and the user experience

What is it?

Wireframes are basic visual guides

They describe the content and functionality without design

They are very useful in working out the user experience an journey of a site without design

What to include

Placement’s for content with descriptions. You can use things like CTA to describe the visuals.

Point out functionality where needed

Show when there are images and text

Think about how people read online

Generally people read websites left to right top to bottom.

You can change how read down your website but placing more weighting on different areas

In you wire framing you have the chance to try many ways of laying out content to try it! Its much easier to get it right now, rather then later.

F-shape theory

Formed from eye-tracking

First Horizontal movement

Then down a bit and second horizontal movement

Then Finally a left hand side vertically

F-shape

What to learn from F

Users won’t read your text completely

The first two paragraphs must contain your most important information

Copy

Online you need to dumb everything down the plain English

People don’t pay attention online, unless they are committed to site. (they will just scan for what they want and look for keywords.)

If you site has a lot of copy (like news and blogs) then make ways for people to work out if they want commit or not

Wire framing tips

Try different solutions on paper

Keep in mind different users, and what their approaches may be

The wireframe isn’t the design, don’t feel like your committing to much to the layout.

Form a priority order for the content