Metro Pass 0016 – Planning Your UI

(For an overview of this series, please read this post.)

MSDN Source: http://msdn.microsoft.com/en-us/library/windows/apps/hh465427.aspx

So far we’ve answered the following questions as part of the Metro app planning process:

1. What’s the app about?
2. What’s the app great at?
3. What user activities will the app support?
4. What features will the app include?
5. How the app be monetized?

It’s now time to turn our attention to designing the user interface (UI) of the application.  When designing the UI for Metro style applications, there are

1. How should you organize UI content?
2. What UI surfaces and command do you need?
3. How should you organize commands?
4. How should the app be laid out in each view?

Let’s take these questions one by one.

How should you organize UI content?

Most app content can be organized into some form of groupings or hierarchies. What you choose as the top-level grouping of your content should match the focus of your “great at” statement. Choosing how you want to group your content helps you decide what pages or views you need in your app. The project templates available in Microsoft Visual Studio Express 2012 RC for Windows 8 offer the common app layout patterns that will suit most content needs.

What UI surfaces and commands do you need?

Review the flows that you identified earlier. For each flow, create a rough outline of the steps users take. During this process, you begin to see what UI you need to create and the extra details you need to figure out. You can also start eliminating extra steps. Just remember, the cleaner the flow, the easier to use.

How should you organize commands?

Use your outline of the flow steps to identify potential commands that you need to design for. Then think about where those commands should live in your app.

• Always try to use the content.  Whenever possible, let users directly manipulate the content on the app’s canvas, rather than adding commands that act on the content. For example, in the travel app, let users rearrange their itinerary by dragging and dropping activities in a list on the canvas, rather than selecting the activity and using Up or Down command buttons.

• If you can’t use the content, place commands on one of these UI surfaces:

  • In the app bar: You should put most commands on the app bar, which is usually hidden until the users bring it up.
  • On the app’s canvas itself: If the user is on a page or view that has a single purpose, you can provide commands for that purpose directly on the canvas. There should be very few of these commands.
  • In a context menu: You can use context menus for clipboard actions (such as cut, copy, and paste), or for commands that apply to content that cannot be selected (like adding a push pin to a location on a map).

How should the app be laid out in each view?

Windows 8 supports landscape, portrait, snapped, and fill views. Users can put your app in any of these views at any time, and you want your app to look and work great in each one. This means you need to plan the layout of your UI elements for each view, and map your layout implementation to each view state. When you do this, your app UI changes fluidly to meet your user’s needs and preferences.

Next up, first impressions matter.

MSDN Source: http://msdn.microsoft.com/en-us/library/windows/apps/hh465427.aspx