Creating a new mobile platform has been an amazing ride, is not often that one has the opportunity to create and define a totally new experience from the ground up, especially one that will be in the hands of millions of users. An endeavor of that magnitude comes with many ups and downs. Here is where a public space, like this one, comes handy.
So far the response from the developer community has been amazing! The number of applications showing up on the Marketplace is growing by the hour. However, creating new experiences on a brand new platform is not easy. Our team has been reviewing hundreds of applications. And, we have assembled a list of the most common gotchas we have observed.
Some of the issues are easy to fix. Others are more complex and require more detailed explanations. We will use this space to describe the issues we’ve seen, and offer some design advice that we hope will help you make your app even better. Here’s our list of top ten areas of your app to consider while designing, or before you submit your app to the marketplace.
- Start tiles and splash screens are your first impression… Make them great.
- Make sure your buttons are visible even when the keyboard is displayed.
- Managing themes on WP7. Or how to build your application to respect system color changes.
- Make sure your finger can hit the target and text is legible.
- Give feedback on touch and progress within your UI.
- Embedding web content should be done with extreme caution.
- Place your buttons well… Flying buttons, home buttons, and back buttons… Oh my!
- Understanding Pivots and Panoramic views.
- Make your life easy. Use our common controls, and use them right!
- Aesthetics and alignment matters
Today we’re going to start with number 1: Start tiles and Splash screens.
Start tiles and splash screens are your first impression… Make them great.
Start is the beginning of the Windows Phone 7 experience. Start is likely to be part of the Windows Phone interface that users see the most often, and it is the place where users will pin their favorite applications. When an application is pinned to Start, users will see what we call a “tile”. A tile is better than an icon, since it can surface information about or relevant to the application. For example, a tile for a weather application can show an image of the current weather, and the temperature. We strongly encourage designers and developers to take advantage of this feature as it makes your application that much more useful.
Additionally, your Start tile will live alongside all the other tiles on the users Start screen. The best Start tiles communicate some information about the app, show off the personality of your brand, and look great beside all the other Start tiles. By the time you are designing your Start tile you will probably already be familiar with the WP7 visual language codenamed “Metro”. If not, download this guide. The Metro design language echoes the visual language of airport and subway system signage in its design layouts, iconography, and typography. Windows Phones come with some Start tiles already installed by Microsoft and our Mobile Operator and Hardware Manufacturer partners. You’ll see that these tiles follow the Metro style very closely. We strongly recommend utilizing the Metro style as a starting point for designing your Start to create a more consistent and fluid overall UI experience for users.
Things to avoid
If you are developing an app with no graphic design support (which we don’t recommend!) or budget there are many web sites where you can buys icons for a reasonable fee. Whether you are designing the tile yourself, commissioning it, or buying it, our recommendation is the same: keep it simple. Icons should have simple geometry and limit the amount of very fine detail. It should be clear, understandable, and leverage any metaphors that are familiar to people.
We also have a list of things to avoid in order to achieve a nice alignment with Windows Phone and the Metro design language. If your app icon and Start tiles have any of the below, it may not be successful as a Start tile:
- 3D typography
- Icons or backgrounds with gradients, bevels or casting shadows
- Rounded corners
- Black or white color backgrounds (the tile background will disappear on dark or light theme)
- Using non descriptive, ambiguous icons
- A transparent background with colorful icons (more on this below)
Start tile background colors
There are two key elements to a Start tile: the icon or logo that appears in the foreground, and the square, colored background. These two should complement each other. We recommend choosing a background color that represents your brand, and makes your foreground icon easy to see or read. Below you can see three examples that follow the guidelines.
You should avoid using a black or white background color, since the tile background will not be visible in the white or black color themes that are available in the phone UI.
If you want your Start tile background to be the same theme color as the phone UI, you can make the background of your tile transparent. If you do this, it’s very important to:
- Only make your Start tile transparent. The other icons you submit with your application should not have transparent backgrounds.
- The foreground icon should be white. If the foreground icon is colored, the icon will not be visible or be jarring to look at on some of the phone theme colors (see below)
The Splash Screen
Many applications take a short amount of time to load. We like to use this opportunity to introduce the user to your application with a splash screen. Since the splash screen is only visible for a few seconds, we recommend that you not place any copy text that requires attention or would take time to read. Instead, use this space to smooth the entry into your application with some graphics that introduce your app. A great splash screen is like an advertisement for your application, using colors and graphics that complement your brand or service.
If you are using the WP7 template to build your app, a default splash screen with a small clock on it will be used as a placeholder until you replace it. It’s important that you replace this graphic, or users will see the default placeholder image every time they launch your application (see graphic). You can import a new asset into the Blend library or just replace the asset located here:
I hope this will help you to create a great start experience for your app, on our next post we will be talking about UI buttons, see you then!
– Alfred Astort
Follow the Windows Phone Design Team on Twitter: @WPdesignteam