How To Design Windows Phone Apps

09/08/2015
12 minutes to read

January 2012

Volume 27 Number 01

Windows Phone - Design Your Windows Phone Apps to Sell

By Mark Hopkins | January 2012

Good design is more than just adding pretty visuals to your application after you've implemented all the functionality. It's the process of deciding how users will interact with your app, as well as how it will look and function. User experience plays a huge part in determining how happy people will be with your app, so you shouldn't skimp on this step. Design should not be an afterthought.

I might be showing my age, but I remember almost every computer science class I took, starting with a lecture about the importance of planning your programs before beginning to code. We used tools such as flow charts drawn on actual paper with a real pencil (and usually a big eraser nearby). This was because computer time was expensive on that old hardware. You wanted to be sure you made the most of the time you had. Computer time is pretty cheap nowadays and there are amazing tools, such as Visual Studio and Expression Blend, that make it very easy to get something that looks pretty good up and running very quickly. Consequently, there's a tendency to sit down and just start coding. In this article, I'll talk about spending time up front designing your application so you can save time in the coding process and reap rewards in the Windows Phone Marketplace (windowsphone.com/marketplace).

I'll discuss what it means to intentionally design your Windows Phone app, which includes brainstorming, information architecture, prototyping, user research and iteration, all before you write a single line of code. I'll also note some of the tools available for these activities.

Why Design?

Look through the ratings and reviews on the Windows Phone Marketplace. One of the consistent complaints I find in reviews is when an app doesn't do what users expect. I've seen dismissive two-word reviews such as, "Doesn't work," or, often, much worse. Some of these complaints are valid and some are not. It might be that the reviewer doesn't understand how an application is intended to work. Is that the user's fault or the application's? Here's a review directly from the Marketplace:

"The UI is terrible and it runs really slow. It's unusable."

That review might be ambiguous, but I think it reflects the fact that people aren't willing to put a lot of effort into learning complicated applications on a phone. Nor are they willing to spend much time giving detailed feedback. Who can blame them? A phone is a casual-use device. Your app needs to be obvious and easy to use. With tens of thousands of apps available, users are unlikely to spend much time with one that doesn't give them the payoff they're seeking, whether that's solving a problem or being entertained while they wait in line at the bank.

Because there isn't much room for UI elements on a phone screen, you need to really think through how users will interact with your app. A well-designed, complete and easy-to-use application will generate sales. As people download and review your app in the Windows Phone Marketplace, those great reviews will fuel further downloads.

Metro Design Principles

Metro is the name of the design philosophy that goes into Windows Phone and into Windows 8. Much has been written about Metro, but I'd like to go over the Metro design principles briefly before I get into the actual process of designing an application.

Clean, Light, Open and Fast Applications should be easy to understand at a glance. They should be highly responsive to user input. They should have a clean, open look with lots of white space.
Celebrate Typography Words are common across all UI designs, and how they appear makes a difference. Type is beautiful. Not only is it pleasing to the eye, but it can also be functional. The right balance of weight and positioning can create a visual hierarchy. Moreover, well-placed type can direct users to more content.
Alive in Motion Motion is life, and motion brings Windows Phone to life. Live Tiles, transitions and response to user input tie everything together. Transitions are an important part of user experience design. A good transition gives the user clues about context in your application.
Content, Not Chrome Users are interested in content. Content should be elevated and everything else minimized. By removing as much chrome as possible, you bring the content into focus. This is particularly important on a small screen. The content is the UI and the user should be able to interact with it directly. The ability to resize an image using a pinch gesture is an example of this direct interaction.
Authentically Digital Design explicitly for hand-held devices that use touch, a high-resolution screen, and simplified forms of interaction. In other words, be "authentically digital." Don't try to simulate analog controls such as knobs.

The Design Process

If you're lucky enough to work at a company that has a design department, get designers involved at the beginning. Your apps will reap the benefits of working with people who understand user experience design. Many of you probably work in small companies, though, or even develop phone apps as a side occupation on your own, so you'll have to handle the design yourself. Let's discuss the design process so you can include these practices as you create your Windows Phone masterpiece.

Brainstorm Be creative. You may already have an idea about an application you want to build or you might be trying to come up with one. In either case, brainstorming helps you explore ideas you might not have considered. And it's fun!

Try to brainstorm with others, if possible. If you're a lone developer creating apps by yourself, ask your family or a group of friends to do this with you. But be mindful of legal issues that could arise if you use someone else's idea. The point of brainstorming is to generate as many ideas as possible.

I'm going to assume you're familiar with the mechanics of brainstorming. But just to review, here are some guidelines for the process:

Write down everything.
No idea is too outrageous at this stage.
Set a time limit to keep things moving.
Don't deep dive on anything yet.

Your app could help people accomplish a task, or its purpose might be to entertain them. In any case, you are the storyteller. Consider these questions to help seed your brainstorming:

What will your application do?
Who is your application for?
How does your application fit into the Marketplace?
Where and when will your application be used?
What kind of content will you display?
How can your application leverage the hardware?
How does your app idea compare with similar apps in the Windows Phone Marketplace and other smartphone application stores?

After you've come up with a great list of ideas, filter them through a list of constraints to help you narrow them down to something you'll actually create. Your questions might include:

Do I have, or can I gain, the skills to realize the vision of this app?
Can I develop this app in a reasonable time frame?
Can I afford to develop this app?
Can I leverage additional assets like online services?
Can I partner with someone to make this app even better?
Is there a lot of infrastructure needed for this app? For example, a streaming media service might be an awesome idea, but can I afford the server resources needed to get such a service off the ground?

If you've done a good job on brainstorming, you should have a great list of ideas, so you'll probably have to be very critical to get your list down to two or three ideas you really want to move forward on.

Sketch and Wireframe Designing a prototype involves pulling together your brainstorming ideas. You might want to start by evaluating some similar apps that are already in the Marketplace. You'll probably discover both good and bad designs. Each offers good opportunities for learning.

Use a whiteboard or pencil and paper to move quickly. Lay out the navigation architecture for your app. Designers call this the information architecture, although that means something completely different to those of us in the content publishing world. No matter what you call it, this step can uncover inconsistencies in your design. It can also inspire ideas for making your app easier to use. I did a quick exercise with some sticky notes and my whiteboard (see Figure 1). This example is really simple, but it shows how this step might look. Each sticky note represents a page in an online shopping application.

Figure 1 Information Architecture Planning

The detail here isn't important; I drew up each of these pages in less than a minute. The point is to really think through the flow and navigation of your app. Sticky notes are great tools to quickly mock up the pages of an application. And because they're similar in size to an actual phone screen, they can impart the feel of an actual app.

Using a whiteboard to lay out the navigation makes it easy to move pages around and draw connections without investing too much time. This exercise quickly and obviously shows where there are holes in your planned interface. It also helps you estimate how much coding work you'll be undertaking to implement your vision.

Try to bring in other people and get their feedback on your information architecture, perhaps coworkers, or friends and family members if you're working on your own. Walk them through the design, but try not to overexplain. The purpose and navigation of your app should be obvious; keep refining until it is.

Prototyping and User Research Once you're happy with the pages and navigation of your design, it's time to create a prototype and start getting some feedback from users.

The prototype doesn't have to be a working application. Paper prototypes are excellent tools for quickly creating the look and feel of your app to present to users for usability testing (see Figure2). Of course, if you're using paper, you'll need to help the user understand how the application works. Do a YouTube search for "paper prototype" and you'll find many videos showing this process.

Figure 2 Paper Prototype

Once you have a couple of prototypes, invite users in to try them out. Ask users to state their goals within an application rather than to make specific suggestions about UI or interaction.

Try to answer the following questions about the functional elements of your app:

Is it clear what your application does?
Is it clear how to operate it?
Are tasks intuitive in both purpose and operation?

This can be an incredibly powerful and rewarding process. I once watched a design team quickly create new designs on the fly, before the next group of usability test subjects even showed up. They could test out several designs in a single day. Talk about agile!

Iterate and Refine Continue to refine your prototype based on user feedback. Be careful not to get caught up in user requests for more and more features. While some user feedback might alert you to UI problems, most should be absorbed holistically. Keep your application focused and minimal.

Once you've refined your design to something you'd like to implement, move to the computer. Consider using a prototyping tool such as SketchFlow (msdn.microsoft.com/en-us/expression/ee215229.aspx) to start creating mockups of the actual page designs. Include enough detail so you won't need to make decisions during coding about:

Visual elements: Are typography and content presented clearly, legibly and concisely? Is the display visually appealing? Theme Resources for Windows Phone (msdn.microsoft.com/library/ff769552(VS.92)) make it easier to adhere to Metro design principles, as well as user preferences, by providing predefined values for properties such as brushes, colors and fonts.
Control elements: Are controls sized and spaced for easy touch operation? Note that in Visual Studio, the tools in the toolbox are already Metro-themed.
Branding elements: Have you accurately reproduced colors and logos? Is all art compliant with copyrights?

Make sure you implement all the elements necessary to recreate the interactions you mapped out during prototyping. Confirm that the tasks and operations look and flow correctly based on your earlier usability testing.

The simple workflow chart in Figure 3 visually represents the design process I've described.

Figure 3 The Design Process

It should now be obvious that you don't need to invest in a lot of expensive tools to do a good job of designing your app. Chances are you have some of these tools available right now.

Paper and pencil: The original design tools, still powerful.
Sticky notes: These are great "canvases" for phone page designs.
Video camera: For recording usability tests and creating stop-motion animations of your designs to share with coworkers, friends, family.
Windows Phone SDK 7.1: A free download (bit.ly/snlph6) that includes Visual Studio 2010 Express for Windows Phone, the Windows Phone Emulator and Expression Blend for Windows Phone.
SketchFlow: Lets you quickly sketch up functional designs in Expression Blend.

Resources

There are many online resources that can help as you design your Windows Phone apps. The following documentation resources dive into the topics discussed here in much greater detail:

User Experience Design Guidelines for Windows Phone (wpdev.ms/wpuxguide)
Design Resources for Windows Phone (wpdev.ms/dsnrsrcs)
Microsoft .toolbox (wpdev.ms/designtb)
Alfred Astort's blog posts (wpdev.ms/alfreddesign)
PhotoShop Design Templates for Windows Phone (wpdev.ms/dsntemplates)

You never know where inspiration might come from, so input is important. The following Twitter users often tweet about useful and interesting design and user research topics:

@WPDesignTeam
@corrinab
@SusanToddUX
@mkruzeniski
@arturot
@augustdlr

Wrapping Up

Once your design is finalized, it's time to start coding. Because all the design work has been done up front, you'll be free to concentrate on the logic needed to implement the functionality you've already verified through usability testing. This process will save you time because you won't have to re-architect your app in the middle of implementation. And because you'll have already tested your application with actual users, you'll be more likely to end up with good reviews in the Windows Phone Marketplace.

The Windows Phone SDK tries to set you up for success with themed controls and Visual Studio templates that include headers, theme resources and so on. You still need to do the intellectual work up front, but the tools will help you create a nice Metro app once you move to the implementation phase.

This article is just the tip of the iceberg when it comes to design. I hope I've piqued your interest and helped you consider how this process can raise the quality of your next Windows Phone app. A well-designed app creates a feedback loop in the Windows Phone Marketplace that leads to more downloads and more sales. Invest more thought in the design of your apps and may they be wildly successful.

Mark Hopkinsis a senior programming writer on the Windows Phone Developer Documentation Team. He has been employed at Microsoft since 1992 working on developer-focused products including developer support, Visual C++, MFC, Windows Platform SDK, Internet Explorer SDK, Tablet PC SDK, Surface SDK and Windows Phone SDK.

Thanks to the following technical experts for reviewing this article:Robert Lyon,Cheryl Simmons andMatt Stroshane