Basic Principles of Web Design (a very simple explanation)

lectenz bio rebuild screenshot

When people are using the internet, they are looking for information.

This is the most important observation about users on the internet. On the internet, content and information is king. Search engines rank websites by how relevant and important their information is, as well as how many people are searching for that information and finding it. This is important to the design of a website because when a user comes to your home page, they are looking for a piece or pieces of information. If they have to search for that information, users are less likely to use your website. So, a general guideline of website design is to find the information that the most number of people are looking for, and hit them over the head with it.

Note: Information can be both images and text.

People using the internet have a very short attention span.

As you probably know, when you use the internet, if you cannot find the information you are looking for, you get very frustrated very quickly. Pretty much all users are the same in this regard. Most people will wait about six seconds for a page to load or for their information to pull up.

Something interesting to think about along these lines is that if a page loads without any images but with text and links, people can use the page. But if a page loads with images but no text, the page is usually useless.

Note: Most people will wait about six seconds for a page to load.

People using the internet get frustrated very easily.

This item goes hand in hand with the previous item, except the important thing about this is that frustration is related to emotions, and people often judge emotionally. To illustrate this point, if a user goes to your website and cannot find the information that they are looking for, they may get angry about it. When they think about your company, they will automatically be angry because you frustrated them. I cannot count how many times I have had to contact a vendor and I couldn’t find their phone number on their website. I wasn’t mad at the secretary or receptionist that I talked to on the phone when I finally found their number, but I did think to myself “these guys don’t want to be contacted” or “this vendor is so sloppy”. The lesson here is that by not giving people what they want quickly or at least giving them a path, you can lower the perception of the quality of your company very quickly.

When people look at a website they read from top left to bottom right.

Users start at the top left of a page and read to the bottom right in America. In other countries where people read from right to left, it is not the same. This is one reason that it is not as important to make your logo huge. People see it right away anyway. Besides, most of the time, they had to have read what they clicked on to know where they were going before they got to your website. Most of the time, the logo at the top right is more of a reassurance than anything else. It just says “hey, you’re at the right place”. Once again, many companies are keeping their logos small now on the web because the important part of the site is the information. That is what people have come for. Not the logo. The direction that users look at websites is particularly important for the next item.

People reading/looking at websites use this pattern…

  • 1. Scan the page quickly for the first thing that looks remotely like what they are looking for.
  • 2. Click on this item.
  • 3. If this does not take them to the information that they are looking for, click the “back” button.
  • 4. Repeat.
  • 5.If by the 2nd or 3rd try this does not produce the information that the user is looking for, they give up.

Perhaps the best way to describe how people look at the internet is by showing a picture. WebMD.com is our example website here. I have used three images. The first image displays the page as it pops up ordinarily. The second image displays what users see when they are sick and they want to know what is wrong with them. The final image shows what people see when they are coming to read the news or are just interested in their health. Take note that the different pages have different areas that are not blurred out.

Normal page:

I am sick and I want to know what is wrong with me:

I am interested in reading health news:

It is important to note that for both of these different moods, the user is looking for information. They want to find something. Whether they are sick or just interested in what is going on, the users want to find information as quickly as possible. It is also important to realize that for each image that was used, there is a path. This doesn’t always have to be the case, but it is generally a good idea. Just having a large image wouldn’t do them much good because it doesn’t lead to anywhere.

People, in general, do not read text that they are not interested in.

This is in line with the previous example. If a user has no interest in an area, be it text or otherwise, they are not even going to see it. A great example of this is advertising. Unless you think that an ad is going to help you, ninety-nine percent of the time on the web, you will not even notice it. A great example is on MSN.com. When I was doing research to find a website that works for my examples today, I didn’t notice the huge red and black ad on the right hand side until I was looking for ads.

Your Home Page is a Roadmap

The home page of your website should, in most cases, be a roadmap to your website. It should guide people to their information. By making it easy to use the home page, people will be more inclined to come back to your website for information in the future. Users feel more comfortable if you guide them to what they are looking for and don?t make them search for it. Also by not enabling users to find a path to the information that they are looking for on the home page, you create more clicks, more time to find information, and more frustration by your users.

Everything on a webpage should have a purpose. If it doesn’t have a purpose it shouldn’t be there.

This is that whole form follows function theory, and it applies even here. If it doesn’t have a purpose, it doesn’t belong. Every piece of every page of a website should lead, guide, inform, communicate, ask, tell, request, etc. If it doesn’t belong on the page you are on, move it. If it doesn’t serve a purpose, remove it. If something else needs to be there, put it there. But whatever you do, don’t just have information on a page for the sake of having information on the page. It is pointless, useless, and drives away users. The opposite is true as well. If the page is empty and people need something there to guide them, put it there.

A final note?

On a final note, it is important to remember that even though we do this for a living, we are not perfect. We have made mistakes in the past and have learned from those mistakes. That is how we can speak with the confidence that have in this document. It is worth pointing out that what works for the internet as a whole may not always work for you. It can be a good thing to depart from standards, take a risk, and try something new. Most of the time however, the standards that I outlined above will apply.

Lucas Lopvet Project Management Lucas was born and raised in France and became a US citizen in 2007. He started at JHMG as a web designer back in 2010 and progressively added managing projects and company operations to his role. Those 12 years of experience working at JHMG have given Lucas the knowledge that it takes to manage projects closely and thoroughly, by planning, organizing and managing resources for a successful result. As a front-end developer, he has extensive WordPress knowledge and experience, he has been involved in hundreds of development projects by designing, developing, deploying, maintaining and repairing sites for small/medium businesses, non-profits organizations, and more. His lifelong interest in visual art began during early childhood, his areas of expertise include graphic design, web design and logo design as well as children’s book illustrations. He keeps drawing on a daily basis for fun and sometimes painting. Lucas and his wife have 2 kids and have been living in northern Argentina since 2017 surrounded by the Andean cloud forest and colorful Toucans.

Further Reading

Quantifying Market Segments In SaaS

Quantifying Market Segments In SaaS

Most of the marketers I’ve worked with create customer avatars that look something like this: The usual customer profile looks something like this. Buyer Segment: Quick Decision Makers Name: Noah Ogle Title: Director of Development Location: Counsel Bluffs, Iowa...