Inline Expansion – Why And Where To Use It

Featured image for Inline Expansion – Why And Where To Use It

When you hear the words “Inline Expansion” you probably think of a jQuery accordion. In essence that’s correct, but entirely dependant of its functionality. The act of expanding content vertically or horizontally allows us to show important data we’d like our users to pay attention to.

Essentially focus is a critical factor as we only show the user what they want/need to see and the rest is hidden until the user calls upon it. Inline expansion works with hierarchical elements that don’t always require its information to be revealed in specific order.

Working with an inline expansion means you have a primary element followed by secondary elements that are put into play when the user calls upon them. Stay tuned as we plan on dissecting the reasons why we’d use this functionality and where to use it.

Why Use It? (Learning from Google)

Inline Expansion is a simple way to tidy up your content so that it can be delivered in an effective manner without having to compromise functionality. All in all it allows the user to specifically focus on featured content all while having access to the rest of the information with the click of the mouse.

This is directly associated with enhancing the user experience and encouraging the flow of information towards the user. This is one aspect of User Interface design that gives rather than take. Here’s what we mean:

Inline Expand gives the user simplicity, control over elements of design/content, space (less “need” for a cluttered site), more time and an easier way to focus and understand the information at hand.

Over the years Google has been able to pioneer a number of (common) functional elements of design that are in use by millions. Inline Expansion happens to be one of those things. If you’ve ever used Gmail you would’ve noticed that as you compose and reply to an email repetitiously, every email is displayed in the form of an “accordion” that can be expanded at any given time when called upon. This makes it much easier to reply to emails, and reference past ones as well. Ultimately it improves usability and allows for a much better flow of information. It helps you avoid having to go on a “manhunt‘ for an email sent two months ago. Quite handy huh?

Inline Expansion

When Do We Need It?

Even though Inline Expand is a great way to free up space on your website, this isn’t the only good reason to implement one. Just as useful as this can be, it can also cause harm if not used or done correctly.

So when do we find the “need” to use Inline Expand?

  • When the elements at hand aren’t required to be used continuously by the user
  • where there exists too many features/options that can act as a blockade to the flow of information
  • when it’s not critical to display various elements in a distinct manner
  • wherever you do not wish to obstruct the user’s attention

If you ever need to grab the user’s attention with severity and ease then use a Modal Window where applicable.

Diving In To Its Mechanism

Inline Expand derives from what Jakob Nielsen calls “Progressive Disclosure“.

As you can imagine, the way Inline Expand works is by progressively conveying the right information at the right time when requested by the user. Sending rarely utilized features (as Jakob states) to a secondary screen (a primary element followed by a secondary element) attends to the user’s need for dynamic functions and simplicity. This is achieved because implementing the use of inline expansion will “Offer a larger set of specialized options upon request“. (Nielsen’s Progressive Disclosure 2nd Paragraph)

In essence Inline Expand separates the primary and secondary elements by displaying the most important (primary element) information first, and then naturally displaying the rest (secondary elements). Inline Expand also works by showing a transition effect between these elements that allow the user to notice the change and shift their focus with ease.

One last thing to note: You should always let the user choose between elements without trouble, simply because the user might only need the secondary elements for a short time.

Inline Expand (jQuery) Tutorials

The Showcase

Muxtape

Inline Expansion

Carmax

Inline Expansion

Travelstart

Inline Expansion

BBC

Inline Expansion

Nordnet Bank

Inline Expansion

Twitter

Inline Expansion

Flickr

Inline Expansion

78 Design

Inline Expansion

DesignSession

Inline Expansion

PoolieStudios

Inline Expansion

Your Turn To Talk

I hope you enjoyed this post!

What other websites do you know use Inline Expand to enhance their UI?

Popular Articles

15 thoughts on “Inline Expansion – Why And Where To Use It

  1. This is really cool functionality to add to a website – adds just a little bit more sophistication IMHO.

    Do you know if there are any WordPress plugins that would allow you to create these within a Page or Post? Would be very useful not to have to figure out how to integrate all the code, etc. manually.

    Regards.

  2. Nice stuff. One big benefit is that it also degrades nicely if done right, unlike a big tooltip for example. I think I have used something similar for every site I’ve created this year.

    When using jQuery it’s also ridiculously easy:
    $(‘a’).click(function() { $(this).next(‘div’).slideToggle(); });

    Btw could you explain the name “Inline Expansion”? In almost every case both elements are block level and the expanding part is also not inline. I must be missing something.

  3. Nice posting here, i think in-line expansion is very important part of web design especially as our industry grows and more and more information and services are integrated into websites. The BBC websites show a great simple way to separate primary and secondary information – works in all browsers as well!

    Thanks.

  4. Nice article. I have wanted to use inline expansion in the past to hide informative content on a page, letting the user to decide to ‘read more‘. However I have concerns about how Google reacts to this hidden text. I wouldn’t want to be penalised and accused of ‘hiding‘ content for black hat reasons.

    I appreciate this isn’t really applicable for some of the examples on this article, but I wondered what your thoughts are on this?

  5. Amazing article. Learned a lot and I loved the quote “This is directly associated with enhancing the user experience and encouraging the flow of information towards the user.”

  6. I see progressive disclosure being used the wrong way in *many* places though.

    One example is your animated social media links. If I didn’t hover and pay attention, I don’t see I could post to Posterous.

    Progressive disclosure works best to present secondary options based on a primary option, hidden everything that doesn’t makes sense anymore on that context. For instance, imagine a form that asks you your gender, and next your favorite clothing. Once I select “Male”, the clothing list can remove “Dress”, “Top” and other stuff that is not relevant anymore.

    Hiding content for the sake of requiring *less* space and making things look uncluttered is the user interface equivalent of hiding dust under the rug. If it looks cluttered, but elements are not secondary, rethink the design and the priorities.

Leave a Reply

Your email address will not be published. Required fields are marked *

* Copy This Password *

* Type Or Paste Password Here *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>