When designing a “You are here” icon for the map in ShopSavvy (download now on iPhone, Android and Windows Phone 7. It’s free and super awesome), I decided to try something a little different. Because ShopSavvy is a theme-compliant application, I thought it might be fun to have the “you are here” icon be representation of the user’s actual phone.
So I created a little XAML icon that is a very rough approximation of the front Windows Phone 7 screen. I used shapes and theme-variant brushes so that the icon changes to represent whatever theme the user has in place on their phone.
Because the the icon is so small (48-by-80 px), I used only basic shapes and one custom path shape to represent the “maps” application. I also did everything on a “Canvas” in order to try to trim off as much layout computation time as possible. You could make it with a Grid and then scale it to your heart’s content. Probably won’t make a huge difference, but I’m paranoid about resources in my phone apps these days.
Here are a couple examples of how the icon could look, depending on the user’s theme choice:
All from the same XAML.
For the ShopSavvy version, I put a tiny little ShopSavvy icon at the top. In the code below, I took it out so the top right-hand will simply be a blank box. Or you would put a tiny version of your own app icon there.
Guido Rosso and Luigi Rosso of Archetype gave an amazing boot camp presentation at MIX 10 on designer/developer workflow. It ended up being one of the big highlights for me last year. They’re amazing designer/developers and they have a really fantastic presentation style. As such, I’m excited to see how Guido translates the Metro style. I’m also curious enough about the functionality of the AP app and the Fandango app that I’d like to see some of the inner workings of those applications.
Few people get designer/developer workflow like Michael Wolf. He not only has an excellent eye for design, but he does a lot of the heavy lifting of making sure that the technology implements the design that the project needs. I always love to hear his perspective on designer/developer workflow.
Rick Barraza, Michael Wolf and Jose Fajardo did a MIX 09 boot camp on designer developer workflow (with Scott Barnes providing color commentary). It was fantastic. But even that can’t compare with the many, many amazing projects that Rick has been a part of. He was the first person I saw use WPF with the Wiimote, he’s a Surface MVP, he wrote a freaking animated genetic algorithmic calculator in less than 10K for one of the 10K challenges (he was absolutely robbed of that prize). But Rick has always been focused primarily on the users and always focuses his amazing talents on bring the users better and better experiences. Very much looking forward to this talk.
I’ve been to a dozen or so UX and user research talks and they have ranged from almost useless to changing the way I design and develop software. Jason Alderman is the kind of user researcher that is delighted pare down his research methodology to get right at the core of the problem and find ways to bring better experiences to his users. His talk will realign how you look at user research, guaranteed
One of the best ways to smooth the designer/developer workflow on any project is to let the designers do as much of their work in Blend as possible. Laurent Bugnion is one of the kings of Blendability. If it gets in, this will probably be one of the talks that I go back to several times over the next year in order to smooth out any issues with Blendability that I run into.
Jeff Paries
Author of Foundation Silverlight 3 Animation, Jeff has been one of my go-to authors for working through Silverlight animations in the last two years. Honestly, I feel a little silly since I have an Open Call session on animation (although I’m aiming for a holistic “motion design” approach) and Jeff would completely school me on the topic. If you had to pick between the two, though, pick Jeff’s.
Sean Gerety
I love software and I love magic. And I’d really love to see where Sean is going with this, although I think I have an idea. As a guy passionate about UX, I’m keenly aware that frequently our software is more about how people perceive it than it is about the reality. If people feel that your software is easy to use, than it is. If they think it is fast, than it is fast. This isn’t to say that we should spend more time trying to fool the user… just that it’s easy to forget that the buck ultimately stops with user perception.
This, of course, isn’t to say that I know how Sean is actually going to tackle this talk. But I think it says something that just the title gets my mind churning.
Shawn Wildermuth
It’s like he’s reading my mind. Him and the incredibly creepy moving portrait image on his blog. The thing gives me the willies.
But that aside, a lot of the Windows Phone 7 applications I’m writing are pretty data intensive and I struggle with optimization constantly. I would be delighted to learn even more from Shawn on bringing that extra performance edge to my data-heavy applications.
Tim Miller
Visual State Manager is one of those incredibly important things that I only really “get” when I study it closely and do a bunch of tutorials. It seems insanely powerful, but I have yet to really grasp how to harness that power and pull it into my applications. Plus the concept of Fluid UI is something I really like, so I’m curious to see where this goes.
Nathan Moody
Yes, I’m on a Metro kick. But that is largely because I think the Metro design style is a really elegant one and a design style I’d like to emulate. As a result, I’m on a mission to learn as much as I can about it. I’m hoping for more color theory, more font design, more motion design, and more user experience.
So that’s it. Go vote for these guys! I’ll see you at MIX 11!
One of the things that I’ve been fascinated by since last year’s MIX conference is the motion design in place in Windows Phone 7. In a past life I worked as a video producer and I’m always stunned to see how well people respond to beautiful animations… especially in interface design.
You can see this fascination in my multiple blog posts on Windows Phone 7 motion design:
Windows Phone 7 Motion Design – In which I take my Canon T2i, slap on a macro lens and try to capture the highest quality Windows Phone 7 motions that I can manage.
Now I’m trying to take my passion and talk about it at MIX 11. My goal with this talk is to show some excellent examples of practical motion design and show 1) how users really respond to good motion design and how it helps our applications seem more responsive and 2) show how to practically implement this motion design in our applications.
My goal is to help us all see how motion design is not icing on the cake, but an essential part of building beautiful applications. So, if you could, please vote for me and help me speak at MIX 11.
App bars in Windows Phone 7 are actually a pretty cool little bit of functionality. They give the user 1-4 instantly accessible options for dealing with the screen the user is on, their buttons auto-animate in, they offer “always on” funtionality that isn’t going to be hidden by the on-screen keyboard, they give designers and developers instant access to a range of default icons in Windows Phone 7 ecosystem and they offer a much wider range of options when the user taps on the ellipses to open more options.
That’s a lot for such a little thing item. So you may be asking yourself, “What the hell is he talking about? What is an ‘App Bar’?” This:
And like this when the ellipses are tapped
But what gets me is the fact that making these things is so damn easy, thanks to the fact that Blend is the single greatest product ever created for people who want to design user interfaces. And you can quote me on that. My crush on the Microsoft Blend team is well documented.
Anyway.
So let’s go about mak
Making the App Bar
ing this app bar. You may be surprised to know that we can do pretty much everything we need to do without a single line of code. Because Blend is so stinking awesome.
First, select the PhoneApplicationPage in your Object and Timeline tab in Blend.
In the “Common Properties” section, you’ll see an “ApplicationBar” property. Click on the “New” button. You should see the following:
Add App Bar Buttons
Click on the “…” button to the right of “Buttons (Collection)”. Up will pop a “Collection Editor: Buttons” pop-up. Click on the “Add another item” button.
Type “Button” and you should see a “ApplicationBarIconButton” option.
Double-click on it. It will add an App bar button to your app bar. You should have a set of “Common Properties” that you can set. Type in the text you want (in our case, “done”) and click on the IconUri box. You will see a list of default Windows Phone 7 icons. Pick the one that works for you (I picked the check mark).
Do that same thing over again, but pick the close icon and give it the text “close”. Hit “OK” to close the app bar pop-up. Believe it or not, we’re done. Yeah, we need to hook up some Click events so they can actually do something, but the rest of it is all taken care of.
If you need to get back to the App Bar design, you can just click on the ApplicationBar in the “Objects and Timeline” and see the options again.
Add App Bar Menu Items
Adding menu items is similarly easy. Under the “Buttons (Collection)” item we clicked on earlier, there is a “MenuItems (Colleciton)” button. Click on it.
We see the same “Collection Editor and we’ll click “Add another item” again. This time, though, we type “menu” and double click on ApplicationBarMenuItem.
Add the text (“do one thing”) and run the process again to add another item. Click “OK” when you’re done.
Colors & the Application Bar
Designing the App Bar is pretty easy. The icons that we assigned to the buttons actually just act as opacity masks (I assume that’s how it works… it seems to make sense) so that they will change to whatever color is assigned to the foreground of the app bar. Warning: they will default to the theme foreground unless you explicitly set them to be another color. If you’ve decided not to work with the default theming engine, you will need to explicitly set the foreground and the background of the App Bar.
I talk about this a little bit more in my post on Windows Phone 7 theming. That might be a good place to go if you’re working on fine-tuning the app bar to fit into a non-themed design.
Let’s say you don’t really want to play nice with the theming engine in Windows Phone 7. This would be pretty understandable… when you play nice with theming you either need to 1) come up with some nice innovative solution that detects themes and sets brushes and colors dynamically or 2) use only the black, white, gray and accent colors that Windows Phone 7 theming gives you by default.
If you want to create a design that uses some custom colors, it can be difficult to make sure those colors fit both themes, which can throw a cramp into your creative juices. Additionally, if you decide to toss theme-compatibility to the wind in favor of your own design, you’ll need to make sure all your control templates conform and don’t go all wonky when the user changes their theme.
This can be a pain.
To help in this endeavor, I would like to present two resource dictionaries and a sample project.
DarkStyles.xamly – rename to DarkStyles.xaml (irritating download issue)
LightStyles.xamly – rename to LightStyles.xaml (irritating download issue)
The basic idea is that I found the source style resource dictionary for all the Windows Phone 7 controls. These styles are implicitly set by the system depending on the users’ settings. We can override these settings with our own local resources. So all we need to so is set either point to the LightStyles.xaml or the DarkStyles.xaml as resource dictionaries in the App.xaml and all the controls will ignore the system settings and conform to our defined settings. Another bonus is that you can use take these dictionaries and use them to play around with colors to see how a solid theme is built in Silverlight.
So, let’s quickly walk through the process of forcing a theme in your project.
First, use Blend. It’s awesome. (You could probably use Visual Studio too, I guess.)
In your project, if you don’t have a “Resources” folder, right-click on your project and create that folder.’
Now right click on your Resources folder and “Add An Existing Item…”. In the resulting pop-up navigate to either the DarkStyles.xaml or the LightStyles.xaml file.
This should add the necessary code auto-magically into your App.xaml, but double check. You should see something like this:
And that’s it! Sort of. I want to make note of a couple of clean-up issues.
Use Blend To Check Themes
First of all, you should know how to quickly test theming changes in Blend. In the top left-hand corner, you should see a set of tabs that say “Parts”, “Projects”, “Assets” etc. If it doesn’t say “Devices”, go to the menu bar and select “Window –> Device”. This will bring up a tab that looks like this:
From here you can change the theme and accent on the fly and see the changes in your design without running the app.
HOWEVER!
Some things don’t show up very well in the Blend theming, so always always always test your app on the emulator or on the phone.
Set Your Root Background
One of those things is that the default status for a PhoneApplicationPage is to have a transparent background. You’ll want to make sure that the LayoutRoot Grid (or layout element) in your application has the background set to “PhoneBackgroundBrush”.
Turn Off Your System Tray (Maybe)
Next, you might want to turn off the System Tray at the top of your app. That’s this thing
You have no control over what color it is, only whether or not it can be seen. Select the PhoneApplicationPage in your “Objects and Timeline” tab and uncheck the “Show SystemTray”. This is not a must (most apps will still look fine with the SystemTray on) but it’s something to think about
Set The Colors On Your App Bar
Finally, if you have an Application Bar in your screen, you’ll want to make sure the colors are explicitly set on those. (Don’t know how to make an application bar? Check this post out.) Select the ApplicationBar in your “Objects and Timeline”. Now click on the little box next to the BackgroundColor property and select “Local Resources –> PhoneChromeColor”.
Similarly, set the ForegroundColor to “LocalResources –> PhoneForegroundColor”.You’re all set… you now have a theme-proof application.
1 hour into my iPhone project and I figured out the Mac equivalent of the "home" & "end" buttons. Gonna be a long night. #
Deep breath. Zen state. Trying not to light laptop on fire. MSFT: Your #WP7 app submission is beyond bullshit. #
Apparently MSFT's business model for #WP7 is to charge the shit out of free apps by endlessly rejecting them. #
@davidrodriguez A tech support rule. Easily fixed & wouldn't bother me except this is the first I've heard of it & I'm on my 5th submission in reply to davidrodriguez#
@LBugnion Sorry… just got off a call. I just choose the MVVMLite WP7 project in Blend 4 & I get a "PhoneApplicationPage can't be found" in reply to LBugnion#
One of my big projects recently has been working with the ShopSavvy team to get ShopSavvy on the Windows Phone 7. Our first release was a bit rough, but we have definitely hit our stride with the latest drop. Check it out on the Windows Marketplace.
By the way, an issue that I’ve seen a couple places already (and that I’ve fixed for the next release but I’m certainly not going to release a version of this app every week) is the issue of what constitutes a bar code number. Not seen in this video but available in the latest download is the ability to simply punch in the bar code number. What most people don’t realize is that when you have a bar code that looks like this:
The actual bar code number that we do the look-up on is this:
Overall, users would mostly be better off if they can manage to get a clear picture of the bar code and let the system sort out the number for them.
Now that the bile is out of my system with the Microsoft App Submission process, I thought I’d follow up with something that (I hope) is actually helpful. I’ve dug through the Microsoft Windows Phone 7 Application Certification Requirements and would like to present to you a quick checklist for anyone who is creating Windows Phone 7 Applications.
I’m going to skip over the obvious stuff in the formal checklist (don’t crash, don’t make the phone insecure, don’t create custom marketplaces, don’t violate copyright, if you’re making a game, look at the content restrictions, if you say you support French you should actually support French, etc). This checklist is to try to give an idea of policies that may not be obvious to all.
First things first: You need a “settings” page and your settings page needs an “about” section. Period. If you don’t have one, consider your application to be incomplete. Lots of the stuff that are required will be hard to integrate into your app without a “settings” and an “about” page (or a “settings” page with an “about” section).
Has the following unique icons that you use for the submission process: Phone tile, app list, large PC app, and at least one screenshot. You also need unique app icons for the title icon (Background.png), list icon (ApplicationIcon.png), and the initial splash screen image (SplashScreenImage.jpg) Download icon template package with the appropriate file properties.
Performance
First screen must render within 5 seconds of opening the app.
User input must be available within 20 seconds of opening the app.
Memory – Don’t eat the phone (use less than 90MB of memory)
Settings/About page – you should have one
Show the user the full application name
Show the user the application version number
Give the user a technical support contact e-mail, phone or website.
Back Button
If you have a context menu, dialog or pop-up, the back button should close it
Games – back button should either pause the game or go back (but be consistent)
When you’re on the launch screen, the back button should exit the app
Your applications should look good in dark and light themes
Note: this doesn’t mean that you have to use the theme colors. Basically, just test your application once in the dark theme and once in the light theme. Can you see everything OK? Then you’re fine.
GPS Apps
Only use the Microsoft Location Service
Allow user to enable/disable GPS within the app
You need a privacy policy telling the user what you’re doing with the GPS data
Do you plan on giving the GPS data to anyone?
Describe what data is being used or shared.
Get the user’s express permission to share the data
Even if the user gives permission, let them take it back (put a permission checkbox in the app settings page)
Apps that share User Data
Tell the user what data you’re sharing (contacts, photos, phone number, SMS data, browsing data)
Get the user’s express permission to share their data
Even if the user gives permission, let them take it back (put a permission checkbox in the app settings page)
Apps using Media (Sound/Music/Video)
If you let the user download music through your app (ie. not through the Marketplace), you have to provide the playback yourself.
Don’t change the volume without user input
If you’re playing audio while the screen is locked, don’t do anything else.
If the user is listening to music, don’t interrupt their music
If you need to interrupt the user’s music with media (example: you’re playing a short “welcome” video) continue the music when your media is done.
Do you integrate with the Music+Video hub?
You must update the Music+Video history
You must update “New” if you add new stuff through your app
You must use valid data in the tiles you add (info or pictures of the artist, album, playlist, etc)
If you put ads in the hubs, a black van will show up at your house. Your vision will go dark. They will never find your body.
Apps that integrate with the Pictures app
You need an Extras.xml file at the root of the application.
Tell the user when you’re saving a photo
Can your app launch from the pictures? It should launch with the current photo already there.
Are you sharing (uploading) any photos from the Pictures app?
You must tell the user when the photo is uploaded.
Your app must be able to launch on its own and through the Pictures app.
You must tell the user when the photo is uploaded.
Apps that use Push Notifications
You must ask user permission before you do Push notifications.
Once you get user permission, you must have an option in the setting where they can turn it off.
Apps that Use Peer-to-Peer Communication (chat, instant messaging, P2P)
If the user sets up their account through your app, you must ask the user if they are 13 or older.
UPDATE: After flying off the handle in this post, I wrote another post that will hopefully help. It boils down the submission guidelines and categorizes them into a handy checklist.
I really hate complaining about things. If you read through my posts, you’ll see I write almost entirely constructive information and tutorials. My goal with this blog is to build up, not to tear down. But I’ve had it with the Windows Phone 7 app submission process. It is severely broken. And Windows Phone 7 will be a failure as long as it is broken.
If I may submit into evidence the following non-fictional story:
Your application must make a privacy policy available to users that informs them about how location data from the Location Service API is used and disclosed and the controls that users have over the use and sharing of location data.
I was a little frustrated. After all, the submission process takes a couple days and we were planning a nice healthy roll-out for this update, which is a pretty major one. Add to that the fact that our Location privacy policy is plainly visible and available via the terms of service, which the tester could find if they had looked at the “Legal URL” field that we provided as part of the application process.
But then I looked on the Marketplace and Microsoft doesn’t publish our Legal URL in the app page. “OK,” I said to myself, “it seems kind of stupid to ask for it if you’re not going to pass the information along, but whatever. Maybe what they mean is that the user should be able to find that information through the actual application itself.”
So I added that information to the application. 2 hours of work. Resubmit. 2 days of waiting. Rejected. This time, the rejection was because of section 5.6, which reads:
An application must include the application name, version information, and technical support contact information that are easily discoverable.
Um… OK. The version that is in the Marketplace doesn’t have that. Neither, for that matter, did the last version I submitted previous to this one. It’s not that adding that information is hard… it took 30-45 minutes. But my last error report didn’t mention that at all. I would have been happy to add it when I put the terms of service in. Is it really too much to ask that they mention both of those things at the same time so that, instead of 2 hours of work, 2 days of waiting, 30 minutes of work, 2 days of waiting I could just go ahead and do 3 hours of work at one time?
Fine. You guys suck. But this is a really important update so I put in the new information and submitted it.
Wait.
Rejected.
Why?
Under section 2.10.7, I need to provide privacy policy information about the Location data.
Microsoft… what the fuck? That shit is in there. I put it in 2 error reports ago. What kind of fucking monkeys are testing my app that they don’t read my “terms of service” when my “terms of service” are both required and accessible. Do they get paid on a per/rejection basis? I only ask because I pay you $20 on a per/rejection basis (free apps have a limited number of free submissions). And when I’ve paid you and met your dumb ass requirements and get rejected based on something that makes it obvious to me that your tester didn’t actually look at my application, I get pretty pissed.
“Why don’t you include detailed instructions into the “Tester Notes” section?” you may ask. Well, I did exactly that when I fixed the terms of service problem. But either the tester was unable to see my past “Tester Notes” or they ignored them. But, for that matter, why should I need to explain that my “terms of service” has the GPS privacy policy in it? Do I need to pollute my application with an explicit TextBlock saying “By the way, Mr or Mrs Tester, in case you don’t feel like looking at my ‘terms of service’ and you are unaware that the ‘terms of service’ is actually a really great place to put the GPS privacy policy, here is a specific button that takes you directly to that very section. Maybe after I do your fucking job for you, I can make you some coffee and get you a bagel.”
Perhaps I need to write a 150 page report, walking the tester through my application as if they were 5 years old, with screenshots of the application, pointing to different parts of the app, and explaining in vivid detail how I am abiding by each and every one of the guidelines. It’s not a huge deal, the guideline document is only 27 fucking pages long (over 2 times longer than Apple’s App Store Review Guidelines) with well over 100 rules that I need to follow, written in the finest legalese.
Do I sound ticked off? I’m pretty ticked off. Does this blog post sound unprofessional? This joke of an app submission process is unprofessional. I’ve always supported Microsoft as a business-friendly company. I love business software, in part because many of my friends work in environments where they use crappy software and I love to try to build good software for businesses that are too small for a major piece of software. Microsoft has always supplied the go-to technology to make that happen. But businesses don’t like waiting 2 days to fix a 30 minute problem. And they like it even less when it takes 2 additional days just to tell the tester that they screwed up, not us. And then pay for the privilege.
Let me be as clear as possible: Windows Phone 7 is the single best development platform for mobile that I’ve seen. Very fast, very easy, excellent tools. Simply amazing. But no one gives a crap if they can’t get their apps out. It’s all bullshit if no one can get to the end product the tools allow me to create. On that count, Microsoft, you aren’t just bad. You are the worst. By a large margin.
Normally, I wouldn’t blog something that seems obvious, but it took me hours to figure this out and I always try to write blog posts for stuff that it took me a long time to figure out. Enormous props to Walt Ritscher (Twitter: @waltritscher) who helped me figure this out.
This blog post is for you if you have a sound file and you want it to:
be included with the application when the user downloads the app
play no matter what… even if the user is listening to music
First, grab the audio you want to add to the application and, if it’s not already a .wav file, make it so. If you’re just trying this out for kicks (or for the learning experience), download this files.
When prepping your audio, keep in mind if you want the user to hear it over their music. If so, make sure it is LOUD. I spent almost an hour thinking this method didn’t work because I couldn’t hear the sound over my music.
Next, create a directory in your Windows Phone 7 project and add your audio file like so:
Then select your audio file and change the “Build Action” to “Resource”
Now right-click on the “References” in your project and click “Add Reference…”. Find the “Microsoft.Xna.Framework” reference and add it to your project.
To the top of your class, add:
using Microsoft.Xna.Framework;
Now we’re going to create a stream from that resource and use that stream to play our sound.
StreamResourceInfo streamInfo = Application.GetResourceStream(
new Uri("/MyProjectName;component/Sound/Coyote.wav",
UriKind.Relative));
SoundEffect se = SoundEffect.FromStream(streamInfo.Stream);
SoundEffectInstance soundInstance = se.CreateInstance();
soundInstance.Play();
And that’s it. Your sound should play.
If you’re reading this, I assume you’re working with sound in some capacity. If you’re new to the work of sound and just want a simple way to edit and export sound files for your app, I highly recommend the free sound editing application Audacity. It saved me on my current project.
If you’re using Audacity and editing/creating sounds to hear while music is running, take whatever sound you have and amp up the gain so that the volume is peaking at about 0.
This sounds extreme, but it’s the only way I’ve been able to get the sounds to reliably make themselves heard over rock music.
