A quick look at MetroRadio: quick spacing, margin, and icon tips for Windows Phone devs
January 15, 2012
I’ve harped on this one a few times before in my Windows Phone Metro Design Guidelines post for devs. But it’s time for another helping!
Metro Radio is a slick and functional Pandora application for the Windows Phone. Like many apps, there are plenty of small little UX things that could make it even better. I saw the app recently and really like it, but as a stickler on design things, I’d love to make a few small tweaks if I could!
I briefly spoke with the application’s developer, Mustafa Taleb, and obtained his OK to me to write a little post just pointing out a few things. The app really does rock, but it’s also probably a place that in the next update a few visual blemishes could be fixed to yield an even better app.
So I’m going to point out simple things to think about when building out your UI. I have 9 points about simple spacing/design/margin things, and then a quick comment on the icon.
Margin Issues and other easy XAML Fixes
It’s pretty easy to overlook margins while developing applications. Between having controls like TextBlock that expect an associated Style, and most controls like Button that have an integrated margin and touch area, it can be tough to either notice OR spend the time to fine-tune these things.
I don’t have the source to the app, so I am going to be overlaying yellow lines on top of the marketplace screen shots to help show potential issues with margins.
Text blocks: when to case plus the classic 12px left margin issue when not using styles
So here we have a few basics.
1. Consider all uppercase for the small font app title (very top visual in a page’s default template), unless you have branding or other reasons for that change.
2. Consider all lowercase for the larger page title.
Now these two aren’t hard-and-fast. I’m inconsistent in my apps, too. But I believe that you should be consistent: if you choose one, choose both.
3. Use the PhoneTextNormalStyle or other provided textblock styles OR hard-code at least a 12px left margin for text blocks. That way you align with other default visuals.
In this screen capture I overlaid a yellow block over the 12px space – really all the text should be to the right of that block, not under.
Here’s a super classic login page experience. And actually it is affected by the same issue of not using Style={StaticResource PhoneTextNormalStyle} in those TextBlocks, I’m guessing.
4. 12px issues create jagged forms often.
Recommended fix: Use the styles that are provided. The left of the text and the other controls should be aligned flush, not jagged like in this form.
Again this is because the default Margin of all TextBlocks is 0, but on the phone the styles set a left margin of 12px to allow for flush alignment.
Looking into Pivot specifics
Now on this one, there are just a few simple things when using pivots.
5. Consider lowercase pivot item headers.
It’s consistent with what you’ll find throughout the official phone user interface. This can either be accomplished through hard-coding lowercase in your XAML, using a string converter that goes lowercase with binding, or by doing it on the model/data side of your app.
6. Everything in a Pivot control should usually align left flush.
This page seems to have the actual item content off by 12-to-24 pixels, instead of allowing all things on the left to be flush.
Additionally, the space between the Pivot header and item is off by maybe just 2- or 4- pixels.
Look into spacing and alignment a lot on list pages
This is one of the screen captures of the list results when searching for the text ‘today’, one of the marketplace example screen shots. It could use some alignment and cleanup and could probably be cleaned up in a good 10 minutes of XAML hacking
7. Visually check for alignment consistency.
I’ve drawn a yellow line to try and show that many items here are not aligned: images, group headers, the top search controls, etc. This could be fixed in Blend through some movements or just in XAML by slowly adjusting by 2-, 4-, 8-, however many pixels until things are nicely aligned.
8. Try spacing list items by the same value on the top and bottom.
It looks pretty inconsistent when a list item (like the first here) has 2- or 4- pixels on the top, but then what looks to be 18 pixels or so on the bottom.
Instead using a consistent value for the top and bottom will let all items look natural regardless of whether they are first or last.
9. Have space between items and text.
The data template for these results could use some spacing between the album art and the text.
My guess is that this is another example of hard-coding font values instead of using the standard PhoneTextLargeStyle or PhoneTextNormalStyle with a TextBlock. That would add a nice left margin of 12px back into the UI.
And another quick example, this is a list page from the app that has some of the same underlying potential spacing issues:
And now, the best page in the app!
This is the playback experience and page. It rocks. It’s smooth, visually awesome, has good information, and is styled on the in-app Music+Videos UI. If I had to nit-pic, I might want to put 6- or 12- pixels of margin spacing on top between the artist name and song title at the top, but it’s nice.
Marketplace Application Tile
When I looked up Metro Radio using the Web Marketplace, the icon was … hardly there. This might be on purpose, but it’s really not a great branding experience – my guess is this either is a take on, or based on, the regular app icon, which adjusts itself to the accent color of the phone (hence a transparent background color).
Trouble with using the same asset is that the Web Marketplace, the Zune Marketplace, and even in some situations the regular Marketplace app on the phone, don’t do the same replacement with accent colors – so you get a visually difficult to see tile.
On-the-phone
This looks great. It’s important to realize that the different asset sets and sizes are used in different places – whether web marketplace, app, etc., you should always try and submit your best icon forward if you can!
Web Marketplace
Here you can see the hard-to-see tile for the app.
Suggested Fix: Always use a background color (easy if you’re layering in Photoshop or a similar tool) for your actual marketplace submission’s tile.
Zune Marketplace
Same icon issue here.
Hope this is useful. Thanks Mustafa for letting me write this post! And I should note, I’m publishing this without running it by him – he’s completely possible that some of these things were intentional design choices. If so, sorry if I have not agreed with them!