The Search function in a modern UI.


In all modern application nowadays is implemented a search function. This becomes handy when you’re searching for a specific feature within your application or simply trying to navigate quickly to the desired feature you’re looking at. But Modern UI and especially Windows 8 tells a new story, where the content is located right at the center of the stage. And, as the guest star, it requires all the place around. That led to a new paradigm in the UI, new ways to organize the layout of the application. Let’s see precisely how it works, or should work.

Search is not find.

First of all, you need to have a clear statement about search. The search function let you search within the application for an item. That is the definition. This can be easily confused with the Find function, which let you search within the actual page or layout for a keyword. See the difference? If you need to find a sentence in the page you’re browsing, you can use a Find tool. But you will have to implement such a tool in your application bar, for there is no built-in find options in the SDK of Windows 8.

The search function is quite different, because it let you search within the entire app for a content. Basically, it is done by looking for a character string throughout the app. When all the related items are found, they’re displayed in a result page (you have to design that page, also), gathering all the references found.


The search and the Charm

Of course, if you’re using Windows 8, you must already have found the charm bar, on the far right of the screen. You can make this bar appear simply by swiping your finger on the right side of the screen. Do you notice the search icon the upper part of the search bar? This is the main Search item of Windows 8. I allows you to search for a specific application installed on your system, when you invoke this function on the Start Menu of your favorite OS. Fine. But it also work in ALL the applications in Modern UI mode. Inside a specific application, you can open the charm toolbar and invoke the Search function to find out where inside the app is located the item you’re looking for (well, almost all of the applications…). But you will shortly notice also that other applications are available for the specific search, organized in a list, just under the search field. This is where Windows 8 exposes all the applications that can search (inside those the Search option is implemented) to achieve a kind of cross-app search. For example, if you’re looking for the item “choucroute”, you can search that item inside the app which is open, but you can also search for a “choucroute” inside the News app. isn’t that fine and smart? Note that the system learn from your actions and displays on first positions the app you mostly search within. Smart, I said…


The search options located in the Charm bar


The search bar


Yes, the question is: Why is the search reported to the Charm Bar? Well, for two major reasons. The first one is of course to leverage the ModernUI concepts, and to place the content and only the content at the heart of the user experience. The search features should be pooled within the OS interface, to free some valuable place for the content. But also to induce a new reflex for this new contract: Each time you will need to search, whenever you want it, wherever you are, you can open this Charm bar.

This means that you have to forget your long-time habits, and avoid to place you search textbox in the layout of the application. Eventually, if you want a clear “Call to action” for the search engine, you may add a tile or a button with the classical magnifier icon, but be aware that this kind of stuff is less and less supported.

And if my app is doing searches?

Well, it is the only case where the search textbox can be integrated within the layout. For example, download and open the Bing Modern App. The business of the app is actually to do searches… Well, it has a search box inside the layout, but only that. Nothing more. Try to search something by entering a value in the search box, let’s say “Michel ROUSSEAU, Microsoft”. Tadaaa, you automatically drop down on a nice result page. Fine. That was what I was hoping for. Now, open the charm bar and invoke the search contract. Do the same research. Do you see how the search bar in the layout faded as you type within the search contract, indicating that you’re searching from another location? That behavior should be the only one when your app is designed to search.


Bing and the search panel opened

Ok, I will use the search contract…

Yes, you’re absolutely right. But you can still improve the search without opening the charm bar...Do your app needs the user to type something (is there a text box to fill in)? No? So you can surely add a little shortcut to your app! Imagine that you start typing something, and automatically, the search box opens to let you dive deep in the items you’re looking for! Wouldn’t that be nice? Well, look around and you will soon find out that this behavior is right the same as the one that rules the search on the Start menu. Try to type something from the Start menu and the search bar opens. Pure magic.

Another ways to improve?

Yes. Nothing is more deceptive then letting the user do the job. So help him as much as you can do. First, remember how the search works: It’s only based on a character string look out. And generally, when it returns results in the search engine, you finally display them on a page with filters, choices, and so on, to refine the number of items. But you can make the result page a little more accurate by simply adding some suggestions as the user types the string in. That allows to have a clean feedback on how the search is done (more letters, less results), a help on what is out of scope (after only two letters, I have no more items out), and to provide a quick access to the item I’m looking for by simply clicking on the right entry. Remember to highlight the typed letters in the suggested items to improve the confidence of the user and help avoid typos.


The Microsoft Store, displaying the previous researches, and a recommendation.

Finally, I have my request done.

And probably, if the application is content oriented, it results in a big amount of items…I think it’s time to reduce the complexity. First thing that you should immediately do, is to indicate the number of items available for the actual search. It may be acceptable to browse through twenty results, but I don’t think I would sneak through 200 items.

Just under the overall number of items, you should lay down some controls to refine the search (by date, categories, semantics, families, prices and so on). Then and only when you know that the filtered search cannot pick up more than 50 single results, you can display the items, by any way that is representative of the core function of the application ( relevance, high prices, number of sub items). Do not forget to add some more actions to your result page, such as “Start a new search”, “Reset all the filters” or “refresh the results” and gather all those actions in the Application bar, in the bottom of the layout. Now, you are probably done with your search. One last thing not to forget is that the search can be performed through all the installed apps that can search. If your search procedure is not quick or relevant enough, the user will soon turn to another application sharing the same content as yours! So try to be smart, personal and relevant while defining the role of the search part of your app.


The result page, with additional filters

Comments (0)

Skip to main content