When I was first learning to play fingerstyle guitar, one of my lessons introduced me to the concept of “Economy of Motion.” It's the practice of removing superfluous finger movements in order to increase speed, accuracy, and endurance. The idea is to eliminate wasted movement and force. Only apply as much pressure as is needed to produce a clean note. Why raise your fingers ¼" off the strings when you only need 1/16"? Anything extra takes time and energy that’s not contributing to the music. Be economical with your motions and you’ll arrive at each note quickly and accurately, ideally with extra energy to perform the next movement.

I’m reminded of that lesson when I consider mobile interactivity. The difference being that it’s not the users of mobile interfaces who have to practice—or even think about—efficient movement. It’s up to us as UX designers to design efficient interfaces that facilitate a user’s ability to quickly reach the content without superfluous and wasteful interactions. Borrowing from the music lesson concept, I like to think to of it as an “Economy of Interaction.”

Mobile Use Cases

The music analogy gets to the core of the issue: efficiency. When it comes to mobile, interaction efficiency is even important than it is on the desktop. Not only are mobile users dealing with a much smaller screen and somewhat coarse navigation device (their finger), they are also visiting the web in short, often more urgent information-gathering sessions.

For example, one user might be looking for a business address or hours of operation. Another might be engaging in frequent on-the-go monitoring of social media sites. A third might be amusing himself during small blocks of idle time. In none of these cases is the user spending a lot of time on your site. So all users need an efficient way to navigate.

Content as Navigation

One good way to increase efficiency is to ditch the traditional, space-consuming navigation menu. We don’t want menus to dominate premium screen space. Instead, we want interesting and useful content up front and center. If done carefully, the content can actually function as part of the navigation. For example, providing a list of various content excerpts that tease content and allow you to drill down into additional information can help guide the user. In the process, the user becomes familiar with the layout of the site in relatively few clicks and without ever having to sift through a site map or menu.

Navigation Enhanced by Touch

On mobile devices, content-as-navigation efficiency can be further enhanced through the use of touch controls, such as swiping or flicking, and tap and hold. These gestures can be employed to both manipulate the content and navigate without the need for dedicated buttons or other controls, saving screen space and allowing the user to have a more direct interaction.

Swiping or dragging vertically for content scrolling is an obvious start, but horizontal swiping or flicking of content pieces is also possible. Horizontal swipes can be used while browsing through content, while a flick gesture might be used to dismiss or delete content from the group currently being viewed. The idea is to give the user the ability to directly manipulate the content without having to turn to separate controls.

A More Engaging Experience

Traditional navigation menus have their place, but they will never be as engaging as visually interesting content pieces that serve the same purpose. With content as navigation, users benefit from a more engaging experience, while quickly getting to the content they need and enabling them to view more of your site in the small amount of time they have.

Here at WHITE64, we’re exploring new ways to incorporate content as navigation and other efficient mobile interaction designs. So for your next mobile project, think “efficient,” and watch your mobile site perform better than ever.

John Barela

Author: John Barela
Date: January 8, 2015