A guided mobile application interface design pattern: search, sorting, and filtering

Article Description: Mobile Application Interface design mode-Search, sort, filter.

I decided not to go on the iOS Wow experience during the holiday, but I am not willing to do it. At the end of last year, we learned about a "guided mobile interface Design Model", which comes from a new book in the O ' Reilly Zoo, "mobile designs Gallery", which is a big rooster on the cover. This time it comes from the fourth chapter of the book-Search, sorting and screening. It seems that the introduction of the domestic version by XX Publishing House is doing, really do not concern me, I walk. The next decisive fine points, into the original author personality.

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.

Search

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.

[1] [2] [3] [4] [5] Next page