It’s OK to Tease: Matching Mental Models to Design Patterns

Researching design patterns today, I came across an example so golden that I had to record it, no matter how irrelevant it was to my task at hand.

I found the example at spotify.com.  What is Spotify?  The site meta description sums it up simply: Spotify is a digital music service that gives you access to millions of songs.

From that description, its easy to imagine what users are there to do.  But not so fast.

Somewhat like its predecessor Pandora, Spotify offers its basic services free of charge.  In addition to subscription fees for premium service, ads are the key revenue source for this heavily funded startup, so the better that Spotify knows its users, the more relevant (and therefore profitable) its advertisers can be.  This is a long way of telling a short story:  Users have to register to get what they want — to listen to the latest Taylor Swift track!

Therein lies the challenge: the dangling carrot is this tremendous library of free streaming music, but the desired (required) user behavior is a registration.  How does this play out in design?

Traditional Information Design Options

If you think like me (or haven’t scrolled down), you might have jumped to one of several traditional ideas.

• Add a “Why Register?” box on the page touting the benefits of creating an account. Unfortunately, the user is looking for music, not information about registration.  Framing the content around registration betrays the user’s perspective.
• Place a lock icon next to each title in the array of music so that the user realizes that they’ll have to “pay to play.”  Although this definitely conveys both music and “behind a login”, the concept of a lock might not connote the inviting vibe the brand is likely striving for.
• Showcase individual tracks, then slap the user with a registration form without warning. You should never do anything to your users which could be described as “slapping.”  Failure to set expectations disrespects the user’s intentions and is a sure way to drive abandonment through the roof.

So what gives?

Spotify’s subtle presentation beats all of the alternatives.

A Design Pattern that Matches Users’ Mental Models

By default, Spotify’s homepage features this module, which lines up top tracks and album art side-by-side in a simple, visually compelling presentation.

It isn’t until an interested user hovers over the section that he realizes that he must take a step to access or explore the music library.

This design hits the nail on the head by meeting both the needs of the user and the business.  It showcases what the user wants and doesn’t disclose the need for registration until the user “expresses his interest” by engaging with the “dangling carrot” — the music — via rollover.  And the design still manages to communicate the need for registration before clickthrough so that the user has a choice in the matter.

How do you think this design performs?  Have you ever tried something like it?  Please share.

Note: Spotify is not yet available in the US.

See also

1. The Best Kept Secret in Mobile Design Patterns
2. Setting User Expectations for Video Using Thumbnails
3. Design Pattern Libraries