The Art Of Applying Rule Of Five Plus Or Minus Two For An Effective Wireframe

The Art Of Applying Rule Of Five Plus Or Minus Two For An Effective Wireframe

Working on your wireframes before starting on the details of any design is a crucial step in web design. As you realise the importance of wireframes, you need to know how you should start creating them and what rules you should try to follow in order to create a better brand and user experience. This is the second part of an earlier article about wireframes that will discuss some of these issues.

Art of Wireframes

THE RULE OF 5 PLUS OR MINUS 2

When presenting any kind of information on a page, it is best to use no less than 3 and no more than 7 groupings of elements. This is to avoid overwhelming your visitor with too many choices.

For global navigation, for example, try to use a minimum of 3 and a maximum of up to 7 top-level links, excluding the logo for the home page.

For other page elements, use more items if necessary, but keep the number of distinct groups to a maximum of 7 and minimum of 3.

Breaking the 5 plus or minus 2 rule

Don’t present visitors with too many links at one time. The only exception is within a section of categorized content, where items are alphabetised, and visitors will know how to find what they’re looking for. Never present all available options of mixed categories in a top-level page.

Following the 5 plus or minus 2 rule

On a directory page, for example, instead of offering a list of links, organize them in 5 categories of about 7 each, as illustrated.

Categorizing multiple elements in fewer groups makes it easier for site visitors to find what they’re looking for. It also reduces the chance of overwhelming them with too many details.

Page Footer

Footer Example

Include a consistent footer across the bottom of each page. The footer includes company information, copyright and trademark information, links to privacy and security information, terms and conditions for use of the site and its content, and other fine print details. Footers also commonly include a Contact Us link or social media icons like “Twitter”, “Facebook”, “Stumble Upon” and “Digg”.

Which Wireframes To Design First?

The first wireframe to design is the site’s most important page, the home page.

Next, consult the user scenarios and site-map to choose the pathways through the site that users will take to complete key tasks (the tasks most closely associated with user needs and the site’s high-level business goals). Design these wireframes second; these pages, along with the home page, make up the prototype of the site for testing.

Site Key Task Pathways

Usually, the site’s key task pathways will involve all or most of the top-level pages in the site, the home page, and lower-level pages that are usually involved in the key tasks. After the prototype wireframes are designed and tested, you will then design wireframes for the rest of the site’s top level and lower level pages.

Wireframe Design Guidelines

After the initial viewing of a web page, the user tends to start blanking out the elements that remain consistent from page to page in the site. He or she begins to focus instead on content and elements that differ from one page to the next.

That’s why global and local navigation elements should be discreet, letting the user focus on the page’s central content area. Using wireframes to design individual pages makes it easy to see where content is needed and gives you a better understanding of the space you have to play with. Here are some guidelines to help you make the most of it.

Use Hierarchical Structure

Example of Visual Hierarchy

Place items of higher priority and importance at the top of the page, where they will be more visible. This usually comes hand in hand with the business goals of the site. Think of the way merchandisers scramble (and sometimes pay large sums of money) to place their products at eye level on a retail store’s shelves. They know that potential customers will notice those items first and are most likely to purchase them.

Text (Embedded) Links vs. In Paragraphs Use Hierarchical Structure

Placing links in mid-paragraph within the body text disrupts the visitors’ engagement, prompting him or her to click to another area of the site (or to a different site altogether). To let visitors enjoy a passage uninterrupted, break out text links as a separate list, placed to the side or at the end of the text passage.

The Home Page Is The Doorway To Your Site

Practitioners of feng shui, the Chinese art of arranging objects in a space to promote harmony in and among the people who use it, place great importance to the entry to a home or office building. The entry has the power to welcome people in and make them feel comfortable about staying. It can also make them feel uncomfortable or even scare them away.

Example of an unwelcoming homepage.

You may or may not believe in Feng Shui, but I think it’s worth paying attention to what practitioners say about an entryway, at the very least. Consider a front door, painted a cheerful mandarin red, with well-tended plants and flowers in pots on either or both sides, and a happy-sounding doorbell.

Now compare that with a front door that’s accessible only after climbing over or around several pieces of old broken furniture and discarded toys. The lawn is unkempt and overgrown, the paint on the front door is peeling, and the doorknob is broken and won’t turn easily. Unless you have a very good reason to go inside, I’ll bet you’re very likely to give up and walk away.

Example of a welcoming home page

First impressions count! The home page identifies the site – and it’s the site-owning organization’s first chance to make a good brand impression. First impressions of a site can be difficult or impossible to overcome, so take great care with the home page’s information design. I’ve picked out a few welcoming home pages, for your reference.

Welcoming Homepage References

Jamie Oliver
This site’s global navigation uses very clear labels. Scroll down to the footer and you will see that it contains all the shortcuts to the important pages. These quick links provide users quick access without going through all the navigations in the global and local navigation.

Jamie Oliver Homepage

University of Toronto
The University of Toronto homepage has divided their links into groups with appropriate headers. It gives a clearer classification of links and also helps users narrow down the topics that they are looking for.

University of Toronto

Whole Foods Market
Whole Foods Market contains a very detailed masthead. It not only includes contact details and login information, but also has a Store Locater which enables users to find their stores by keying in a zip code. It has categorised 2 important links; the Featured and Top Rated tabs, allowing users to dive straight into their favourite links in the site.

Whole Foods Homepage

IKEA Canada
The bright and inviting colours used in IKEA Canada’s homepage draws the attention of visitors. It contains a flash navigation that advertises their latest promotions. The labelling of the global navigation is clear and precise, as such users do not need to spend too much time figuring out where to click.

IKEA Canada Homepage

Lonely Planet
The main goal for most users, who visit Lonely Planet, is to learn more about the country that they will be travelling to. By having the map on the top of the page, it allows users to search for their destination easily. The homepage also contains discounts that are available and interesting topics that attract users to explore the site further.

Lonely Planet Homepage

Last BUT NOT Least, Test As You Go Along

As soon as you start creating wireframes for the home page and top-level pages, show them to people for feedback. Take them to other members of the web team, to the subject matter experts who are helping with the site, and to any target audience members. Ask them to look over the wireframes and tell you if the labels, navigation, placement of content areas, and all the other elements make sense.

You should use this feedback to refine the homepage and top-level wireframes before using them to create wireframes for lower-level pages.

Resources On Wireframes And Prototyping

Wireframes magazine
A blog magazine dedicated to almost everything about wireframes.

Wireframes Magazine

A List Apart
A List Apart Magazine explores the design, development, and meaning of web content, with a special focus on web standards and best practices.

A list Apart for people who make websites

From the Couch
‘From the Couch’ is an Online Video show, hosted by brothers Marc and David Perel, which covers everything that is web orientated. In this video, David shows you how to do a hand drawn plan of your wireframes to give you an idea of what the layout of your website will resemble.

From the Couch

Conclusion

Applying the Rule Of Five, Plus Or Minus Two, when designing wireframes is one of the good practices of information design. When working on your next project, take great care in designing your home page, as that is the key to the branding and experience your audience will encounter.

Charlotte’s interest is in web interface and design as well as motion graphics. Her absorption with her work is mostly due to her attention to detail and passion for the world of design. Winding down after work, which consumes much of her time; she enjoys traveling, exploring new places, gastronomy, and fashion.

Comments

    • tips,
    • July 21, 2009
    / Reply

    In Zeiten von massenhaft Websitenmüll im Internet eine sehr gut aufgebaute Website, nicht überdimensioniertes Design und sehr gut recher-schierte Hintergrundinformationen.

      • Terrance,
      • July 21, 2009
      / Reply

      Its translation from German into English is:

      “In times of in great quantities Websitenmüll in the Internet very well developed website, not oversized Design and very well recher schierte background informations.”

      1. / Reply

        Well let’s try a little harder than google translate shall we, I’m Dutch so my German isn’t perfect (and nether is my English), but I think I can make this at least understandable:

        “In these times of overkill with websites online, this is a very well duilded site, not too large and with good, related background info.”

        But to be sure I sugest getting in touch with the autor of this:p

          • Charlotte,
          • July 22, 2009
          / Reply

          Thank you Jasper for the translate:)
          I am hopeless at European languages…

  1. / Reply

    I ran into this article from DZone and it’s a great read

    • Mark,
    • July 21, 2009
    / Reply

    Miller’s original paper was on 7 plus/minus 2 as the “magic” number: http://www.musanim.com/miller1956/

    Applying it to menu items, tabs, links in a list, is completely outside the scope of Miller’s original study. People deal with more than 7+-2 pieces of data all day.

    To quote Miller directly: “But the point was that 7 was a limit for the discrimination of unidimensional stimuli (pitches, loudness, brightness, etc.) and also a limit for immediate recall, neither of which has anything to do with a person’s capacity to comprehend printed text.”

    http://members.shaw.ca/philip.sharman/miller.txt

  2. / Reply

    This article has been shared on favSHARE.net.

  3. / Reply

    This is like one of your best articles on wireframes. Thank you for the write-up and the links!

  4. / Reply

    Awesome tips! Thank you for sharing them!

    • BebopDesigner,
    • July 22, 2009
    / Reply

    Brilliant post! thanks for sharing.

  5. nice article, thanks for tips..

    • Netultimate,
    • July 22, 2009
    / Reply

    The information’s given by you really good. I got good knowledge from your information’s. Thanks

  6. / Reply

    Good stuff here. Thank you

  7. / Reply

    Thanks for the insight !

  8. / Reply

    Great article! Only I wonder, I learned 7 plus/min 2 was the rule, and didn’t Dan Brown say so too?

  9. / Reply

    Your statement about the homepage being the doorway to your site is correct, but don’t forget to design for people who come through several other ‘doors’.

    A lot of people enter your site through a searchengine, which often drops them in a specific area.

    Nice article though!

      • Charlotte,
      • July 23, 2009
      / Reply

      Thanks for pointing that out, that’s very true.

  10. / Reply

    Hmm… Great list. I think it’s very helpful as beginer and as expert :). Thanks

  11. / Reply

    Great post, I especially like how you point out a welcoming and a non welcoming homepage.

  12. / Reply

    Very nice article, I’m going to subscribe to this blog! =]

  13. / Reply

    Excellent demo is presented here, I really like the way that this blog written. I hope that next time I will find this kind of amazing and informative blog. Thanks for posting.

    • Don,
    • October 25, 2012
    / Reply

    The number 7 plus or minus 2 came from George Miller’s 1956 theory that only 7+/-2 chunks of information can be held in short-term memory at any one time.

    According to Preece et al “Interaction Design” 2007 text, the reason that this rule does not apply to the visual design of for e.g. Web Pages is that you don’t need to use short-term memory at all.

    All the web page viewer needs to do is scanned and rescanned visually all the items in the menu bar to find what they need.

    The menu and navigational bars do not appear and disappear in your web site, hence the viewer does not have to remember them or whats’ on them.

    A more fundamental problem with menu and navigational bars is highlighted with an application such as MS Word, where after considerable pain, learn where everything is in Word 2003, only to have Bill change everything around in Word 2007.

    If you can apply a logical placement of functions within the menu system, you could have far more than seven choices at the top level and in a visual orientated operating environment it would work as well as anything else does.

Leave a Reply

Your email address will not be published. Required fields are marked *

Deals

Iconfinder Coupon Code and Review

Iconfinder offers over 1.5 million beautiful icons for creative professionals to use in websites, apps, and printed publications. Whatever your project, you’re sure to find an icon or icon…

WP Engine Coupon

Considered by many to be the best managed hosting for WordPress out there, WP Engine offers superior technology and customer support in order to keep your WordPress sites secure…

InMotion Hosting Coupon Code

InMotion Hosting has been a top rated CNET hosting company for over 14 years so you know you’ll be getting good service and won’t be risking your hosting company…

SiteGround Coupon: 60% OFF

SiteGround offers a number of hosting solutions and services for including shared hosting, cloud hosting, dedicated servers, reseller hosting, enterprise hosting, and WordPress and Joomla specific hosting.