Search: integrating into the Windows 8 search experience

1. APP-406T Search: integrating into the Windows 8 search experience PriyaVaidyanathan Senior Program Manager Microsoft Corporation

2. Agenda • Search in Windows 8 • 3 steps to implementing the Windows Search contract • Search customizations • Best practices for building great search experiences You’ll leave with examples of how to • Create great apps that integrate with Windows Search

3. Users often search to find the content they care about, be it on the web, local machine, network, or in an app.

4. Apps have rich content, but users have to find and launch the app before searching in it.

5. Search contract makes your app searchable from anywhere in the system.

6. demo Search in the system & apps By implementing the search contract, apps are automatically populated in the search list

7. Search is universally accessible, contextual to your app and always just a single swipe away.

8. Search anatomy 1 2 • Search box is scoped to the main app on screen • Query suggestions provided by the main app on screen • Autocompletes to terms for which the app has search results • List of installed Metro style apps that have implemented the search contract 3

9. Search anatomy 4 • Result suggestions provided by the main app on screen • Must include a thumbnail and title • Indicates a strong or exact match result • Takes users directly to the details of the result

10. 3 Steps to implementing the Search Contract

11. demo Integrating with search in a sample app Adding search via Visual Studio Search activation and query submitted Providing query suggestions & ich suggestions

12. Search settings & events Manifest Declaration Search Pane Events Search Pane Settings Search Registration Search History (on by default) Search Activation Query Submitted File Access Capability Local Content Suggestions Set placeholder text Suggestions Requested

13. Search activation User Search Pane Search App User selects a Search location Activate App for Search Search Activation Event Query text? No Yes Show Search results view Load previous state

14. Query submitted Search App User Search Pane Query Submitted Event User enters a query and hits Search Submit query to App User selects a query suggestion Query changed? No Yes Show Search results view Show previous search results view

15. Suggestions requested User Search Pane Search App User types in Search box Show search history that matches Suggestions Requested Event Request suggestions from App HandleAsync? Yes No Show suggestions from App Add suggestions to Search Suggestion Collection Request Deferral Add suggestions to Search Suggestion Collection Complete Deferral

16. Search contract recap • Register for search • You can do this easily using visual studio templates • Register and respond to these 3 events: • Search activation • Query submitted • Suggestions requested • Provide search suggestions

17. Tips when responding to search events • Don’t put one time start up logic in your activation handler • Help the user get back to what they were doing prior to search • Search activation when you are snapped will make your app the main app • Preserve filters that have been applied if users are switching quickly

18. Search customization

19. Search placeholder text • Search placeholder text is the hint shown in the search box when it is empty • Use this to indicate what users can search for in your app • This will automatically be cleared when the user starts typing

20. Setting placeholder text • //Set the cue text via the placeholderText property in the search //pane • varwinsearch=Windows.ApplicationModel.Search; • winsearch.SearchPane.getForCurrentView().placeholderText= • “Places NearMe";

21. Separators • Separators can be used to group search suggestions • Provide a label when using separators so it is clear what the groups are

22. Adding a search separator • // Code that is called when suggestions requested event is fired • function onSuggestionsRequested(e) { • varquery = e.queryText.toLowerCase(); • varsuggestions = e.request.searchSuggestionCollection; • //Add query suggestions to the search suggestion collection • suggestions.appendSearchSeparator(“Friends”); • //Add more query suggestions • }

23. Best practices for building great search experiences

24. Should your app integrate with search? • Yes!!! If you would be building search in your app • Use the search charm • You do not need a search box or chrome in your app • Probably not, if: • your app needs a ‘find in doc’ functionality like a PDF reader • you are a game, novelty or utility app

25. Search results layout • Common ways to represent search results are in a list or grid • Results are ordered top to bottom, left to right • Use the Listview control to bring the Windows 8 look and feel to your app • Avoid putting the most relevant or important content on the right edge.

26. Search results layout • Give users a way to get back to their prior task in the app • Indicate what the user searched for • Indicate the number of results found

27. Filters • Filters are essential to helping users quickly find the content they care about • Indicate the number of results available with each filter • Give users a way to remove filters or see all results

28. Provide suggestions • Provide suggestions to help the user find the content they care about easily • Use query suggestions to help them complete their search term quickly • Use result suggestions to help user quickly get to the most relevant result

29. Recap

30. Recap • Implementing the search contract makes your app searchable from anywhere in the system! • You can design one search experience that works everywhere • The search template incorporates a lot of the best practices for great search experiences!

31. Related sessions • [APP-741T] Metro style apps using XAML: Make your app shine • [APP-210T] Build data-driven collection and list apps using ListView in HTML5 • [APP-405T] Share: your app powers the Windows 8 share experience • [APP-408T] Integrating with the Windows device experience • [APP-398T] How to declare your app’s capabilities

32. Further reading and documentation • SDK Samples: Adding Search • Example of how to implement the search contract • JavaScript, C# and C++ code samples • Windows Application contracts • Search API Reference

33. thank you Feedback and questions http://forums.dev.windows.com Session feedbackhttp://bldw.in/SessionFeedback

34. © 2011 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries. The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.