In this article I would like to provide you actionable steps on altering your website for success. I’ll share findings from my own experience as well as advice from industry experts and tips on tweaking your website to make it perform better, increase conversion rate and eventually sell more.
Review your copy
Stop using that boring corporate copy that doesn’t connect with your website visitors.
“People don't buy what you do; they buy why you do it. And what you do simply proves what you believe.” ― Simon Sinek
Sell benefits, sell the dream and you will see an increase in engagement that will lead to more sales.
- Use short and simple copywriting
Avoid industry jargon and use straightforward and concise copy. Visitors spend just couple of seconds scanning your website before making a decision to leave or stay. - Benefits over features
People are convinced easier when talking about benefits instead of features you offer. Focus on clearly defined value through benefits that can save them time, earn more money or be acknowledged.
Improve typography
Typography is what people read, learn from and get the most of your message. It is crucial to pick right typefaces, color and spacing in order to ensure that website works in harmony with all the other elements. According to Information Architects, it is safe to say that if you get typography right you’ve succeeded already as it is the most important aspect of a website.
“95% of the information on the web is written language.” - Information Architects Inc.
Things to note:
- Contrast. Make sure that your copy is darker than the background or other way around.
- Line-height. Set line-height from 1.5 to 1.75 to ensure that lines have enough space to breathe and are perceived as a clean layout.
- Hierarchy. Systemize your copy, most of the people now scan online so make it easier for them by using noticeable headlines, sub-headlines, bullet points.
- Typeface pairing. As a general rule you should not be using too many typefaces on your website. Two typefaces can perfectly do the job. Check out Font Pair, that helps designers pair Google Fonts together.
Employ AIDA model
Your website might be trendy and look fantastic but still may not perform very well and conversion rate might be not satisfying you. Consider applying AIDA model on your website. AIDA stands for Attention, Interest, Desire and Action.
A - Attention. Use an appealing graphics or photos to grab visitors attention, make sure to design catchy above the fold area (which varies but is generally the top 700 pixels of the page). Make a good use of convincing and nicely laid typography.
I - Interest. You’ve got the attention, now it is vital to ensure it is interesting for the user to stick around, instead of communicating the features of your product or service, explain the benefits and advantages of it. To make your website more user-friendly avoid paragraphs and take advantage of using chunks of information, steps, lists, bullet points and icons.
D - Desire. After getting user’s attention and interest you have to generate desire so the visitor will want the thing you’re offering. This can be achieved using some persuasion techniques like recommendations of influential people, positive testimonials by customers, press list of famous websites talking about your product or service.
A - Action. Finally your date (visitor) is ready to take an action, your responsibility is to make it easy and obvious for the user to take the action you want. Whether it’s a sign up for a newsletter or buying the product, don’t overcomplicate, make it prominent and easy to understand.
Make sure to use stunning imagery
Avoid cheesy looking stock photos. Visuals are perceived in milliseconds and form general opinion of your website.
“Users perceive and form design opinions even in 17 ms.” - Research conducted by Google
Usability tests by Jakob Nielsen reveal that people always pay a lot of attention to images. Talking about people, real people get a lot of attention while stock photo people are mainly ignored. Don’t use stereotypical and unnatural looking stock photos. There are many free stock photo providers that will definitely add genuine look and feel for your website. Check out 15 Best Free Stock Photo Websites.
Back your decisions with data
Assumptions will not take you far in web design, make sure to listen to your users and use data to back your design decisions. It is good to assume and hypothesize, it’s how creative process operates after all, but it’s inevitable to use data that can be turned into intuitive designs that simply work.
“55% of consumers voted hidden prices as one of their top turn offs on hotel websites.” - Econsultancy, August 2014
Finding data might not be easy but you should definitely check Design Quips, as well as people like Jakob Nielsen and Steve Krug and other innovative digital companies sharing their research results.
Design for performance
Website speed matters. Website load speed is highly tied to success of your website. If your page takes more than 3 seconds to load 4 out of 10 of visitors will abandon it not even seeing it.
“After 3 seconds, 40% will abandon your site.” - Lara Hogan, Engineering Manager at Etsy
Lara Hogan, Engineering Manager at Etsy shares some great tips in her keynote on Speaker Deck. I’ll quickly summarize it for you to take action:
- Optimize images and use as little graphics as possible as it adds to the loading time.
- Cut down the number of typefaces you use, are different fonts you’ve chosen help make a conversion?
- What metric are you hoping to improve with sliding carousel?
- How will images you use affect the page load?
- Which font weights (if any) do you really need?
- What can be repurposed?
Good performance is good design. Here are some tools for optimizing your current images: ImageOptim (Mac), TinyPNG, TinyJPG, Smush.it.
Develop a style guide
Web design style guides are a collection of documentations that define important aspects of design like typography, spacing, colour combinations, look and feel, buttons, patterns and more. Well designed style guide allows systematic approach to design and makes the designing rules for a product understandable for other designers and developers. Visual consistency is one of the primary must haves of website design and style guide is one of the keys to achieving that.
I’ve wrote an article earlier, How To Create a Web Design Style Guide on why and how you should design a UI kit for your website, app or a mixture of both.
Responsive design is a must, not a nice to have anymore
It’s 2015 and not having a responsive website costs you lost users and money. According to Business Insider, the number of people using mobile devices outstripped people on desktop computers in 2014.
“The number of people using mobile devices outstripped people on desktop computers in 2014.” - Jim Edwards, Business Insider, April 2014
Responsive websites are the new standard. Always think mobile first, include the most important information on the mobile version and make sure to make it easy for visitors to take action by using simple form and large (easy to tap) call to action buttons so people can’t miss them. For desktop version of your website think of adding more value to the overall experience, take advantage of using impressive imagery, whitespace, interactive media.
Make use of whitespace
Employ whitespace or space in general to give more room for your main elements of the website so they can be perceived clearly and if needed emphasised easily. Many websites try to put as much information as possible but it simply creates a big visual mess. Consider having more of space and you will notice how lighter and cleaner your website looks like.
Dropbox has loads of white space while at the same time focuses on call to action.
Form isa very important website element as it empowers user to contribute to your website by entering email address for a newsletter or filling payment data for their purchase. Make forms more welcoming as they are representing your website in human communication.
Things to consider iterating:
- Make form inputs bigger. Not only desktop users will have easier time clicking on these but mobile users won't get frustrated when clicking on that small field.
- Consider using natural language forms. A human way to better relate to a person and not sound too generic.
- Use fewer form fields. Get rid of unnecessary fields and consider autosuggestions to improve overall user experience.
- Prefill data. Make use of the data you already have from the user and prefill the fields. Detect card type to save time for the user not needing to choose card type.
Make your popups pleasant and inviting
For most people popups are the most annoying things and general opinion is that everyone hates them. Nonetheless, it is a proven and effective way to get user’s attention and action, otherwise, no one would use it. But there are ways to make popups more pleasant and useful experience if you get some things right.
- Don’t show your popup right away. Think of user scrolling triggered popups that are ridiculously effective according to ConversionXL. SumoMe is a great tool to try for this matter.
- Revisit your popup headline copy. Don’t use industry jargon and make it appealing to your target audience. Clear, relevant and specific usually works well.
- Appealing popup box design and images. Figure out what colors, dimensions and imagery work best on your website. Simply adding a relevant, visually appealing picture to your popup can make a significant difference to the conversion rate.
- Provide value. Instead of asking visitor to sign up for your newsletter give them some value beforehand. Free report, a discount, exclusive deal.
- Call to action copy. Test a variety of more specific copy options like “Get My Free Gift”, “Download Now” or “Sign Me Up” instead of using plain “Submit”.
12. Get navigation right
Website with a terrible navigation is a disaster. Navigation needs to guide your visitors to the next stage of their journey. Your website’s navigation should be intuitive and easy to use.
- Revisit your website information architecture. Get down to the roots of your website and review your sitemap, get rid of unnecessary pages and define primary navigation links having a visitor, not yourself, in mind.
- Simplify. Too many options paralyze people and make them harder to come to a decision.
- Use simple, user-friendly wording. It is better to use simple, obvious wording that is easy to figure out than to keep to industry-only terms for your navigation menu.
- Place your main navigation at the top. People must be able to access your navigation quickly, placing it at the very top and making it sticky on scroll will definitely satisfy users.
- Utilise web conventions. Web conventions make it much easier for designers to get the job done. Most users would click on the website logo to get back to the homepage, so design your logo to do that. Think of including search field, shopping cart, profile links in the main navigation too.
- Consider using icons. Icons help to make your website navigation more usable by utilising icons. Graphics are perceived easier and faster than copy. Choose clear and meaningful icons and make their style match the rest of your design. Iconfinder has over 475,000+ free and paid icons in their database.
Get the visual hierarchy right
Visual hierarchy is a concept of drawing emphasis on certain elements and establishing a structure with more important elements over others. By using color, contrast, texture, shape, position, orientation, and size, you can organize elements on a page so that users gets a sense of visual importance.
When these visual language elements are applied correctly, they can work together to direct and pause people’s attention within a page - improving general readability. Below are some things to consider when establishing an effective visual hierarchy.
Contrast
- Increase contrast to distinguish similar items and draw attention, especially to CTA (call to action) buttons, main headlines or any other element that needs attention.
- Alignment
Alignment dictates the ease of flow of the website. The one column pattern makes the entire product description as a narrative and the chances of diverting through other information slim down.
- Size
Size is easy to understand and makes a lot of sense. People tend to focus on big things first. Increase your main headline size, make primary buttons more prominent by simply making them bigger than the rest.
- Make Call to Action (CTA) buttons more prominent. Simply making them bigger, different in color and clear messaging will do the job.
Don’t try to reinvent the wheel, use design patterns
Many designers struggle with simple decisions of how should their contact form or footer navigation look like. You can not reinvent the wheel over and over again, same goes with these elements as it has been done many times before, it was designed and then adapted, remixed to fit certain style guides and serve certain business objectives. There are many design pattern galleries to gather inspiration from such as Pattern Tap, UICloud, UI Patterns just to name a few.
Add some credibility
Social proof is a very effective persuasion tactic as people tend to trust other people. If you’ve been featured on any better known website, list these logos on your website to associate yourself with these brands so people can perceive you as more trustworthy because they already trust these companies.
If you don’t have anyone talking about you put faces of people, logos of companies you’ve worked with. Make sure to ask for permission of these companies and individuals before using their trademarks on your website.
As you can see there are many ways to improve and tweak your website design to achieve better results. Most of the tips mentioned in this article are based on data and many different experiments done by expert individuals and organisations that have proven to increase engagement, conversion and sales.
Now you know everything it takes to design a high converting, engaging and successful website. As it goes in life, just knowing is not enough, you have to take action. Make sure to analyze your website and utilize techniques and strategies in this article to prepare yourself for success in 2015.
