Note: This is one of three articles in a series of guides on thoughts behind user experience. Be sure to check out our blog section to catch the other two blogs.
Indeed, that’s a design principle associated with 20th-century modern architecture that, frankly, probably applies just as much to web layouts and design. Hopefully, you’ve been keeping up with our blogs about web design, the value of responsive website layouts, and the value of mobile-optimized sites.
But on top of a functional site, I’ve been preaching that user experience (UX) plays a huge role in the effectiveness of your website, where effectiveness can be as simple as usability, or as complex as increasing conversions. And listen, that’s the gospel truth.
Today I want to take you through a few of the principles of effective design that you should be implementing into every page on your site.
The Top 10 Principles of Effective & Persuasive Web Design
Indeed, beauty is in the eyes of the beholder and not necessarily the web designer. The first thing to know about web design is that you should be putting yourself into the role of the customer. If you’ve never seen your website before, would you know how to use it?
“Most people make the mistake of thinking design is what it looks like. People think it’s this veneer – that the designers are handed this box and told, “Make it look good!” That’s not what we think design is. It’s not just what it looks like and feels like. Design is how it works” – Steve Jobs
Google values user experience in design because they know that naturally, websites which are designed better operate better. Good design quickens load speeds, reduces bounce back rates, and improves the bottom line all around.
1. Clear Call to Actions
This is a mistake that I see most designers – especially less experienced designers – make. Here’s a rule of thumb: assume people need their hands held. If your CTAs aren’t big, bold, clear, and concise, you can expect people to miss them.
2. Communicate Clearly
We live in an age of “now.” People online want information quickly and concisely. I’ve talked about how a website loading in 0.1 seconds feels instant while 8 seconds feels like a short eternity. The same applies for content.
Here’s one thing that really grinds my gears: when I’m looking for a recipe, and stumble on someone’s blog that allegedly has said recipe, but I have to read through their entire life story before I find out how much cream I need to make a ganache. The answer is equal parts cream and chocolate, Carol. Next time, just tell me that, Carol.
Be clear, be concise, don’t word stuff, and don’t make your customers search for information because I promise you, they’ll just leave your site and find another that’s easier.
3. Choose Your Font Wisely
Quick typography lesson. You have two primary families of font: a serif and a sans serif.
If you’ll notice, the word serif is in both of them. Sans is Latin for without. So when we say serif and sans serif, we’re saying the fonts either has serifs, or is without serifs.
But what’s a serif? Take a look at this example.
If you notice the serif font, there are stylized accents at the ends of the letters. It’s especially noticeable on the bottoms of the r, i, and f. The sans font is cleaner and doesn’t have those accents.
Generally speaking, when writing longform text use serif fonts. When writing text that’s broken up by images, or explains visuals like charts and graphs, use sans serif.
The reasoning here is that the human eye can get lost when there’s a lot of words together (like in a book), and the serifs on the letters help anchor your sight. Depending on the specific font, however, sans serifs can be more readable in short doses.
For web design, I’d almost always recommend using sans serif fonts for the body of paragraphs, and only use serif fonts if you must in headers or in sections that use big, bold letters.
4. Create Color Palettes
A well thought out color palette can be the difference between a web experience that’s comfortable, and one that’s overpowering and visually tiring.
Don’t forget that colors elicit emotions. Anytime you’re designing a website, be sure to select a color palette that supports your cause.
Blue colors that are designed to calm and reassure may not be best for a restaurant’s website, where the goal is to get people moving in and out. Meanwhile, red and orange colors that are designed to make people energetic may not be best for an insurance company that’s trying to convince visitors to trust them.
A really great utility is the Adobe Color Wheel that suggests complimentary colors based on your primary color. Try this before you design your entire layout and lay down colors on your website. Work smarter!
5. Creative Use of Images
“Use a picture. It is worth a thousand words.” – Tess Flanders
Why explain something when you can just show it? Creative use of images has been proven to consistently increase trust and conversion rates, as well as increase user’s aptitude to whatever you’re trying to show them.
Whenever possible, include imagery of what it is you’re trying to explain.
6. Use the Grid
Most content building software nowadays have grid mechanics that allow you to place text, images, or other elements onto a symmetrical grid. The human brain is very good at picking out inconsistencies and mismatches.
Avoid this by ensuring that you always place elements along your grid lines.
7. Use the “F” Layout
Studies show that we prefer content arranged in a hierarchy that matches our direction of native reading. So for English, that would be left to right. For something like Arabic for example, that would be reversed: right to left.
Always consider the language that you’re designing for. If you operate in the US, you’ll want your website to be navigable by starting from the top left, and working your way towards the bottom right.
8. Consider Your Load Time
Ok, this is the last time I’ll throw this at you, I promise. But load time is such a huge factor when it comes to a well-designed website.
0.1 seconds: feels instant
1.0 seconds: seems seamless, but something’s fishy
2.0 seconds: average
5.0 seconds: time to call Comcast
8.0 seconds: eternal torment. Exactly zero percent of the population will wait this long
Adding elements that have to load each time a user clicks your website will increase the load times. Trust me, I get it: it sounds insane, but you should be building for 0.1 second load times and not a moment longer.
And here’s where most people begin to trip up. Reduce your landing pages! They aren’t your website. Landing pages are the final cycle of marketing to PPC clients. You don’t need anything more on your landing page than what will sell a customer.
9. Hiding Elements
Here’s one that often seems counter-intuitive. Don’t hide elements on your website! This includes buttons, menus, drop downs, etc. The more items that are hidden, the harder your website is to navigate.
My recommendation is that you have a clear, stationary navigation menu. If you can’t fit a page across a single navigation panel, ask yourself if you need that page. Don’t be afraid to reduce your web content in favor of better, more enriching content.
Stop concealing elements, folks! This isn’t a game of hide and seek.
10. Mobile Friendly Designs
The last tip from me to you is this: ensure you have a mobile-friendly version of your website. This can mean three things:
- Your website reflows well and reacts to resizing or…
- You have a mobile version of your website or…
- You develop and distribute an app for your product or service.
We always recommend the first, but whichever you decide to do, just make sure that mobile visitors feel comfortable. Statistics show that search functions across the internet are increasing, but desktop activity is actually decreasing.
Make sure you stay ahead of the game by showing your mobile visitors some love.
What are your thoughts on these tactics? Do you have any that you use yourself? Drop us a line and let’s talk.
Not sure how to turn bad reviews into positive marketing? Click here for a copy of our Free Negative Review Response Guide.