The 12 Do’s and Don’ts of Web Design

The days of sad-looking websites are over. Discover twelve do’s and don’ts of effective web design. About the author: Nick Babich (blogs.adobe.com) is a developer, tech enthusiast, and UX lover. He has spent the last 10 years working in the software industry with a specialized focus on development. He counts advertising, psychology, and cinema among his myriad interests. Image courtesy of GaudiLab via Bigstockphoto. 

---

If you design websites, you know that making your designs useful and enjoyable is your top priority. It can be an overwhelming task for anyone who just recently started creating websites, so to simplify it, I’ve created a simple list of do’s and don’ts to keep in mind when designing your next web design project.

First, the do’s

1. Keep your interface consistent

One of the top principles of good UX is to keep the interface consistent throughout the entire product. The overall look and feel of your website should be consistent across all of your site’s pages. Consistency of navigation, color schemes, typefaces, and style of writing can have a positive impact on usability and UX.

Do. Esquire’s design is consistent for all it’s pages.

Practical tip: Make design usable first. Consistency is a double-edged sword. If your website isn’t designed correctly at first, then to make other parts of it consistent will result in consistently poor design. Thus, make design usable first, then make it consistent.

2. Design easy-to-use navigation

Navigation is the cornerstone of usability. It’s the main interaction technique on the Internet. Having good navigation on your site is crucial for ensuring that visitors can find what they’re looking for.

Practical tips:

• Keep top-level navigation for the essential navigation options. Limit your top-level navigation links to a maximum of seven choices ━ the number of objects an average human can hold in working memory is 7 ± 2 ━ and create sub-navigation with clear categorization.
• Use clear labels for navigation options. Use familiar words for menu options to help visitors understand them better.
• Reduce the amount of time required for users to get to the destination. Design your navigation in a way that gets visitors where they want to go with the least number of clicks possible. When designing a website, remember the three-click rule, which says that your viewers should never be more than three clicks away from what they are looking for.
• Include navigation options in the footer of your site. A footer is a place where visitors expect to find navigation options and contact information.

3. Change the color of visited links

Links play a vital role in the navigation process. When visited links don’t change color, users could unintentionally revisit the same pages repeatedly. Knowing your past and present locations makes it easier to decide where to go next.

Do. Visually differentiate visited links.

4. Make it easy to scan your pages

When users visit your site they are more likely to quickly scan the page rather than read everything on it. For example, when visitors want to find specific content or complete a certain task, they will scan a website’s pages until they find what they are looking for. And you, as a designer, can help them with that by designing good visual hierarchy. Visual hierarchy refers to the arrangement or presentation of elements in a way that implies importance ━ e.g. where they eyes should focus first, second, etc.

Practical tips:

• Avoid walls of text. Chunk your information into groups to make it easier to digest visually. Breaking walls of text by headers or bullet points.

Put more visual weight on important elements. Make important elements such as call-to-action buttons or login forms focal points so visitors see them right away. You can emphasize elements using different sizes or colors.

• Consider natural scanning patterns. People in the Western world usually read left to right and from top to bottom. A design that goes against this pattern will present a learning curve for your visitors. Well-designed websites typically lay out their content in a  “F” reading shape or “Z” reading shape.
• Stick to a grid layout. A grid layout allows you to organize information in a way that makes it easier for visitors to read and comprehend information presented on the page.

5. Take content seriously

Copy is just as important as the design of your website. More than 95 percent of information on the web is in the form of written language. Even if your site is beautifully designed, it’s no more than an empty frame without good content; a good website has both great design and great content. A designer’s job is to make sure that the design aids and complements the content.

Practical tips:

• Make sure the text on the website is relevant. Irrelevant text doesn’t bring any value for your visitors and might easily confuse them. Strive to create copy where each line of text will be valuable for your visitors.
• Avoid jargon. The information written on your website should be as simple and as plain as possible for easy comprehension. A safe bet is to write for all levels of readers by picking words that are clearly and easily understandable to everybody.

6. Check your website for errors

A great piece of work can be easily tarnished by a small error. Here are a few common problems to be aware of:

• Watch out for dead links. A user can easily become frustrated when they click a link on a site and receive a 404 error page in response.
• Check your website for typos.
• Make sure all media content is loading correctly ━ no broken images or videos. 

7. Minimize the number of choices

The number of choices people have affects their decisions; the more choices they have, the less action they take. When you present your user with too many options, you make them think too much. To increase chances for interaction, it’s better to minimize the number of choices.

 8. Engage users to scroll

Scrolling sends users deeper into the page and makes them invest more time in the experience, and this increases the chance that users will convert ━ e.g. buy something, sign up for a newsletter, or contact you. Despite that people usually start scrolling as soon as the page loads, content at the top of the page is still very important. What appears at the top sets the impression and expectation of quality for visitors. People do scroll, but only if what’s above the fold is promising enough.

Practical tip: Content at the top of the page sets initial expectations. If a page provides users with high-quality content, they are willing to browse for more content.

9. Label buttons according to what they do

The label on any actionable interface element should always tie back to what it will do for the user. Users will feel more comfortable if they understand what action a button triggers. Vague labels such as “Submit” or abstract labels like in the example below don’t provide enough information about the action.

Don’t. Make people wonder what an interface element does. Credited to UXMatters

Do. Make it clear what will happen when users click a UI element. “Claim Your Free Trial” is a clear label for a sign up form. Credited to Treehouse

10. Make things look like they work

With buttons and other interactive elements, think about how the design communicates affordance. Remember the old adage “form follows function”: the way an object looks tells users how to use it. Visual elements that look like links or buttons, but aren’t clickable ━ such as underlined words that aren’t links, or elements that have a rectangular background but aren’t buttons ━ can easily confuse users.

Don’t. Is the orange box in the top-left corner of the screen a button? No, but the shape and label make the element look like one.

11. Make your website responsive

Today there are more than 5 billion devices running web browsers. This means that visitors can come to your site from various devices such as a desktop, tablet, phone, music player, or even a watch. A big part of UX design is ensuring that no matter how the visitor sees your site, all vital information will be displayed correctly on different screen sizes.

Do. Designers have to adapt their designs to various screen sizes. No matter how big a screen is — from a phone to a watch, or a tablet to a desktop — the site should present information in a clear way. Image credited to Adobe

Practical tips:

• Make essential information easily findable. Unlike desktop users, when browsing mobile, users are looking for something specific such as contact information or the cost of a product they want to buy. Make this info impossible to miss.
• Size interactive elements according to the screen. Since mobile users scroll and tap with their fingers, you may need to increase the size of interactive elements, such as buttons.

Now, the don’ts

1. Don’t make users wait for content to load

Loading time is extremely important for user experience. As technology progresses, we get more impatient, and today, 47 percent of users expect a web page to load in two seconds or less. If a web page takes more time to load, visitors might become frustrated and leave the site. That’s why speed should be a priority when building a web application.

The faster your site, the better experience is. Image credited to Google

Practical tips:

• Avoid blank pages during loading. When loading takes some time, consider displaying a part of the content together with some form of visual feedback ━ such as a loading indicator.
• Optimize images . Images,  especially large background images, can take a lot of time to load. You can significantly reduce the loading time by optimizing your images.
• Measure your website’s current performance. Google’s PageSpeed Insights and Think With Google tools not only help you identify performance problems on your website, but they will also propose solutions to certain problems.

2. Don’t open internal link in new tabs

Users expect different behavior from internal and external links. All internal links should open in the same tab; this way, you’ll allow users to use the “back” button. If you decide to open external links in a new window, you should provide an advanced warning before automatically opening a new window or tab. This might take the form of text added to the link text stating. “opens in a new window”.

3. Don’t use too many typefaces

When you start building a site, it’s always tempting to use a lot of different typefaces ━ five or six different fonts or even upload your own. But, it’s better to avoid that temptation. Too many variations in font types can be distracting, confusing, and borderline annoying.

Don’t. Too many fonts can conflict with each other and overwhelm your visitors.
A common recommendation is to use a maximum of three different typefaces in a maximum of three different sizes. When designing a website think about how can you make the typography powerful by playing with weight, not different fonts.

4. Don’t use too many colors on your website

Similar to typefaces, it’s better to avoid using too many colors in design. Applying color to a design has a lot to do with balance, and, the more colors you use, the harder it is to achieve balance. Using too many colors in design is like trying to convey a million feelings and messages at once, which can confuse the person viewing your design.

Don’t. Use too many colors in design. Credited to Pine-Sol

It’s always better to keep the color scheme limited to a few colors and keep it consistent across your site, unless you want to highlight some important section using color.

Practical tip: Think about emotions you want to evoke from your visitors. Knowing what feelings you want to convey can help you choose the proper color scheme. For example, if you promote meditation products on your website, you won’t want a bright and loud color scheme.

5. Don’t show automatic pop-ups too early

A lot of websites show pop-up boxes with a request to subscribe as soon as you arrive on the page. As a designer, showing pop-up windows is probably one of the most annoying things you can do to someone visiting your website. Pop-ups are interruptive by nature, and, since they are typically used to show ads, users often close them even before reading the content.

Don’t. The first thing people see when they visit The New York Times website is a popup with promo ad.
Practical tip: Time your pop-ups. Before asking visitors to do something, you need to show how you can deliver value. Prevent the box from popping up until visitors reach the end of the page ━ i.e. read all content ━ or stay on the site for some time.

6. Don’t use generic photos of people

Images with human faces are a very effective way to get your users engaged. Our brains are predisposed to pay attention to faces. When we see faces of other humans it makes us feel like we are actually connecting with them, and not just using a product.

However, many corporate sites are notorious for their over-use of insincere photography, which is employed to “build trust.” Usability tests show that purely decorative photos rarely add value to the design and often harm the user experience.

 7. Don’t let promotion steal the show

Having too many promotions or ads on a page can easily overshadow the main content and make it harder for users to accomplish tasks. If you have too many ads on the page, they’ll all be competing to get your readers to look at them. This will result in a sensory overload that will ultimately increase your bounce rates. It’s also important to acknowledge that anything that looks like an advertisement is usually ignored by users ━ the phenomenon is known as banner blindness.

8. Don’t play background music or autoplay videos with music

While background music might work in specific cases, like a promo website, it is simply a bad idea for most websites. Unexpected music or sound can annoy and potentially cause problems ━ people might be visiting your site at work, in a public place, or near someone who’s sleeping, and unexpected music could send such visitors away in an instant.

Similar to background music, autoplay videos incorporated into a block of content also irritate users. They should be used sparingly and only when appropriate and expected.

Practical tip: Put users in control. Set music to mute by default, but allow them to turn it on if they click ━ design play/pause buttons for your audio content.

Do. Facebook videos are set to autoplay, but no sound will play unless users show that they’re watching the video ━ i.e. by interacting with the video.

9. Don’t hijack scrolling

Scroll hijacking is when designers manipulate the scrollbar to behave differently on their website. Hijacked scrolling is very annoying for many users since it takes control away from them and makes scrolling behavior completely unpredictable. When you design a website, it’s better to avoid scroll hijacking and let the user control their browsing and movement through the site.

10. Don’t use horizontal scroll

In order to stand out, some designers use horizontal scrolling on their sites. Unfortunately, horizontal scrolling is one of the few interactions that consistently generates negative responses from users. Users often have no idea they can discover content by scrolling horizontally — most of the users are accustomed to scrolling down on websites and don’t usually look left and right. As a result, they simply ignore content accessible through horizontal scrolling.

Don’t. Visitors will have no idea that they should scroll horizontally, especially when there are no visual cues. Image credited to axelwyart

11. Don’t sacrifice usability for the sake of beauty

No matter how beautiful a design is, it should never interfere with a user’s ability to consume the content or interact with a website. One typical example of design decisions that often create terrible UX for the sake of beauty is using light grey text on light backgrounds. This combination affects the content’s readability. It’s better to avoid having busy backgrounds behind content or insufficient color contrast, like in the example below.

Don’t. Low contrast text is always a bad idea.

Practical tip: Check the contrast ratio. Contrast ratios represent how different a color is from another color. Tools like Color Contrast Checker will help you check if you have a sufficient color contrast in just a few clicks.

12. Use blinking text and ads

When creating ads and animations, don’t even consider using flickering flashing effects. Content that flashes or flickers can trigger seizures in susceptible individuals, and is likely to be annoying or distracting for regular users.

Don’t. Unnecessary distractions make users dizzy, and can even trigger seizures in some people.

Conclusion

When people interact with websites, they expect excellent user experience. If you fail to satisfy their needs, they’ll simply move to your competition, which might be just a click away. That’s why with every design decision, you should think what’s best for the visitor and try to make the experience as pleasant as possible.