Designing for varying attention spans (lessons from the Lexity launch)

When we relaunched Lexity recently, we got tremendous kudos for the new site design. ‘Sexy’, we heard. ‘Beautiful’ was a common refrain. ‘Effective’ too!

Well, we’re definitely very happy with the feedback so far – and I wanted to talk a bit about the thinking behind the rework.

When I first started fundraising for Lexity, I got sage advice to write the elevator pitch out in three different lengths –

  • 3 words (or 1 line) – for a quick soundbite
  • 1 paragraph – for a quick introduction at an event/party
  • 3 paragraphs – to use in an email introduction
This turns out to be excellent advice for more than just fundraising. Attention spans vary from person-to-person, even from time-to-time for the same person, so it’s always a good idea to thoughtfully design the delivery of your message, to suit your audience and their attention spans.

Applications to site design 

When we were designing our homepage experience, we went through a similar exercise. We asked ourselves – are we creating an experience that lets everyone get to the information they need, to the depth they need it, given the time they have, and the attention span they’re likely to have?

We followed two simple rules to guide us:
  • Satisfy the site visitor, whoever they are, and however long they spend on the site. So, someone who just has a few seconds to spare should get a quick sense for what Lexity is about, and someone who has half a hour should be able to go all the way to signing up, without friction.
  • Encourage the vistor to explore further – whether they’re a potential customer, partner, or a future Lexiteer. For this, build in progressive disclosure, with the site unfolding in front of the visitor’s eyes as they spend more time with us.
To make this more concrete, we constructed scenarios for different visitor types:
  • Potential & Existing Customers
  • Potential & Existing Partners
  • Future Lexiteers
  • Future Investors
  • Tech Community
We then figured out time slices we cared about most:
  • 1 second – the person has barely any time to spend on the site
  • 30 seconds – the person wants to get a quick sense of what Lexity is
  • 5 minute – the person wants to go in-depth, looking for information based on their interests
  • 15 minutes – the person, presumably a potential customer, wants to sign up
  • return visitor – the person returns to the site later on
For each of these time slices, we mapped out:
  • what they would see during that time period
  • what cues we would build to encourage exploration, pushing them towards the information they were most likely to be interested in.
Building the cues was a lot of fun! You might have noticed a few patterns we used:
  • Animation that starts bold but becomes more subtle as you spend more time. In fact, on successive visits, you don’t even see the big informational carousel; its work is done.
  • Consistent use of color as the story of Lexity unfolds. This theme is carried on into the application itself.
  • At every stage, depending on how much time you’ve spent so far, a different set of navigational cues are presented. You can always sign up, but you don’t see links to detailed info if you’re just stopping by.
The ’19 1/2 reasons’ are a great example of this approach. Only potential customers will find it (there are 3 different ways to get to it, though) – but will be satisfied, regardless of the time they have –
  • 1-5 seconds: will scan the images and get a rough pictorial sense
  • 5-20 seconds: will read the headlines quickly, and get an overview
  • 20-60 seconds: read the text to understand the features more
  • 1-5 minutes: click on ‘read more’ to go in-depth on features they care about most.

Design your site with your audience’s attention spans in mind

Design your site for your audience, but also for the attention spans they are likely to have. You can’t control the time and engagement level of your visitors – so it’s your job to satisfy them quickly, and encourage them to explore further!



3 thoughts on “Designing for varying attention spans (lessons from the Lexity launch)

  1. Pingback: The ‘Coffee Break’ design philosophy: UI for Small Businesses | @akumar overflow

  2. Insightful post. This is classic news journalism: writing a good lead, and developing the story using what they call the intreated pyramid approach. You put the important stuff first, then the next important stuff, then the next, etc.

    So that a skimmer could get the meat in one paragraph, and all the details are there for someone who wants more depth.

  3. Simple but good advice. The new site looks good.

    As an aside, any reason why you have not provided subscription features on the blog for people to subscribe by RSS or email (or did I miss it ?)

    Ah! now I see – maybe using “Notify me of new posts via email” while commenting is probably the way to subscribe.

Leave a Reply

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

You are commenting using your 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 )

Connecting to %s