Instant Search - Part 3: The New User Interface

All of the user research and testing data was carefully applied to the design of the new Outlook 12 Search experience. The goal was to stay true to the tenets mentioned earlier: simplicity, speed, and always being available. 

The key to the new search experience is the ever-present Search Pane that sits at the top of the message list in each module. 

The Search Box is where the user can type anything that they want to search for. Again, the textbox is located at the top of the message list and is always on, ensuring the user can quickly and easily filter their current view using a search term. The icon is actually a multi-state button that will allow you to easily understand what function it currently serves (clear search, commit new search, stop search, etc.).

It also introduces a new scoping menu that allows for easy access to your recent searches, an up-scope link to All Mail Items and one to your desktop search utility. 

The textbox has the ability to accept freeform alphanumeric text input including special characters that serves as the input for construction of a query to be passed off to the indexer. For example, simple input to the textbox may be terms like “sea”, “search”, “search plan”, or “mike search plan”.

Query Builder

When simply typing text into the Search Box doesn’t return the desired results, the user can choose to expand the Search Box to reveal additional controls to specify what they’re looking for. This is called the Query Builder:

The Query Builder plays an important role in educating users about the new Microsoft Query Syntax. The design is that each time a value is entered or change in one of the criterion within the Query Builder, it is restated in the Search Box’s textbox. This provides a clear connection between using the additional fields found in the builder and creating a more restrictive query.

• An individual criterion (meaning the combination of a property, implied operator and value) is used to filter or focus down the search results.
• Entering text or changing a value of a criterion causes a restatement of that property/value pair in the Search Box’s textbox. When restatement occurs, it takes the form of:

<property>: <value>

some examples would be:

from: Michael
returns all messages with Michael in the from field

about: paris
returns all messages with ‘paris’ in the body, subject, or attachments

The great part about the Query Builder is what it can teach you. As you become more familiar with the Advanced Query Syntax, you can start typing it in without using the builder. For example, I frequently do searches for “from:aaron” to find mail from my manager and “sent:today” to restrict it even further.

Interactive Results List

To provide an enhanced visual and interactive experience when working with results from a query, Outlook 12 Search will provide two new pieces of functionality: word-wheeling and hit-highlighting.

Word-wheeling (or “Search as I type”) refers to the automatic filtering of the items in the current view based on what the user types in. This filtering happens automatically as the user begins to type and they pause for a brief (half-second) period of time. If the user modifies the search terms in any way, the word-wheeling waits for that pause and then immediately updates the view. This was a big shift from traditional search engines that require you to “commit” the search by pressing a “Search” or “Go” button, but enables the user to have search system that instantly responds to them as they enter terms into the Find Pane.

Hit-highlighting solves another problem that users encountered with previous search solutions, and that is the inability to determine why a certain item was returned in a results list. You can imagine if your email contains a very long thread and you search for a single word that occurs only once in the document you would be hard-pressed to find it. Hit-highlighting helps the user understand why the results they are seeing were returned and also to locate the required term inside the message.

Here’s an example of a simple search I performed in my “CNN Travel” RSS subscriptions folder. I entered the term “ski” and was presented with the hit-highlighted results list shown below: