February 4, 2008 at 19:3010 principles of effective web design
- Transfer
Usability and practicality, not visual design, determine the success or failure of any website. Since it is the user who is the only one who clicks the mouse and thus makes all decisions, one of the standard approaches for creating successful and profitable web designs is “user-centric design”. In the end, if the user does not know how to use this or that function, it can be easily neglected.
In this article we will not consider implementation details (for example, where you need to locate the search field), but rather focus on the main principles, heuristic methods and approachesto create effective web design, which, when used wisely, can lead to more correct design decisions and simplify the process of perceiving the proposed information.
First of all, in order to use the principles correctly, we need to know how users interact with the website, what they think about and what their behavior model is.
In principle, the behavior of users on a website is not very different from their behavior in, say, a store. Users glance over each new page, look through passages of text and click on the first link that caught their attention, or at least remotely similar to the one they were looking for. In fact, they won’t even look at most of the page.
Many users are looking for something interesting (or useful) and “clickable”; as soon as a suitable “candidate” catches your eye, the user quickly clicks and follows the link. If the result does not meet his expectations, the user clicks “back” and continues the search.
Users highly value the quality and veracity of information.If the page contains high-quality material, users are ready to compromise with the presence of advertising on the page and its design. This is one of the reasons why sites with not very good design, but with high-quality content, get a lot of traffic. Content is much more important than the design surrounding it.
Users do not read, they “scan”. When analyzing a web page, users look for fixed points, “anchors” that will direct them along the content on the page.
Users do not read, they scan. Pay attention to the abrupt hot spots in the middle of the sentences. This is characteristic of the scanning process.
Users are impatient.A very simple principle: if a website cannot meet the expectations of users, then the design does not fulfill its function, and the company loses money. The less intuitive the navigation, the stronger the user's desire to leave the website and find an alternative.
Users do not make optimal decisions. Users are not looking for the fastest way to find the information they want. They also do not crawl websites sequentially, moving from one section to another. In fact, they choose the first most suitable, in their opinion, option. As soon as they see a link that can lead them to the desired goal, it is likely that the link is instantly clicked.
Both images show that sequential scanning does not work on the web.
Users act intuitively.More often than not, users simply browse rather than read carefully what the designer has offered them. According to Steve Krug, the main reason is that users do not care. “If we find something that works, we will use it. We are not interested in how this all works, the main thing is that it works correctly. If your audience sees what you’ve done as a bulletin board, then create a quality bulletin board design. ”
Users want to control. It is important for users to control the browser and rely on the correct transfer of data through the site. For example, they do not want pop-up windows to suddenly open, and they want to be able to return to the previous page by clicking the back button. From here, it is necessary to follow one of the most important practices -never open the link in a new browser window .
Under Circle’s first law of usability, a web page should be obvious . When you create a design, your main task - to get rid of questions - users must make all decisions consciously, taking into account the pros, cons and alternatives.
If the navigation and structure of the site are not intuitive, the number of questions arises and it becomes more difficult for users to understand how the system works and how to get from point A to point B. A clear structure, correct visual hints and easily recognizable links will help users find the way to their goal.
Let's look at an example. Beyondis.co.uk claim to be “beyond channels, beyond products, beyond distribution”. What does it mean? Since users tend to learn about websites according to the “ F- pattern”, the above statements will be the first element that users will see when they download the site.
Although the design is simple and intuitive, users will need to look for answers to understand what this page is about. This is a prime example of unwanted questions . The task of the designer is to make the number of questions tend to zero. The visual explanation is on the right. Even just by interchanging both blocks, it would be possible to increase usability.
ExpressionEngine uses the same structure as Beyondis, but avoids unnecessary questions. Moreover, the slogan has its own function, inviting users to make a choice: try their service or download the free version.
Reducing the cognitive load, you simplify the perception of the idea by visitors. Once you have achieved this, you can explain how the system is useful and how users can benefit from it. People will not use your website if they cannot understand it.
In each project where you intend to offer your visitors a service, try to minimize user requirements. The fewer actions a user needs to try your service, the more likely it is that an occasional visitor will actually try it in action. The first time visitors to the site want to try the service , rather than filling out long forms to create an account that they may not use at all. Give users the opportunity to wander around the site and try to use your service without “pulling” personal data from them.
According to Ryan Singer, one of the developers of the 37Signals team, users will be happy to provide their email address if they are askedafter they see how the service actually works. In other words, users will understand that they will receive “in return” their email.
A great example of this approach is Stikkit . For registration, practically nothing is required - it is quite convenient and simple. And that’s exactly how you want users to feel on your site.
Mite requires more information when registering. However, registration itself requires less than 30 seconds - because the form is located horizontally, the user does not even have to scroll the page.
Ideally - remove all barriers and barriers, do not require any registrations at first. The registration procedure alone is reason enough to reduce the number of potential users.
When a website contains both static and dynamic content, some aspects of the user interface attract more attention than others. Obviously, pictures are more catchy than text - just like sentences in bold are more visible than regular ones.
The human eye is a complex non-linear device and web users can instantly determine borders, patterns, and movement . Therefore, advertising based on video or containing moving objects is incredibly annoying and distracting, but from the marketing side it performs its function - it attracts the attention of the user.
Humanized.comPerfectly uses the principle of focusing. The only element instantly visible to users is the word “free”, which immediately attracts, but is also completely uninformative. Thin tips offer users enough information to learn more about the “free” product.
If you focus users on certain objects of the site (with the correct use of visual elements), you can help your users get from point A to point B without much thought about how to do this. The fewer questions visitors get, the better they are.and the more they trust the company that the website represents. In other words: the less the user needs to think about the meaning of his actions, the better his impression of the site - which is the main principle of usability.
Modern web designs are often criticized for their approach to using “steps” (akin to 1-2-3-ready!), Huge buttons, heaps of effects, etc. But from a design point of view, such elements are not so bad. On the contrary, such elements are very effective , because they facilitate the transition of users between parts of the site.
Dibusoft.com combines a pleasant design with a clear structure. The site has 9 main elements that are visible to the naked eye. Although perhaps the colors are too light.
Letting users know which features are available is a fundamental principle in successful design. It doesn’t matter how you achieve this. The important thing is how easily the content is perceived and how easy it is for users to work with the system.
The web is different from prints; you need to be able to tailor your writing style to your preferences and browsing methods. Visitors will not read promotional texts. Large paragraphs without images, without bold or italicized sentences will be skipped. Exaggerations will be ignored.
Speak on business. Avoid “cute” or witty names, specific names used internally, unfamiliar technical terms. For example, if you describe a service and want users to register, then “register” is better than “start now!”, Which, in turn, is better than “try our services”.
Eleven2.comgoes straight to the heart of the matter. No inviting speeches, nor overestimated statements. Instead, they immediately indicate the price - all that visitors need.
The best solution for effective text writing:
The “keep it simple” (KIS) principle should be the main goal of website design. Users rarely go to the site just to enjoy the design. Moreover, in most cases, they are looking for the right information, despite the design. Strive for simplicity, do not complicate.
In Crcbus simple design. You may not understand what this site is about, because It is in Italian, but you will precisely define the navigation bar, title, content and copyright line. Even the icons convey their part of the information. If you hover over them with your mouse, you will see additional information.
From the point of view of visitors, the best is the most ordinary text design, without ad units or any additional “on topic” links. This is another reason why web pages must have a printable version: such details improve the user experience of the website.
Finch clearly displays information about the site and gives users several links to choose from without overloading the visitor with unnecessary content.
It is actually very difficult to overestimate the function of empty space. It not only helps to reduce the cognitive load on visitors, but also makes it possible to perceive information on the screen. When a new visitor studies design, the first thing he / she does is scan the page and divide it into content regions and easy-to-understand pieces of information.
Complex structures are difficult to read, scan, analyze, and work. If you are faced with a choice, to separate the two design elements with a visible line or empty space, then it is better to opt for the second. The hierarchical structure reduces complexity (Simon's Law): the better you were able to present users with a visual hierarchy, the easier it will be to perceive the content.
Empty space is good. Cameron.io uses white space as the main design element. The result is easily-scanned markup that takes content to a well-deserved dominant level.
In his works on the effective visual presentation of information, Aaron Marcus indicates three fundamental principles for using the so-called “Visual language” - the content that users see on the screen.
The traditional design of website elements does not mean boring design at all. In fact, traditions are very useful because they reduce the learning curve and the need to figure out what works and how. It would be a usability nightmare if all websites visualized the RSS feed in different ways. Traditions in design are not much different from our traditions in everyday life: the way we are used to organize data (folders) or make purchases (location of products).
Using traditional approaches, you can easily win the trust of users, their confidence in you. Follow user expectations - understand what they expect from site navigation, text structure, search location, etc. (see Nielsen Usability Alterbox )
Steve Krug offersinvent something new only if you are sure that your idea is really good , otherwise it is better to stick to traditional solutions.
This principle (TETO, “test early, test often”) should be applied to every web project, as usability tests often show all the biggest problems with a given design.
Often tests are done too late or too rarely. Sometimes not what is needed is tested at all. It must be understood that most design decisions are made locally; in other words, you cannot be sure that one markup is better than another, because the decision very much depends on what position you look at it (initial requirements, investors' expectations, budget, etc.).
A few important points:
In this article we will not consider implementation details (for example, where you need to locate the search field), but rather focus on the main principles, heuristic methods and approachesto create effective web design, which, when used wisely, can lead to more correct design decisions and simplify the process of perceiving the proposed information.
First of all, in order to use the principles correctly, we need to know how users interact with the website, what they think about and what their behavior model is.
What do users think?
In principle, the behavior of users on a website is not very different from their behavior in, say, a store. Users glance over each new page, look through passages of text and click on the first link that caught their attention, or at least remotely similar to the one they were looking for. In fact, they won’t even look at most of the page.
Many users are looking for something interesting (or useful) and “clickable”; as soon as a suitable “candidate” catches your eye, the user quickly clicks and follows the link. If the result does not meet his expectations, the user clicks “back” and continues the search.
Users highly value the quality and veracity of information.If the page contains high-quality material, users are ready to compromise with the presence of advertising on the page and its design. This is one of the reasons why sites with not very good design, but with high-quality content, get a lot of traffic. Content is much more important than the design surrounding it.
Users do not read, they “scan”. When analyzing a web page, users look for fixed points, “anchors” that will direct them along the content on the page.
Users do not read, they scan. Pay attention to the abrupt hot spots in the middle of the sentences. This is characteristic of the scanning process.
Users are impatient.A very simple principle: if a website cannot meet the expectations of users, then the design does not fulfill its function, and the company loses money. The less intuitive the navigation, the stronger the user's desire to leave the website and find an alternative.
Users do not make optimal decisions. Users are not looking for the fastest way to find the information they want. They also do not crawl websites sequentially, moving from one section to another. In fact, they choose the first most suitable, in their opinion, option. As soon as they see a link that can lead them to the desired goal, it is likely that the link is instantly clicked.
Both images show that sequential scanning does not work on the web.
Users act intuitively.More often than not, users simply browse rather than read carefully what the designer has offered them. According to Steve Krug, the main reason is that users do not care. “If we find something that works, we will use it. We are not interested in how this all works, the main thing is that it works correctly. If your audience sees what you’ve done as a bulletin board, then create a quality bulletin board design. ”
Users want to control. It is important for users to control the browser and rely on the correct transfer of data through the site. For example, they do not want pop-up windows to suddenly open, and they want to be able to return to the previous page by clicking the back button. From here, it is necessary to follow one of the most important practices -never open the link in a new browser window .
1. Do not make users think
Under Circle’s first law of usability, a web page should be obvious . When you create a design, your main task - to get rid of questions - users must make all decisions consciously, taking into account the pros, cons and alternatives.
If the navigation and structure of the site are not intuitive, the number of questions arises and it becomes more difficult for users to understand how the system works and how to get from point A to point B. A clear structure, correct visual hints and easily recognizable links will help users find the way to their goal.
Let's look at an example. Beyondis.co.uk claim to be “beyond channels, beyond products, beyond distribution”. What does it mean? Since users tend to learn about websites according to the “ F- pattern”, the above statements will be the first element that users will see when they download the site.
Although the design is simple and intuitive, users will need to look for answers to understand what this page is about. This is a prime example of unwanted questions . The task of the designer is to make the number of questions tend to zero. The visual explanation is on the right. Even just by interchanging both blocks, it would be possible to increase usability.
ExpressionEngine uses the same structure as Beyondis, but avoids unnecessary questions. Moreover, the slogan has its own function, inviting users to make a choice: try their service or download the free version.
Reducing the cognitive load, you simplify the perception of the idea by visitors. Once you have achieved this, you can explain how the system is useful and how users can benefit from it. People will not use your website if they cannot understand it.
2. Do not test the patience of users
In each project where you intend to offer your visitors a service, try to minimize user requirements. The fewer actions a user needs to try your service, the more likely it is that an occasional visitor will actually try it in action. The first time visitors to the site want to try the service , rather than filling out long forms to create an account that they may not use at all. Give users the opportunity to wander around the site and try to use your service without “pulling” personal data from them.
According to Ryan Singer, one of the developers of the 37Signals team, users will be happy to provide their email address if they are askedafter they see how the service actually works. In other words, users will understand that they will receive “in return” their email.
A great example of this approach is Stikkit . For registration, practically nothing is required - it is quite convenient and simple. And that’s exactly how you want users to feel on your site.
Mite requires more information when registering. However, registration itself requires less than 30 seconds - because the form is located horizontally, the user does not even have to scroll the page.
Ideally - remove all barriers and barriers, do not require any registrations at first. The registration procedure alone is reason enough to reduce the number of potential users.
3. Concentrate user attention
When a website contains both static and dynamic content, some aspects of the user interface attract more attention than others. Obviously, pictures are more catchy than text - just like sentences in bold are more visible than regular ones.
The human eye is a complex non-linear device and web users can instantly determine borders, patterns, and movement . Therefore, advertising based on video or containing moving objects is incredibly annoying and distracting, but from the marketing side it performs its function - it attracts the attention of the user.
Humanized.comPerfectly uses the principle of focusing. The only element instantly visible to users is the word “free”, which immediately attracts, but is also completely uninformative. Thin tips offer users enough information to learn more about the “free” product.
If you focus users on certain objects of the site (with the correct use of visual elements), you can help your users get from point A to point B without much thought about how to do this. The fewer questions visitors get, the better they are.and the more they trust the company that the website represents. In other words: the less the user needs to think about the meaning of his actions, the better his impression of the site - which is the main principle of usability.
4. Strive to show the most significant things
Modern web designs are often criticized for their approach to using “steps” (akin to 1-2-3-ready!), Huge buttons, heaps of effects, etc. But from a design point of view, such elements are not so bad. On the contrary, such elements are very effective , because they facilitate the transition of users between parts of the site.
Dibusoft.com combines a pleasant design with a clear structure. The site has 9 main elements that are visible to the naked eye. Although perhaps the colors are too light.
Letting users know which features are available is a fundamental principle in successful design. It doesn’t matter how you achieve this. The important thing is how easily the content is perceived and how easy it is for users to work with the system.
5. Write efficiently
The web is different from prints; you need to be able to tailor your writing style to your preferences and browsing methods. Visitors will not read promotional texts. Large paragraphs without images, without bold or italicized sentences will be skipped. Exaggerations will be ignored.
Speak on business. Avoid “cute” or witty names, specific names used internally, unfamiliar technical terms. For example, if you describe a service and want users to register, then “register” is better than “start now!”, Which, in turn, is better than “try our services”.
Eleven2.comgoes straight to the heart of the matter. No inviting speeches, nor overestimated statements. Instead, they immediately indicate the price - all that visitors need.
The best solution for effective text writing:
- use short, concise expressions (to get to the point as soon as possible);
- use “scanned” markup (categorize content, use multi-level headings, visual elements and lists that break the flow of text blocks);
- use a simple and objective language (promotional texts should not sound like advertising; offer your users some reasonable and objective reasons why they should use your service or stay on your website).
6. Strive for simplicity
The “keep it simple” (KIS) principle should be the main goal of website design. Users rarely go to the site just to enjoy the design. Moreover, in most cases, they are looking for the right information, despite the design. Strive for simplicity, do not complicate.
In Crcbus simple design. You may not understand what this site is about, because It is in Italian, but you will precisely define the navigation bar, title, content and copyright line. Even the icons convey their part of the information. If you hover over them with your mouse, you will see additional information.
From the point of view of visitors, the best is the most ordinary text design, without ad units or any additional “on topic” links. This is another reason why web pages must have a printable version: such details improve the user experience of the website.
Finch clearly displays information about the site and gives users several links to choose from without overloading the visitor with unnecessary content.
7. Do not be afraid of empty space
It is actually very difficult to overestimate the function of empty space. It not only helps to reduce the cognitive load on visitors, but also makes it possible to perceive information on the screen. When a new visitor studies design, the first thing he / she does is scan the page and divide it into content regions and easy-to-understand pieces of information.
Complex structures are difficult to read, scan, analyze, and work. If you are faced with a choice, to separate the two design elements with a visible line or empty space, then it is better to opt for the second. The hierarchical structure reduces complexity (Simon's Law): the better you were able to present users with a visual hierarchy, the easier it will be to perceive the content.
Empty space is good. Cameron.io uses white space as the main design element. The result is easily-scanned markup that takes content to a well-deserved dominant level.
8. Effective Content Communication
In his works on the effective visual presentation of information, Aaron Marcus indicates three fundamental principles for using the so-called “Visual language” - the content that users see on the screen.
- Organization: Give the user a clear and consistent structure. The sequence and placement of logical blocks, the relationship between them, the possibility of transition between these blocks are important aspects of the organization. The same rules should apply to all elements.
- Savings: Try to do as much as possible with fewer visual elements. Four main points: simplicity, clarity, distinctiveness and expressiveness. Simplicity means including only those elements that are most important for effective communication. Clarity : all components must have a design that does not confuse the visitor in the purpose of these elements. Distinctiveness : the most important properties of elements should be easily noticeable. Expressiveness : the most important elements should be easily visually perceived.
- Interaction: appearance should correspond to the physical capabilities of visitors. The site should be clear, readable, with the right typography, suitable colors, etc. Use no more than 3 fonts with 3 different sizes , and no more than 18 words or 50-80 characters per line of text.
9. Traditions are our friends
The traditional design of website elements does not mean boring design at all. In fact, traditions are very useful because they reduce the learning curve and the need to figure out what works and how. It would be a usability nightmare if all websites visualized the RSS feed in different ways. Traditions in design are not much different from our traditions in everyday life: the way we are used to organize data (folders) or make purchases (location of products).
Using traditional approaches, you can easily win the trust of users, their confidence in you. Follow user expectations - understand what they expect from site navigation, text structure, search location, etc. (see Nielsen Usability Alterbox )
Steve Krug offersinvent something new only if you are sure that your idea is really good , otherwise it is better to stick to traditional solutions.
10. Test early, test often
This principle (TETO, “test early, test often”) should be applied to every web project, as usability tests often show all the biggest problems with a given design.
Often tests are done too late or too rarely. Sometimes not what is needed is tested at all. It must be understood that most design decisions are made locally; in other words, you cannot be sure that one markup is better than another, because the decision very much depends on what position you look at it (initial requirements, investors' expectations, budget, etc.).
A few important points:
- Steve Krug believes that testing with one user is 100 times better than testing without user participation in general , and testing with one user at the beginning of the project is better than testing with 50 users at the end. According to Boehm's first law, errors most often occur during the initial stages of design and construction; the later they are fixed, the more expensive it will be for the project.
- Testing is an iterative process . It works like this: you create something, test it, fix it and test it again. Perhaps you will find problems that went unnoticed during the first test in the garbage of other errors.
- Usability tests always give useful results . You will either see current problems or their absence. In any case, this is useful for the project.
- According to Weinberg's Law, developers are unable to test their code . This also applies to designers. After you have been working on the site for several weeks, your eyes are getting blurry and you can no longer take a fresh look at the project. You know how it is built from the inside out and how it actually works - independent testers and your users do not have this knowledge.