How Web Design Is Important What really makes a design good?

[Tramposch 1]

What really makes a design good? There are many many things that make different designs good. I will go over some of these factors, starting with where your eye first starts on a webpage.

 

Eye Movement:

 

1. The eye starts off at the top left of the website. The top left of the website is the suggested place for a company's logo.

2. The user then zig zags down the page, starting from the top left. The scanning ends at the "fold" where the page ends on the user's screen.

3. User then goes to top right corner, a good place to put some action, such as search, or navigation.

4. Goes to middle left of the screen, usually were navigation is located.

 

 

(Starts at the . and ends at the >

(Outing and Ruel)

 

Text:

Text on the website is larger if the text is content, and even larger if it is a title. The text is smaller when it is a link. When a user first visits a web page, they do not want to see a lot of text, just a little bit of text, with bullets of information possibly. Important images, graphics, and text tend not to go over the Fold line. When the content text is smaller, the user spends more time looking at it, and reading it, but when it is larger the reader tends to scan over it. There is a balance between these two, but it ultimately depends on the reader (Outing and Ruel).

 

Visual Disturbances:

Many websites have a "visual disturbance," a visual disturbance is usually a line, or a bar, that is a bright colour; it is usually used to stop the eye. The bar is often put around the navigation, to bring attention to the navigation links. 25 top news websites were used to test subjects, and it was proven that a navigation at the top of the page worked the best (Outing and Ruel).

 

Logos:

Logos are a very important part of a website. A logo is something that a user, or reader, can associate with the website, to remember what the website offers. The logo is put in the top left corner of a page usually because that is where the eye looks at first. (Outing and Ruel)

 

Empty space:

Blank spaces can be alright, only if there is something of interest to keep the eye distracted, most likely a graphic. Graphics and colours on the website tend to be Saturated (in colour), or tend to have a lot of (colour). Saturated colours make the reader feel liveliness and power.

 

Innovation:

There are many "innovative" websites that are built. These websites make new innovations to how websites works, their functionality, familiarity, and possibly speed, or the three F's. Innovation is bad most of the time. Users don't like new. New innovations can cause a loss of familiarity, functionality, and fastness (innovation isn't likely to compromise speed).

 

Age:

When a website is designed age is always taken into account. Older users tend not to have patience for slow loading pages, graphics, or animations. When you are older, you rely a lot of familiarity. If a website suddenly changes, more computer challenged, or aged people (usually computer challenged) will have trouble being able to navigate the website possibly, due to the loss of familiarity, they no longer know what to click, where the navigation is, and how to search.

 

The Three F's

 

Fastness:

A slow speed is often a deterrent of users. No user likes to wait for what they want. If a user finds a site which has common information, but it takes longer for it to load, then they are likely to go visit another site, with the same common information, but a faster loading time. Often these slow downs are caused by the need to load graphics, or flash based websites. Although flash and graphical websites can be interesting, but when the loading time is delayed, then it is not likely for a user to come back. Dial up is also another problem. Lots of blogs and forums offer a low graphical version of the website, which is just formed out of text, but some don't. Most users are just lost if they have Dial up, and won't be able to stay with the ever increasing amounts of websites, and images in the websites.

 

Familiarity:

As stated in the previous Age section, the more websites that are familiar with each other, the more often they will be used by the user. Some of the many familiarities are the location of the banner, the location of the content, and the location of the navigation. If some of these things alter upon different websites, the users are most likely to visit that website less, due to the un-familiarity to the functions of the website.

 

Functionality:

Functionality is how the website works, does it work as it is said to work? Do all its functions work, such as search and the navigation? If these simple things do not function as needed, the likeliness of users to visit that website again are very unlikely. Keeping a website functional is a key to keeping users happy.

 

Advertisement:

Most people tend to ignore we website's advertisement, unless it is well placed. If an advertisement is well placed it can range from 0.0 to 1.5 seconds that the user looks at the ad. Ads are an important part of revenue in most websites that are created today (Outing and Ruel). If an advertisement is not well placed, it is likely to get 0 total views. Advertisements got most eye fixation in the top and left parts of a page. Ads on the right side of the page were next on the list, and then occasionally ads on the bottom of the page were seen. (Outing and Ruel). Advertisement performed better when the location of the ad was near the pages' content. A breaker between the ads and the context often gives the advertisement less eye fixations. Out of all the advertisment tested, text ads got the most fixations. The best text ad fixation was about 7.0 seconds, and the average was 1.6, already much higher then graphical ads (Outing and Ruel).

 

The 25 websites that these facts were proven with are:

 

* USAToday.com

* NYTimes.com

* WashingtonPost.com

* CNN.com

* ABCNews.com

* FOXNews.com

* LATimes.com

* ChicagoTribune.com

* AJC.com

* AZCentral.com

* SFGate.com

* SignonSanDiego.com

* WashingtonTimes.com

* MiamiHerald.com

* Boston.com

* StarTribune.com

* NJ.com

* NYPost.com

* ProJo.com

* DallasNews.com

* Guardian.co.uk

* FT.com

* ABClocal.go.com/kabc/

* KCNC.com

* CSMonitor.com

Bibliography:

Outing, Steve and Laura Ruel. "The Best of Eyetrack III." 17 2 2009 .

 

 

 

By the way, I'm not very good at writing papers. haha.

 

 

NOTE: I did not conduct the experiment.

[eddyruiz 0]

Thanks for the info, really good stuff. I try not to do too much design, I like programming more, but if I do this info will come in handy. It will either make me conform to what it says, or it will make me want to be so out of the box that it something wild.Imagine doing everything in the opposite direction. Now that is outside the box. I think I'll try that.

[cyber_electrons 0]

GReat work!I think webdesign and programming are both important. Webdesign is the first layer of visuals which firstly get the users to view it. Programming is the technical side of it and contributes to the website at the background and also foreground...

[jakakre 0]

Web design is the most important thing on our site - becase it's the first thing that visitor sees. I think that downloadable templates aren't suitable for creating good pages. That's for begginers only. Good web sites must have theyre own special design. If we use templates, it may happen that quite a few sites on the web will have the same look. And we certainly don't want that, do we? So keep of templates and spend one or two hours more in front of the computer and make an unique design. Trust me, it's worth of work.

[random truth 0]

Wow, This is excellent info. I am glad I looked at it. I am working on designing my homepage right now and this helped alot with design aspects.

[ZettaAIR 0]

What really makes a design good? There are many many things that make different designs good. I will go over some of these factors, starting with where your eye first starts on a webpage.

 

Eye Movement:

 

1. The eye starts off at the top left of the website. The top left of the website is the suggested place for a company's logo.

2. The user then zig zags down the page, starting from the top left. The scanning ends at the "fold" where the page ends on the user's screen.

3. User then goes to top right corner, a good place to put some action, such as search, or navigation.

4. Goes to middle left of the screen, usually were navigation is located.

 

 

(Starts at the . and ends at the >

(Outing and Ruel)

 

Text:

Text on the website is larger if the text is content, and even larger if it is a title. The text is smaller when it is a link. When a user first visits a web page, they do not want to see a lot of text, just a little bit of text, with bullets of information possibly. Important images, graphics, and text tend not to go over the Fold line. When the content text is smaller, the user spends more time looking at it, and reading it, but when it is larger the reader tends to scan over it. There is a balance between these two, but it ultimately depends on the reader (Outing and Ruel).

 

Visual Disturbances:

Many websites have a "visual disturbance," a visual disturbance is usually a line, or a bar, that is a bright colour; it is usually used to stop the eye. The bar is often put around the navigation, to bring attention to the navigation links. 25 top news websites were used to test subjects, and it was proven that a navigation at the top of the page worked the best (Outing and Ruel).

 

Logos:

Logos are a very important part of a website. A logo is something that a user, or reader, can associate with the website, to remember what the website offers. The logo is put in the top left corner of a page usually because that is where the eye looks at first. (Outing and Ruel)

 

Empty space:

Blank spaces can be alright, only if there is something of interest to keep the eye distracted, most likely a graphic. Graphics and colours on the website tend to be Saturated (in colour), or tend to have a lot of (colour). Saturated colours make the reader feel liveliness and power.

 

Innovation:

There are many "innovative" websites that are built. These websites make new innovations to how websites works, their functionality, familiarity, and possibly speed, or the three F's. Innovation is bad most of the time. Users don't like new. New innovations can cause a loss of familiarity, functionality, and fastness (innovation isn't likely to compromise speed).

 

Age:

When a website is designed age is always taken into account. Older users tend not to have patience for slow loading pages, graphics, or animations. When you are older, you rely a lot of familiarity. If a website suddenly changes, more computer challenged, or aged people (usually computer challenged) will have trouble being able to navigate the website possibly, due to the loss of familiarity, they no longer know what to click, where the navigation is, and how to search.

 

The Three F's

 

Fastness:

A slow speed is often a deterrent of users. No user likes to wait for what they want. If a user finds a site which has common information, but it takes longer for it to load, then they are likely to go visit another site, with the same common information, but a faster loading time. Often these slow downs are caused by the need to load graphics, or flash based websites. Although flash and graphical websites can be interesting, but when the loading time is delayed, then it is not likely for a user to come back. Dial up is also another problem. Lots of blogs and forums offer a low graphical version of the website, which is just formed out of text, but some don't. Most users are just lost if they have Dial up, and won't be able to stay with the ever increasing amounts of websites, and images in the websites.

 

Familiarity:

As stated in the previous Age section, the more websites that are familiar with each other, the more often they will be used by the user. Some of the many familiarities are the location of the banner, the location of the content, and the location of the navigation. If some of these things alter upon different websites, the users are most likely to visit that website less, due to the un-familiarity to the functions of the website.

 

Functionality:

Functionality is how the website works, does it work as it is said to work? Do all its functions work, such as search and the navigation? If these simple things do not function as needed, the likeliness of users to visit that website again are very unlikely. Keeping a website functional is a key to keeping users happy.

 

Advertisement:

Most people tend to ignore we website's advertisement, unless it is well placed. If an advertisement is well placed it can range from 0.0 to 1.5 seconds that the user looks at the ad. Ads are an important part of revenue in most websites that are created today (Outing and Ruel). If an advertisement is not well placed, it is likely to get 0 total views. Advertisements got most eye fixation in the top and left parts of a page. Ads on the right side of the page were next on the list, and then occasionally ads on the bottom of the page were seen. (Outing and Ruel). Advertisement performed better when the location of the ad was near the pages' content. A breaker between the ads and the context often gives the advertisement less eye fixations. Out of all the advertisment tested, text ads got the most fixations. The best text ad fixation was about 7.0 seconds, and the average was 1.6, already much higher then graphical ads (Outing and Ruel).

 

The 25 websites that these facts were proven with are:

 

 

 

 

Bibliography:

Outing, Steve and Laura Ruel. "The Best of Eyetrack III." 17 2 2009 .

 

 

 

By the way, I'm not very good at writing papers. haha.

 

 

NOTE: I did not conduct the experiment.

Is this really true how the eye moves like that around the page?  I didn't really notice that.

[frozen.fish 0]

First impressions last thats what i think..

[darasen 0]

This is an interesting article though I must say that there are parts I disagree with completely. The way the eye moves through a design is dictated by good design. If someones eyes are jumping all over the place as shown then the design is not doing it's job of leading the viewers attention through the available information. I took a look at the websites listed in the study and not too surprisingly they were all poorly designed with appeared to be basically the same design on each page. The natural eye movement over a piece is top left to top right to bottom right to bottom left. The writes of the article study or what seems to have no concept of the importance of white space or empty space in an image. Well used negative space is very important in designs. Visual disturbances is an interesting topic in and of itself. Anything moving is going to draw attention to itself. So yes animated ads are going to get a bit more attention though they will distract from the actual site itself. Personally, I keep Flash turned off and gifs un-animated. More than text size should be used to distinguish itself. The lack of decent font usage on the internet is a good example of the mediums limitations. Basically the bit tells how some sites are designed and ignores what constitutes a good design. I remain of the opinion that the vast majority of web site designs are crap. I do realize this is a result, at least in part, of browsers and coding languages still being rather limited in it's design abilities. This is also a result of the "web design" industry that has people who have never studied design designing. I had hoped that CSS would be a way of opening up design possibilities but instead it has simply become another set of coding strictures. Please note I come from a fine arts and design background.

[Evolke 0]

Eye Movement:
1. The eye starts off at the top left of the website. The top left of the website is the suggested place for a company's logo.
2. The user then zig zags down the page, starting from the top left. The scanning ends at the "fold" where the page ends on the user's screen.
3. User then goes to top right corner, a good place to put some action, such as search, or navigation.
4. Goes to middle left of the screen, usually were navigation is located.

Wow! That is really interesting!
I never thought that much about the precise positioning of things on a web page, such as search engines/navigation etc.
Thanks for posting!

[Alex Cicala 0]

This is amazing I am using this to help me design my IT outcome. Thanks for this information you are a lifesaver, I wish this forum had rep so I could rep you multiple times . I sorta had an idea of this info and the eye movement, but the way you have written it, helps me to fully understand it.