Getting Started with modules – searching

Search can help users in a large database to achieve the needle in a haystack, is one of the core products of the module. This article introduces the search module from the design point of view, including the Web and iOS two platforms, starting with the text directly below:

1. Quick Search

Search is to help users a simple and quick match related content, the simplest search box mainly contains two elements: ① text box ② button (can be hidden with carriage return instead)

Fast Search is the most basic search model, user input Text Click button or direct return to complete the search.

2. Vertical Search

If a search engine explicitly finds a specific subset in a massive database, then the vertical search is used. The main elements of the vertical search include the ① text box ② button ③ label or Drop-down box.

▎ dropdown Box Mode

About the dropdown box front and back, I also discussed with colleagues in the company, there are several statements:

①. Business staff feel: the drop box front will reduce product exposure, increase business and manufacturer exposure, such results on the site more harm than good. (Business-to-business website Class)

② Technical control think: User operation habit is mouse → keyboard input → return (search), if the dropdown box will interrupt such a coherent operation.

③ research similar sites found that the dropdown box less content when the predecessor, the content of more classification when the post.

▎ Label mode

The label mode is more suitable for the independent search box than the dropdown box mode. But the visual elements are complex and are not suitable for pages with more content on the page. Taobao homepage of the top of the visual elements have become messy, but insist that this should be to maximize the promotion of the day Cat and compatible with the old user's operating habits.

iOS style

3. Query Suggestion Tool

The query suggestion tool has several versions: type in advance (type-ahead), search suggestions (suggest), or AutoFill (autofill), or call it a live search. The main purpose is basically to reduce user input and promote related phrases. See the legend directly below:

iOS style

4. Associate Search

Relevance search is mainly used for map route search, I do not know what else to use, just a brief introduction:

5. Advanced Search

Advanced Search is designed to allow accurate search results to match the ubiquitous application with ecommerce sites. The usual style is a bunch of filter criteria + search buttons.

Because the operation of the Drop-down box controls does not exist on the ISO platform, advanced search on the iOS platform is done through list jumps.

6. Filter

Most people do not like the use of advanced search, in order to accurately match the search results page, so in the results list page will add filters. The filter is actually two searches for the current subset. The design of the filter is very fastidious, later articles for the focus of explanation, this chapter will briefly introduce:

The domestic site because consider the right to sell banner advertising bit, the filter will be placed in the top position:

Foreign habits put the filter on the left side, you can generally look at the side of the map filter:

Most applications on the iOS platform will design a quick Search + filter Model:

7.Best bet

Best bet can be translated to a better choice, when the product operation for a period of time accumulated a certain amount of traffic, you can access the data to provide users with better choices. See how the Web site is doing this:

8. Search results

The end result of the search is presented in a list or window view, which is what the entire development team would like to see, but if there are no matching results, the designer will also need to encourage users to search for or replace the keyword again:

Summarize

Search is the most core of the Electronic business site A module, do this module requires excellent engineers and a certain amount of traffic, but as a designer must have enough knowledge of the module, so as to make a good experience design.