It’s the Little Things

Here are some of the most common oversights when designing a Windows Phone app. Eliminate these isues in your apps and not only will it look more aesthetically pleasing and professional, it’ll might even get you a few more stars in the Windows Phone Store reviews.

Capitalization

Because the OS’s design language is based on typography, the right font size and font weights aren’t the only things to keep in mind when designing a WP app. A very common mistake in many apps that I see in the store is that they have inconsistent capitalization convention with the OS as well as within the same app. Here are some capitalization guidelines to keep in mind.

  • Page titles are all upper-cased. With the rare exception of specific branding or names, this should always be all upper-cased. Use “MY APPLICATION” instead of “My Application.”
  • Page headers are all lower-cased unless it’s a proper name or a special case where capitalization is preferred. Use “favorites” instead of “Favorites” but you may use “NFC” instead of “nfc.”
  • In hubs/panoramas, section headers are all lower-cased in WP8 and all upper-cased in WP8.1. The large title above that follows the same capitalization rule as page headers mentioned previously. They should be all lower-cased unless a proper name or branding requires it to have capital letters. It should not be all upper-cased.
  • Buttons (included in the CommandBar), menu items, and other various actionable elements usually have all lower-case letters. Small buttons or actionable elements can have all upper-case letters like in WP8.1’s Action Center.
  • Text snippets that do not form a whole sentence do not need its first letter to be capitalized. Examples of this are “showing contacts with phone numbers” or “about 2 hours ago.”
  • Some lower-cased text and labels can be interchanged with all upper-cased text if your application design allows it and it looks nice in the mix so be creative.

CapsRight CapsWrong

Margins

One of the most common mistakes I see is that apps use no margins or very inconsistent margin. Even in the new WP8.1 templates, margins are incorrectly used. Here are some margin guidelines to keep in mind.

  • Do use margins or paddings to separate elements on the screen. Empty or negative space between UI elements create segmentation without the need of borders, lines, or chrome. It also makes the app easier on the eyes.
  • Apps should have a margin on the left and right side so that content doesn’t start and end at the edge of the screen.
    • In Silverlight apps, the content should start 24px from the left edge of the screen and 24px from the right unless content is intended on overflowing off the screen.
    • In WP8.1 XAML apps, the content should start 19px from the left edge of the screen and 19px from the right unless content is intended on overflowing off the screen.
  • The most common margin spacing used for 12px for Silverlight apps and 9.5px for WP8.1 XAML apps. This spacing is generally used to space out items in a list. So if you want two elements not touching, consider using multiples of 12px and 9.5px to space them out for Silverlight and WP8.1 XAML respectively.

MarginWrong MarginWrong2 MarginRight

Colors

Some apps use too much color while others are stuck in land of black and white. The easiest way make your app more engaging is by the use of colors. Start off simple to avoid making it too overloaded with color.

  • Use user’s accent color to highlight elements of interest or communicate it’s an actionable element (chromeless buttons or hyperlink text.)
  • Use common colors like green and red for good and bad.
  • Use different shades of grade to show hierarchical relationship between different text elements like in the mail or messaging app.
  • If your app have a brand color, consider not leaving the system tray at the top black and change it to match your app color.
Advertisements

5 thoughts on “It’s the Little Things

  1. Great article. One small fix: In WP8.1 XAML apps, the old 12px becomes 9.5px (not 10px). 12px in WVGA is 19px in WXGA, and 19px / 2 = 9.5px. The 9.5px value is used in the built-in styles.

    1. Thanks for the feedback. I actually use 9.5 & 19 in my personal apps originally but I decided to round up to 10 and 20 pixels for a few reasons. First, it was easier to remember (I like even numbers) and the difference was so minute. Second, the default pivot template seemed to line up better with 20px on the sides and I didn’t really want to modify the template for one pixel so I went with 20px elsewhere for in-app consistency. I will note in the post of actual values in case anyone wants to be exactly pixel perfect with system UI.

      1. Fair enough. BTW a tip on text alignment (especially visible for large font sizes): set OpticalMarginAlignment to TrimSideBearings. For Pivot, set it on the title and header, and override some theme resources (the values below are what I use, and not just about the title/header, but also some other spacing):

        57.5
        0
        3,0,3,0
        16,-7,0,6.5
        19,16,19,0
        19,18.5,0,0

        Then we have an almost perfect Pivot 🙂

      2. Thanks. I’m aware of the optical alignment option but I’m surprised (and wasn’t aware) that the pivot doesn’t use it out of the box. I’ll probably go back to 19px/9.5px if I can get the pivot styled properly with ease. I might even create a pivot template for download.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s