Everything about your website plays into that quick first impression a visitor gets after the page loads. Attention spans may not be quite as short as some would have you believe, but it's still a factor. You don't want a web design that immediately creates doubt about whether to continue for the visitor, right?
Here are some things to keep in mind that will improve the visitor flow through your site and lead to more conversions.
Reduce Visual Distractions In Your Web Design
If your front page is too visually busy, the viewer may feel overwhelmed. This is a common mistake. We understand the format and hierarchy of pages within our own sites, so it's easy to lose sight of how it comes off to someone else that doesn't. Consider your major services or whatever it is you'd like a viewer to do most once on your site. Does your main page steer them toward that?
Visuals should be cohesive and feel like they belong together, but they should also work together toward that goal. For example, if your primary aim for new visitors is to get them to subscribe to your newsletter, how visible is the sign up form? Various elements from the layout itself to the sliders and page content should nudge people there, as well, rather than stealing the spotlight.
Remember that as finding information goes, it's not simply a matter of a person trying to find something on your site and getting confused before leaving. Often if at a glance it looks like it will be difficult to find things they'll leave without going further. With so many search results alongside yours, the assumption is usually that the next site will be easier.
Keep Your Menus Simple
In the same way that a visually complicated site can be intimidating, messy or poorly organized navigation menus can lead to lost traffic. Limit how many top layer items you display across the menu, especially if there are a good number of sub-menu items under each heading.
Unless your site is meant as a wide database of information, such that the viewer would expect that many choices, you want to get them to the main idea quickly and easily. If you have a painting website for instance, you don't need a menu item for every one of your 56 paint options in the menu.
One look and the viewer will probably say "Yikes, there's no way I can read this many pages!" That's a lost reader.
You might know that they don't have to, that right there on page 3 is what they're looking for. But they don't know that. You would've been better served to use a couple paint pages that discussed the various options. If needed, those pages could link to deeper pages that drill further down into the options, but these pages wouldn't be things that appear in the navigation menu. Having all sorts of additional information is great for the type of reader that craves details, but this creates a compromise of being fairly accessible without overwhelming viewers that just want an overview of what you can do for them.
Watch The Typography of Your Web Design
When a lot of people think web design they think of the graphical elements and colors that make up a page. It's true that these comprise a big chunk of the design, but did you know that the fonts and spacing can have as much effect on engagement?
Resist the urge to use overly fancy fonts in your body copy. You might think it captures the spirit of your site well, but it can create eye strain and make it difficult to read paragraphs of copy. The reason most sites use fonts like Arial, Open Sans, or even Georgia is because they are easy to read. Fun-looking fonts are great in images, logos, opt-in forms, etc. to capture attention in small doses. But the main content on any given page should be something easy to follow.
The perception of how long or difficult your page text will be to read matters.
The rule people give for resumes rings true for page content: use as much white space as possible.
Design elements like line height — the space between one line of text and another — can make a big difference in how crowded your text looks. Too tight and your text will look dense and hard to right. Too much space and it can be tough to see where paragraphs begin and end.
There are Golden Ratio calculators that can help you determine the right numbers to use based on your font size. Basically, there's a mathematical formula to predict, based on a given font size, what line heights, content widths, and paragraph spacing will look good to the eye and promote comfortable readability.
When in doubt however, I find that a 16px page font with 24-26px line height reads well. Use roughly a 15px bottom margin on paragraphs for good separation and white space. This is especially true if it's a longer post like this one; the text being easy to read is crucial to make sure readers are still with you at the end.
Break the content up with headings, bold text, and short paragraphs.
To the previous point about avoiding dense material, headings and short paragraphs are the best ways to make long material more palatable. Continued web design studies over the years that used the same block of text for A/B testing have always showed the same result. Text is displayed in large blocks versus broken up into short paragraphs, and readers are asked at a glance which set of text seems more complicated or difficult to read.
What they don't know at first is that the actual words in the samples are the same in both cases, but almost all readers say that large blocks of text look harder to read and assume that the subject matter must be more complicated. This makes them less likely to want to read it at all.
The other reason headings and bold text improves readership is because it makes it easier to skim. Writers like intro paragraphs and detailed explanations, but sometimes the reader just wants to shoot to a certain point as fast as possible. Headings help the reader scan down the page and find the thing they're looking for, again separating one site from another where finding that point may have been difficult.
These are a great start for web design elements to keep in mind as you build your site. Post your questions and comments below!
Leave a Comment
You must be logged in to post a comment.