October 13, 2009

Usability of Website Part 1

By admin

Usability is making your website easy for your visitors to find the information they need when they need it.”

When you are building a web page one of the first things that come to your mind is where to put the most important features so the user find them easily.

So, doing a bit of research I found that most users have a particulary way of looking the screen that is called the  “F-Shaped Pattern “.

This pattern says that users tend to first read in a horizontal movement, usually across the upper part of the content area. This initial element forms the F’s top bar.

Next, users move down the page a bit and then read across in a second horizontal movement that typically covers a shorter area than the previous movement. This additional element forms the F’s lower bar.

Finally, users scan the content’s left side in a vertical movement. Sometimes this is a fairly slow and systematic scan that appears as a solid stripe on an eyetracking heatmap. Other times users move faster, creating a spottier heatmap. This last element forms the F’s stem.

For more information about the F-Shaped Pattern visit this link

Other usability tip that I found is that users tend to focus on people’s faces and eyes, this means that if there is a face in your page users focus on it, next they are going to look what the eyes of the face are watching. So if you are going to place people in your page make sure they watch the content you want to show.

Talking a bit about scrolling, recent studies prove that users are quite comfortable with scrolling and in some situations they are willing to scroll to the bottom of the page. So it is a good idea to divide your layout into sections for easy scanning, separating them with a lot of white space.

There are many of usability advices but I think that the most important is to keep it simple.

If you want that users navegate your page easily and they don’t get lost, your page must follow conventions of web design.  For example:  use blue for hiperlinks, if you use another color the user will have to learn the new color to associate it with a link.