Before you press send…
As you can imagine, in the design team in Depth Partner Support we review hundreds of app designs every year, from all over the world, and from all kinds of different industries.
Aside from knowing our RenRens and Immowelts from our Magic Seaweeds and Univisions, we’ve also noticed some common issues that many partners fall foul of when they submit their designs to us for review.
The good news is they’re easy to fix.
So here are the top three issues we see at design review. Please have a look through these and check your apps to make sure they don’t suffer from these design no-nos before you send your docs on for review.
Alignment and spacing
This is an easy one. Everyone can tell if something isn’t properly aligned. In fact, if you’re not sure, you can do something as simple as attaching a sticky note to your monitor or mobile screen and see if everything lines up. As a general rule, everything in Windows Phone should be left aligned.
For those of you who prefer some more concrete guidance, the default page margins we suggest are 24 pixels from the left and right of the page. List items should be spaced 12 pixels apart, both horizontally and vertically. You should space controls either 12 or 24 pixels apart (or a multiple thereof). Use whichever looks best.
You can download Photoshop templates with the grid on them from https://go.microsoft.com/fwlink/?LinkId=196225
Back, close, cancel buttons
As every Windows Phone ships with a handy hardware back button, you don’t need to create your own just to take up space on the screen. Plus, why bother with all the hassle of managing the back stack yourself?
People will use the back button:
· To navigate backwards
· To dismiss a dialog
· To cancel
So if you’ve got buttons on the UI that perform those functions, you might as well scoop them out!
There’s an exception to cancelling a process though, and I use the word process carefully. In this context I mean a discrete process that has a very obvious beginning and end, such as the checkout process of a shopping experience. You’ve tapped the checkout button, entered a shipping address, pressed next, entered a billing address, pressed next, entered payment details, and pressed confirm. The process has completed.
Normally you’d use the back button to navigate within this process. But say you were at the payment details screen and wanted to cancel the process to go back and add another product to your basket. Rather than making the user press back a bunch of times, we would recommend they use a cancel button which cancels the checkout process and drops them back at the basket. The whole checkout process would then need to be removed from the backstack. If this is something you want to do, then the cancel button should not be visible on the first page of the process (because the user can just as quickly tap the back button), but should appear on subsequent pages.
Mixing metaphors
If you see this button, what do you expect it to do?
The chances are you said ‘play’. That’s a reasonable assumption. Wherever you see this icon in Windows Phone, it always means play and tapping it always plays media. Effectively, you’re used to this being a metaphor for playing media. If you saw that icon and tapping it didn’t play media, it would be confusing, right?
We often see this being used to mean ‘next’. In Windows Phone, we use this icon for next:
Both of these icons have shipped with the Silverlight Toolkit for Windows Phone (which can be downloaded here: https://silverlight.codeplex.com) and can be found on your hard disk here: C:\Program Files (x86)\Microsoft SDKs\Windows Phone\v7.x\Icons on 64bit Windows, or C:\Program Files\Microsoft SDKs\Windows Phone\v7.1\Icons on 32bit Windows.
We’ve seen a load of apps that mix up what the icons mean just because it’s easier to reuse an existing icon than it is to create one appropriate for the use case. Please don’t do this. There are plenty of resources online, and using a more accurate icon will make for a much nicer experience, and your users will thank you for that.
Written by Dave Crawford