Design for charms & contracts
•Download as KEY, PDF•
0 likes•414 views
My presentation about Charms & Contracts on Windows Modern UI at WORLDWIDE HACKATHON FOR WINDOWS - ATHENS, GREECE
Report
Share
More Related Content
What's hot
What's hot (11)
Similar to Design for charms & contracts
Similar to Design for charms & contracts (20)
More from Maria Nasioti
Recently uploaded
Recently uploaded (20)
Design for charms & contracts
- 1. Design for Charms & Contracts Design your app for a great charms bar and contracts
- 2. Use of charms and app contracts to enable common app commands and avoiding duplicating app contract functionality with in the app’s canvas or in the app bar Contracts are the glue that binds apps together and to the system UI. Two apps that have implemented the same contract can work together to complete a broad or complex scenario. Some contracts are represented by charms.
- 3. Search Let your users search through your app's content quickly from anywhere in the system.
- 4. You can and should rely on the Search charm instead of creating search-specific UI to search your app's content. Also you can use the Search charm to respond to users' queries and display search results in an app page of your own design.
- 5. customizing suggestions and placeholder text in the search pane There are two types of suggestions an app can provide: query suggestions and result suggestions.
- 6. Query suggestions Query suggestions are auto-completions of the user's query text, and provide queries that the user might want to search for. User entered the query "word" and the "Wordament HD" and "WordPress.com" queries were suggested.
- 7. Always provide query suggestions to help the user search quickly.
- 8. Instead of entering the entire query, users can select one of the suggested queries and immediately execute the search. Should contain the user's current query text. Should directly reflect the results that your app can provide. The Weather app automatically completes the user's query to suggest cities for which the app can provide weather reports.
- 9. Result suggestions Result suggestions are strong or exact or matches to the user's query that the user may want to view immediately The Wordament app was suggested as a result (under the Recommendations label) for the "word" query.
- 10. If you want to recommend strong or exact matches for the user's query, use result suggestions to let the user go directly to the details of a particular result without the need to navigate to a search results page. Should consist of an appropriate image or thumbnail, a relevant title or label, and a brief description.
- 11. If you want to supply multiple result suggestions, use labeled separators to help users distinguish between results. If you provide both types of search suggestions (queries and results), you should provide only one result suggestion and it should be displayed last, at the bottom of the list of suggestions. These suggestions are based on the user’s search history with your app and will be shown first.
- 12. Tips Supply no more than five search suggestions. Use placeholder text in the search box to describe what users can search for in your app.
- 13. Designing a search results page Because you design the search results page for your app, you can ensure that the results presented to your user are useful and have an appropriate layout.
- 14. Structure
- 15. Let users see what they searched for (their query text).
- 16. Use a list view control and Search contract templates to bring the Windows 8 look and feel to your app.
- 17. Let users filter and/or scope search results from the search results page.
- 18. Indicate why a search result matches the query.
- 19. Let users navigate back to the last-viewed page after they look at the details for a result.
- 20. Inappropriate use of search If search is not the primary purpose of your app, don't add search UI to your app. Don’t place search UI in the app bar. Don’t use the Search charm to add a "find-in-page" feature to your app.
- 21. Share and data exchange Let your users share your app's content with other people they care about, receive shared content from other apps, and display it to your users.
- 22. The Share charm likewise provides a front-end to the new system-wide Share contract, which lets two apps share information. When people choose to share content, source apps provide the requested content in a shareable format, and display the metadata in the content preview. The chosen target app launches, reads the shared content, and displays whatever UI is appropriate.
- 23. If a sharing operation fails, Windows displays an informative message from the target app with steps to correct the problem when possible.
- 24. Best practices Respect user selections Set properties and use them to supply useful information (Adding a thumbnail when sharing an image or a link to a webpage can provide a visual reference to the user.) Provide a message to the user when sharing cannot be completed Handling errors and other issues Don't display a message that sharing is not supported by your app. Windows will display a standard message to the user if your app does not support the sharing contract.
- 25. Best practices Do not create a Share command on your app bar, or create a Share button in your app window or context menus. Keep the look and feel the same between your target app and your primary app. If your setup and sign-in interactions are simple (one-step) you should let users complete those tasks through the Share charm so that users don't have to change context.
- 26. Settings Provide both context-sensitive setting for the current Metro- style app, the desktop, or Start screen as well as a grid of system-level settings, and a link to the Metro-style PC Settings interface, that is available from anywhere in Windows 8. Key among the system-level settings, of course, is the Power icon, which lets you restart or shut down the PC.
- 27. The settings pane includes both app and system settings. The bottom part of the pane includes PC settings provided by the system, like volume, brightness, and power. The Settings charm is the one place to keep all settings for an app. Use the Settings charm as the single entry point to your app's settings. Fewer settings are better. Define smart defaults and decrease the number of settings as much as possible.
- 28. Choose which app features are accessed in app settings Provide access to configuration options that affect the behavior of the app as a whole and that are adjusted only occasionally, like choosing between Celsius or Fahrenheit Don't include features that are part of a typical app workflow, like changing the brush color in an art app. These features belong on an app bar or on the canvas Use the Settings charm to provide access to app info that's not needed very often, such as privacy statements, help, app version, or copyright info.
- 29. Inappropriate use of settings Don't add to the settings area any commands that are associated with common app workflow. These commands should be placed in the app bar or on the app canvas. Don't use the settings window to navigate into another part of the app. When the settings window closes, the user should be in the same place in the app that they were when they entered settings.
- 31. Thank you! Twitter: @maria_nas Slideshare: http://www.slideshare.net/mnasioti
Editor's Notes
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n