3 Ways Your Web Design Can Better Connect You to Your Audience

There is a big difference between good and bad design. Many people can identify a good design, but they don’t know what makes the difference.

Most people are not looking at a website and thinking: That website has well-matched serif and sans-serif fonts and a nice usage of white space!

Nope. Only designers think that.

In most cases people just feel like there is something good about it. Maybe it’s that eye-catching font or maybe that vibrant color, but they never actually know for sure.

There is something more to good design than making it just look right.

Because you can design your website according to all the major design rules with surgical precision … and people may still not like it.

Form, function, and feel

Good design is not just how a website looks; it’s how it works.

Yet a website is also not a machine. There is no simple code base or recipe for a good design. You can’t program it, generate it, or somehow automate the process.

That’s why your design needs something more.

In order to create a web design that connects, we need it to reach new levels of interaction with our audience.

1. Design for humans

Your website’s design creates a first impression with your users, and you want to make their interaction with your site as human-friendly as possible. Nobody wants to be greeted and instructed by a robot.

Making your website human-centered means making it easy to use and not making people guess what they are supposed to do next. It means that you focus your design around people’s actions and how your visitors expect your website to work for them.

You can improve user experience on your site by easily solving common problems that would otherwise take your visitors’ time to figure out.

The most common problems that visitors find on poorly designed websites:

“Is it clickable?”
All elements that need interaction with a user should be clearly visible or stand out in some way. Links and buttons should at least be marked in a different color than the rest of the body content.

“Where am I?”
Visitors will feel lost on your website when your design layout is not consistent. When people don’t know where to go, they’ll always find the exit.

You can’t move the navigation or change the layout too often between pages. You should use common patterns throughout the entire website so your visitors can learn your website’s interface.

Consistency is one of the most important aspects of a well-designed website.

“I can’t read it!”
Is your content easy to read? If not, your text may be too small or the color contrast between the background and text color may not be clear enough.

If your targeted audience is a little older, you need to make your typography even bigger and add more contrast. You should focus on your users’ needs; don’t worry if it doesn’t look aesthetic to you anymore.

This is a sample piece of content from Medium.com displayed in two different versions. You can see clear spaces between the lines and high-contrast typography on the right side. On the left side you can see the same content and font type but with incorrect line spacings, small font size, and low contrast. You can clearly see which one is easier to read.

2. Design for emotions

It all matters when it comes to people’s feelings. By using specific fonts, shapes, icons, photos, or colors we can affect the way people feel about our products, services, or brand.

You can see big brands playing with our emotions all the time. Just look at companies like Apple, Target, or Starbucks.

Product design is definitely one of the main factors in Apple’s success. Apple spends a lot of time and money making sure their products look sleek, sexy, and modern.

It’s also not just the way the product looks, but how it works and feels when you use it. Most Apple products have smooth, nice-to-touch surfaces and consistent rounded corners. It feels good, right?

So, how can you use emotional design?

Give your brand a soul.
Choose one emotion you want people to feel about your brand or website, then focus on it and be consistent.

Do you want your website to be on the light-hearted, humorous side? Then use joyful colors, smooth shapes, funny characters, and combine it with light jokes all over the place.

But let’s say you’re running a blog about sports cars. You want people to associate with your brand, so you need to make them feel cool about it. You may want to make your design sleek, modern, sexy, and use a strong color like red.

You wouldn’t want to use bright pastel colors or Comic Sans font because that would mismatch your design with the taste of sports car fans.

Mailchimp is one of those websites that has its own unique style and character. A funny cartoon chimp mascot brings humor to the site and evokes a positive mood.

Surprise your visitors.
Do you want to get some attention? People remember things better and pay more attention when their feelings are associated with it. Surprise your visitors by making something unexpected but positive.

For example, show a “Thank you” message on a simple action, make interesting parallax scrolling effects, or employ animations when the cursor hovers over some elements.

Dangelicoguitars.com uses parallax scrolling effects and custom designed pages to surprise their visitors and make exploring the website very interesting.

Give your kids candy when they cry.
How do people feel when they go to a website and it’s not working or they get a 404 page? They may feel confused, disappointed, or frustrated.

You definitely don’t want people to feel that way. You can fix it by making a funny 404 page or setting up your own custom page when your website is inactive due to some maintenance work.

Make people smile when there is a problem, and keep them busy when they have to wait.

Your 404 page doesn’t have to be boring. Be creative, write something funny, or suggest another step that should be taken.

Keep it positive.
This is a general rule of thumb: evoke only positive feelings. You never want to associate any bad feelings with your brand (unless that’s really your goal and you know what you’re doing).

Try to use positive icons like check marks, smiley faces, and thumbs-up signs. You may also want to associate positive feelings with desired actions on your website. For example:

Show a smiley face (reward) after completing a task

Use a green “add to cart” button

Show check marks for correctly filled out form fields

Use a progress bar in multi-page forms

Photojojo’s shopping cart icon turns to green with a smiling face when you click the “add to cart” button. It makes the entire shopping experience more pleasant.

3. Design to tell a story

The age of making home pages look like airplane dashboards is over. We avoid overusing buttons, calls to action, and all the other distractions these days.

Imagine a comic book page. You can see various size strips and illustrations to make the story more interesting. It’s designed to get your attention, keep you interested, surprise you, scare you, make you laugh … and this is accomplished with only good narrative and images.

Your website can tell a story too:

Design a layout that enhances exploring.
Try to keep your page content in a proper narrative and progressive order. Use a simple vertical design for easy visual eye movement and flow.

You may want to start with a good eye-catching headline and a simple description above the fold. Then, tell the visitor about your best features, show your clients’ stories, list people who are using your services or products, and finally lead to one — and only one — call to action (and optimize it).

Divide your content into parts, but make sure there is a clear connection between them. This way your visitors can read it like a real story, with no pause or break.

Also remember to have a good visual balance, both horizontally and vertically. Let your readers’ eyes smoothly move from left to right. If one section is left-hand heavy, make the the other one right-hand focused, and vice versa.

Use various content elements to keep visitors interested.
Make sure your story is interesting. You can use different interactive elements like tabs, sliders, and scrolling animations to keep your users engaged in exploring your website.

Avoid using long and boring paragraphs of text. You can chop them into smaller portions supported with videos, graphics, and illustrations. Or you can introduce some organization and make a bulleted list, which is always easier for the eye to read.

Don’t be afraid to change background colors between the page sections. This allows you to manipulate the balance and can encourage scrolling if the background colors are in a certain order.

Encourage action.

Every story has an ending. Put your main call to action at the end of your story, so people can take the next step.

Make sure the vertical flow of the page leads visitors right to the final call to action. You may want to make it more prominent than any other elements, with a headline or button text that looks like a continuation of your story.

So, what is your next step?

There is always so much we can do to improve our website designs. I encourage you to take it one step further. Go deeper behind the scenes.

You can never be wrong by simply taking care of your visitors and improving their experience. Consider their feelings and add more sense to your website content by designing a good story.

What is one simple design change you could make today that would improve your users’ experience on your website?

I think one thing I would like to do to change my website for a better user experience is the surprise element. It’s kind of challenging to come up with some kind of surprise element or even an interesting story within the internet marketing niche, but I like challenges.

And actually, I did use in one of my mindset posts an experience that happened to me that involved me panicking and how I was rescued. I was able to correlate that with how to be prepared for problems that may come up and that there is always a solution.

Anyway, I’m going to keep all these things in mind and see what I can come up with to make my web site more appealing and interactive. Thanks!

Brilliant input on design and the considerations behind it. This is definitely a post I’ll send to my clients.

I know a lot of designers & developers share the same frustration I do of having clients that request or even insist on design practices that are not sound or at least reject things that are (like larger font). Articulating the logic behind those practices is huge and this post will be helpful in doing so.

Some of your points also explain WHY someone should hire a good designer. For example, “designing to tell a story” is spot on, but most non-designers won’t have a clue to how to execute something like that, nor should they be expected to.

The down side for many clients to hiring a designer to create a custom design is price, especially for something that has the quality of your work. On the other hand, they can buy a Genesis Child Theme and get a very nice looking site for a steal (not-so-shameless plug).

Scott,
It took me a while to get to the point when I understood how design really works. I was focused more on making my graphics visually pretty but never thought about how actually people feel about it or if my design tells a story.

When I finally discovered this very important aspect and tried to connect more with audience, then everything has changed.

I like the “design to tell a story” part. I wish there could be a dynamic web design available that: won’t slow down the PC / internet, allows you to create all kinds of dynamic things on the page, with different kinds of media formats (including video, audio, etc), and lets you change the page / flip through the article to the left/right with the arrow left/right, etc. Something that looks like you’re being told a story and you’re immersed in it, and you can scroll through, down, up, left, right, and even in depth….

Oh well, until then, we can improve the design at least with these items you are suggesting. Thanks. Good tips 🙂

If it doesn’t work for your visitors, it doesn’t work. I like space, readability and graphics that have meaning. Thank you, Rafal. Some of these things I knew, but some not so much, and I can see (pun intended) that I need to go over my design to be sure my visitors are getting what they need from my sites.

We used orange on StudioPress.com and after a couple redesigns and many revisions on StudioPress, WebSynthesis and Copyblogger we realized that this color scheme blue + green works best. That’s why we decided to use this color scheme on all of our sites.

NewRainmaker.com also uses the same blue but we’re trying a little different green color. I think it’s a little more refreshing.

Conversion tests are never easy because there are so many factors that can affect the results. Fortunately, there are some other people in Copyblogger who know more than me when it comes to “conversion science”.

Thanks for getting back to me. A key take away…Everyone should be testing design elements. I’m doing a test now and the page without the slider has 25% ,conversion rate vs 12% with slider. These little tweaks can make a dramatic impact.

Rafal, this is wonderful. Thanks you so much. I’ve been scratching my head trying to envision how I can make my website reflect the vibe I’ve expressed in my product (a book). You’ve advanced my awareness by miles and I’m grateful!

Where do I find someone that understands what you are talking about. And importantly one I can afford. I am a newby author who can’t afford the one who is recognized as the Cadillac for writers. And before you tell me to design my own, I’m not able to make my own website, even with you or anyone else helping. I don’t change the oil in my car either. I just want to write! !

Great point about having readable content. Probably one of the most overlooked features on a website. As I understand it black font on white background is the most easily read.

I was talking to this guy at the Apple store the other day about the science of colours. Apparently each colour elicits a certain emotion/mood. From what I recall of the conversation blue represents corporate, purple denotes intelligence ….

Great article! The one single thing I’m worst at is design! I don’t really even see it. But my takeaway from your article is to do something intelligent with my 404 page. That’s something I can do right now to make a difference.

I echo Darren DeMatas, “you are an amazingly talented designer. I have been a fan for a while now. It was great to get inside your head for a minute.”

We want more minutes, please.

Some of the concepts are familiar thanks to Copyblogger archives, Authority trainings, and Pamela I Wilson for the most part.

But not all. I learned quite a bit, in fact. And I’m intrigued to hear more.

Your designs are very Apple-esque in their minimal elegance and intuitive usability. And yet, each site in the Copyblogger Media Suite evokes its own emotion and betrays an individuality…even as the family resemblance is undeniable.

A few people have messaged me about that comment. I am working on a post right now that will explain the “right” (SEO safe) way to set up an experiment on your wordpress site (Genesis specific) so you can test it your self.

Everyone has an opinion on sliders, the best to find out is to test it yourself!

I definitely agree. Web design is really becoming important these days. Not only do we have to try to keep up with all of the new trends, but we also have to give our followers what they want. I totally agree with you when you said that the design tells a story. I try my best to follow these rules. Thank you for sharing this, I really learned something from it,
Andrew

Hey Rafal,
Great post. The way a site looks and works is key to every part of the user experience whether you’re trying to get that person to read a blog post, watch a video, or a buy a product. If you make your decisions with the user in mind and truly try to connect with your audience, it’s a win-win. Anyway, I thought your suggestions and examples were valuable and shared your post in my roundup of February’s best web design/development, CMS, and security content. http://www.wiredtree.com/blog/februarys-best-web-designdevelopment-cms-security/ Thanks again for the helpful post.