I have done three Silverlight apps for Microsoft Advertising so far. This was the first. It’s a tool to help advertisers hear what people from different audiences think about various online activities.
First step. How to present the info?
The simplist way the look this was to follow the users’ steps through the data going into the tool. I could see that it was divided into four levels.
- Select an audience group
- Refine the selection with available options
- View the results list
- Select a vox pop from the results
These levels are easily divided into four panels.
- A top level menu
- A panel with selection tools relevant to the top level menu item selected
- A large results panel with thumbnails of the videos
- A selection overlay with a close button to return to results
After sketching out a number of potential solutions two ideas were presented.
- A conservative approach
- An innovative approach
The main aim here was to match the design as closely as possible to the Microsoft Advertising site and use tools already familiar to the user. For a bit of wow the results could be shown with an Aero style slider.
In the alternative I designed new selection tools tailored to the app. They are a hybrid of checkboxes and a list box. You can click the catagory buttons and add options. You can see all your selections as they divide the available space. Only the deselected options are shown in the pop-up list. This is much more versatile than using drop-down lists. It also takes up less space than using loads of checkboxes or radio buttons. This is the chosen design.
The final app uses shaded tones of the Microsoft Advertising red. It was a good call by Microsoft as it looks brilliant and it’s bang on brand. Originally I colour coded the selection tools. This is how it looked.
XAML, C# and all that jazz
I love using Expression Blend. It’s a great layout tool. Before starting though I like to map out the app in OmniGrafle. Yeah, Mac and Windows. I like to mix it up a bit. I could have used Visio or Dia. I’ve been using OmniGraffle for years though, so it’s the most obvious choice for me when creating diagrams. Notice how it’s really a summary of the user controls. Isn’t XAML grand?
All the data is in XML. The name of the xml file is passed into the xap via
InitParams. This avoids caching issues when updating the XML. The XML also includes all the text. This means we can change the language by swapping the file.
Here’s a list of tools I used.
- Microsoft Expression (Blend, Design, Encoder & Web)
- ColorSchemer Studio
- Microsoft Visual Studio
The Microsoft Audience Insight Tool can be found on the Microsoft Advertising UK site. For those of you with the Silverlight 4 or higher plug-in here’s a link. :-)