Layers: a tale of use and abuse

Layers, lightboxes, floaty things, call ‘em what you want: they are a major tool in a UX designers toolbox. When used well, they provide a fast, inline experience saving users’ browsers and brains from the agony of a complete page reload. When abused, they create a hot mess with confused users wondering why the page is now covered in a transparent black and scrolling in search of the layer that was there the last time they clicked. So the question is: how do can we separate use from abuse?

A bit of benchmarking

Facebook

My first taste of Facebook’s layer-ed loving was impressive: I drooled as the page went glossy, semi-transparent black and a list of all my friends loaded in a mega layer. I could invite all of my friends to a group without venturing out of a 400 square pixel perimeter.

Lately, Facebook has added even more layers, including the lightbox (above), the group creation layer and invitation layer. Major exception: the friends list layer was rolled back to a standard page.

Twitter

Twitter uses a layer for the mother of all action: the tweet. Direct messages also get the layer treatment. Just about everything else is page-bound.

Google+

The new kids on the social networking scene loves them some layers, oh yes they do. Circle lists, profile editing, even adding a new profile pic all happen in layers. Most of the interaction is excellent, though scrolling a “circles” layer with my Mac trackpad just doesn’t work; inevitably I scroll down the entire page and completely lose sight of the layer. I cut Google slack the first few days but they really need to fix this bug soon.

Linkedin

Layered interactions are scarce on LinkedIn. Main actions (writing messages, adding new contacts) are handled in-page. What’s really noteworthy are the utilitarian pages (above) they use to add and edit your profile. Although the browser loads a new page, the minimalist header and closed loop navigation makes for a fast experience and a tight interaction. LinkedIn has used this utilitarian format for years, a good indicator of how effective it’s been.

Path.to

Darren Bounds says his start-up Path.to “trims the fat” away from LinkedIn. This is really clear when it comes to how users edit their profiles. No utilitarian pages here, layers are the main interaction flavor. It’s a nice idea but when faced with a virgin profile covered in tool-tips and layers, the experience can be a bit daunting. However, based on what I’ve seen from the Path.to team so far, I’m sure they’ll be iterating this to perfection in no time.

A layers checklist

Here’s a quick checklist to help you figure out when using layers is a good idea. Answer “yes” to these questions and layers might be a good bet:

  1. Are you designing for just one main action?
  2. Is the interaction straightforward? (no errors messages to communicate, no multiple steps each with a divergent use case)
  3. Does your layer cover less than 40% of the screen real estate on a 1024×768 screen and still give your users enough elbow room?
  4. Are there any potential positioning issues? (overlapping layers, layers appearing above or below the page’s “fold”)
  5. This is a big one: are you sure you’ll never have to link directly to this layer from another page? (links that point to pages with layers pre-opened are a big turnoff)
  6. Am I missing something? Let me hear it in the comments section.

Recap

All that glitters isn’t gold and all that floats isn’t lighter than air. Building a layerpalloza can be tempting but don’t let your desire to innovate trump your common sense understanding of your users. User experience pros love cool for cool sake, users don’t. When in doubt, launch, test and repeat. Good UX, like enlightenment, comes from constant iteration and obsessive evolution.


A quick shout out to @inoku, @pelluz and @semantricks for their help in shaping my thoughts on this subject.

About these ads

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Follow

Get every new post delivered to your Inbox.

%d bloggers like this: