Ryan Kenney

Consultant, Experience Design

Tips for User Friendly Mobile Search

Consultant, Experience Design

Over the summer, I was driving home from in Western Massachusetts when I got a call from a friend inviting me to New Hampshire (on my way!) so I grabbed my smart phone, went online to get directions, and then searched to find a nearby store to buy suntan lotion. Two hours later I was sitting on the beach watching the waves and getting a righteous tan!  Smart phones have helped to make life more spontaneous – gone are the days when you had to go home and turn on your desktop to find the information you need to take a day trip. Long live mobile search!

Site Search for Mobile Devices

As an experience designer, it is my job to organize information on the screen (sometimes as small as 2 x 3 inches) to help users accomplish their goals. Whether they want to take that last minute trip, look up information or make a major purchase, It’s my job to make sure those activities can be incorporated into an efficient and pleasing experience.

In an earlier blog, I discussed some best practices for website search that would ensure that users had easy access to the information they require. Some of the basic search design best practices I highlighted also apply to designing for mobile devices. For example, it’s important in both instances that you design the search functionality as an input field and button (like on Lowe’s mobile site) and place it in a consistent place in the top portion of your mobile app or site. Placing default sample text in the field can give users helpful direction in their search.

In addition to basic best practices, mobile searches can benefit greatly from some added functionality. Because mobile connections are historically much slower than a computer’s connection (less so with 4G technology), users should be given a visual cue that lets them know the search is being performed. “Lazy loading,” or loading search results onto the screen as they are returned (as opposed to waiting for all the results and then loading the page), can keep your users engaged during a long search.  You should also give your users the ability to cancel their search at any time if they change their minds, the search takes too long, or they get the results they were seeking.

It can also be helpful to give users the ability to narrow a search on their mobile device using some of the devices native features. For instance, allowing users to search based on their location can save them typing and loading time. If your user is in the car like I was (pulled over of course when I was searching…), you want to be able catch them as they pass by, just as if it were a billboard on the highway pointing to an exit. CVS’s mobile site provides this location-based functionality so I was able find suntan lotion at a nearby store on the way to the beach!

You can also have your mobile site or app narrow its results based on the desired item. Home Depot’s mobile site provides a search input field and button at the top of their mobile site and then gives users the option to narrow their search to a particular department. Stop & Shop’s mobile app allows users to find a nearby store and then search the weekly circular by department to see what’s on sale at the location where you like to shop.

Since typing is more difficult on a mobile device, make the search process easier by providing an auto-suggest function. A good way to make this work is to have query options automatically appear as the user types but disappear when the user finds the correct search. While helpful, this approach  can still require a lot of typing which could be tedious for a mobile user on the go.

In a recent article in Smashing Magazine[1], the author introduces “tap-ahead,” a more efficient way for users to search on their mobile devices. In a traditional auto-suggest search, a mobile user might do a search that contains 2-3 words, and, as the user types, the search will attempt to return the user’s intended search in its entirety. This forces the user to continue typing until the search suggests the correct item.  

In the tap-ahead approach, the search will return suggestions just as in a traditional auto suggest. However, in this more robust approach, a user has a “narrow query” arrow to further filter their results without continuing to type.  In the author’s example, the user wants to search for “Harry Potter and the Chamber of Secrets.”  They type “H-a” and get results like “Harry.” The user can now tap the narrow query arrow which will return results like “Harry Potter,” “Harry Connick,” and “Harry Truman.” From here, the user can again tap the narrow query arrow and return the result “Harry Potter and the Chamber of Secrets.”

Tap-Ahead Searching on Mobile Devices

The user got their desired result, all from simply typing in “H-a”. This can save your user time typing as well as extra time loading extra, undesired pages like “Harry Potter” that do not give your user their true intended result.

Searching for information on a mobile device can be a tough task on its own. Never mind trying to find something while you’re pushing a baby stroller or trying to catch a train. In order to meet the ever evolving and demanding needs of our users and, of course, our clients, it is our job to make a search function that is easy to recognize and use. By giving users what they need, you can create a successful mobile application or website. And a last minute trip!

[1] http://mobile.smashingmagazine.com/2011/04/27/tap-ahead-design-pattern-mobile-auto-suggest-on-steroids/

Download our eBook on Mobile App Strategies for Sales Enablement