Use Microsoft Design Style

If there is one concept you take away from a chapter on Windows 8 design, may it be this: Windows 8 design is all about immersing the user in their content.

What is content? An app’s content is the reason a user launched the app. For a financial app, the content is the stock price or a financial article. For a social app, the content is the friend or the conversation. For a photo app, the content is the photos.

Instead of wrapping content with ancillary information about the content, Windows 8 pretty much just shows the content. When you’re looking at a photo, you’ll usually just see a photo stretched from one edge of the screen to another, and when you’re looking at a friend’s profile on a social network, you’ll see a view dedicated to the essence of information about that friend.

This is not the next step in the evolution of user interface. This is a departure from the current trend, which has been to cram everything into one screen so that everything is a single click away. It’s not uncommon to find 25% or even less of a view’s design surface dedicated to the content itself. The trend’s flaw, however, is that when too much is added to a view, then none of it serves its purpose of making life easier for the user because the individual parts lose their significance and the whole of the parts loses the user.

Everything on the screen that is not content is chrome. Chrome is a term from the automobile industry where polished metal parts are added to attract buyers even though they play no role in the vehicles function. There’s nothing wrong with a mere aesthetic, but the problem with chrome in an app is that it detracts from the app by distracting the user from their content.

The Windows 8 design principles attempt to put content before chrome. It’s not that chrome will never exist, but an app designer should be careful to introduce it. Your app should always prioritize content and eliminate distractions. Notice in Figure 1-4 how the Xbox Music app in Windows 8 shows only content from edge to edge.

There are three classic reasons that chrome is added to a view: navigation, interactions, and layout. These play a significant role in an app’s usability, however, so we must replace them—not remove them. Let’s take a look at how the function of each of these types of chrome is facilitated without distracting from the content.

Be Fast and Fluid

Windows 8 apps should always operate in a fast and fluid way. A fast and fluid app responds immediately, flows nicely, and uses purposeful animations and sharp, clean graphics.

Part of a great user experience is a user feeling like they are directly interacting with information instead of with a system that is relaying that information. Touching content and dragging it around in real time is a great user experience, but only if the content precisely follows the user’s finger instead of jittering, lagging, or falling behind.

For the most part, Windows 8 apps that you create will be fast and fluid even if you don’t think about it. This is because a lot of the built-in controls and functions are designed with this in mind, and it’s also because the Windows API—the Windows Runtime or WinRT—provides asynchronous calls only for any method that might take too long (and too long in this case is defined as 50 ms).

Sometimes, however, you as the developer will be in direct charge of the performance of elements moving around on the screen and interacting with the user. Whenever this is the case, you should make certain that the performance would be considered fast and fluid.

Animations also do a great deal toward making a user feel like he’s interacting with an organic system. We’ll talk in much more depth about animations in Chapter 6.

Snap and Scale Beautifully

Windows 8 is not bound to fixed hardware. There are hundreds of PC models and many form factors that will be happy to run Windows 8 and your app. Consequently, your app should be adaptable and you should intentionally consider the appearance of every page in every possible view state.

The typical Windows 8 view states that you’ll be dealing with are:

• Fullscreen landscape: the entire screen, which is more wide than tall
• Fullscreen portrait: the entire screen, which is more tall than wide
• Snapped: just the left (or right), and is 320 pixels of landscape
• Fill: remaining space when another app is snapped

You don’t have to support portrait view, but you must support snapped and fill views. Your user will be able to snap your app or snap an app next to yours whether you like it or not. Even if your app makes it through certification without intentionally handling these states, it will be embarrassing when your users discover it.

Use the Right Contracts

One of the main reasons we put operating systems on our computers is to abstract away all of the menial tasks that we want to work in a consistent way without our having to recreate them for each app. Printer drivers didn’t used to exist, so instead each app had to be programmed to talk to any printer that might possibly be in use. Arduous is a suitable word for this task.

One modern-day norm that is a candidate for abstraction is social networking, or to be even more general—sharing. Windows 8 abstracts the concept of sharing away from our apps and wraps it in what’s called a contract that you as a developer can implement. A contract, in case you’re not familiar, is simply a pattern that is followed in your code that fulfills what Windows is expecting to find when it attempts to ask your app to share or search or whatever. Implementing a contract in your code is not a difficult endeavor. The tremendous advantage of this is that as long as your app is capable of sharing and correctly implements the contract and then it is suddenly capable of sharing with every app that participates in the same contract. It’s even capable of sharing with apps that didn’t exist until after you put yours into the Store!

Searching is another popular and often used contract. With the right contract implementation (again a rather simple task), your app can be searched by a user even before they’ve launched your app, and you get to determine what happens when your app is searched and how to bring about search results.

There are plenty for Windows 8 contracts and I recommend adding any to your app that can add real value.

Invest in a Great Tile

Live tiles are Start screen tiles that are updated with new information or imagery. Live tiles are effective because they’re informational. I find myself getting all the information I need sometimes with only a quick glance at my start screen. I can see the weather for the day, my next appointment, and the headline news without launching any apps at all.

Keep in mind that the tile for your app not only informs the user, but it also invites them into your app. You want your user to use your app and use it often, and you can promote that usage by investing in the quality and functionality of your live tile.

There’s little reason not to put in the miniscule time required to create rich tile support. Making a wide version of your tile is excellent and allows a user to make your app more prominent on their start screen. If you make a wide tile, it’s recommended that you give it live tile functionality. A double wide that does nothing at all is a bit disappointing.

Feel Connected and Alive

One of the design goals of a Windows 8 app should be to help users feel less like they’re interacting with a device and more like they’re interacting directly with their information.

Many of the principles we’ve talked about so far help to achieve this, but one especially critical way to keep users connected and give their information a sense of vitality is to actually interrupt whatever they’re doing with an onscreen notification and audio prompt. After all, live tiles are informative, but more of a user’s time will be spent working in an app than staring at their start screen. For notifications that the user deems significant, they’ll expect to be interrupted from whatever they happen to be doing at the time.

Make a user feel like their device is alive by notifying them when they receive a call or instant message, when they are outbid in an online auction, and certainly when their lottery ticket is drawn.

Roam to the Cloud

Roaming to the cloud is a catchy, modern phrase that simply means that we save certain information to an internet-hosted location instead of to the device. That way when the user reloads the operating system on his device or logs in to another one, the settings and preferences they’ve elected in the past are seamlessly available.

The great thing about roaming in Windows 8 is that it’s extremely easy for the developer. All that’s required is that you save settings through the roaming storage API that Windows provides. The setting is actually stored locally, but Windows is responsible for synchronizing all of those settings with the user’s Microsoft account (not to their SkyDrive). Listing 1-1 shows an example setting saved to roaming storage just to show you how easy it really is.

Listing 1-1.  The user’s favorite color being saved to a roaming setting so it will be available on any device

//JavaScript snippet
var appData = Windows.Storage.ApplicationData.current;
appData.roamingSettings.values["favoriteColor"] = "blue";

Consider roaming not only your user’s data, but also their tasks. If a user is in the middle of something, help them to pick it back up when they continue on a different computer. If you’ve used the Netflix app that’s already in the Windows Store, you may have noticed that it saves the timestamp that represents where you are in the movie you’re watching and restores it when you return even if you return to a different device. Users love that and you should look for applications of the principle in your own app.

Follow the Design Principles

We’ve looked at a number of traits of well-designed Windows 8 apps, and we have one more. The final trait is that an app should follow the Windows design principles. I’ll enumerate and explain the design principles next. These principles are a bit less pragmatic and seemingly more esoteric than the traits we’ve been looking at, but I would caution you not to overlook them. Understanding and following these general principles will guide you in designing your app even when you’re not starting with a project template.

Show Pride in Craftsmanship

The principle that an app designer/developer should show pride in craftsmanship certainly illustrates how general these principles are. It means that you should never avoid spending the extra time it takes to get the details right. You should worry about just how the animation behaves and just how the colors match. You should concern yourself with the exact size of the left margin and the user’s experience in the edge cases.

Let me put some teeth to this principle with an illustration that I run into unfortunately often. Tell me if you can see anything wrong with the view in Figure 1-13.

I hope you noticed that the list items in the left most group of tiles are almost but not quite in alignment. Even if your user doesn’t consciously notice something so apparently trivial, they will notice it subconsciously and it will be a detractor.

Do More with Less

To do more with less means that you break the modern trajectory of adding so much stuff to the screen that none of it even serves its purpose.

The word to keep in mind when you’re designing the usage flow that your user will follow is essence. Ask yourself if you’re presenting the essence of the information and giving the user the essential commands. Information and commanding that is not essential will be not only superfluous but worse yet it will be distracting.

Remember, just like Windows itself, you’re not trying to be ultimately discoverable. It’s far better to be ultimately immersive.

Be Fast and Fluid

This principle will sound familiar because it’s a repeat from the design traits, which speaks to the significance of the concept. The feeling a user gets when he uses an app that he would describe as “fast and fluid” is one of those things that’s hard to describe, but you know it when you see it.

Don’t be afraid to spend some money on professional design help that has experience not just with static graphics, but with dynamic screens and user experience.

Be Authentically Digital

I believe that more philosophy than science goes into app building. If you zoom out of the last 30 years and look at the mass adoption of computing, it’s quite clear that developers are still trying to figure out good architecture and usability.

We held on to the paradigms that we knew and dragged them into our digital systems all the while grimacing at their ill fit. Perhaps only now we’re learning that digital systems have their own rules, and that often those rules are more liberating than those of our analog world, and that users can come to learn and even love the digital world.

As we build our apps, we take advantage of the full extent of the digital systems we have and we avoid app design that accepts constraints of the analog world that are irrelevant in the digital world. We are, after all, working with pixels on a screen—an essential truth to be embraced.

Win as One

Users don’t use apps; they complete tasks. Sometimes those tasks involve a single app, but very often they involve an orchestration of apps. Imagine for a minute the following scenario.

Your app helps users make reservations at restaurants. Your user may use your app on its own, but more likely your user will:

• Step onto an escalator at the airport
• Check their trip management app to find their hotel’s location
• Check for restaurants in the hotel’s vicinity
• Pick a restaurant based on user reviews
• Make a reservation at the restaurant (using your app!)
• Send the reservation confirmation to a colleague and then step off the escalator

That user is a delighted user. He has not just used an app; he has accomplished something significant in very little time. All during the escalator ride, the complimentary and informative animations were important, all of the thought that went into the UX of each app was very important, and the app-to-app sharing was crucial.

To make a successful Windows 8 app, you have to think about the user. Part of that is making sure your app will work well with other apps and devices to complete entire usage scenarios.

Another aspect of this design principle is taking advantage of established conventions, standards, and recommendations. By doing so, you’ll be taking advantage of what users have already learned about Windows 8 apps. They’ll feel secure and familiar in your app.

We’ve looked at a number of design traits and principles that will hopefully help you when you’re going through the process of designing an app. Let’s walk through a fictional app design right now.

Scope

One of the best ways to win at app development is to do a good job at defining your app’s scope. Your app should do one thing and do it well. We call this your app’s “best at” statement.

Likely you notice the trend in today’s software world and especially in the mobile space away from a few apps that do everything and more toward many apps that each do one thing well. You’re not going to break anybody’s heart if your app does also do their taxes and make their coffee. If it does the one thing it’s intended to do and does it well, your users are going to love it, and rate it well, and send you cash.

Doing one thing well means scoping your app well. This means that before you write any code, you determine what it is your app will and will not do. You may already know that it’s often more difficult to determine what it will not do—to say no to features—than it is to add new ones.

To be clear, the enormous, robust and full-featured apps have their place, and if you have the means to take that on, then let that be your scope. If you’re an individual developer, however, then you’ll need to practice cutting features. Just because you can implement something and just because it would be really cool doesn’t mean you should. As developers, we tend to be idealists, and we tend to want very much to add in features to prove to ourselves that we can.

To keep features in reign, I recommend using a best at statement. Your best at statement is a single, concise sentence formed by filling in the blank in the following sentence:

This app is the best in its category at ________________.

Be sure your answer is specific, concise, and clear. Here’s an example:

This app is the best in its category at helping users find local volunteer opportunities for helping the elderly or disabled with house work, yard work, or other chores.

Notice how specific the statement is about who is involved—volunteers plus elderly and disabled people. The statement is also short and concise. The app is not going to organize volunteer events or help with fund raising or accept donations for non-profits. It’s only going to help a user find a volunteer opportunity.

This statement does a great deal toward defining the scope of your app by stating clearly what it does and by exclusion what it will not do. Helping people find volunteer opportunities may, however, involve more than one usage scenario.

Usage Scenarios

The vision for our app is shaping up, but it’s still abstract, so to solidify it, we will determine what the usage scenarios are. For this app, how about the following:

• Allow a user to browse potential volunteer opportunities in the vicinity of their current location and in the near future (next two weeks perhaps) and filter the opportunities by location and date.
• Allow a user to see all of their current volunteer opportunities.
• Allow a user to communicate with other volunteers and with those receiving assistance.

You might generate a lot of scenarios while you’re brainstorming, but the list should be trimmed to include only those which directly support the best at statement.

These usage scenarios each imply a number of supporting features or functions. For instance, providing potential volunteer opportunities implies that we provide the user with full details of each opportunity to include things like its location and duration, what tools might be required, and more. Generally these usage scenarios tend to form the sections that we’ll see on the hub page.

At this point, it’s quite helpful to have some graph paper or even some specialized app design paper to get ideas on paper without the encumbrance of actual implementation. I have created a Windows 8 app design sheet and made it available as a PDF at http://codefoster.com/designsheet. The first page includes frames for designing the standard three-tier navigation model for your app, and the second page is simply a full-page 1366 x 768 design surface with a light grid and guidelines for the recommended margins, for snapped view, and for the app bar. Hopefully this resource will help you when designing your app.

Let’s use this design sheet to sketch out a hub page. We’ll call our app Good Help, and we’ll have three sections: my gigs, connect, and nearby gigs. These sections map directly to our three usage scenarios.

Notice that the app does follow the basic Windows 8 design guidelines, but we’ve gotten a little bit creative (perhaps not enough so) with the layout to give our app some of its own personality. The opportunities in both the my gigs section as well as in the nearby gigs section are using relatively large rectangles to allow us to bring some images and a good amount of information to the hub page if necessary. The connect section provides a single column of smaller rectangles to resemble a chat session since this section facilitates communication between app members.

Remember that the hub page should serve as a glimpse of the entire scope of the application, so we should find a place for each of our usage scenarios. Users like to feel oriented in an app, and a well-designed hub can provide this by constantly offering the user an overview and making it easy to dive into more information about a given section or entity.

There’s obviously not room on the hub page for everything available in the app. The nearby gigs section for instance may have 400 opportunities within, but the hub is only going to show some subset of those. In this case it makes sense to bring the closest opportunities to the user’s hub as those might be the most likely for him to sign up for.

The hub is giving us access not only to the sections available in our app, but direct access as well even to some of the items. In the concept drawing in Figure 1-15, there are three items populating the my gigs section indicating the user has signed up for these three volunteer opportunities. Touching one of those items will navigate the user directly to the details of that opportunity.

Let’s continue our app’s design and draw the concept for one more page. We’ll design the gig page, which will relay the complete details of any one gig. This is the page a user would navigate to by touching one of the opportunities on the hub. Figure 1-16 shows the concept.

And that does it for this design scenario. I hope this obviously fictional application is close enough in concept to the app you’re working on that you’ll be able to apply the design principles here quickly.