{"id":267,"date":"2011-12-26T08:33:27","date_gmt":"2011-12-26T08:33:27","guid":{"rendered":"http:\/\/gusclass.com\/blog\/?p=267"},"modified":"2011-12-20T01:42:20","modified_gmt":"2011-12-20T01:42:20","slug":"rehash-8-great-traits-of-metro-style-apps","status":"publish","type":"post","link":"http:\/\/gusclass.com\/blog\/2011\/12\/26\/rehash-8-great-traits-of-metro-style-apps\/","title":{"rendered":"Rehash: 8 great traits of Metro style apps"},"content":{"rendered":"

One of the most impactful presentations at the BUILD conference was Jensen Harris’\u00a08 great traits talk<\/a>.\u00a0 In this talk, Jensen locks down on the 8 most important things for developers and designers to be aware of when creating and porting apps to Windows 8.\u00a0 This post tries to summarize the various points made in the talk based on the 8 traits:<\/p>\n

    \n
  1. Metro style design<\/li>\n
  2. Fast and fluid<\/li>\n
  3. Snap and scale<\/li>\n
  4. Use the right contracts<\/li>\n
  5. Invest in great tile<\/li>\n
  6. Feel connected and alive<\/li>\n
  7. Roam to the cloud<\/li>\n
  8. Embrace metro principles<\/li>\n<\/ol>\n

    Metro style design<\/h1>\n

    What Metro style design means is that specific look and feel
    \nis adhered to by applications.\u00a0 This
    \nmeans several things but most notably:<\/p>\n

      \n
    • Content before chrome<\/li>\n
    • Metro layout<\/li>\n
    • Edges<\/li>\n
    • Swipes and gestures<\/li>\n<\/ul>\n

      Content before chrome<\/h2>\n

      No unnecessary decorations should exist in your app. What you should see in your app is a focus on the actual content.\u00a0 If you have a photos app, show the photos, if \u00a0you have a stock app, show the stocks.\u00a0 Present the user with their content first, as opposed to controls or dialogs.<\/p>\n

      Metro layout<\/h2>\n

      Consistent look and feel across apps is going to be a key feature of Windows 8.\u00a0 This means that applications should have consistent placement of features and layout.\u00a0 By using the application templates, you will get this for free.<\/p>\n

      Edges<\/h2>\n
        \n
      • Left and right are for system-wide things
        \n(switch apps \/ charms)<\/li>\n
      • Top and bottom (app bar) are for commands\n
          \n
        • Be conscious about hiding\u00a0 \/ showing the bars (e.g. PaintPlay vs. Blog reader)<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n

          Swipes and gestures<\/h2>\n

          Swiping in \u201cthe direction\u201d of content should move it.\u00a0 Going opposite the direction of content should perform selection \/ control of content. Typically direction of content will be in the \u201clonger\u201d axis of the on-page content.\u00a0 If you have a web page, the content would be top-bottom, if you had something like a blog reader, columns would represent blogs so content should scroll left-right.<\/p>\n

          Fast and fluid<\/h1>\n

          When we talk about fast and fluid, we\u2019re referring to the following principles:<\/p>\n

            \n
          • Performance<\/li>\n
          • Animations<\/li>\n
          • Touch first<\/li>\n<\/ul>\n

            Performance<\/h2>\n

            Applications should be responsive.\u00a0 Measure this to maintain a high quality bar for perf.<\/p>\n

            Animations<\/h2>\n

            Use the built-in animations to get various styling for free.\u00a0 Use animations consistently and sparingly.\u00a0 Should be used to prevent the user from being startled or surprised.
            \nFor example, images should \u201ccome in\u201d from the edges in a photo app.<\/p>\n

            Touch First<\/h2>\n

            \u201cA screen without touch is a broken screen\u201d \u2013 people will be using touch first on many device form-factors.\u00a0 Assume that this is the primary experience and make sure that gestures are correctly mapped within your app.<\/p>\n

            Snap and scale<\/h1>\n

            Apps should run on a every device from 7-in slate to television screen sized displays.<\/p>\n

            In order to be a good citizen in the Windows 8 application ecosystem, your app should at a minimum support a number of things:<\/p>\n

              \n
            • 300 pixel wide snap view<\/li>\n
            • 1024×768 view for when shown with snap and also as the minimum supported resolution<\/li>\n<\/ul>\n

              Microsoft anticipates that the most popular form-factor for slates running Windows 8 will be a wider resolution format and that a typical resolution will be 1366×768.\u00a0 For this reason, the next recommended resolution is going to be 1366×768, the most common view that your app will run in.<\/p>\n

              Support for scaling should be provided by giving various resolution resources for non-vector graphics in 3 scales:<\/p>\n

                \n
              • 100%<\/li>\n
              • 140%<\/li>\n
              • 180%<\/li>\n<\/ul>\n

                In some cases, you should support portrait view as well.<\/p>\n

                Use the right contracts<\/h1>\n

                Windows 8 now has integrated contracts for:<\/p>\n

                  \n
                • Search<\/li>\n
                • Share<\/li>\n
                • Connect\n
                    \n
                  • Play-to<\/li>\n
                  • Print<\/li>\n
                  • Settings<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n

                    Invest in a great tile<\/h1>\n

                    Your title is your opportunity to keep your users engaged with your app from the start screen.\u00a0 Embrace the principle of \u201calive and connected\u201d by having updates happening on the tiles.\u00a0 Tiles are an extension of your app, makes it feel always running, connects with people emotionally.<\/p>\n

                    Secondary tiles can be created, e.g. can pin weather for multiple cities, can pin alerts from multiple blogs, etc.<\/p>\n

                    Connected and Alive<\/h1>\n

                    Should \u201cadd life\u201d to your application with notifications, live tiles, and animation.\u00a0 Applications should have a \u201cpersonality\u201d to them and this personality should be exposed
                    \nthroughout the application including but not just limited to its tile.<\/p>\n

                    Notifications \u2013 flyouts.\u00a0 These should appear briefly and should not be intrusive to the user\u2019s experience.\u00a0 In other words, you should not be popping up toast notifications every time the user receives an email, but maybe for meetings it makes sense.\u00a0In other words, a notification is something that will cause the a problem for the user should they not receive the message.\u00a0 If there are not negative consequences, you should use the tile for exposing information to the user.<\/p>\n

                    Missed notifications should also appear on the tile.<\/p>\n

                    Roam to the cloud<\/h1>\n

                    Applications should behave in the following ways:<\/p>\n

                      \n
                    • When you come back to an app, it should be as if you never left<\/li>\n
                    • When an app state is changed on one device in a way that it should be changed on all devices, you should be able to go to another device and pick up where you left off<\/li>\n
                    • Settings should roam with applications to other devices<\/li>\n<\/ul>\n

                      This is possible through Live ID synchronization to the cloud.\u00a0 In addition, this means that\u00a0apps should embrace the rich Windows Live ecosystem.\u00a0 Why recreate the calendar, cloud storage, and so on when these tools already exist and can be easily integrated with apps?<\/p>\n

                      Embrace Metro principles<\/h1>\n

                      There\u2019s more though:<\/p>\n

                        \n
                      • Light and dark content templates<\/li>\n
                      • Authentically digital \u2013 this means that your app doesn\u2019t try to be something it\u2019s not \u2013 a slate is not a \u201cpen and notebook\u201d it\u2019s not a slide rule.\u00a0 Take advantage and embrace the fact that this is a digital medium and you can present things better than you\u2019re limited in the real world.<\/li>\n
                      • Do more with less \u2013 \u201cperfection is not achieved when there\u2019s nothing more to add but nothing left to take away\u201d<\/li>\n<\/ul>\n

                         <\/p>\n

                        That’s it.\u00a0 A brief glean over the points talked about but hopefully helpful if you’re looking for the list or want a summary of what makes a great app.<\/p>\n","protected":false},"excerpt":{"rendered":"

                        One of the most impactful presentations at the BUILD conference was Jensen Harris’\u00a08 great traits talk.\u00a0 In this talk, Jensen locks down on the 8 most important things for developers and designers to be aware of when creating and porting…<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[1],"tags":[],"amp_validity":null,"amp_enabled":true,"_links":{"self":[{"href":"http:\/\/gusclass.com\/blog\/wp-json\/wp\/v2\/posts\/267"}],"collection":[{"href":"http:\/\/gusclass.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/gusclass.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/gusclass.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/gusclass.com\/blog\/wp-json\/wp\/v2\/comments?post=267"}],"version-history":[{"count":3,"href":"http:\/\/gusclass.com\/blog\/wp-json\/wp\/v2\/posts\/267\/revisions"}],"predecessor-version":[{"id":269,"href":"http:\/\/gusclass.com\/blog\/wp-json\/wp\/v2\/posts\/267\/revisions\/269"}],"wp:attachment":[{"href":"http:\/\/gusclass.com\/blog\/wp-json\/wp\/v2\/media?parent=267"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/gusclass.com\/blog\/wp-json\/wp\/v2\/categories?post=267"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/gusclass.com\/blog\/wp-json\/wp\/v2\/tags?post=267"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}