Saturday, August 2, 2014
This is a very simple pattern that is not very widely used yet but I believe it will be soon. The idea is very simple, and not even new, but very effective and useful. A phone screen can be very small and often there’s way more information about any topic than you can fit on the screen. One option is to make the content scroll but that makes it more difficult to access any information beyond the large scrolling block. Enter expand in context


Pattern card

Problem
Available screen real estate is too small for showing all information on the screen. Making the full content visible would demand too much space making other content difficult to reach or the content is dynamic and its size is not know and therefore a maximum size must be set.
Solution
Create an area with maximum (fixed) size where the content is placed. If the content doesn’t fit the area users can tap to expand it to show full content.

It is important to show that there is more content available. A typical way to do that is to have a down arrow on the bottom edge of the expandable area.

If the content doesn’t contain any additional controls like buttons and links it can ba a good idea to make the whole area one large hit target for expanding the content. In that case the content area should be clearly visually marked as such.

Making the area collapsable after user has expanded it is optional. If collapsing is possible it is important to maintain correct scrolling position in the parent container after collapse is done. Ie. the content must not jump to a different position. 

Consequences 
  1. More compact UI that allows better overview of full content.
  2. Dynamically loaded content can be safely included in design without having to limit its size.
  3. More fluent UI as users don’t have to open another screen to view more content.




Android UI Design Patterns

Leave a Reply

You must be logged in to post a comment.

Accessories
About Us Twitter Feeds Links

    MobileAppUI is your guide to mobile app UI design for the iPhone, iPad and other mobile devices.

    No public Twitter messages.