My presentation about Charms & Contracts on Windows Modern UI at WORLDWIDE HACKATHON FOR WINDOWS - ATHENS, GREECE

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.

30. Links
http://msdn.microsoft.com/en-us/library/windows/apps/
hh779072.aspx
http://blendinsider.com/technical/ux-guidelines-for-metro-style-
app-development-2011-10-21/
http://channel9.msdn.com/Events/Windows-Camp/Windows-8-
UX-Fundamentals-Training-Workshop-2012

31. Thank you!
Twitter: @maria_nas
Slideshare: http://www.slideshare.net/mnasioti