Prototyping search in your mobile user interface – 5 tips on choosing search patterns that will help you design your best mobile UI yet
Mobile now accounts for 65% of users’ time spent on digital platforms in the USA, according to Comscore. 90% of that time is spent on mobile apps browsing social media platforms, communicating with loved ones, and making purchasing decisions. But what exactly are users doing with these apps? They’re searching for their end goal.
Every touch point of your app, every user interaction relies on a mobile search pattern. Poorly designed search patterns can disrupt your app’s usability and overall user experience – like the bad examples in this page. Search in mobile user interface design should reduce the user’s cognitive load and help them get from Point A to B as efficiently as possible.
Luckily, by prototyping your mobile search pattern, you can make sure your app’s content is both discoverable and accessible to users early on. Let’s see how with these 5 tips on prototyping mobile search patterns.
Search in mobile user interface design – common mobile search patterns
Search is a key area of functionality in mobile user interface design. And when it comes to users finding their way around apps, there are several search patterns for UI designers to choose from.
According to the Interaction Design Foundation, these are the most common mobile search patterns around:
- Auto-Complete – this search type help the user by either filling in a partial query or populating terms after the user has inputted in an initial number of characters into the search bar. This is a particularly helpful pattern for mobile, saving the user time and strain in typing with the thumbs.
- Dynamic Search – as the user begins to input data, the dynamic search starts to filter results in order to reduce large volumes of search results.
- Explicit Search – here the user is prompted to tap on a search field or button in order to display search results.
- Faceted Search – this is used for scoped search, allowing the user to refine a selection of mobile search data with attributes such as ‘sort by’ and ‘color’.
- Saved and Recent – this pattern offers search suggestions based on past user behavior or saved search data
- Scoped Search – this allows the user to define the search criteria before entering their search query, e.g. Google’s web/image/video etc. search options
- Search Forms – these collect search data filled in by the user (only that which is absolutely necessary) in order to deliver more accurate results
No matter which search pattern you choose, there are plenty of ways to design search successfully in your mobile apps, and your websites. Here are 5 tips to help you implement search effectively in your mobile apps – and how to do so using Justinmind prototypes. Read on to create your best mobile UI best app design yet!
1— Make your mobile search patterns easy to discover and navigate
The first step to successful search in mobile user interface design is making sure that it’s easy to access. Think about it: when users are searching for content in an app, it’s usually because they want to get at information instantly. By providing your users with the shortest route to discovery, you can ensure that they get to their end goal as quickly as possible.
There a few ways you can make your search pattern discoverable and easy to navigate. For starters, make sure that your search bar is always visible. If users have to go looking for it on such a small screen, chances are they will either give up or lose their train of thought. That’s lose-lose for you.
Make your search bar a sticky or fixed position element in your mobile user interface. As the user scrolls down through your app’s content, the search bar will remain visible at all times. Learn how to create this in your Justinmind mobile prototypes here.
Additionally, make sure your search bar is what your users were looking for. Use UI icons that are familiar to most users, such as the magnifying glass. Justinmind has a wide range of UI widgets, icons and readymade screens for all your mobile prototyping needs. Learn more about our pre-made widgets for iOS and Android here.
2— Provide shortcuts in your mobile search patterns
As mentioned above, mobile screens have a limited amount of real estate, so use it wisely. Creating curated content will help the user complete their search and could cut down how long they spend searching.
Try including helpful suggestions and meaningful default labels in your search bar. For instance, Google Maps’ marker labels to prompt you to search for places nearby.
Note that these placeholders should be based on popular searches, location or recent searches – so the key here is continuous usability testing to stay on top of usage patterns. Justinmind’s usability testing integrations mean it’s quick and easy to test your prototypes whenever, wherever.
3— Reduce typing time in your search patterns with autopopulate
Predictive search, autocomplete and autopopulate features are often used in search engines to shave time off form filling. Not only can they save the user from having to manually enter their search query, faster form filling has been known to increase conversions.
As Talia Wolf explains, “the less you ask of a user, the more inclined they will be to fill in the form”.
With Justinmind, you can create autopopulate fields for your mobile search pattern. This will help you decrease the amount of time a user has to spend typing repetitive words and phrases into the mobile app. Learn how to do so here.
4— Make the wait feel shorter when users search your mobile app
Giving the user feedback makes for good usability in your mobile app. When a user has performed a search, feedback shows them your app is responding to their request. It might also indicate to them whether they need to perform another action in order to complete task and/or if something has gone wrong.
Users are often on their mobiles whilst on the go, so app confirmation of a user’s action needs to be snappy, even if the app itself isn’t able to process the user’s action right away. Even if there is a problem, communicate it. There’s nothing more frustrating than being made to wait.
This is where loading animations can help out. Often designed as SVG vector graphics or light animations, these let the user know that the message has been received. Design them with Justinmind’s animations and SVG vectors.
5— Display search results for superior visibility
Finally, make sure that users can easily read search results on the mobile screen. If the message still isn’t clear, you’re dealing with much less space than a web user interface, so design accordingly.
For instance, Airbnb lets the user switch between a scannable map view option and a fast booking view. Both options provide different, relevant value and information to the user.
And if you really want to push the boat out, allow the user to toggle between the displays. You can create this effect in your Justinmind prototypes by using tabs.
Prototyping mobile search patterns: the takeaway
Choosing a mobile search pattern can be trickier than choosing one for web. Mobile user interfaces are smaller and the types of interactions the user can perform are limited.
Prototyping your mobile app will help you visualize both the visual and interactive aspects of your search pattern before any code takes place. This will give you the chance to validate your design pattern and make any necessary changes, before it’s too late! Download Justinmind now to create your best mobile UI design yet!