Mobile Application Interface Design pattern: Search, sort, filter

Source: Internet
Author: User
Tags sort

Many information service sites organize relevant content information by way of classification, for example, truck, lorry, SUV and so on, and greensheet such a site is directly to sell information a brain heap in one page after another, if I (English original author) want to find something, You really have to watch it all the way down. Thanks, I might as well use Craigslist directly on my phone.

In the process of using Craigslist, I figured, as a regular user, we could really benefit from the UI design patterns that are in place for searching, sorting, and filtering information. In this article, we'll take a look at what design patterns can help us organize and present data information more effectively in the way that users expect.


First of all recommend two of this good book, "Search Patterns:design for Discovery" and "Designing Search:ux Strategies for ecommerce Success" (the former domestic has introduced, "Search mode," a book). Then we look at the design patterns associated with Shang in mobile applications.

Dominant Search

Automatic completion

Dynamic Search

Specify search scopes

Saved/Recent Search entries

Search the form

Search results

Dominant Search

As the most common and most popular search pattern, dominant search relies on overt action behavior and performance to perform search tasks and display search results. In this mode, the Search button appears to the right of the input box, or it is embedded directly in the virtual keyboard (in which case the Cancel button can be placed in the search bar). Search results are usually presented directly in the area below the search bar. In the design, you can consider the use of linear search and automatic completion mode.

In this mode, the explicit Search button is provided and the user is provided with the means to cancel the current search behavior. Provide explicit state feedback when the search is executing.

Automatic completion

It can be said that this is one of the most classic and practical search patterns that emerges with the advent of the Web 2.0 wave. Users in the input keyword at the same time, the system will immediately provide some based on the current input words guessed out of the search results, if the user found that one of the items is exactly what they want, then the direct click can complete the search. Of course, this is still a normal way to complete the search function without the right candidate or if the user doesn't feel like they're going to be able to enter the full keyword manually.

Ideally, the system should provide search results as soon as the user's input, but in practice the visual cues used to feed the system's working state are also necessary. On the right side of the chart, Netflix directly places the status hint at the right end of the keyword input box, and another common practice is to place it where the search results are.

TripAdvisor provides a much better AutoComplete model that directly categorizes the results of immediate rendering in terms of popular travel destinations, hotels, etc. LinkedIn's approach is somewhat similar, giving priority to finding results that have direct contact with current users.

Feedback the current working state of the system to the user through visual cues, and consider highlighting the characters currently entered in the search results.

Related Article

E-Commerce Solutions

Leverage the same tools powering the Alibaba Ecosystem

Learn more >

Apsara Conference 2019

The Rise of Data Intelligence, September 25th - 27th, Hangzhou, China

Learn more >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: and provide relevant evidence. A staff member will contact you within 5 working days.