General Idea

A search bar provides an interface for text-based searches with a text box and buttons such as search and cancel. A search bar accepts text from users which can be used as input for a search.

^{Example of the Search Bar}

According to the Apple's Guidelines, a search bar can display optional elements, such as these:

• Placeholder text: The text showed in the element should state the function of the control (for example, 'Search' as shown above) or remind users in what context they are searching (for example, 'Google') so they can execute their search in a more accurate way.

• The Bookmarks button: This button can provide a shortcut to information users want to easily find again. For example, the Bookmarks button in the Maps search mode gives access to bookmarked locations, recent searches, and contacts.



^{Example of the Bookmark button}

• The Clear button: Most search bars include a Clear button which allows users to clear the contents in the text space in a single step. The button shows up when the user enters an input and hides when there is no text in the text field.



^{Example of the Clear button}

• The results list icon: This icon indicates the presence of results from a search done by the user. When users tap the results list icon, an application can display the results of their most recent search.



^{Example of the results list icon}

• A prompt: A descriptive title (prompt) can be placed above the search bar. A prompt is a short, complete sentence that provides an introduction or an specific information for the search bar.



^{Example of the prompt feature}

Apple's Spotlight

Spotlight is a resource provided by Apple that helps users quickly find anything on MacBook, including documents, emails, apps, songs, contacts, and more. Spotlight also provides suggestions (Spotlight Suggestions) from various sources (Wikipedia, Bing, Maps, news, and iTunes) so the user can have a complete set of information without leaving the app. Search results are composed by rich and interactive previews so the user can play song previews, get directions, send email, make phone calls, and more, directly from the results.

^{Spotlight initial screen}

The Spotlight menubar item is located near the upper-right corner of the screen, next to the Notification Center icon while its window appears in the upper-middle of the screen.

^{Localization of the menubar item and the Notification Center}

In Yosemite, Spotlight’s search results may show up in two different ways: immediate and detailed. As you begin to type, the word will be automatically completed according to what Spotlight guesses you are searching for. As an example, when you begin typing the word keynote, the application will complete the word in light-gray characters; to launch the application just press 'Enter'.

^{Example of the immediate search result}

The detailed way shows up right after the immediate one and it is on this mode that Spotlight shows the matches found in the system (including documents, emails, apps, songs, contacts, and more).

^{Example of the detailed search result}

It is also possible to have a more complete description of the items showed by Spotlight. Selecting one of the options on the left side, the right side of the application will show the item in detail.

^{Example of an item showed in detail}

Apple's website offers a tutorial to narrow down search results. When searching in Spotlight or the Finder, it is possible to add criteria to a basic search, perform Boolean queries, and search items’ metadata. This information can be found in https://support.apple.com/kb/PH18758?locale=pt_BR&viewlocale=en_US. The website also provides a step-by-step on how to use Spotlight: https://support.apple.com/kb/PH18828?locale=pt_BR&viewlocale=en_US

Variants

Some variants for searching in OS X Yosemite are: the search field in the web browser (in this case, Safari) and the search field inside text documents. Both follow the same characteristics mentioned above.

For the web browser:

^{Search bar in a web browser (Safari)}

^{The idea of showing results from various sources (from Spotlight)}

^{By approaching the arrow, the search field completes the URL (the same idea from Spotlight)}

For the search field inside documents:

^{Search bar inside the application for reading text documents}

^{Results of the search}

Priority Metrics

As said before, the usability metrics are essential for search because there are users that deal with this feature. Learnability, as shown, is an important metric when talking about search components; users should recognize the elements that compose the search box and know what to do.

Also, all the search components should help improve users' performances (efficiency) and turn the search experience as profitable as possible. That is what Apple's search functions try to do; provide the user with a complete environment that helps to find things faster and in a more accurate way.

Key Characteristics

Strive for consistency

Maybe consistency is the most important interaction design principle that a search must follow. Users must know what to do when facing a search component and, besides, the results shown by the search process must be accurate and consistant too.

General Idea

Search is a graphical control element, which users utilize within many apps. Despite their similar appearances, they provide a wide range of results such as web, device searches, a user's contact list, etc.

Typical Appearance

In general, all the searches look identical to each other.

^{Example of the Search box}

Purpose

The purpose of the search remains the same as a general seach for Windows RT 8.1.

Typical Behavior

Search behaviors differ depending on the purpose of the search.

• "zero input canvas": Windows RT 8.1 displays a "zero input canvas" before the user enters text in a search. It usually appears in the app canvas and shows recent search history, trending searches, and hints.

^{"zero input canvas"}

• Auto-suggest: Once the user starts typing, auto-suggest replaces "zero input canvas." It continuously updates suggestions or hints to improve efficiency of the input process as the user types.

^Auto-suggest

Events

As search boxes are composed by a text field and a button, the most relevant search events are enterText, clear and click. Secondary events include dragAndDropText.

State Diagram

State Diagram extracted from https://users.cs.jmu.edu/bernstdh/Web/CS345/h3/index.php

Component in Action

Example extracted from http://helixbing.blob.core.windows.net

Variants

Various examples of types of searches of Windows RT 8.1

^{A tool bar search}

^{Search in the app canvas}

^{Search in a navigation pane}

^{Inline search}

Priority Metrics

The priority metrics of search remains the same as a general seach for Windows RT 8.1.

Key Characteristics

Having a search field as the search entry point is necessary because it provides notable footprint.

^{Before clicking}

^{After clicking}

General Idea

Search is a graphical element of a user interface that allows users to sift and sort through a specified range of information. For example, on iOS 10 search will help a user sift through Contacts, Apps, websites, etc.

Typical Appearence

Typically for all Apple products, the search component remains the same across the platforms. So the example below for the iPhone platform is identical to OS X Yosemite because designers want to keep consistancy across platforms.

^{Example of the Search box}

Purpose

The purpose of search remains basically the same cross platform for Apple products as well as for other software.

Typical Behavior

The typical behavior for iOS 10 remains the same, in that it takes an input, the user presses the search button and the search results are shown.

Apple's Siri (Special Variant)

Much like Apple's Spotlight for the laptop/computer platform. IOS 10 provides a very unique search engine in Siri. Siri is Apple's built-in "intelligent assistant" which users can utilize voice commands to operate their mobile devices or, in the lense we are looking, search their mobile device and/or the internet. Also like Spotlight, Siri provides suggestions from the search commands given to "her" which are taken from sources like Google, Wikipedia, ect.

The interesting part about Siri, is that "she" can function as a search however because of the voice command, Siri represents a drastic variant because there is no search bar, but rather a microphone button in which it graphically displays the noise being made. When the user speaks, their search input shows up as text, and the search results show up once the user stops speaking.

After the search, the user is able to click the now available text bar in order to edit the search text (as shown below). This is where Siri becomes a more classic search component.

^{Siri Text Box Component}

Having Siri as an "intelligent assistant" for the iPhone platform allows for a new approach towards effeicency when it comes to operating an iPhone and search both one's device and the internet. For example, if you were to give the voice command "SnapChat", then your SnapChat app will open because Siri reconized the command, searched through your apps and chose SnapChat. "She" represents a new variant to the search component which does not necissarily follow the classic User Interaction of the search component.

Component In Action (Siri Search)

Example extracted from http://thiagonasc.com/page/2

Priority Metrics

Consistency and Lear

As previously mentioned, the usibility metrics for the search components do not change. The main ones are effiecncy and learnabilty. A search bar must be recognizable to users so they know what to do when they see it (learnability). This is why for Apple products they keep it the same across all platforms. The search component must stress efficiency becuase the is the main point of the search, it to find information as fast as possible.

Key Components

What makes a search a "good" search?

Consistency and Efficiency

Consistency is obviously number one in making a search component "good". And if we use Apple products as an example, they do well in keeping the search component consistent. Efficiency is the next key component, because that is the point of the search; to find information fast. However, in the example of Siri, consistency was devalued below efficiency, even though it is usually consistency which is held to the highest standard with search components. So when asking what makes a search "good"; both consitency and efficieny must be in the answer.