What’s the Point of a Windows Phone 7 Cannon if It Doesn’t Look Great?

I think Doc Brown summed it up best in Back to the Future when he told Marty, “The way I see it, if you're gonna build a time machine into a car, why not do it with some style?” Accordingly, that's the approach we took when we set out to design the user interface for the Windows Phone 7 Coding4Fun Cannon.

In this multipart article series, we'll cover:
  1. Project overview
  2. Developing the phone application
  3. Building the robot
  4. Creating the phone user experience

Designing With One Hand Tied Behind Our Backs

After Clint got an eleventh-hour email from Scott Guthrie asking him to build t-shirt cannon for the 2010 Mix Conference, we got an equally cryptic email at 352 Media Group asking us to create a touch screen interface in Silverlight for a t-shirt cannon. The only trouble was Clint wasn't allowed to tell us that it would run on the phone. Instead, we were given only the dimensions and some basic direction. We had a pretty good guess about what we were designing for, but we still had to proceed with caution. The initial request was for a set of icons, as well as a targeting reticule for use on the aim screen. Here are the icons we were asked to create, along with their preliminary descriptions:

Icon

Description

Icon

Drive mode

Driving the bot

Steering wheel

Aim mode

Aiming the cannon

Targeting reticule

After creating the icons, we needed to create the screens for the main “status” screen, drive mode, aim mode, and finally fire mode. Here are some rough sketches given to us, to which we've since added the phone hardware. The icons were the ones we created in the first step, thrown in there on the right hand side. These gave us a good idea of what information needed to go on each of the screens:

Status Screen:clip_image002

Drive Mode:
clip_image004
Aim Mode:
clip_image006

Fire Mode:

clip_image008

Ready, Aim, Skin!

With our murky marching orders, we got to work creating some concepts. Most of the design was focused on skinning built-in Silverlight controls. The graphics were imported straight from Photoshop into Microsoft Expression Blend and used as various backgrounds and control-state skins.

Because we were given a set screen size, we didn't need to create a fluid desktop layout and could instead focus on the design requirements of a small touch screen. Having worked with Microsoft Surface, we were already aware of certain touch screen-based UI patterns. For example, designers need to create buttons that are large enough for the average user to press with a finger, which is not as precise as a mouse. Also, touch screens typically won't have a mouse-over control state (there is no “hover”), so interactive elements must obviously appear touchable and exhibit a noticeable pressed state even when the user's finger may be covering the majority of the button.

Considering the audience it was going to be debuted to, we decided to create a tech feel. The idea of live webcam feeds for the backgrounds was tossed around, but given the fact that Microsoft had only one evening to test the hardware on-site, they decided to scrap that. Instead, we thought it would be fun to use floor plans of the Mandalay Bay conference center, which we found online. Here are the versions of each screen that we came up with:

Status Screen:clip_image010

Drive Mode:
clip_image012

Aim Mode:
clip_image014

Fire Mode:
clip_image016

Getting Creative With Controls

Some of our usage of simple controls in this project may surprise you. For example, the tank's gas pedal is simply a Silverlight button. Its pressed state has a slight shadow effect with a 0.2 second transition. The network status indicator lights are actually checkboxes. This allowed the C# developer to simply alter the checked state of each light rather than manipulate design attributes like color or opacity. The stick-shift is one big SliderBar with two values (zero and one), which took care of all the finger-dragging functionality.

clip_image018

One of the key changes we made across almost all controls was to increase the state transition time from zero seconds to about 0.2 seconds. When your Silverlight interface has a touchable physicality to it, a very short transition time makes the user experience feel a little more lively and less jarring than the “immediate flip” you might see in any other platform. Plus, it's a short enough time span that it won't interfere with the usability of the application. Anything above 0.3 seconds will probably feel sluggish.

clip_image020

We also took a couple of shortcuts when importing the graphics from Photoshop. The most obvious appears on the main menu, where the 4 circular icons are visible. We made each radio button's unchecked state transparent and placed all the icon graphics in the background image. Then we added the icons with the green glow as the “checked” state for each of the radio buttons. So, there are only 5 total images used for the menu. This was a quick way to implement the icon menu without spending too much time adjusting vector graphics and applying glow filters. Plus, we knew that if any icon graphics needed to be updated on-site, we'd only need to replace the effected PNG files and recompile the project.

clip_image021

Looking back at the driving screen's XAML, you can see two storyboards. There is a storyboard for switching forward and another for switching to reverse. Now we know more about the Visual State Manager in Silverlight. It allows you to define distinct, mutually exclusive states for a userControl's appearance. What we could have done is create two visual states called “Forward” and “Reverse” and switched between them programmatically. The VSM handles all the animations and handoffs between states, so this would have not only made the codebehind more streamlined, but simplified the XAML as well.

Conclusion

It was hard to tell during the MIX keynote if the crowd liked the interface. Most of the attendees were ducking for cover after they saw the distance and power of the cannon itself. We decided that the best compliment is that people didn't talk too much about the UI. I mean, you should only notice it if it's not working as you'd expect, right?

If you want to try this out, the download link for the source code is at the top of the article!

About The Author

Lincoln Anderson and Tim Pratt are senior designers at web design company 352 Media Group.  352 Media Group focuses on emerging technologies like Microsoft Silverlight Design, Windows Phone 7 App Development, and Microsoft Surface Development, has worked on other cool tools like the WEIshare.net tool and the Tweetcraft WOW Twitter client.

Follow the Discussion

Comments Closed

Comments have been closed since this content was published more than 30 days ago, but if you'd like to continue the conversation, please create a new thread in our Forums,
or Contact Us and let us know.