Design for charms & contracts
Upcoming SlideShare
Loading in...5
×
 

Design for charms & contracts

on

  • 533 views

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

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

Statistics

Views

Total Views
533
Views on SlideShare
526
Embed Views
7

Actions

Likes
0
Downloads
0
Comments
0

2 Embeds 7

http://www.linkedin.com 6
https://www.linkedin.com 1

Accessibility

Categories

Upload Details

Uploaded via as Apple Keynote

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • \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

Design for charms & contracts Design for charms & contracts Presentation Transcript

  • Design for Charms &ContractsDesign your app for a great charms bar andcontracts
  • Use of charms and appcontracts to enable commonapp commands and avoidingduplicating app contractfunctionality with in the app’scanvas or in the app barContracts are the glue that binds apps together and to thesystem UI.Two apps that have implemented the same contract can worktogether to complete a broad or complex scenario.Some contracts are represented by charms.
  • SearchLet your users search through your apps content quickly fromanywhere in the system.
  • You can and should rely on theSearch charm instead of creatingsearch-specific UI to search yourapps content.Also you can use the Search charmto respond to users queries anddisplay search results in an apppage of your own design.
  • customizing suggestions andplaceholder text in the searchpaneThere are two types of suggestions an app can provide: querysuggestions and result suggestions.
  • Query suggestionsQuery suggestions areauto-completions of theusers query text, and providequeries that the user mightwant to search for.User entered the query"word" and the "WordamentHD" and "WordPress.com"queries were suggested.
  • Always provide querysuggestions to help the usersearch quickly.
  • Instead of entering the entirequery, users can select one ofthe suggested queries andimmediately execute thesearch.Should contain the userscurrent query text.Should directly reflect theresults that your app canprovide.The Weather appautomatically completes theusers query to suggestcities for which the app canprovide weather reports.
  • Result suggestionsResult suggestions are strongor exact or matches to theusers query that the user maywant to view immediatelyThe Wordament app wassuggested as a result (underthe Recommendations label)for the "word" query.
  • If you want to recommendstrong or exact matches forthe users query, use resultsuggestions to let the user godirectly to the details of aparticular result without theneed to navigate to a searchresults page.Should consist of anappropriate image orthumbnail, a relevant title orlabel, and a brief description.
  • If you want to supply multipleresult suggestions, uselabeled separators to helpusers distinguish betweenresults.If you provide both types ofsearch suggestions (queriesand results), you shouldprovide only one resultsuggestion and it should bedisplayed last, at the bottomof the list of suggestions.These suggestions are basedon the user’s search historywith your app and will beshown first.
  • TipsSupply no more than five search suggestions.Use placeholder text in the search box to describe what users cansearch for in your app.
  • Designing a search results pageBecause you design the search results page for your app, you canensure that the results presented to your user are useful and have anappropriate layout.
  • Structure
  • Let users see what they searched for (their query text).
  • Use a list view control and Search contract templates to bring theWindows 8 look and feel to your app.
  • Let users filter and/or scope search results from the searchresults page.
  • Indicate why a search result matches the query.
  • Let users navigate back to the last-viewed page after they look atthe details for a result.
  • Inappropriate use of searchIf search is not the primary purpose of your app, dont add search UIto 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 yourapp.
  • Share and data exchangeLet your users share your apps content with other people theycare about, receive shared content from other apps, and displayit to your users.
  • The Share charm likewise provides afront-end to the new system-wideShare contract, which lets two appsshare information.When people choose to sharecontent, source apps provide therequested content in a shareableformat, and display the metadata inthe content preview.The chosen target app launches,reads the shared content, anddisplays whatever UI is appropriate.
  • If a sharing operation fails, Windows displays an informativemessage from the target app with steps to correct the problemwhen possible.
  • Best practicesRespect user selectionsSet properties and use them to supply useful information (Adding athumbnail when sharing an image or a link to a webpage canprovide a visual reference to the user.)Provide a message to the user when sharing cannot be completedHandling errors and other issuesDont display a message that sharing is not supported by your app.Windows will display a standard message to the user if your appdoes not support the sharing contract.
  • Best practicesDo not create a Share command on your app bar, or create a Sharebutton in your app window or context menus.Keep the look and feel the same between your target app and yourprimary app.If your setup and sign-in interactions are simple (one-step) youshould let users complete those tasks through the Share charm sothat users dont have to change context.
  • SettingsProvide both context-sensitive setting for the current Metro-style app, the desktop, or Start screen as well as a grid ofsystem-level settings, and a link to the Metro-style PC Settingsinterface, that is available from anywhere in Windows 8.Key among the system-level settings, of course, is the Powericon, which lets you restart or shut down the PC.
  • The settings pane includes bothapp and system settings.The bottom part of the paneincludes PC settings provided bythe system, like volume, brightness,and power.The Settings charm is the one placeto keep all settings for an app. Usethe Settings charm as the singleentry point to your apps settings.Fewer settings are better. Definesmart defaults and decrease thenumber of settings as much aspossible.
  • Choose which app features areaccessed in app settingsProvide access to configuration options that affect the behavior ofthe app as a whole and that are adjusted only occasionally, likechoosing between Celsius or FahrenheitDont include features that are part of a typical app workflow, likechanging the brush color in an art app. These features belongon an app bar or on the canvasUse the Settings charm to provide access to app info thats notneeded very often, such as privacy statements, help, appversion, or copyright info.
  • Inappropriate use of settingsDont add to the settings area any commands that are associatedwith common app workflow. These commands should beplaced in the app bar or on the app canvas.Dont use the settings window to navigate into another part ofthe app. When the settings window closes, the user should be inthe same place in the app that they were when they enteredsettings.
  • Linkshttp://msdn.microsoft.com/en-us/library/windows/apps/hh779072.aspxhttp://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
  • Thank you!Twitter: @maria_nasSlideshare: http://www.slideshare.net/mnasioti