Ready for take-off? Top 10 things to check when you think you are done with your application.

Ready for take-off? Top 10 things to check when you think you are done with your application.

  • Comments 11
  • Likes

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.

  1. Start tiles and splash screens are your first impression… Make them great.
  2. Make sure your buttons are visible even when the keyboard is displayed.
  3. Managing themes on WP7. Or how to build your application to respect system color changes.
  4. Make sure your finger can hit the target and text is legible.
  5. Give feedback on touch and progress within your UI.
  6. Embedding web content should be done with extreme caution.
  7. Place your buttons well… Flying buttons, home buttons, and back buttons… Oh my!
  8. Understanding Pivots and Panoramic views.
  9. Make your life easy.  Use our common controls, and use them right!
  10. 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.

start_tiles_lgAdditionally, 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.

good_tiles


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.

black_tiles

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:

  1. Only make your Start tile transparent. The other icons you submit with your application should not have transparent backgrounds.
  2. 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)

Contoso_tiles

 

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 splash_lgentry 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:
"\Documents\Expression\Blend 4\Projects\WindowsPhoneApplication1\WindowsPhoneApplication1\SplashScreenImage.jpg"

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

11 Comments
You must be logged in to comment. Sign in or Join Now
  • Great post. Got me buzzing with a whole lot of ideas :)

  • Whilst I love this series, it's no use if developers aren't being made to abide by these 10 fundamental basics that you cover. Case in point. I log into the Zune account for the first time today into my Zune player, and the no. 3 featured app is an app called 'Big Love', featuring:

    - A background with gradients.

    - Bevels round the edges.

    - Rounded corners.

    - A nice glassy 'glare'.

    - Light source coming from the top left.

    - A decidedly detailed logo.

    I'm sure the app is probably well coded and the developer has put effort into it, but the tile is simply put, ugly. It doesn't help the platform's consistency and certainly doesn't do any favours for Windows or the Zune Marketplace.

    And screenshot of the offending app: img714.imageshack.us/.../zunemarketplace.png

  • To stevehiner [Will a user be able to use an app while they're on the phone with someone?]

    You can launch any app while on a call, just press Start and launch your app, you may want to place your call over speaker first so you can look at your phone and keep the conversation going.

  • I See you use a JPG for a splash screen of the App... should't this be a vectorial type of image? What will happen to it when used in equipments with bigger resolutions? JPG is know not to scale too well...

  • JasonD - you select light or dark, but then you must choose an accent color.. The accent color is never black or white, so in theory, you'll have either white surrounding a tile of your accent color with white icon or black surrounding the tile of accent color with white icon. There will never be a white icon on a white tile on a white background.

  • JasonD
    2 Posts

    [If left transparent the tile will show the default color chose by the user, if that color is blue the tile will display the white icon on top of a blue tile.]

    Yes, I understand. But Microsoft has been very vocal about making sure your apps work in both the default dark and light themes, which I believe are pure white and pure black (correct me if I am wrong), in which case a white icon with a transparent background will disappear. I believed such an app would fail certification, but even if not, if white is a common background, shouldn't we avoid this? I was certain developers were told to avoid transparent backgrounds for this very issue.

  • I agree that this is going to be an awesome series to read.

    I have a question as I think about what kind of an app I want to write for WP7.  It's my understanding that the Droid and iPhone don't let you use apps while you're on a call and I know WP7 doesn't allow apps to run in the background (or at least the apps are expected to behave well when closed by the OS).  Will a user be able to use an app while they're on the phone with someone?

    The kind of business apps I'm considering would benefit if the user could access them while in a phone call.

    Thanks in advance.

  • [You said if you want your Start tile background to be the same theme color as the phone UI, you can make the background transparent with the foreground icon white. But wouldn't a white icon and a transparent background disappear with a white theme color?]

    If left transparent the tile will show the default color chose by the user, if that color is blue the tile will display the white icon on top of a blue tile.

  • hdw
    25 Posts

    Good post! Nice to see you pushing the quality of WP7 apps

  • JasonD
    2 Posts

    Thanks for these posts. They will be invaluable...

    You said if you want your Start tile background to be the same theme color as the phone UI, you can make the background transparent with the foreground icon white. But wouldn't a white icon and a transparent background disappear with a white theme color?

  • This is going to become an absolutely essential series of posts.  Looking forward to it all!