[06] 3 Ways to Better Connect with Your Audience through Design

The Transcript

Jerod Morris: Welcome to Sites, a podcast by the teams at StudioPress and Copyblogger. In this show, we deliver time-tested insight on the four pillars of a successful WordPress website: content, design, technology, and strategy. We want to help you get a little bit closer to reaching your online goals, one episode at a time.

I’m your host Jerod Morris.

Sites is brought to you by StudioPress Sites — the complete hosted solution that makes WordPress fast, secure, and easy … without sacrificing power or flexibility. For example, you can upload your own WordPress theme, or, you can use one of the 20 beautiful StudioPress themes that are included and just one click away. Explore all the amazing things you can do with a StudioPress Site, and you’ll understand why this is way more than traditional WordPress hosting. No matter how you’ll be using your site, we have a plan to fit your needs — and your budget. To learn more, visit studiopress.com/sites. That’s studiopress.com/sites.

Welcome to Episode 6 of Sites.

Last week we talked about content, walking through how to attract your ideal customer through perfectly positioned content.

And while attraction is important, it’s only one step. What happens when your ideal customer actually reaches your website? It takes a lot of hard work to get them there, and you want to make sure you capitalize on it.

You want to make sure you … connect.

And that’s why this week, we discuss design — specifically, how you can use your web design to help you connect better with your audience.

I’m excited to share some wisdom on this topic from Rafal Tomal, our lead designer at StudioPress and Copyblogger.

Before we get to that, I do want to make a special announcement — which includes a special offer that is extremely timely.

You heard me mention StudioPress Sites at the beginning of the show. If you want to build your WordPress website on hosting that will give you amazing performance, StudioPress Sites is the way to go.

And this week only, there is a special offer: if you get started with StudioPress Sites by Friday, July 14, 2017, you’ll get a coupon code for a free migration. Here’s how you can get your code …

Head over to the StudioPress blog and read the article I published recently called 5 Reasons You Need to Avoid Cheap WordPress Hosting. The URL is studiopress.blog/avoid. Again, that’s studiopress.blog/avoid.

The post provides a handful of useful tips on why good hosting is something you should invest in, not just an expense to be minimized. You may recall that this was the topic we discussed in episode 3 of this podcast.

Read the post, and then click the link at the end of it. Once you’ve clicked that coupon link, you can get started with Sites and you’ll receive your free migration. It’s that simple. Not only will you not have to pay for your migration, but you won’t have to deal with all the hassles and headaches. It will all be taken care of for you. Having migrated many a site myself, I can personally attest to how valuable that is.

One more time, the URL is studiopress.blog/avoid. The blog post will be there forever, and always be useful, so visit it anytime. But the special migration offer expires the Friday after this episode is originally published: July 14, 2017.

Okay, and with that little bit of housekeeping out of the way, let’s dive into today’s topic.

I actually remember when Rafal originally submitted this blog post to Copyblogger, because I was the editor back then. I learned a lot from it at the time, and I learned a lot from it again reviewing it for this episode.

I know you will too.

Let’s talk about how to use web design to create better connection with our audience.

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

How do people recognize good web design?

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.

Let’s walk through three ways we can do that.

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.

Here are the most common problems that visitors find on poorly designed websites:

One problem: “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.

Another problem: “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.

Another problem: “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.

Remember that you design your website typography for the human eye.

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.

Take some time to get to know your typical visitors and study their behavior on your website. Find their common questions and problems, and try to solve them.

Make sure your website is usable by visitors that matter to you. Forget about making your design flat or using fancy colors if it’s not working for your people.

Now let’s move on to the second way we can design our website to better connect with our audience …

2. Design for emotions

Emotions have a big influence on most of our decisions. Therefore, we can’t ignore emotions when designing websites.

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? There are several ways. Let’s walk through four of them.

Number one: 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.

A second way you can use emotional design is by surprising 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.

D’angelico Guitars.com uses parallax scrolling effects and custom designed pages to surprise their visitors and make exploring the website very interesting. You can see an example at their website dangelicoguitars.com.

A third way to incorporate emotion into your design is by giving your kids candy when they cry.

And yes, that’s a euphemism. 🙂

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.

And finally, a fourth way to incorporate emotion into your design is by simply keeping 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.

We’ve now gone through two major ways that we can use design to better connect with our audience: number one was Design for humans, number two was design for emotions.

Number three is …

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.

The new role of website design is to tell a story.

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. Let’s walk through three ways to do exactly that.

The first way is to 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 other one right-hand focused, and vice versa.

At StudioPress, on the features page, we illustrated all Genesis Framework features to make browsing the page more interesting and enhance exploring.

A second method to tell a story with your website is by using 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.

And finally, a third way to use design to tell a better story is to 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.

And there we go. The three ways that you can use design to better connect with your audience:

1. Design for humans
2. Design for emotion
3. Design to tell a story

So, what is your next step?

That’s coming up in this week’s Call to Action …

*****

That was a reading of Rafal Tomal’s blog post 3 Ways Your Web Design Can Better Connect You to Your Audience, which was originally published at Copyblogger.com. You can find a link to the original article in the show notes at studiopress.com/sites06. The post includes several helpful visual aids and examples that obviously can’t be included in an audio podcast.

You’ll hear from Rafal again soon here on Sites. He has so many insightful blog posts at Copyblogger and his own website, rafaltomal.com, and I want to bring several more of them to you.

Okay, now here is this week’s hyper-specific call to action, and it comes from Rafal himself.

This is how Rafal ended his blog post:

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?

So there it is. To repeat: What is one simple design change you could make today that would improve your users’ experience on your website?

Think about all of the examples Rafal provided in this episode. Listen to it again, or go check out his blog post if you want to review the specific ideas he gave.

Then jot down your answer in Evernote, or in a notebook, or email yourself — whatever you’ve been doing for the other calls to action from past episodes of Sites. But don’t just jot it down — take action on it. That’s the key.

Because one simple design change could be the difference between a design that better connects with your audience … and one that doesn’t.

Next week, we move from design to technology. We’ll be talking about SEO. What really matters when it comes to SEO? How do you make sure that you’re spending your time and your money on factors that will actually make a difference? I’ll provide some guidance.

That’s next week, on Sites.

Okay … now don’t forget: head over to the StudioPress blog and read the article I published recently called 5 Reasons You Need to Avoid Cheap WordPress Hosting. The URL is studiopress.blog/avoid. Again, that’s studiopress.blog/avoid.

The post itself is informative and will spell out clearly why good hosting is something you should invest in, not just an expense to minimize at all costs. A topic we also discussed in episode 3 of this podcast.

And, the best part, is that it includes an offer for a free migration to StudioPress Sites. But the offer is only for a limited time. You have to start your StudioPress Sites website by Friday, July 14, 2017 to get the free migration. Click the link at the end of the blog post to claim your free migration.

Again, the URL is studiopress.blog/avoid.

Finally, don’t forget to subscribe and stay connected with the show:

Go to studiopress.com/newsletter to subscribe to Sites Weekly, our curated email newsletter.
And go to sites.fm/apple to subscribe to the Sites Podcast on Apple Podcasts, formerly known as iTunes. If you like the show and want to leave a rating and review as well, that would be much appreciated.

We just had this review left by JimmyJoeATL:

Wow, I’m early in the startup of my online presence. I am very glad I found StudioPress Sites podcast. I’ve listened to the first four episodes back to back and I’m ready for more! With SO much competition out there for my target audience it is great to have a coach like Jerod Morris. I’m now thinking about MY site in terms of the four pillars of success: content, design, technology, and strategy. And like any good coach, Jerod sends me off with drills and exercises (the calls to action) at the end of each podcast.

That’s so great to hear Jimmy! Thank you for this review. You are having exactly the experience I hoped listeners would have. Let’s keep it going moving forward!

And with that, we come to the close of another episode. Thank you for listening to this episode of Sites. I appreciate you being here.

Remember: go to studiopress.blog/avoid and click the link at the end so that you can get a free migration if you decide to level-up with your hosting and build your online presence with StudioPress Sites.

Be sure to join me next week, right here, same time, same place, and let’s keep building powerful, successful websites together.

This episode of sites was brought to you by StudioPress Sites, which was awarded “Fastest WordPress Hosting” of 2017 in an independent speed test‏. If you want to make WordPress fast, secure, and easy — and, I mean, why wouldn’t you — visit studiopress.com/sites today and see which plan fits your needs. That’s studiopress.com/sites.