Website design — not something you really considered as a required skill for a dog trainer? If you went the DIY route to creating your website, then website designer is absolutely one of your many hats! And, like everything else in your business marketing, it pays to check your website is still as good as it can be. Just because you have a website, doesn’t mean it’s getting you clients efficiently.

Website copy is only one aspect of creating an effective website. If the design itself is clunky, unfriendly or difficult to use, all your beautiful copy will go unread as visitors bolt for the exit button double quick. Just like dogs, people will bail quickly if the task is too hard or they’re confused.

So how can we provide our potential clients with clarity? Here are 5 easy design tweaks you can make to ensure they devour your information, like a dog devouring free hotdogs — eager to swallow the next bit!

1. Use conventions

Conventions make the world a much simpler place. There are many conventions in daily life: STOP signs are usually similar in design from country to country. Cash usually looks like cash, even if the heads portrayed on the bills are different. Care labels in clothes often use similar symbols wherever they’re made.

Website conventions are no different. People expect certain things to be displayed in similar ways. If you want your visitors to feel right at home, follow the conventions that have been established since… forever. Many of these conventions have transferred from other mediums such as printed newspapers, ads, and business correspondence practices so they’re strongly ingrained in our expectations.

The main areas to consider are:

• Where you put expected items on the page: Logos, menus, and navigation buttons all need to be located in the appropriate places. No one has the time to stare at a webpage, scratching their heads, wondering how to get back to the home page again!

• The symbols and icons you use: Fancy icons, buttons, or symbols might look fab to you but if your visitor has no idea what they mean all that creativity is going to result in high bounce rates as people leave your site in frustration.

Read more about website conventions at this Conversion Uplift blog.

2. Create effective hierarchies

Hierarchy, in the context of web pages, means laying out your text, images, and buttons in a logical progression of size and/or color so it’s clear which element is the most important. 

This design rule comes from print material like magazine pages and newspapers. How you lay out your page elements leads your reader to notice some things before others and guides them through the page.

Visual hierarchies allow your visitor to have a smooth experience by noticing A then B, and finally C, in a logical order. If you’ve ever seen this “You will read this first” meme, you’ll know what we’re talking about:

Basic steps to creating visual hierarchies:

• Rank the items you want to display in order of importance.
• Use larger images or bigger, heavier weight fonts and stronger colors to signify “look here first!”
• Use smaller images or lighter fonts and more muted colors for less important items.
• Place them on your page to lead the eye in a logical progression of information.

Want more in-depth info? Check out UX planet’s detailed blog post on Medium.

3. Use space effectively to enhance clarity

Have you ever visited a website and been confronted with a screaming wall of confusing text, images, buttons and who-knows-what? Did you get out of there as fast as your finger could hit the exit button? I bet you did! And you wouldn’t be the only one.

Here are two quick tips for how to lay out a page so it’s clear and visually appealing:

Use white space

Make sure elements aren’t all crammed up against each other. A web page isn’t prime real estate where you get charged per square foot — you don’t need to use as little of it as possible to keep costs down! Instead, allow your content to spread out a little.

Read the finer details of using white (or blue or yellow or cream or…) space effectively in this Elementor blog post. Want a quick explanation? Check out this Instagram post.

Group related items and text together

Spacing items out is important, but people also appreciate knowing which elements are all about the same thing.  

Having your text about puppies next to a picture of a senior dog, with a button to your blog underneath the whole mess… well, obviously you wouldn’t do that! But you might be surprised at how tiny spacing differences can make a BIG impact on conveying your information.  

Read this Adobe article to learn how to use proximity to make your page content both beautiful and effective.

4. Format text to support web reading

This one links back to point #3, using space effectively. Reading text on the web is totally different to reading text on the printed page of a book or magazine. People read web text to find information — not to enjoy the experience of reading.  

This means their goals are very different — and so is the way they process the text in front of them. Rather than reading word for word, line by line, web users scan. (“Scan: to glance from point to point, often hastily, casually, or in search of a particular item.” From the Merriam-Webster online dictionary.)

You can make your text more easily consumed by some simple formatting techniques:

• Use a large enough font — one that is clear even on a mobile device.
• Use clear, visually distinct header text, with sub headers as necessary:

  • Header 1 / Title

  • Header 2

  • Header 3

• Use small paragraphs to break up big lumps of text (two-sentence paragraphs are normal for website copy).
• Use bullets and extra formatting to draw the eye to important details or information you want to emphasize within your body text.

Want the nitty gritty on making your text scannable? Check out UX Design’s blog about reading patterns and information seeking on the web.

5. Make it easy to navigate

If you’re visiting a brick and mortar establishment, or shopping in a physical store, you can usually ask a real human for directions to find the item or information you need. 

But if you’re trying to find your way around a website, you can’t just tap someone on the shoulder and ask for directions!  

Here are some brief tips to ensure your visitors can easily find their way around:

• Have persistent navigation — e.g., a main menu, search box, and quick links in a header and footer that appears on each page.
• Include page names (that match links and menus) clearly displayed on every page.
• Make sure menu items clearly show which is the current active section/page.
• Make links display differently once they’ve been clicked so users can see where they’ve already been.
• If you have a more complex site, use breadcrumbs: home> classes> sports> agility> introduction to agility. (You can find out more about breadcrumbs here.)

Remember, visitors can land on your site from external links and results in browser searches, rather than enter through the “front door” of your home page.

Want to really ace your site’s navigation so your visitors find what they want faster with less angst? Read Hubspot’s essential guide to website navigation here.

Website Examples:

One of the best ways to understand the difference between good and bad website usability is to check out some examples.  You can find blog posts showing great websites here, and not-so-great ones here. These posts also tell you why the sites they list work or don’t — so you can understand the finer details that make all the difference.

And finally, if you really want to know how well your website is working, ask your clients!

Still feeling stuck? Contact us for a free consult!