Experience Planner

I recently had an opportunity to participate in a usability/eye-tracking study for a new brand website. Our creative team brought a very non-traditional design prototype to the table which encouraged content exploration more than the existing conservative product site. The design had a large amount of content/callouts on the home page paired with unconventional layout/navigation scheme; usability testing was a necessity. The standard “F” viewing pattern did not apply in our non-standard design. We needed to understand initial user reactions to the site as well as where the user’s eye was drawn so that in the future the brand could effectively place callouts in order of priority.

As the usability sessions progressed, it was clear that the users felt overwhelmed and unsure of where to look first and had no clear call to action. The site design encouraged exploration but felt overwhelming to some users and did not allow the brand to prioritize messages effectively.

Upon studying the eye-tracking results more closely, we noticed a common set of factors and order in which the users’ attention was drawn. Individually it seems obvious that each of these factors would draw a user’s attention to a particular element, but the testing indicated a clear order in which these factors impacted the user:

1)      Items that loaded first on the page. It seems like a no-brainer. We were having some technical difficulties that caused the site to load more slowly, and of course the user’s eye was first drawn to the callouts that loaded first. (Google has done this for the past year by displaying their search function alone until a user mouses over the page, then the secondary navigation options fade in.)

2)      Animation. Any type of movement on the page draws the eye even if very briefly.

3)      Color. Brighter, bolder colors drew the eye more so than muted colors.

4)      Recognizable imagery. Close-ups of faces and images depicting happiness/fun/high energy seemed to draw the user’s eye most. Smaller, more muted images were less effective.

The testing proved to be very beneficial as we came away with a variety of options to control prioritization of content:

-          Control the order and speed of elements loading on page

-          Use a fade-in feature to indicate new content appearing on page, considering speed of animation (usually 0.25 – 1 second; faster will be more eye-catching)

-          Use brighter color in higher priority items or dim secondary items (consider that dimming in conjunction with a slow fade in will draw less attention)

-          Use bolder, recognizable imagery in higher priority items

Our team has a challenge ahead – how to implement the right balance of display order, animation, color and imagery to design an experience that is less distracting to the user and provides messaging priority control for the brand. Our industry as a whole has a challenge as we move more and more toward uniquely dynamic interfaces. Tried-and-true patterns like the “F” shape may not always apply. Usability and design concept testing become all the more important for these innovative interfaces.

Form submissions are often a key performance measure to determine the overall success or failure of a brand website or marketing campaign. Registration forms, requests for more information, contest entry forms…these experiences are often the end goal of an entire campaign.

Experience Planning folks analyze forms particularly closely to ensure that the form is usable – logical flow, clear error messages, few distractions and a clear call to submit.  A simple, clean form with minimal design elements is often the preferred approach, but is this always the best solution?

John Broady from Omniture Digital recently performed a study to compare increase in ‘request more info’ form submissions for two universities. The universities tested two versions of the form: 1) a very simple version of the form without design detail and 2) a version of the form with stylized page design, hero shot, colorful submit button, and benefits messaging.

Results were very surprising. One university saw a large lift from the simple form but not the stylized form. The other university saw a large lift from the stylized form but not the simple one.  Did audiences randomly respond differently to the two formats?

Upon further analysis, Broady and his team found a clear distinction between the two options – the sources of referring traffic.  The university that showed a lift via the simple form had the majority of traffic originating from other pages within the university website.  The university that showed a lift via the stylized form had the majority of traffic coming directly from search engines.

Why is there such a large distinction? Users coming directly from search engines are likely clicking on links and determining within seconds whether to stay on the page or keep searching. Visual impact of a page is very important to capture their attention.  Users coming from other pages on the university site have typically ready to convert. They’ve investigated other content on the site and too many visuals or fluffy messaging can be a distraction for this user.

When designing an online form, it’s a good idea to consider 1) whether a form page is a primary landing page from search, 2) whether the majority of site traffic originates from a search engine or from other site pages, and 3) ultimately which user origination type is more valuable.