How fast can your website go on mobile?

Find out now! Create a Free Account
, August 7 2012

Hint and Reveal: Mobile Design Tip to Extend Small Screens

What's a key mobile design tip that we provide to customers building on the Mobify Platform all the time?

A mobile design tip that unlocks their mobile design thinking and helps them build amazing mobile experiences?

Hint and reveal.

Here's the hint. See the two designs below? Both use hint and reveal.

See what we're talking about? Here's the reveal.

Both these designs hint at content beyond the frame of the mobile device, then they reveal that content when the user swipes, taps or scrolls to access it.

Hint and reveal can be accomplished in a number of ways. The image carousels above that bring in content horizontally when swiped are just 2 examples.

Another common example is accordions that expand when tapped to reveal richer, deeper content, like these on the Mobify mobile site.

Simple right? The mobile screen is not the end of the content.

Instead, think of the mobile screen as a frame that people pull content into when they're interested in that content.

In the practice of interaction design this approach is called Progressive Disclosure and is effective to share information within limited constraints of attention.

Solving the Constraint of Small Screens

The main challenge that hint and reveal tackles is the limited screen size of mobile devices. Designers often refer to the screen size as the 'viewport.'

Even Facebook uses hint and reveal for their secondary navigation. Here's how it works.

Tap on the navigation menu item in the mobile web view of Facebook and you'll see the screen slides to the side to reveal the full navigation.

Yet the screen doesn't disappear. It remains in view to reassure users that they haven't lost their context, they've just triggered a separate pane.

Benefits of Hint and Reveal

Applying hint and reveal as a mobile design tactics has some outstanding benefits:

  • Invites interaction — Users get a chance to start to play with the mobile website and explore what it has to offer
  • Expands the screen — Designs can be larger than the frame of the mobile devices without cramming everything on screen at once
  • Inspires control — Users who interact and get a predictable result are users who are in control and confident on your mobile website

Under the covers, hint and reveal relies on a fast and reliable platform to live up to the expectations it provides.

Without that speed of reaction and reliability of interaction, hint and reveal would not be effective and would hurt user experiences.

Want your mobile designs to be fast and reliable? We use the Mobify Platform. You should too.

We are also constantly developing UI modules like a touch-enabled image carousel to help people with these issues.

Try Mobify here for free.

How much faster could your mobile site go with automatically optimized images and scripts?

Subscribe to the Mobify Webdev Blog

Get regular updates to help you create amazing adaptive web experiences.

No spam — we promise!

Guest post

Are you an expert on mobile web dev or design? Share your expertise with our 45,000+ subscribers.

Guest post on Mobify’s blog »
Circle +mobify