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

cinemagraph

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.

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.

    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.

Typography

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.

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.

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.

img-apple-products

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

    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

    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.

    404 page

    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

    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.

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:

  • 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.

    Genesis features

    We illustrated all Genesis framework features to make browsing this page more interesting and enhance exploring.

  • 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?

Flickr Creative Commons cinemagraph by mendhak

About the Author: Rafal Tomal is the Lead Designer for Copyblogger Media. Get more from Rafal on Twitter and at RafalTomal.com.

Print Friendly

Smarter is Better Solutions for Smarter Content Marketing

Here’s what we’ve got for you:

  • 15 high-impact ebooks on content marketing, SEO, email marketing, landing pages, keyword research, and more.
  • A 20-part Internet marketing course that lays out a comprehensive path for your own online strategy.
  • An organized reference guide to the “best of the best” of Copyblogger.com, and how it all profitably fits together.
Free Registration

Take The Conversation Further ...

We'd love to know your thoughts on this article.
Meet us over on Google+ or Twitter to join the conversation right now!

Comments

  1. Rafal:

    Thanks for laying out form, function, and feel in an easily understandable way. Today I will upgrade my 404 page with humor and a suggested step. I love the Cool Hand Luke reference!

  2. “If your targeted audience is a little older…”

    I’m 33 and have 20/20 vision, yet I wish type on the web was bigger and clearer.

  3. Rafal, thanks for all these ideas to think about.

    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!

  4. I would say that putting effort into a quality website

    design will pay off for the long-term.

    Visitors want a nice looking but functional website

    that they can easily navigate.

    Thanks for writing.

  5. Rafal,

    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).

    Keep up the good work!

    • 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.

  6. 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 :)

  7. Your layout form is superb and easy to understand..designing a good page for a good website is also important..Thanks for all your thoughts shared here

  8. Font SIZE too small??

    For all the dummies out there…all computers have a zoom in [MAGNIFY] zoom out [decrease] facility…Find it. Use it.

    Microsoft…hold down left Ctrl & spin the mouse wheel…

    IMAC…just tap the top of the mouse with one finger-tip…

    • Phil, A lot of people don’t know those tips and it doesn’t make them dummies.

      Another aspect of good design is making it easy on our readers and not asking them to jump through extra hoops to read our content in the first place.

    • This requires from your visitors an additional action to make. Maybe it seems like not too much to ask but most people won’t zoom in every time they visit your website.

      You want to eliminate any problems like this and make a great first impression.

      • I totally agree with you Rafal. If your site doesn’t lend itself to a very high level of engagement as is … Then people will just leave … In droves!

  9. 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.

  10. Darren DeMatas :

    Rafal, 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.

    What type of testing did you to to recommend green buttons?

    Did you run any tests on CB before making the change?

    http://www.copyblogger.com/call-to-action-buttons/

    This post suggests orange, and I have found orange to be effective in my tests.

    I would love to do a big test with some other folks to compare results.

    • 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”.

    • On SP, green tested about 12% higher. So not a huge amount, but enough to keep it. Plus we liked the look better (but if it tested lower, we wouldn’t have cared about the look ;) )

      On CB, both orange and green have tested about the same.

      The key is contrast and the emotional urgency you can create with certain colors.

      The important thing is what you’re doing — testing on your own site with your own audience.

      • 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.

  11. Simplicity will convey the best message through your design.

    Apple knows this and have incorporated this into the whole “function” of their existence.

    That’s exactly what I did when I redesigned my website.

    I incorporated a simpler, modern look that will give any visitor the right message of where they are and what they need to do from that point on forward.

    This post definitely hit all the notes of the spectrum when it comes to design (since you’re the lead designer of Copyblogger).

    Thanks Rafal!

    – Sam

  12. 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!

  13. I love this post! This is exactly what I tell people all of the time — design MATTERS.

    It’s practically embedded into our subconscious. Good design draws in a crowd and keeps people eyeing up all the visuals for a longer period of time if you do it right.

  14. 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! !

    Loved your article – it came at just the right time.

    Gretchen

  15. 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 ….

  16. 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.

  17. Rafal,

    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.

  18. I was surprised by the .gif post image. Then I was surprised that no one else had mentioned it. Nice touch.

  19. Hey, I really love the examples you shared in this article – nice and clean and fresh looking. What are your thoughts on sliders?

    Darren above mentioned that it seemed to decrease the conversion rate, i have some on my site but im considering removing them, would love some advice..

    Cheers

    • Darren DeMatas :

      Hey Paul,

      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 agree with Darren. Make some tests on your own website and find out. There are so many details that can affect the conversion of your slider: headline, copy, image, button size, etc.

      I think the best approach is to keep it simple: one clear message and one simple action to take. I like big intros where your eyes are focused on just one thing and all distractions are eliminated.

  20. Good tips for bloggers like me ;)
    Especially ” Design for emotions ” , It’s a great solution to attract interested readers

    Thanks for sharing

  21. Great blog for designers, And I like your blog image very much this is what we call creativity.

  22. 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

  23. 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.

    Rachel

  24. attractive website design and functions play a massive role. If you can get a story in as well, you’ve got somewhat decent site.