Today I again return to Aarron Walter’s Designing for Emotion (2011, A List Apart). On pages 22-28, Walter discusses contrast. On page 22, he identifies two ways in which we perceive contrast:
Visual contrast: difference in shape, color, form, etc.
Cognitive contrast: difference in experiences or memories
Today I’ll only further explore visual contrast. Walter (p. 23) provides a sign-up screen from Tumblr as an example of effective visual contrast. I provide a slightly different sign-up screen than Walter does, one I captured from Tumblr just minutes ago:
Walter says that by eliminating extraneous content, the site simply introduces the product and the less distracted user is more likely to sign up with Tumblr (pp. 23-24):
The high visual contrast in negative space against the large, central form makes it easy to understand what this site is about and what action Tumblr expects.
Page simplicity also helps potential customers to perform a basic cost-benefit analysis, a regular activity that our brains engage in after contrast scanning. The short time needed to fill out the form is a low cost to pay for the potentially large benefit of the service, making conversion highly likely.