Mobile Application Interface Design pattern-search, sort, filter

At the end of last year, we learned about a "guided mobile application Interface Design Model", which comes from a new book at 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 also by XX publishing house, 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, Really have to watch it all. 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" book). Then we look at the design patterns associated with Shang in mobile applications.

dominant Search Automatic completion dynamic search specify search scope saved/Recent Search entry search 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.

Dynamic Search

This pattern can also be called "Dynamic Filter", when the user enters a keyword in the search field, the existing search results are dynamically filtered. This looks similar to the previous AutoComplete pattern, but in fact they differ in the interaction model. The main function of the dynamic search pattern is to refine and filter the existing list of information.

Dynamic search patterns are used to instantly refine and filter datasets, such as applications in address books or personal media libraries. But the model is not suitable for a situation where the data scale is too large.

Specify the search scope

In some cases, you can allow users to define the type and scope of the search object before performing a search, resulting in more consistent search results. The application of Google and Photobucket in the specified search scope is slightly different, but the ultimate goal is consistent.

Similar practices are also used for Allrecipes and Dropbox applications. In Dropbox, the default search scope is full, but users can further select search scopes, such as searching for files or folders, before or after the search is executed.

According to the product itself, reasonable division of the search type, so that users in the execution of the search time to choose. Usually three to six options are enough, and when necessary, you can use the form to implement advanced search capabilities.

saved/Recent search entries

Excellent mobile application interface design will honor a most basic usability principle: respect the user's pay. In search, the saved or most recent search results are a good embodiment of this principle. Through these two modes, the user can easily select the keywords that have been searched, without having to re-enter them at all.

The design patterns associated with this usability principle include location-based search in Trulia, Amazon Barcode Search, scan and voice search in Google Shopper, and search history grouped by search date.

In the pattern of saving search results, users often need to take additional steps to name the search results as an index for future viewing. The "Recent search entry" is saved and rendered by the system itself. For your own product, consider which way is more appropriate.

Search Form

Users can use some of the advanced search options in the search form, such as selecting a search scope in some way. In addition, a search form typically includes a search button that is highlighted in visual presentation.

Try to control the number of interaction elements in the search form and use them in the right way. The visual attention to the details of the grasp, such as element alignment, text label layout and font size.

Search Results

We also view the search results as a pattern in the entire search function. Search results can appear in the same interface as the search operation, or in a single search results interface, to see the requirements. Search results are presented in a variety of ways, including tables (table), lists, thumbnails, and so on, and can also be displayed in a map. The same application can use several different forms of search results at the same time, depending on the type of search results and user settings.

Many applications use deferred load technology (lazy loading) In search results, in which part of the search results are loaded first, while the other part continues to load. There are usually two ways to trigger the loading of more content, one is to load automatically, and the other is to manually click a button or link to perform.

We can use the delay loading technology to replace the traditional paging browsing mode, especially in the context of mobile application, the pager mode is contrary to the natural interaction model, which does not conform to the user's intuition. In addition, it is a good idea to let users know the total number of entries for the search results and to provide a reasonable default collation for the search results.

Sort

It is important to choose the most appropriate default sort for search results, which we can usually set according to the actual characteristics of our products and the expectations of our users. The design patterns that change the way search results are sorted are roughly three of the following:

Sort Toggle Sort Selector sorting form switching

If the optional sorting is not too much, we can use this simplest solution. Place the Sort toggle button at the top or bottom of the search results (depending on the layout of the other related elements in the interface), and the user can easily change the sorting style without leaving the current view.

The target application on the right of the following figure consolidates four sorting methods into three toggle buttons, where the "price" can be further toggled into ascending or descending order.

The sort switch should have a clear visual presentation to express the "current" state.

sorting Selector

Selector mode is a good substitute for switching mode. Many types of UI controls can be used in this pattern, as well as reference to the design specifications provided by different system platforms. For example, in Android Apps, menu forms are more common, and for iOS, selectors (picker) and Action forms (Actionsheet) are more appropriate controls.

The selector mode allows longer text titles and more options than switching mode. Above, Walmart's Android app puts a button in the search bar to open the sort pop-up layer. In the image below, Kayak's iphone app puts buttons to expand the sort selector at the bottom of the search results.

In addition, the combo box in Android and the pop-up coverage menu in iOS can be used in this mode.

Refer to the design specification of the relevant system platform and use the most appropriate UI controls in the sort selector mode. The currently selected sorting method is highlighted in clear, easily identifiable visual representations.

sorting Form

Many applications incorporate multiple sorting and filtering methods in the same interface, often called "refine", which is complex, but can help users get the most accurate results. In mobile applications, the "refining" approach is mostly hosted in a form interface where users need to make choices based on their needs and submit these search criteria.

Source Address: HTTP://BEFORWEB.COM/NODE/70