12 Do's and Don'ts of Good Web Design

1.

DO

Display all main menu items by default

DON'T

Hide your offerings behind a hamburger menu

WHY?

Showing your main menu items helps users orient themselves in the context of your business’ range of services/products.

Don't deny mobile users the ability to see main menus without having to spend effort tapping.

Remember, just because you know your business like the back of your hand, doesn’t mean new visitors do. Help them out by showing your main menu by default.

Here's a second thought: do you really think 100% of your website visitors will click on your hamburger menu?

Do YOU click on every hamburger menu YOU see?

No.

Therefore, if you choose to hide your offerings behind a hamburger menu, you’re choosing to hide your offerings from a significant portion of your visitors.

When we put it like that, it's actually surprising how common this mistake is.

(Disclaimer: hamburger menus are fine in addition to static menus, when space is an issue.)

2.

DO

Include only the most relevant links in your main menu

DON'T

Dilute your core offerings by including low-value links

WHY?

"As the number of choices increases, so does the effort required to collect information and make good decisions. Featuritis can be an exhausting disease for users."

What Hoa Loranger of NN Group is saying, is that you need to make it easy for customers to find your main offerings.

And making them sift through 15 bad links to find the 1 relevant link, is doing your business no favors.

Here's how CEB/Gartner, as per Harvard Business Review, puts it:

"...more than 7,000 consumers and interviews with hundreds of marketing executives and other experts around the world . Our study bored in on what makes consumers “sticky”—that is, likely to follow through on an intended purchase, buy the product repeatedly, and recommend it to others. We looked at the impact on stickiness of more than 40 variables, including price, customers’ perceptions of a brand, and how often consumers interacted with the brand. The single biggest driver of stickiness, by far, was “decision simplicity”—the ease with which consumers can gather trustworthy information about a product and confidently and efficiently weigh their purchase options."

3.

DO

Use boring, industry-standard words for your menu item names

DON'T

Get poetic and creative with your menu item names

WHY?

Because your users are on your site to get s**t done!

Not read poetry! (At least not in the main menu.)

Here's my favorite web design law:

"Users spend most of their time on other websites, not yours." - Jakob's Law.

This means that their expectations for how your website should work, are already formed based on their experiences on other websites.

And if you go against these expectations, it adds friction to their experience, as they work to translate (or abandon) your menu links.

So, don't go around coming up with your own unique words for your menu items.

Instead, use the standard words for sections, like:

  • Home
  • Products, Services, Solutions
  • About, FAQ
  • Blog, News
  • Contact Us, Documentation, Help, Support
  • Account, Login, Pricing, Settings, Shopping Cart
  • Admissions, Athletics, Arts, Events, Faculty, Research, Students
  • Patients & Families, Medical Professionals, For Patients, For Physicians, Investors & Media
  • ...and so on.

Note that while some of these menu link names are very niche, they are still very clear and literal.

4.

DO

Prioritize SEO campaigns around highly-targeted landing pages

DON'T

Go all-in on a single home page that has to appeal to too diverse of audiences

WHY?

As the folks at GetCRM illustrate, there are many possible search queries a customer might use on their journey from awareness to purchase -- and if you're lucky, to becoming an advocate for you and your brand.

This means 2 things:

  1. Opportunities: There are search queries that are more likely to be used in awareness ("robot vacuum", "how much does a robot vacuum cost") than they are during consideration ("roomba reviews", "roomba vs dyson", "do roombas work on carpet"), than during purchase ("buy robot vacuum amazon").
  2. Risk: don't bet the farm on your .com's landing page. Diverse customer needs means that there's no one-page-fits-all strategy when it comes to landing pages. The only way to hedge against this risk is by designing landing pages.

So how do you know what to make your landing pages all about? Primarily through research.

Your / your competitors' customers words in their reviews and comments online, will usually be the best words to use in your copy to convince new customers.

5.

DO

Use accessible text color

DON'T

Have low-contrast, hard-to-read text

WHY?

  1. Just because you can read it, doesn't mean tons of other people can't
  2. People who can read it, might not want to work to strain to

Be aware that as the writer, you probably can read your copy even if it's got poor contrast relative to its background, because you already know what it says.

Don't let your biases fool you.

6.

DO

Use static content for any banners you use

DON'T

Use rotators that move around before users have time to read and interact with them

WHY?

"Rotators" change before users can read them

If they are focused on your copy when it suddenly fades away to the next slide, their focus may not come back after such a jarring interruption.

The attention of a customer is fragile and valuable.

Protect it from bad design patterns that don't give them a chance to read your copy, or engage with your Call-To-Action's.

You fought hard to get that customer to your site – now fight to make it easy for them to convert.

Don't use "rotators."

7.

DO

Use great, relevant imagery

DON'T

Use stock images that took you 5 minutes to find

WHY?

If you're not selling your brand, you're selling a commodity.

Stock images take no effort to find.

The easy way, is often the most common way. But that doesn't mean it's not a costly mistake. If you use the same type of images as everyone else, you will be perceived as everyone else.

I can't think of anything worse.

Instead of using stock images:

  • Hire a professional
    • For on-site products: find local photographers on Instagram or Facebook, at great deals.
    • For product shots: it may be best to hire professionals that specialize in shots of tangible products, like Pencil One.
  • Google Advanced Image Search can filter images by license and resolution. I use this all the time to find "non-stocky" images with commercial-friendly licenses.
  • Flickr Creative Commons has great images with commercial-friendly licenses as well.
  • Reach out for permission to your favorite photographers and aritsts on other social media you frequent.

8.

DO

Make it obvious when there's more content to scroll down for

DON'T

Let users miss scrollable content due to perceiving a "false end"

WHY?

While landing pages where one image takes up the entire width and height of the screen are super aesthetic bro, they run the risk of making users think that there's nothing else to see on that page.

When in fact, there's lots of content, information, and Call-To-Actions below.

Now, sometimes you want a page that is simply one full screen, such as a login or a particular landing page.

But if you want a user to scroll down, make sure that there are signals that let users know they can or should scroll. Signals can include the end of a hero image, fading to a new color, changing abruptly to a new background color or image, or showing text.

In my opinion, this is one of the few responsive design issues that is actually the hardest to perfect, just because of the nature of responsive designs scaling to ANY device size.

The best way to test against this issue is to see how the above-the-fold content of your website looks on a number of devices / using a browser extension.

9.

DO

Be aware of "banner blindness"

DON'T

Put all your eggs into one basket and assume everyone will look closely at your "banners"

WHY?

Banner blindness is a brilliant term from NNGroup, who observed that users are often functionally blind when it comes to advertisement banners, or anything that looks like an advertisement banner. This can include a myriad of shapes, both horizontal and vertical, that look like ads/banners.

Directly from NNGroup's Jakob Nielsen's research-driven article on the topic:

"On hundreds of pages, users didn't fixate on ads. The following heatmaps show 3 examples that cover a range of user engagement with the content: quick scanning, partial reading, and thorough reading. Scanning is more common than reading, but users will sometimes dig into an article if they really care about it."

Key takeaway: users are likely to skip over anything that looks like a banner or ad, even if it isn't a banner or ad.

10.

DO

Use distinct colors for elements that are clickable

DON'T

Make users guess if something is clickable or not

WHY?

There are two parts to this:

  1. If you want users to click your links, the first step is for them to realize that a link is actually present. This is easily achieved by using a consistent style for your links.
  2. You don't want your users to waste time clicking things that aren't links. This is more likely to happen when users haven't observed a consistent pattern for clickable elements. When users click things and nothing happens, valuable – and limited – attention is lost.

One exception is black (and debatably*, white) text in a top menu.

* I say debatably because white text on dark backgrounds is harder to read than dark text on white backgrounds across larger sample sizes, as: "people with astigmatism (approximately 50% of the population) find it harder to read white text on black than black text on white." (Source)

11.

DO

Use appropriately-sized tap targets

DON'T

Make tapping a mobile link an act of dexterity

WHY?

You want your user's time?

Then treat them with respect.

Don't make them have to use the EXACT tip of their finger to click your tiny mobile links.

Using appropriately-sized tap targets not only provides for a user experience with fewer missclicks, back buttons, and bounces, but it also provides for a more enjoyable user experience, when a website or app is seamless to use.

12.

DO

Allow copy to drive design

DON'T

Get too attached to any given design, when it no longer supports the copy you want to use

WHY?

You can optimize your design around copy to really get every last drop of conversion rate % possible.

If you think about it, copy can vary quite a bit in length,

In number of line breaks.

It might even work best with bullet points.

Hopefully you can imagine now, that the same design you started with, might not be best-suited for the copy you end up loving the most.

If this happens, 1) this is why you should try to finalize your copy before designing landing pages, or any page, really. And 2) Don't fall in love with your own designs! Be willing to tear them down and rebuild them for your new copy, if you can afford to.