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

Transcription

1 3 Ways Your Web Design Can Better Connect You to Your Audience by Rafal Tomal Feb 06 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.

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

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

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

5 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: o o o o 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

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

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

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