Your website is probably your main source of business. If it wasn’t, you probably wouldn’t be reading this. So let’s talk about the shiny stuff that welcomes visitors to your showcase, the visual web design.
Your user interface should be a blend of form and function that combines to make a pleasurable and fulfilling user experience — or at the very least, an experience that your customer won’t have to think about.
And if you think visual appeal alone is enough, think again. That’s just one subset of the factors that make up the user experience. Navigation, copy, CTA’s, forms, popups, the works. All that can get messy and complicated without a solid understanding of design.
The Good: Keep It Simple
If I had to pick just one rule no designer can live without, it’s Hick’s Law: Keep It Simple, Stupid.
That doesn’t mean visual design is a simple job. On the contrary, the whole point is to simplify all the complicated stuff so your visitors don’t have to. That means considering a whole array of design elements, all of which could fill entire books by themselves. The simpler you make your site, the easier it will be for customers to reach the end goal — conversions.
Layout and Navigation
You want your visitors to feel like they know where they’re going when they land on your page, so it’s vital that the layout and navigation are set up in a logical, but recognizable format to avoid confusion. The last reason you want to lose customers is because they couldn’t find the information they were looking for.
Crucial questions to ask when you’re building and testing your sitemap:
- Do your buttons and menus lead where the user intuitively expects?
- Once they get there, do they have to navigate somewhere else to get the information they need?
- How many steps before they get to the conversion?
- What content and/or information will prepare them to take the desired action?
- Is that content (blog, podcast, videos, etc.) easy to find?
- If they’re dropping off before the conversion, where and why?
The answers will differ slightly for every business, but if you keep your navigation short and straightforward, customers should have no problem finding their way through the funnel.
Consumer trends say that users want customization in their experiences, which means all the options you can give them, right? But more options lead to more complexity, which makes decisions more difficult and causes user fatigue. Your users need clear guidance in the onboarding experience, or they could get lost in a muddle of features.
Popups are a great way to keep your visitors assured and on the right track (as long as they’re easy to dismiss), and chatbots are a great resource if visitors are truly stuck. Mouseover text is an understated but useful tool for conveying extra information, and strategically placed CTA’s should prompt actions such as filling out forms or content downloads. Like this:
Copy writing: Yes, it counts as visual design
You tend not to think of web copy as part of your visual design, but it should be your hero, and the element the rest of your site is designed around. Few things are more of a turn-off than copy that’s unnecessarily hard to read. Yellow copy on a white background, for instance, is a cardinal sin punishable by exile to the ‘spam’ filter.
See what I mean? It’s actually painful.
Extra spaces? Tpyos? Unless you use them ironically, these little mistakes make your content look amateurish and can sabotage your whole message. Proofread that copy two or three times before you make it live. And don’t be the only one to check; a fresh pair of eyes on the page can save you from typo blindness.
And when it comes to images on the page, they should be both structurally and narratively relevant to your copy. Do they enhance or justify the text? If not, they could be taking up space for no reason.
Last but not least, front loading. Viewers (especially skimmers) will most likely scan your page in roughly an F-shape, like so:
So that the only words readers will see while scanning end up looking
a lot like this shape that I’m making
that your And all the stuff over here
most important is virtually no-man’s land
information on a heatmap.
should be Outside the margins is an
concentrated especially empty place, a great
here. spot for the ads no one wants to
look at anyway. (this way →)
Not to say ‘don’t bother writing a whole paragraph’, but try to sneak those keywords onto the left-hand alignment as much as possible. If you can make that interesting enough, your skimmers might actually finish the whole paragraph.
The Bad: Gimmicky and Unreadable
Have you ever landed on a page so incredibly overloading that you didn’t even want to look at the content? Here’s a prime example:
Way too much color + excessive, choppy movement = instant headache. You can tell the colors and motions are tangentially related to the actual product, but the gimmicky visuals are overwhelming the copy. Even if you made the background static, there’s still a lot of distraction in the margins.
Forget buying the thing, I don’t even want to read the page, which is a catastrophic failure of visual design.
There are multitudes of bad visual design. For a little fun, try this link out and see how well you navigate some intentionally awful design elements. My first time was 6:19, if you’re game to match it (be honest).
Some of the bad design is subtle, because you’re so used to seeing it that you’re numb to the frustration. While you’ve probably never seen them all in one place before, you’ve definitely been annoyed by most of them at some point. Counter-intuitive color coding, awful Captchas, unnecessary sliders, misleading text, obnoxious timer popups, badly formatted buttons; it’s all there and it’s all bad design.
The Ugly: Advertisements
Running ads on your page? That’s all well and good, but you have to consider their design, too. The average bounce time for a user who’s completely ambivalent towards your page is about 2 seconds, which puts a disproportionate premium on your visitors’ first impressions. You need to keep them around long enough to actually read something, or take the right action on-page, so you need to make the right impact the first time.
But slap an ad or twelve right in front of the content they’re actually trying to read? Visitors can’t leave your page fast enough. That 2-second number would be negative if our physical reflex to hit the X matched the blinding speed of mental revulsion (and if some sites didn’t make the X impossible to find). You may as well shoot your website in the foot. Sure, you need that ad revenue to run your site. It’s a necessary evil. But you’ll never earn customers by abusing them with it.
For those of us too cheap to pay subscription fees and too picky to stomach ad bombardment, there’s AdBlock; it’s an amazing thing. Or at least, it was until sites started detecting adblock and deploying AdBlockBlock. If you read a lot of articles that you aren’t necessarily subscribed to, you’ve definitely encountered popups something like this:
“You appear to be running AdBlock. Please whitelist us so this puppy will stop looking so darned sad.”
Twisting my arm and my feelings? Very uncool. Very dark-pattern-esque.
But there’s some gray area here. AdBlock technically could block these adblock walls, but won’t in most cases because businesses reserve the legal right to communicate with their consumers. Developers have to keep the lights on somehow, y’know?
But before I completely vindicate the existence of ads, let’s not forget mobile UI. If you thought ads on your computer were bad, you’ve only seen the first level of adware hell. Scrolling through a mobile article that’s filled to the brim with ads (looking at you, Facebook articles) is like trying to read a Jackson Pollock painting where the actual content is the background.
The screen space ads get is borderline absurd. You can only read one or two sentences at a time, and the payoff for your endless scrolling is never worth it.
Disclaimer: There’s no such thing as a perfect website…
But there’s a layout or widget for every purpose. If by chance it doesn’t exist, then you have the perfect excuse to get creative, invent it and call it your own. After all, you can never have too many differentiating factors. Your site is a pivotal part of your brand’s success and a keystone in your customer experience, so it’s worth making the most of.
I’m Worthix’s Head of Content, editor and producer of the Voices of CX Blog and Podcast and backup watercooler comedian (see Peter Sooter). I’m a Film Major who enjoys good writing (books, too), martial arts and competitive games, virtual or not.