Web design is such an organic field of work that every day, there’s some new insight being uncovered, some new dimension being revealed that will make visitors to your site stay on just a tad bit longer. From white space to parallax layouts to responsive design, there’s some new ‘it’ thing that’s always on the brink of sweeping web design world by storm.

However, while fads come and go; some design basics stay true irrespective of which year it is. These are the fundamentals that you simply cannot afford to mess up. Stuff like the Gutenberg Rule of eye movement.

Dimitry Fadeyev explains the Gutenberg Diagram below as he breaks down the process in which the human eye consumes content on a page.

The Gutenberg Diagram

Fadeyev elaborates, “The Gutenberg diagram splits up a page into four quadrants: the “Primary Optical Area” in top left, the “Strong Fallow Area” in top right, the “Weak Fallow Area” in the bottom left and a “Terminal Area” in bottom right. It suggests that the bottom left area of the page will get least attention as our eyes scan the page from top left to bottom right and that our glance would end up in the lower right portion of the page.”

Let’s do a quick roundup of little things that you might have overlooked in your web design – things that can cost you big in terms of website conversions.

   1. Showcase the Product

As elementary as this may sound, make your product the star of your website.

This becomes more crucial considering how humans are such visual creatures – 65% of us learn best through images and visual stimuli.

Travel planning app Tripit does a great job of putting its mouth where the money is. With large images of the app on a desktop and mobile screen displayed upfront on its home page, it gives users a sneak peek into what to expect inside the app without even downloading it.

Showcase your product clearly with large, attractive images, preferably depicting users actually using it. If your website is an ecommerce site, make sure every product has multiple images available from various angles and that the images can be zoomed in if needed.

If your product is a software or an app, show off screenshots of the awesomeness that is your product, allowing visitors to make up their minds easily about it a la Tripit.

   2. Clear CTA

A typical landing page or website homepage has a number of things going on simultaneously. What is it that you want your visitor to do on your site? Is it to check out your product demo? Is it to sign up for your newsletter? Is it to buy products that you’re selling? Make sure your visitor knows exactly what is expected of her while on your site.

Use a single, clear and direct call to action telling your visitors to perform the key conversion oriented tasks that you want them to. Drop words like ‘Submit’ or ‘Know More’ from your CTA and replace them with action oriented copy. Create a sense of urgency to prompt immediate conversions, nudging along the procrastinators among your visitors into action right away.

Constant Contact’s utterly simple, yet superbly effective homepage has one loud and clear CTA.

Make sure your CTA button stands out from the rest of the page – make it bigger than other buttons, use a color that jumps out from the color scheme on your page – basically make sure it’s unmissable.

   3. Useful Microcopy

Microcopy is one of those little design touches that delight by virtue of being so unexpected. While whimsical microcopy does have its own place, it is more important to ensure that every single element on your page is geared towards one thing only – giving your users what they want as easily as possible, hence increasing the chances of converting them into actual customers.

Microcopy works beautifully in areas like form fields, error messages or even little ‘next step’ pointers across a website. It tells the user exactly what it expected of them without being intrusive or loud. Also, it adapts to various use case scenarios, serving up customized content, instead of having the same microcopy plastered across the site all the time.

   4. Visual Hierarchy

Visual hierarchy is the order in which we consume content and images. It is applied in web design by using images, text and their interplay to create a distinct and unmistakable message for the user.

With visual hierarchy, a good designer draws in the user’s attention to important pieces of content using images, arrows or even playing with the size of the text in and around the focal point of the page.

Pamela Wilson illustrates visual hierarchy very simply in her post “Design 101 | Successful Design: Who’s in Charge Here?” with two striking images.

 

 

 

 

 

 

 

 

 

                   No Visual Hierarchy                          Visual Hierarchy Employed

The image that uses clear visual hierarchy (the one on the right) focuses the reader’s attention to the most important part of the message – bit about ‘lowest prices’. Using that as the hook, the ad reels in the user’s interest and offers all important information in a clearly discernible manner.

   5. Speed

While loading up your website with the latest bells and whistles, you’ll sometimes end up with a site that is too bulky to open on slow internet connections (thank God, those are only a handful these days!) or open so slowly that users lose interest and leave the site even before the site is completely loaded. This need for speed is even more important in these days of the mobile web.

A huge factor in slow websites is the amount of graphics content that it carries. Use large images, sure. But instead of using print quality images on your website, optimize them for web use before using them.

Another issue that slows down websites is having no caching information on your images. On the topic of caching images to help them load faster, Mark Isham advices “To cache your images, update your webserver configuration to provide an Expires header to your image responses from the server. For images that do not change often, you should specify a “far future” Expires header, typically a date 6 months to a year out from the current date.”

Use a tool like Page Speed Grader that will check how fast your site is vis-à-vis worldwide averages. It’ll also help pinpoint reasons that may be slowing down your site.

Remember, speed is crucial for any website. Even a 1 second delay in page response leads to a 7% drop in conversion rates.

   6. Planned User Flows

Most websites look like a collection of pages designed in isolation, with no relation to one another, no real thought given to transitions from one section to another.

Designing your website based on a user’s expected journey across your site is step one in web design. These expected user journeys or ‘user flows’ as Morgan Brown call them in his article about designing user flows that lead to conversions, help in visualizing where a user arrives from and what path she might take to eventually convert.

Conversion in user flows is often measured at page level, but for a website to actually be profitable, conversions are needed at the overall site level. This means sales, subscriptions, viewership, and loyalties. To fulfill this overarching need, designers need to also see how user flows within each page merge into those of the next leading up to the final goal in one seamless action.

   7. Product Recommendations

Research shows that users actually look forward to product recommendations on ecommerce websites. A full 56% of online shoppers would return to a site that offers product recommendations.

Recommendations can be made to returning visitors based on their last viewed items like the ones on Amazon’s home page. You can also offer similar products to what the customer is currently viewing on the inside product pages.

Another option is recommending complementary products to buy along with the product being currently viewed.

   8. Upfront disclosure of costs

Imagine hunting through tons of online shopping sites for that one elusive spare part for a broken home appliance and finally finding it on Site ABC. Super, right? Now imagine your dismay at finding out at the checkout page, just before you pay that the shipping cost is actually higher than the cost of the item itself. Bit of a bummer, I’m sure.

Most shoppers feel the same way and will drop off mid-purchase on discovering hidden costs like shipping or convenience fees at the very last step. This is one of the biggest causes of the abandoned shopping carts epidemic that plagues most ecommerce sites.

   9. Trust Marks

When a user arrives on your site, it’s your job to put them at ease and help them find exactly what they are looking for. A lot of times, even when a customer finds what they’re looking for on a site, they hesitate from making a purchase from the site as they feel insecure about trusting it with their payment information.

This is a very real problem. A Trustmark Attitudes and Perceptions Study in 2013 by Harris Interactive found that 89% of consumers are hesitant to interact with a site they do not trust.

Another 73% from the same study felt that their personal and financial information were safer in the presence of a trust mark.

Use trust marks wherever possible on your website. Trust marks could range from logos like McAfee or VeriSign to your own shopper protection guarantees like the one eBay has on its site and on their email communication.

It does not matter if you are not an ecommerce site and don’t sell anything on your site. Building trust goes beyond collecting people’s financial data. It extends to them considering your site as a bona fide authority for information that has been trusted by millions of other users like them.

For ecommerce sites, trust marks are almost as important as payment gateways. Place recognizable trust mark logos like McAfee or VeriSig on the payments page to build a user’s confidence in the security of your financial network. Also place them across your site at strategic locations to reinforce this message in a more subliminal manner.

10.  Social Login

One of the major headaches that the proliferation of websites has caused for users is the need to remember tons of username and password combinations. With the security loopholes that are being brought to light every other day, passwords keep getting more complicated and consequently tougher to remember.

What if there was a way around this predicament? Social logins give users and website owners a ready solution.

Social logins are plug and play tools that can be built into your site, which will enable users to log into your site using their social networking profiles. This eliminates the need to create a fresh username and password for your site and makes the user’s web experience completely seamless.

The benefit to a website owner is two-fold. Social logins reduce the user’s hesitancy to use your site, while simultaneously giving you rich social profile data about each user via the social login app.

Conclusion

While artistic web design will make your site stand out from the clutter, it’s only websites rooted in web design fundamentals that will give you the returns that you’re hoping for. Invest your time and energies on improving these aspects of your website before you launch into hyper expensive marketing campaigns to promote it.

Lay a strong foundation and your skyscraper will stand tall for years to come.

Image Source: 1