8

Why is it that every website has a navbar on the side or on the top? I have yet to see a really innovative website interface? why? Are there certain rules that most sites follow in laying out the page? What are those rules?

6 Answers 6

12

There are no "rules" only "guidelines".

By that I mean that in theory there is nothing stopping you designing whatever interface you want, however, there are various factors that come into play that might stop you achieving your goal.

  1. Browsers work in a certain way. HTML can only suggest a layout for the page, so while you have a great design that works on paper, it might fail on some browsers at some screen resolutions.

  2. Users expect certain elements to be in certain locations. This isn't always a conscious expectation, but one built up from exposure to other applications etc. If your design is too different they might not "get it" and find your application difficult, if not impossible, to use.

3
  • Upvoted for #2. Commented Dec 1, 2010 at 19:02
  • There's a book by Jakob Nielsen that really emphasizes the point about user expectations when it comes to usability... amazon.com/gp/product/… Commented Dec 5, 2010 at 22:58
  • 2
    @Steve: As he summarized ten years ago: "Users spend most of their time on other sites. This means that users prefer your site to work the same way as all the other sites they already know."
    – Jan Fabry
    Commented Dec 6, 2010 at 10:29
3

There are many common guidelines for web site design that are often adhered to. The Web Style Guide covers many of them. Another resource sometimes used for creating usable websites with such guidelines is the Usability Kit by Sitepoint.

Familiarity is a well known aspect of usability as you have noticed. Most people are familiar with the navigation at top or left side. Also, although this study is somewhat old at this point, it shows through eyescanning research that people view sites in an "F" pattern.

2

You can use any navigational layout you want on a personal website but if your working with a consumer, education, federal or medical site you have to meet the accessibility requirements by law or you may be fined. Even with those requirements, there is still a little bit of creative wiggle room to break out of the box on some level.

The real challenge is that humans are habit forming and they are comfortable with what they know and you want to avoid making them think. A good example is what Microsoft did by adding the ribbon bar navigation to Office 2007. I thought the change was much more efficient but 90% of the people in my building stayed with the older version because they were "too busy to learn the new navigation" with the end result being a lost sale. Even Apple follows that rule as innovative as they are.

0
2

The rule is: Don't mess with users' expectations.

Some designs are proven to be effective over time, and when it is effective and become a standard, it is better to conform to the standard design to provide a better user experience, rather than creating a new one that requires the users to learn (unless the new one can be more effective).

There is a "rule" in design called Golden Ratio. You can always see this around. Example, some websites have their sidebars about 1/3 of their page width based on this.

Also, some websites make use of web layout frameworks, like 960.gs, Blueprint CSS, and YUI Grid. The developers would just follow the tutorials / templates given and thus make the websites look similar.

Of course, you can come up with your own innovative user interface. I have seen a few around, like a navigation bar that is always visible at the bottom or at the right of the page. Just make sure that the interface you come up with is usable and doesn't cause frustration to the users.

1

I think what you see are designs that are hi-profile, draw users into the site, and generally succeed being duplicated in format, structure, and media.

Basically, just like there are patterns in programming, there are patterns in web design. It makes sense that we would see so many similar characteristics.

1

Consider text. It reads left to right, top to bottom. Scrollwheel mice reinforce this notion, they scroll up and down. For this reason, text-heavy sites (like this) are laid out from the top left.

There are famous exceptions. The Google home page, for instance. It can, because it's a lightweight page.

Not the answer you're looking for? Browse other questions tagged or ask your own question.