• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Alive with activity
 

Alive with activity

on

  • 1,392 views

My presentation about tiles and notifictions on Windows Modern UI at WORLDWIDE HACKATHON FOR WINDOWS - ATHENS, GREECE

My presentation about tiles and notifictions on Windows Modern UI at WORLDWIDE HACKATHON FOR WINDOWS - ATHENS, GREECE

Statistics

Views

Total Views
1,392
Views on SlideShare
450
Embed Views
942

Actions

Likes
0
Downloads
1
Comments
0

2 Embeds 942

http://localhost 936
http://www.linkedin.com 6

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
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n

Alive with activity Alive with activity Presentation Transcript

  • Alive With ActivityHow to visually attract your potential users to use your great newWindows App
  • TilesLet your users search through your apps content quickly fromanywhere in the system.
  • For the first time, apps have a unique opportunity to represent theircontent in a rich and engaging way to users on Start and re-engageusers even when their app is not running
  • Tiles come in two sizes: squareand wideSeveral template variations are provided for each size, with text,image(s), or a combination of text and image(s).Templates can have a single frame or two stacked frames, which iscalled a peek template.Tiles can be live (updated through notifications) or you can leavethem static
  • Two very important points toalways remember:If you use a wide tile, the user can resize the tile from wide to squareor square to wide at any time. You dont know which size is currentlydisplayed.The user can turn tile notifications off and on at any time.
  • Choosing between a square andwide tile sizeA square tile is required. You must decide whether you want toallow for a wide tile as well.
  • Choosing between a square andwide tile sizeA square tile is required. You must decide whether you want toallow for a wide tile as well.Wide tile content should always be fresh and regularly updated.
  • Choosing between a square andwide tile sizeA square tile is required. You must decide whether you want toallow for a wide tile as well.Wide tile content should always be fresh and regularly updated.Use a square tile with a badge if your app supports only scenariosaround short summary notifications—that is, notifications that canbe expressed through only a badge image or a single number.
  • Choosing between a square andwide tile sizeUse the wide size tile only if your app has new and interestingcontent to display to the user and those notifications are updatedfrequently (at least weekly).Square tiles show less content than wide tiles, so prioritize yourcontent. Dont try to fit everything that you can show in a wide tileinto a square tile.
  • Using default tilesUse the default tile image to reflect your apps brand, essentially asa canvas for your apps logo.If you are including a wide logo, consider the design relationshipbetween the wide and square tile images that you will provide.include the app name at the bottom of the tile if your logo does notinclude it.
  • NOTDont design the default tile to include an explicit text call to launchthe app, such as a tile that says "Click Me!"If your logo contains your apps name, dont repeat that name in thename field. Use one or the other, as shown here:
  • Peek Template: Examples squaretile
  • Examples wide tile
  • Examples wide tile
  • Use peek templates if your scenario has both primary andsupplementary content and contains both images and text. Goodexamples include notifications for an e-mail that included aphoto or a news story with a picture/header/body layout.A peek template grabs the users attention when it animates, sobe sure that it provides desirable content. Otherwise, you willjust annoy your user.
  • Why live tileTiles are the "front door" to your app. A compelling live tile can drawusers into your app when your app is not running. A userincreasingly values an app that they use frequently.
  • Why live tileTiles are the "front door" to your app. A compelling live tile can drawusers into your app when your app is not running. A userincreasingly values an app that they use frequently.A live tile is a selling point that differentiates your app, both fromother apps in the Windows Store.
  • Why live tileTiles are the "front door" to your app. A compelling live tile can drawusers into your app when your app is not running. A userincreasingly values an app that they use frequently.A live tile is a selling point that differentiates your app, both fromother apps in the Windows Store.If users like your live tile, a prominent placement of that tile in Startwill drive re-engagement with your app. Serendipitous discovery ofcool content in the app through the tile will make users happy.
  • Why live tileTiles are the "front door" to your app. A compelling live tile can drawusers into your app when your app is not running. A userincreasingly values an app that they use frequently.A live tile is a selling point that differentiates your app, both fromother apps in the Windows Store.If users like your live tile, a prominent placement of that tile in Startwill drive re-engagement with your app. Serendipitous discovery ofcool content in the app through the tile will make users happy.Personalized or tailored updates that use what you know about theuser, such as interests that you allow the user to specify through appsettings. Content relevant to the users current context.
  • Games You can use live tiles to entice a user to play by showing game invitations, missed invitations, or competitive scores from friends. You can use live tiles to notify a user that a game has new downloadable content or other updates.
  • Social status update, photos updates etc You can use live tiles to show event information including the location, time, and friends that are attending.
  • If you choose to use a live tile, consider how often the tile should beupdated.For personalized content, such as message counts or whose turn it isin a game, we recommend that you update the tile as the informationbecomes available.For nonpersonalized content, such as weather updates, werecommend that the tile be updated no more than once every 30minutes. This allows your tile to feel up-to-date withoutoverwhelming your user.
  • Inappropriate use of tilenotifications.Dont use live tiles if you dont have interesting, new, personalizedcontent for the user.Dont use live tiles if the only interesting thing to communicate is theusers last state. Utility apps, developer tools like Microsoft VisualStudio, and browsers that would only show thumbnails of the userslast session should not use live tiles.Dont use live tiles to spam the user or show advertisements. Thatwill get you kicked out of the store.
  • Other design considerations When determining how to convey an apps brand information in a tile, choose either the apps name, as shown here: These items are originally defined in the app manifest and the developer can choose which of the two to display in each subsequent notification. However, after you make the choice of name or logo, you should stick with it for the sake of consistency.
  • NOTDont use the image or text elements to display app brandinginformation in a tile notification.A live tile can change its appearance considerably fromnotification to notification, but the location of the name/logo isconsistent. This ensures that users can find their favorite appsthrough a quick scan, seeing that information in the same placeon each tile. If your app doesnt leverage the provided brandingelements (name and logo), then it can be harder for users toquickly identify your apps tile.
  • Toast notification overviewA toast notification is a transient message to the user thatcontains relevant, time-sensitive information and provides quickaccess to related content in an app.
  • It can appear whether you are in another app, the Start screen,the lock screen, or on the desktop.
  • It can appear whether you are in another app, the Start screen,the lock screen, or on the desktop.Toasts should be viewed as an invitation to return to your app tofollow up on something of interest.
  • It can appear whether you are in another app, the Start screen,the lock screen, or on the desktop.Toasts should be viewed as an invitation to return to your app tofollow up on something of interest.A toast notification can contain text and/or images, butsecondary actions such as buttons are not supported.
  • It can appear whether you are in another app, the Start screen,the lock screen, or on the desktop.Toasts should be viewed as an invitation to return to your app tofollow up on something of interest.A toast notification can contain text and/or images, butsecondary actions such as buttons are not supported.A toast notification appears in the upper-right corner of yourscreen.Toast notifications can be activated, dismissed, or ignored by theuser.
  • It can appear whether you are in another app, the Start screen,the lock screen, or on the desktop.Toasts should be viewed as an invitation to return to your app tofollow up on something of interest.A toast notification can contain text and/or images, butsecondary actions such as buttons are not supported.A toast notification appears in the upper-right corner of yourscreenToast notifications can be activated, dismissed, or ignored by theuser.When a user taps or clicks the notification, the associated app islaunched and the user can expect that the resulting view isrelated to the content of the notification. It is the onlymechanism by which one app can interrupt a user in anotherapp.
  • 2 typesStandard toast:This toast remains on the screen for seven seconds, playing a briefsound to alert the user when it appears. The standard toast is bestfor notifications such as an IM contact sign-in, or a social mediaupdate.Long-duration toast:This notification looks the same as a standard toast but stays on thescreen for 25 seconds and optionally can play longer, loopingaudio. This type of toast is used in situations where you want tograb the users attention.
  • Inappropriate use of toastnotifications.Don’t include text telling the user “click here to...”Don’t notify the user of something they didn’t ask to be notifiedabout.Don’t use for non-real time notifications.Don’t use it for a critical alert.
  • 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