Building a Great App Step 9: Break out the pencil and paper

Before you start dragging controls onto the screen, take a step back and think about the layout and design of your app.

This blog is part of a series.

If you haven’t built for a mobile platform before, or even if you have, you should still take a minute to step back and think about the layout and flow of your application before you start coding. At a minimum sit down and think out two aspects of your design

• Screen layout
• Navigation flow

Screen Layout

On mobile platforms, the best apps leverage all the different views available to the user. Whether you are designing for a phone or a tablet  you will have to support multiple screen layouts. At a minimum you have to consider

Portrait and Landscape

The only difference between the two views might be a slight change in layout and a change in scrolling direction. As a best practice you want the user to scroll along the long edge. That means you would scroll up and down in portrait view, and you would scroll left to right in landscape view.

Or you could have more significant differences between the two views: For example, some calculator apps display as scientific calculators when you switch to landscape view.

For a Windows 8 app you also need to consider

Snap and Fill

The snap view in Windows 8 is the view the user sees when they decide to snap their application to the side of the screen. This allows the user to have two apps running at the same time. It is also possible that a user has snapped someone else’s app and your app is the second app that is running, that’s what we call the fill view.

Designing a good snap view can increase the amount of time your app spends running (which could mean more revenue). Some apps may be used more in snap view than any other view. Chances are if you were running a calculator app you would use it in the snap view to do calculations while you updated numbers in a different application that was running in fill view.

Movie players, music players, and chat applications are also applications that are frequently run in snap views, but all applications in Windows 8 MUST support snap view to be accepted into the store. Take the time to think about what makes sense for your snap view. Snap view is tricky to design well. In particular I find game developers struggle with snap view. I once saw a version of Mahjong that just shrunk all the tiles in snap view, but the tiles were so small you couldn’t make out the patterns on the tiles and it was almost impossible to tap a single tile with your finger. You can list current level, high scores, show graphics from the game, or even include a mini game. Take a look at other games to see what they have done. In particular I think it’s worth looking at Wordament, Fruit Ninja, and Angry Birds. Each took a very different approach to their snap views.

For more tips check out the article Guidelines for snapped and fill views.

Design best practices

There are a number of things you should consider when designing any screen. For example when you design for touch devices make sure buttons are at the bottom of the screen, not the top. That way when someone is tapping a button their hand is not blocking their view of the screen. There is an entire website dedicated to helping you design great Windows 8 apps at design.windows.com where you will find guidance for supporting different layouts, designing touch interactions, and more!

Navigation Flow

In Windows 8 there are two basic navigation patterns to consider: Hierarchical and Flat.

Hierarchical system

Most Windows 8 apps use a hierarchical system where you start at a hub page and then drill down to more detailed pages. The user navigates up and down the hierarchy. If they want to jump from details in one category to another they may need to navigate up and back down again, so it’s important not to have too many layers in the hierarchy. If you would like to look at a few examples, check out the video app in Windows 8, and most shopping apps in Windows 8 use this structure as well.

Flat System

You can also design a Windows 8 app with a Flat system. Browser applications and some games use this structure. The user moves between pages or tabs that are at the same hierarchical level. Internet Explorer is an example of a Windows 8 app that uses a flat hierarchy. A top app bar allows the user to navigate between different screens.

For more information about flat and hierarchical designs check out the article Navigation design for Windows Store apps.

Take the time to sit down and design a great experience for your users, you’ll find it makes the coding go more quickly because you’ve taken the time to plan your navigation patterns and the information to display on each screen. You’ll also deliver a better overall experience for your users and they will appreciate it. Don’t forget if you are in Canada and you are publishing apps check out Developer Movement, you may be able to get rewards for each app you publish!