All right, let's take a look at the search bar. Search Bar is used for search. You guessed it right? People use a search bar to search through a large collection of values, you enter text and the results are displayed. Pretty amazing, right? This is how a normal behavior of the search bar looks like.
By default, it has a placeholder text and an icon. When you tap into it, the search bar transitions to the place of the navigation bar, and the Cancel button appears to go back to a previous state of the input cursor appears as well as the keyboard and you can start typing. After start typing, the placeholder disappears and the clear icon button appears, which clears the entered query. Also, the suggestions appear as you type so that you can choose one of them to perform this search without typing any more characters. After you're done typing Press search on the keyboard and get the results. Not that when a search bar is placed onto the navigation bar, as in our example, the search bar automatically transitions into the navigation bar.
When users initiate a search, see top and help. The stop bar animates a way to save space. Take a look at this example. Our search bar can be used to filter the current list. So, as was said before, should have a placeholder text icon in the search bar. The placeholder text can be something like search clothing, shoes and accessories or simply search as a reminder of the context being search.
It can also contain a bookmark so I can that can provide a shortcut to the information users want to easily Find again. For example, the bookmarks button in the map search mode keeps access to mark locations, recent searches and contacts. the clear button that appears upon typing lets you erase the content with one tap. A descriptive title, called the prompt can be placed above the search bar. A prompt is a short complete sentence that provides introductory or app specific context for the search bar. weather app for example, uses text above the search field to let people know they can enter a city zip code or a port location.
Here's another example of a prompt searcher emails here buddy. This search bar can also have the results list icon. This icon indicates the presence of search results when users stop the results list icon and app can display the results of their most recent search. I haven't seen this used much. But it's a handy thing to include. Let's say you search for something and then went back then this icon should appear in the search bar.
And you could easily go to your last search results again. Captain Obvious wants to remind us use a search bar to enable a search in your app. And don't use just a regular text field for search. Because it doesn't have the standard search bar appearance and behavior that the users expect. You can have a search bar directly in the top part of the navigation bar. There are two styles of search bars permanent that is the default one and minimal.
The permanent style has a translucent background and an opaque search field. The minimum style has no background And then translucent search field. Mail employs the prominence style, while music uses the minimal style. Pick a search bar style that reflects the importance of search in your app. If search is a primary function in your app, use the default prominence style of the search bar. searches in frequent use the minimal style just use the salad works best for you.
Now, I search bar might work in conjunction with the scope bar, which looks like a segmented control and helps users define the scope of the search. When the search bar is a prison is called bark and appear near. A scope bar adopts the same appearance which is specified to put the search bar here's some information beyond the guidelines. A scope bar can be present right away, appear after you initiate In the search, or appear even only after the searching is done. Now let's take a look at the Facebook app. It has a custom style search bar right at the top of the navbar.
It gives you very comprehensive suggestions while you search. You can identify the categories we are different icons, and you can see some extra information for each suggestion. After you tap search or choose any of the suggestions, you have taken to the results view, where you have the Back button, the search bar present in case you want to refine the search query, and a custom looking score bar, which lets you switch between different categories of the search results. Actually, I'm not sure it's technically even a scope bar, or segmented control. What's important for us to know is that this is a pretty good UI flow for search. Facebook's search bar on iPads looks similarly what's worth mentioning is that an iPad, there can be quite a few combinations of where the search bar can be placed.
The URL address bar, which is not specified in the guidelines, by the way, is essentially also a search bar and behaves in a similar way. Additionally, it works in conjunction with the progress view, which shows the progress of the page load and has a stop icon displayed when the page has been loaded. Stop icon changes to a reload icon. Once a page is loaded. It might also have a lock icon on the left when the connection is a secure one. It might also have a reader mode.
If the website supports it, you can switch to it and then also have some controls over it via our popover