Seven Principles of Good Web Design

Authored by Srijata Bhatnagar

Dated: 28th March 2013

1. Visual Importance

This is one of the most important things to keep in mind for an effective and user friendly Web Design. A human eye and mind always sees and percieves things based on visual heirarchy.

To understand this better let's do an exercise; Let's rank the these pictures based on their importance below;

I am sure all of you were able to rank them correctly based on their importance. This only proves that human mind automatically ranks visuals based on their importance. Therefore while designing a website it is important to rank content that the user may find most important and what the business thinks they should promote and bring them both on the top of the website.

Also, hierarchy does not mean images in bigger size, it can be achieved through using different fonts, colors, buttons etc. Like in the example below Linkedin has used a different Font size and Button color to show their prominance;

2. Golden Proportion

This is nothing but the Golden ratio of 1.618 that makes each and every thing look asthetically pleasing to the eye. Golden ratio looks like this;

Photo Coutsey: Wikipedia.org

Researchers have observed that many creations of nature like tree branches, plants, animals has golden ratio expressed in their arrangement. Like a snail or a sunflower they all follow golden ratio.

Similarly we see application of Golden ratio in ancient architecture. One of the greatest example of the same is the Pantheon of Greece;

Photo Coutsey: New World Encyclopedia

Golden ratio can be applied in music, painting, book design industrial design and in modern times even Web Design. One of most prominent example of a website that applies golden ratio priciple is Twitter

Photo Coutsey: Flickr

• How to apply Golden Ratio to Web Design?

This is quite simple to apply in Web Design. Example: If your website width is 1000 px, divide the same with 1.618 (=618px). So the content area should be 618 px and the RHS should be 382 px. Same calculation can be done for height as well, only if the height is fixed and it is long endless.

Additional source of information for using golden ratio;

Golden Ratio calculator that can be used for applying in a website

Apply Golden Ratio to Typography – to use it for text sections

3. Applying Hick's Law in Web Design

This describes the time it takes for a person to make a decision as a result of the possible choices he or she has. More the choices more time it takes to decide. We always say “Spoilt for choice” this actually means that the user cannot decide because he has too many choices.

Therefore it is important to eliminate too many choices given to users, for easy use of the website. And this needs to be done as part of the web design exercise. For a website which caters to various interest areas, it is impotant to provide better filters for easy and quick decision making.

The search functionality of Tripadvisor does the job quite well;

Even before an user chooses to go and perform an action it filters out the different options provided by the website and allows user to make a decision upfront.

Read more on Hick's Law

4. Applying Gestalt's Physchology for Web Design

This is a theory of mind and brain of the Berlin School. Operational principle of Gestalt Psychology is that the brain is holistic, parallel, and analog, with self-organizing tendencies. The principle maintains that the human eyes see objects in their entirety before perceiving their individual parts, suggesting the whole is greater than the sum of its parts. Gestalt Psychology tries to understand the laws of our ability to acquire and maintain stable percepts in a noisy world.

This is what it means;

Photo Coutsey: Digital-Design3D

What do you see in the above image? Do you see 3 Pac-man like thing eating on a traingle. But where is the traingle here? It is an implied triangle.

The main point here is people see things on its totality before seeing the details, therefore it is important to concentrate on totality before we concentrate on details.

There are 8 laws of grouping to make it easy for any user to access and percieve a website in a right manner;

4.1. Law of proximity

According to this law people group things that are closer to each other and percieve them as together.

Photo Coutsey: Wikipedia

For example if your Navigation bar and search bar are too close to each other users will percieve them as one.

Craigslist does a good job of grouping numourus sub categories under each category.

4.2. Law of Similarity

This law states that objects that are similar to each other are grouped and perceived to be together.

Photo Coutsey: Wikipedia

A good example of the same is NPASource.com's 'recently added' section. It combines all the similar boxes together.

4.3. Law of Closure

As per this law users percieve shapes letters, pictures etc. in their totality even when they are not complete. Which means even if an element is not complete we tend to seek completeness in it.

One of the greatest example of this can be seen in World Wide Fund's famous Logo; even though the image is not complete we know it is a photo of a Panda. Similarly the logo of IBM follows the same rule.

Using the law of closure we can make interesting logos and design elements.

4.4. Law of Symetry

The law of symmetry states that the mind perceives objects as being symmetrical and forming around a center point. It is perceptually pleasing to divide objects into an even number of symmetrical parts. Therefore, when two symmetrical elements are unconnected the mind perceptually connects them to form a coherent shape. Similarities between symmetrical objects increase the likelihood that objects are grouped to form a combined symmetrical object. For

example, the figure depicting the law of symmetry shows a configuration of square and curled brackets. When the image is perceived, we tend to observe three pairs of symmetrical brackets rather than six individual brackets.

Mind preferes symetrical design over asymetrical ones. Therefore it is important to design web pages symetrically. Pinterest does a good job of this, even though they have a fluid design.

4.5. Law of Common Fate

We tend to perceive objects as lines which move (or look as if they are moving) along the same path. We perceive elements of objects to have trends of motion, which indicate the path that the object is on and group them based on their movement path.

Photo Coutsey: W ikipedia

Using this we can achive beautiful drop down menus like how Puma has done it really well

4.6. Law of Continuity

The law of continuity states that elements of an object tend to be grouped together, and therefore integrated into perceptual wholes if they are aligned within an object. In cases where there is an intersection between objects, individuals tend to perceive the two objects as two single uninterrupted entities.

Photo Coutsey: W ikipedia

This means that people tend to percieve a line continuing based on its established direction. Even when there is a intersection the stimuli does not change. Look at how Amazon guides users to 'click inside' a book.

It simply guides the user to click on the book in a very effective manner following the principle of law of continuity.

4.7. Law of Good Gestalt

This law explains that elements of objects tend to be perceptually grouped together if they form a pattern that is regular, simple, and orderly. This law implies that as individuals perceive the world, they eliminate complexity and unfamiliarity so they can observe a reality in its most simplistic form.

This simply means when a person looks at an object they perceive it to be something that is more familier to them. Let's do a small exercise around this;

Photo Coutsey: 101 Art Avenue

What do you see in the above image at first glance? Do you see a face of a young women or a bunch of flowers and a butterfly? Both are true, but the perception is different. This particular law aligns with optical illusion and using optical illusion in benefit of Web Design.

Using this principle interesting logos and other objects can be created. Some of the examples are given below;

4.8. Law of Past Experience

The law of past experience implies that under some circumstances visual stimuli are categorized according to past experience. If two objects tend to be observed within close proximity, or small temporal intervals, the objects are more likely to be perceived together. For example, the English language contains 26 letters that are grouped to form words using a set of rules. If an individual reads an English word they have never seen, they use the law of past experience to interpret the letters "L" and "I" as two letters beside each other, rather than using the law of closure to combine the letters and interpret the object as an uppercase U.

Similarly if a button, text, links etc are supposed to behave in a particular manner, then changing the same will be a disaster. In fact that is why most websites keep clickable links underlined in blue

text.

Or use Submit as a button text for any member profile related entry into the website's database.

Read more on Gestalt physchology

5. Design for Development

This means when one is designing a website he should keep in mind the way it will function and use the elements accordingly. Blindly designing without keeping all the scenarios in mind will yield poor design and a poor functional website.

One needs to answer these questions while working on web design;

Can this be coded tecnologically and will work smoothly?

What will happen if the screen size gets altered, will it still work as expected?

6. Typography

Keeping a close look at how typography is used makes a lot of difference in Web Design

Different fonts depicts difefrent characteristic personality, what does your website want to do. Does it want to look professional, funky or playful?

Similarly even font sizes matter a lot. Text those are too small and unreadable will be a put off for users, on the contrary if they are too big they will also not go well with the users. Therefore making sure to use the optimum size that is comfortable for users is very important.

Making sure to use text alignment is another important task. Generally middle aligned or justified texts are not reader friendly. Therefore, it is best to stick to left aligned text.

Color of the text is also quite important, if your text is a link, it is better to use blue and/or underlined option. Also making sure to use dark contrast it very important. The less the contrast, more difficult it is to read.

7. Consistency

It is very important to be consistant in all the aspects of Wen Design, starting from matching the website layout with logo, choosing the right colors, button styles, spacing, design elements and their functionality etc. Everything should be worked out in a way to make it holistic.

Consistency results in quality and precisison. If the website looks and works consistently then half the battle is won. Users would not mind small errors if the website design and functionality is

consistent.

The best way to be consistant is to make early decisions and stick to them. When one is working on a website for a longer time, it is evident that there will be changes to the initial plan. Therefore, before implementing any new design or functionality it is important to have a look at how the new design or functionality will effect the existing mechanism.

Conclusion

Bottomline a website should not be designed thinking it is a canvas for a painter. It should be designed keeping all the objectives in mind, understanding the potential users and their needs, and last but not the least keeping Web Design principles in mid.

If these can be cracked right, then the website is sure win big.