Curing our addiction to scrolling: the interactive mobile experience

Scroll, scroll, scroll.

Or, on a cellphone, flick, flick, flick.

Does this sound familiar?

We’ve become lazy in website and app design, making the user scroll for everything. It was getting worse on desktop computers in recent years. And now it’s absolutely horrific on mobile, because a mobile experience is often just the long, stretched-out version of the desktop experience.

How do we address this on mobile? With a rich, interactive user experience, using all six directions from the screen: left, right, up, down, in (towards the user), and out.

Now there is one mobile convention we’re become accustomed to that does this well: the navigation menu. Often a mobile navigation menu slides in from the side of the screen, temporarily pushing away or covering the main content.

But so much more is possible.

  • Reveal more information from the left or right of the screen. And not just a quick animation when switching between screens; I mean using off-screen to the left and right as storage areas for supporting content, and to allow natural left-to-right progression through content and tasks.
  • Layer information appropriately. Reveal supporting information in-place, ‘layered’ on top of the content: a small popup; a larger panel; an entire screenful of scrolling information. Make extensive use of depth. The physical screen may be flat, but the experience need not be. (Incidentally, I believe the term ‘flat design’ is incredibly limiting, and not a good reflection of what it means.)
  • Use progressive disclosure. Don’t show everything, to everyone, at all times. Provide hints on what’s available, then require interaction in order to reveal that additional content and functionality. Prioritise the most important information and actions for the majority of users.
  • Move away from the page-by-page experience. No one thinks in pages. It’s a metaphor we adopted back when we were using terms like The Information Superhighway, and it’s long overdue for a change. Expand objects in-place, perhaps by zooming in for more detail. When a full-screen change is necessary, use animation to visually connect content that stays the same. Expand, slide, reveal. The possibilities are endless.

Most of these concepts are rare in current mobile design. They’ll need careful consideration and an experienced hand to implement them well.

But they represent an extraordinary opportunity for redefining what is meant by an excellent mobile experience.

It’s time.

One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.