Joey Primiani | Pioneering the New Internet Revolution

Think brighter! Out with the dark and grays, turn a boring sad rainy day design happy and bright. I’ve been noticing a common trend around the web, and that is to include excess amounts of grays and dark heavy elements.

The key to effective landing page design is clarity. The visitor should be focused on taking a simple path that leads to the desired conversion action. Take these two before and after examples:

The results were stunning.

The client ran a split test to their email list. The winning new version had an 84% better offer conversion rate (84% more people signed up for the plan when they saw the new page). Why the radical difference?

What can be learned from this research study:

It can be argued that the landing pages are similar. Both show a single image of a phone and a distinct call-to-action button. In order to answer this question my agency employed our visual attention prediction tool.

By understanding the way the visual perception system and brain works, it is possible to accurately simulate with software how a site will be viewed during the first few seconds of eye movement, and where attention will be focused.

The results are instant and do not require expensive eye-tracking studies, or page-tagging and time-consuming data gathering to create mouse-tracking heatmaps. “Attention heatmaps” can even be created based on in-progress visual mock-ups that have not been deployed as live pages.

The “before” page shows scattered eye movements (yellow lines) that bounce all over the page. Drawn by bright blocks of color and sharp areas of contrast, the eyes do not find a place to “settle.” The colored attention heatmap likewise shows attention spread into many areas on the page. In the midst of all of the visual “noise” the most important green call-to-action button is lost and ignored.

A few things this does, this increases speed perception and visitor frequency. Research studies have shown that people often enjoy returning back to a site that is lighter than one that is dark. It is ingrained in us as humans it is natural to read dark text on light background. Makes sense right?

Given another example below – What is easier to scan? Which one is friendlier to look at?

So when you are designing your next site or app, give color some major thought. Color and texture is one of the most important ways to communicate to your message to the audience, and is often overlooked.

Thanks to Clickz and Attention Wizard for providing the heatmaps

KISS – Keep It Simple Stupid.

A law that I abide by in my everyday life, including web standards. I have been learning (sometimes the hard way) the balance between good ethics in web design and user navigation.

When I am in my creativity and brainstorm mode, sometimes I realize some web designers (including myself at times) reinvent the wheel when it comes to the ease of use to the end user.

Ajax and scriptaculous provide fun and powerful scripts that enhance a pages simplicity, but if used incorrectly the end user can easily get frustrated and leave. This can make or break a internet ecommerce business model.

There in lies the battle between developers and designers. Two different mindsets. The designer, usually visualizes the way the site will encapsulate the features, how it would be laid out, and visualizes the tree of links. The developer, makes the features happen, but often does not know what is the best to represent visually to the end user. Just because a design looks aesthetically better, doesn’t always make it simpler.

For example, I have done work in the past with an online lapel pin company that creates sports trading pins and corporate identity promotional items (aka schwag).

Click heatmap in a 24 hour period using CrazyEgg.

On the left you see the first web page design, showcasing the product and making the links to the objects visually appealing and pretty. On the right, a simple wordpress SEO optimized theme with easy left hand navigation.

FIGHT – Which one wins?!

Well, pretty obvious. Overnight, when we switched from #1 to #2, we saw a dramatic increase in sales.

Major flaws include:

1) Lack of navigation on the top half of page. Also, navigation must be clear and consistent from page to page. It seems like a no brainer, but many designers ignore this key fact.

2) First one had many false clicks; users were not clicking on correct links. As the second, people had a much better understanding of where and where not to click.

3) The first had too many unnecessarily large elements (icons and images) and wasted space making it somewhat complicated for navigation.

As a designer, I learned a lot that day… I thought that the first one would be more appealing to have the main product showcased and representing a visual for each of the categories in such a way. In some sense it is, but it doesn’t matter, it all comes down to usability and the end user, Google’s #1 Philosophy.

Also, both developers and designers should build their site around the intended target audience before pencil hits paper. The audience for this site is mostly middle age moms, coaches and business employees. If it were more of a tech crowd, it often gives a little more flexibility for the designer to push the boundaries of age old web customs with navigation, page elements, etc.

Bust most importantly, it is about finding the balance between creative designing and user comfort. If you want to make sure that a website can be easily accessed and navigated, don’t be afraid to beta test someone in real life and ask what they think. The results might shock you, since no two people surf the internet the same way. There is no tool that measures this except user input and the powers of trial and error.

Photos Curtsy of Planet Argon