Tutorial : Efficient Layout

I shall consider this as a web design tutorial because its rather more than a tip ;) Efficient layouts are of relatively high importance in todays sites but there are still some who do not take the necessary action needed to ensure that the layout of their site is user friendly.



Efficient :

1. "user friendly"
2. "gives what the visitor needs fast"
   
3. "fulfilling the purpose of the site"
4. "benefiting the owner of the site with whats intended eg. sales"

Not many people understand or bother to research on the concept of efficient layouts. It does not only apply to websites/Internet but everything that can be read examples being :

• Books
• Newspapers
• Magazines
• Brochures
  

This web design tutorial is going to zoom in specifically to creating website layouts that are efficient.



Web Users Do not read



Web Users do not read, they scan. Research findings by Jakob Nielsen shows that users of the internet/web do not really read in depth but scan through. It has been analysed that these people read a particular web page in an F shaped pattern from left to right.

Go over to the following page for a more detailed explaination on the F-shaped pattern theory : Jakob Nielsen's F-shaped theory.



From this F-shaped theory, it is found that having in mind the following while planning your site's layout is important :

• Users would only scan your text in general
• Place the important stuff at the top as that is the most concentrated time spent
• 10 seconds is what it takes to make an impression on screen

Visit the site above for information on web usability, I highly recommend it as the guy is qualified and recommended by many magazines.



Plan, plan , plan

Planning is very important and I cant stress how further important it is. Some tips/steps on planning efficient layouts :

1. Get a paper and a pencil. (Yes it is worthy of a step because it is important ;))
2. Write out your target audience.
3. Research on the net regarding behavior patterns of your target audience. Include also reading patterns and attention spans.
4. Mark out areas on the "paper site" where you are almost sure your audience would not miss.
5. Put labels of the purpose of your site in these areas. (for example : content, sales, images. But STRICTLY NOT ADS.)
6. Block in other less important areas like navigation, ads, branding, logos.
7. Make sure your layout sort of conforms to the rough F-shaped pattern for your important stuff. Also, do not forget behavior patterns and such of your target audience.
8. Open up a graphic editing program like Photoshop and mark in what is on your paper on screen.
9. Your layout is done. You can move on to designing now!

Sealing the deal


To ensure that your site works as how you planned it to be, gather a group of friends, be it offline or online, and get them to go to your site. Ask them questions after that like "How easy was it to get to -insert important stuff here- ?" or "What did you wanted to do with the site?" and if the general consensus was what your site was intended for, then congratulations.


Otherwise, spend some more time researching and coming up with a final layout that works. It takes time yes, but think of the benefits you would be getting off it. After all, Time is of an investment. ;) I hope you've gained something from this web design tutorials.

Till then,

Jasa.