Website Design - 4 models, so many possibilities
You’re viewing this on a rectangle. The biggest limitation in website design is how to work within a rectangle; monitors, laptops, iPads, 3G/4G phones all have a rectangular screen on which a site can be viewed.
What does this mean for design? There are 4 basic models that designs primarily adhere to; Long & Narrow, Panoramic, Frame within a Frame and Full Screen. Sites look and feel different because clever use of positioning, colour schemes, white space, shadows, graphics and non-linear display (for both written and image content) skew how they’re perceived. If all of the content is designed to fill an arc shape then the site feels like an arc, not a rectangle.
Did you know the width of a newspaper column is meant to be the width the eye can read without having to move? We knew that. Without Google’s help. When viewing a website, our eyes follow a Z, starting from the top-left corner. That’s why Reaper designs with a client’s logo in the top left. It’s typically the first thing the eye (& subsequently a viewer’s attention) is drawn to.
Choosing a model to start from depends on the content you’re providing. The Z inscribed on top of each model indicates the area in which they eye will travel. The core content should go along the angle of the Z with left & right columns available for secondary information.
The Long & Narrow model
- constricts eye movement to a narrower frame
- easier to read as the eye travels less distance between components
- restricts the amount of white space between elements width-wise
The Panoramic model
- good for showcasing images that are best viewed on a widescreen (e.g. panoramic photograph)
- objects can be spaced further apart on the x-axis
- top-left corner isn’t utilised as part of the content so content/image here will stand out more as it’s not competing for attention and surrounded by other elements
The Frame within a Frame model
- narrows both the horizontal & vertical area the eye covers
- caution: it can be easy to clutter a page
- greater loss of virtual real-estate space that’s now dedicated to framing content.
The Full Screen model
- results in a greater distance between elements so the page can look empty
- requires less planning of white space
- doesn’t provide a focal area for the eye – too much space & the information isn’t easy enough to process and the viewer isn’t led anywhere.
What do you want your viewers to engage with?
Think of the rectangle you’re looking on as unbuilt real-estate space. The expensive real-estate & high traffic area follows the Z. Regardless of what it is, the Z is where you want the items you want your viewers to engage with to be.
Usability is heavily influenced by how navigation is set up on the website. Depending on your website model, some navigation options are more intuitive than others.
Top-navigation is a popular option because a visitor’s eye will naturally go to the top first so top navigation provides a more intuitive interface. However, top menus are limited to the width of the screen so the number of menu items are restricted to avoid dropping onto the next line. This can often be solved using drop down menus and a navigation taxonomy.
Left-navigation is popular for filters (e.g. shopping sites will have filtering provided in the left-column for shoppers to refine their search) and bulkier navigation menus as it can often contain more links than a top navigation. Selling more is all about guiding visitors through the right steps. See Adoric for a customized journey that will turn visitors into customers
Right-navigation is rarely used because on smaller screens it is the right-content that drops off the viewing screen first. From a usability perspective, this makes the website difficult to browse as the navigation can drop outside the viewing area. To avoid this, use percentage widths so your website design is fluid and use the right-column for secondary rather than primary navigation.
Like right-navigation, bottom navigation can make it difficult to browse the website as the navigation can drop outside the viewing area. Only strongly motivated viewers are likely to invest the time and effort into the website to find the navigation below the content.
Fixed navigation is when the navigation menu is constant on the page regardless of scrolling (a fixed element is used as the admin bar on wordpress websites when logged in). This enables the visitor to easily access the menu regardless of where they are on the page, however it does have design implications in that a fixed element must have a background and is best used at the extreme top/left/right/bottom to avoid having fixed elements floating on top of content on smaller screens.
There is no absolute method for user-friendly navigation. It is entirely dependent on the number of menu items, your target market, their website browsing habits and content. The key with website design is very much in creating a website space that is intuitive and user-friendly – don’t make your visitor think.
Want to revamp your website? Contact us now to get you started