Treating users right

This is an excerpt from the upcoming book Programming Windows 8 with HTML5 for Dummies

----------------------------------------

Metro apps are different.  As I mentioned in This Is Not .NET, Metro apps are optimized for touch, usually mashups, and often single use. They are not complex, menu driven or multi-functional.  They are usually for consumption, not creation. It is a totally different user experience that we are after here.

Because of this, there is a totally different design paradigm.  Now, Microsoft has tried to lay on the User Interface guidelines before with mixed success, but this time they are serious! The development environment is set up to only allow certain kinds of user interface elements, and if you step away from the path you will find your going rather tough.

Setting some design principles

Microsoft is being very clear in laying out some user interface and architectural design patterns.  It remains to be seen if these will be upheld in the review process, but they are good guidelines and should be followed.

While we will go into more detail in Chapter 2, there are a few core principles I want to use to describe Metro apps that will make the rest of this chapter make more sense. Metro apps are:

  • Socially connected. Metro apps make use of social network and public sharing networks to broadcast information, connect with friends, and make new groups.
  • Living in a sandbox. An install of the Metro app should never alter the core functionality of the user’s machine.
  • Designed for touch. These apps are designed to be run on a tablet, but should work with a mouse. Much more on this later.
  • Screen size sensitive. Like a web page, Metro apps should be sensitive to resolution, orientation, and docking.
  • Made for multitasking. Users can ‘snap’ Metro apps into specified parts of the screen, and if you want a nice looking app you have to handle that in your interface.

Using the Design Checklist

Something that Microsoft has implemented to help with the core principles is the Design Checklist. It covers what you need to make sure you have planned for in your app.

                           *  Basic design groups – core things you need to make sure you have covered

                                       *App tile – the icon that the user touches to launch your app

                                       *Splash screen – what the user sees while your app is loading

                                       *Application Lifecycle – be ready when the app gets suspended, or the battery runs out.

                                       *App bar – all your apps commands go in the same place.

                           *  Engaging the user with app contracts

                                       *Settings – how the app communicates with Windows

                                       *Search – how does it apply to your app?

                                       *Share – be social!

                                       *Play to – stream to other devices

                           *  Various Views

                                       *Full Screen

                                       *Snapped

                                       *Filled

                                       *Portrait

                                       *Scaled

                           *  Adding features – take advantage of the neat stuff you can do

                                       *Semantic Zoom

                                       *Notifications

                                       *Roaming

                                       *Content tiles

                                       *Gesture library

                                       *File picker

                                       *Animations

                                       *User tiles

Convention over configuration

You may have noticed by now that the Metro style is a lot about convention – convention being defined as how Apple decided to make the IPad work. You don’t actually have a lot of artistic license over how the user will interact with the meta-information related to your app; it is pretty well defined by the Design Checklist and Core Principles.

Let’s take navigation for example.  In Windows Forms application, navigation is all over the place.  There are menus and ribbons and buttons (oh my!). In MetroUI, however, the navigation of the application should be document oriented, and in the app bar, at the bottom of the application.

The programming model supports this, in fact.  It supports it so well that there really isn’t any other way to implement the app bar.  To see what I mean, open up the Hello World application we made in Getting There Ourselves.

In the HTML, inside the body tag, add a div that represents the AppBar control.  Notice the data-win-control declaration:

<body>

    <h1 id="headline"></h1>

   <div data-win-control="WinJS.UI.AppBar" id="appbar">

   <button data-win-control="WinJS.UI.AppBarCommand" data-win-options="{icon:'back', id:'', label:'example', onclick:null, section:'global', type:'button'}"></button>

   </div>

</body>

Now you can run the application, and have a nice back button in the app bar. All of your navigational type stuff would go here – start over, change views, go home.  Not in a menu, not in the page.  In the app bar.

Comments (2) -

mgroves
7/9/2012 6:29:42 AM #

"convention being defined as now Apple decided to make the IPad work" => "now" should be "how"?

Bill Sempf
7/9/2012 8:37:47 AM #

Fixed, thanks!

Comments are closed

Bill Sempf

Husband. Father. Pentester. Secure software composer. Brewer. Lockpicker. Ninja. Insurrectionist. Lumberjack. All words that have been used to describe me recently. I help people write more secure software.

PageList

profile for Bill Sempf on Stack Exchange, a network of free, community-driven Q&A sites

MonthList