Susan IbachTechnical Evangelist
The World Wide Imagine Cup Finals will be in Australia July 2012. If you’d like to attend, step 1 is to assemble a team and register on the Imagine Cup website.
I get by with a little help from my friends (no blog is so great that it can’t be improved with a link to the Muppets) and if you want to attend the World Finals in Australia or the Canadian Finals in Toronto this year, you’ll find it easier with a little help from your friends as well.
It’s really easy:
Now if you want to make sure you have dotted your “i”s and crossed your “t”s here are a few rules and regulations, the rules vary slightly from one competition to another so check the Imagine Cup site and look up the rules and regulations for your competition. The rules I mention here apply to Software Design and some of them apply to Windows Phone Game design as well.
A team is made up of 1-4 students
Team members must be
Okay did you anyone notice my picture shows 5 people instead of 4? That’s because it’s also a great idea to get a mentor for your team to help you along. By the way if you are curious that awesome team up there includes myself (hockeygeekgirl), Frederic Harper (the man behind Make Web not War), Ruth Morton (host of Techtalk), Mitch Barnett (coolest platform architect in the West), and Alex Yakobovich (former Microsoft Student Partner and Windows Phone developer)
Figuring out the flow of your mobile app is tough but it’s key to the experience. Without good app flow your app will be tough to use and users will get annoyed with it. Annoyed users tend not to use the app that annoys them. In fact, there’s a statistic that only 1 in 100 apps downloaded by a user actually gets opened a second time – those aren’t good odds, so anything you can do to entice the user to come back will increase its chance of success. A way to help drive a positive app experience on Windows Phone is to follow the guidance provided by the Metro design language. This post talks about what Metro can do to help you create a great navigation experience for your app.
Even before you do layouts for each screen of your app, chances are you are charting out the navigation of your app. Which screen goes where, how to determine under what conditions the user may go to the next step, etc. It certainly sounds trivial as it’s written, but in truth it’s one of the hardest tasks to do right in app design.
The flow of your app very much defines its character, more so than any screen.
Metro navigation guidance comes from 5 separate areas, each of which are related but focus on separate components of application flow.
Hub and Spoke Model: The intent behind the hub and spoke model is that you have a home screen for your app that basically all other screens are navigated to in a linear fashion. That is to say, you get to each screen in your app by following a line. There are no short-circuits in your navigation structure. If you take a look at the image to the right, the main screen is the one that is green. As you can see, the correct navigation structure for the app follows the black lines to the other screens (also black). A “short circuit”, the line in red with the “x” through it, creates a loop that can confuse navigation (and even potentially break some of the Marketplace certification guidelines on back button functionality).
It’s also important to note that the structure found in the image above can be recursive in nature. What I mean by this is that one of the black screens may even be replaced with a copy of this diagram (or another hub/spoke structure), with the green screen being one of the black screens. That being said, I caution you on making navigation structure between screens as simple as possible; complexity breeds confusion and confusion creates frustration, leading the user to abandon your app’s use.
Trust the Hardware: You may have noticed that every single modern Windows Phone device (i.e.: any Windows Phone 7 or higher versioned device) has only 3 hardware buttons on the front. Yes, these devices may have various other hardware buttons on the sides of the device, but only 3 appear on its face. These 3 hardware buttons (shown on the right), are the Back button, the Home button and the Search button. Each are easy to understand – “Back” sends you to the previous screen or out of the app if you are on the app’s first screen. “Home” sends you to the home screen of the phone, regardless of what screen you’re on at that point in time. “Search” invokes the bing search app, regardless of where in your current app you’re in.
The reason this is important is because the first two buttons in particular provide a consistent understanding of navigation to the user regardless of which app he/she is using. You must adhere to their functionality in order for your app to pass certification. In other words, do not create your own soft key back buttons or soft key home buttons. Use the hardware for the purpose that it has been built for.
Avoid Traps, Loops and Phantom Pages: As I stated before, each of these guidance areas are separate but related. This area of guidance actually is a sum of the two points above. Traps are described as getting to a screen without a natural way to get out. You can fix this by implementing the back button functionality in your app properly. Loops refer to avoiding short circuits (the red line and x in the Hub and Spoke Model diagram) that may create loops in your navigation. Phantom pages refers to making sure that there is actually a natural way to get to every screen in your app. If there isn’t a natural way to get to that page, it is extraneous and should be removed. It also refers to pages with little-to-no purpose. In reviewing the content of each of your screens, ask yourself if the content is better served as part of another screen, thereby eliminating that phantom page altogether (and reducing complexity in the process.
Be Predictable: Try to make your application flow predictable enough that your user can anticipate what the next screen will be. Conversely, make your app easy to understand with the back button. If you have to press the back button of your app more than 4 or 5 times to get to the main screen of your app, your app is likely too complex or the flow of the app could be better architected. Also, always implement the hardware back button functionality properly in your app; as discussed above in “Trust the Hardware”, the back button is how you should get to the previous screen if no action is taken on the current screen.
Being predictable also refers to maintaining a consistent experience for your app even when its use is interrupted by events such as a phone call, low battery, the user pressing the Home screen or other event that causes the app to exit. Your app should exit gracefully by saving state as appropriate (including tombstoning techniques). This will increase the chances of your app being able to return the user back to the screen and state the app was left at before its interruption.
Integrated Experiences: Some of the more interesting features of Windows Phone are its hubs. Hubs are areas of the phone OS that collect common information so that the user does not have to go to multiple locations or apps on the phone to get the information or content he/she is looking for. The great thing about these hubs is that you as an application developer can integrate features of your app to make use of hubs. The reason why this is important is twofold:
UPDATE: Arturo Toledo has just published an in-depth view of Hub and Spoke design (and linked to this post as well!) in his 31 Weeks of Windows Phone Metro Design series (a MUST READ for any Windows Phone dev or designer). I strongly encourage you to take a look at it!
By managing the flow of your application through these points of Metro guidance, your app will feel more natural and native to Windows Phone. This in turn will create a more enjoyable and productive experience for your users while in your app!
Icons are everywhere. Literally everywhere. They have become as mainstream as apple pie and any time we’re in front of a computer or other digital device, chances are you’re launching an app through an icon. But what if there was a better way?
We are inundated with icons wherever we go. On the PC desktop, on tablets, on websites, on phones and pretty much everywhere else. Icons are very useful as they are an abstraction of a concept that our brains can associate with that makes it easy to understand and launch an app.
But as an abstraction of a concept, all an icon does is act as a gateway to the user to launch an app. It doesn’t provide any real information. When we introduced Windows Phone, we also introduced the concept of the “tile”. A tile is much more than an icon. In the very base case, a tile is like an icon, but to you as an Windows Phone application publisher, the tile can become much, much more. The intent of a tile is to provide information to the user, not just an abstraction of a concept. This is what we call being infographic vs. iconographic.
The intent of Live Tiles is to present information that the user can act upon. The tile becomes more than a a picture; it becomes something that allows the user to find information about that particular app without even getting in it. For example, looking at the Windows Phone start screen (right-most phone screen), without getting into an app I know that that I have:
All of that information at a single glance, without needing to open a single app. As an app developer targeting Windows Phone, you can take advantage of Live Tiles in your app to drive further value for your users and differentiate your app over others in the Marketplace.
If you want to find out how to use Live Tiles in your apps, you can find more information on programming with Live Tiles here.
To see live tiles in action, take a look at the video below by Daniel Egan, a colleague of mine in the US:
In this blog I create my project and have to learn the different controls I can choose from to build my app
As I continue my series on building my first phone app, I have chosen the Windows Phone application template and I am ready to start adding controls to my first page. If you missed any of the earlier posts in the series, you can access them here.
As I look at the Toolbox, I realize there are a lot of different controls to choose from, so in this post I’ll try to figure out what they do. There are so many controls I broke them into three groups for my quick description of each control just scroll down, I’ve also tried to hyperlink to documentation on the controls as I researched what each control is for.
A Checkbox is a great way to let a user enter a Yes or No | True or False value. You’ll need to set the Content property to change the text that appears beside the textbox. The IsChecked property tells you whether the checkbox is checked or unchecked. There is also a IsThreeState property which allows you to have a checkbox represent something 3 different values like Yes/No/Unknown. IsChecked will be true if the checkbox is checked, false if the value is unchecked. If you enable the IsThreeState the unknown/undetermined state of the checkbox will return a value of Nothing for IsChecked.
Allows you to give the user a list of items to choose from. Specify the values to show in the list using the Items property, or I am sure you can set up data binding as well to read the data to display from some form of data source. This is the sort of list that takes up a lot of space on the screen, it’s not a drop down list. When you select one of the values it will be highlighted. I don’t see an option for allowing multiple selections, and it’s really hard to select the listbox after you create it, whenever I click on the listbox, it keeps selecting the Listbox items instead which is kind of annoying.
I guess you use maps to display data, data such as where you are, or where something is located! Looks like using this control is a bit more involved! There is all sorts of extra stuff they talk about like if you want to use a Bing Maps Silverlight Control you need a Bing Maps key which you get from the Bing Maps Account Center. I get the feeling the map control would be a blog unto itself! So for now I’ll just say, yes you can display a map and highlight locations on a map or directions on a map. I know the Where’s Timmy app from Tim Hortons has a map!
This is like a text box where you can enter data, but no-one can see what you are typing, perfect for entering passwords! Instead a character appears on the screen. You can control what character appears with the PasswordChar property.
Great to give a user selection between 2-5 choices on the screen and only one can be selected at a time. Use the Content property to change the text displayed beside the radio button. The IsChecked Property will tell you if a particular radio button is selected. When you add multiple radio buttons to a screen by default they all become part of one group, so as soon as you choose one radio button, all the others are deselected.
A slider is great for getting a user to choose a value in a range. You specify the highest and lowest values for the slider control with the Minimum and Maximum properties and then the Value property will tell you the value selected by the user.
This is your label control for displaying text. You specify the text to display with the Text property.
This is your control for letting users type in data with the on screen keyboard, the Text property will tell you the value entered by the user or can be used to set a default value.
This is the new control that came out which allows you to include advertising in your applications. Adding the control is pretty straightforward, drag and drop. You can set the height and width properties to resize it. But it takes more than just dropping the control on your form to get advertising working according to this site. You have to register your mobile app using Microsoft pubCenter and then you have to set the Application Id and Ad Unit ID properties in the ad control then you will have an ad enabled app in the marketplace to make money.
Buttons are what you expect, buttons a user can tap to do something. You’ll want to set the Content property because that controls the text that appears on the button. At some point you will create Click event handlers for the button as well where you can write the code that makes stuff happen when a button is pressed. One thing I noticed about the button control on the phone is the buffer around it. It turns out this is deliberate so you don’t accidentally put buttons really close together and make it hard for someone with fat fingers to tap the right button.
Is exactly what it sounds like: it’s a button that looks and acts as a hyperlink. You will want to set the NavigateUri property to specify where to go when someone clicks it, and the Content property to change the text that appears for the button.
This control lets you add audio or video. You specify the audio or video to play in the Source property. I found a little article here that describes how to use this control.
This control could display HTML content you generate in your code if you want to get fancy, or you can use it to display content from a website specified by the Source property.
Allows you to draw a pretty border around other controls on your form. You can set the properties you would expect like BorderThickness and BorderBrush to control the color and thickness of the line around the border, Background to change the background color within the border. CornerRadius is kind of cool so I can make rounded corners. Wow, I could make some really ugly apps with this. Check out my green and red border with rounded corners! Did I mention, I am not known for making elegant looking pages.
According to MSDN: “A canvas defines an area within which you can explicitly position child objects by using coordinates relative to that area.” Okay then I guess I would use a canvas if I want to be able to move something around on the screen with my code. I guess I could make one of those annoying pages with a button that says “Click here to win one million dollars” and whenever you tap on it it moves. You can set the Background property to set the background color.
This just draws an ellipse on the screen. The Stroke property controls the color of the outline of your ellipse. StrokeThickness controls the width of the line. Fill controls the background colour of the ellipse. Weird how all the property names are different for Ellipse than they are for Border and Canvas eh? I made an ugly red and green ellipse to go with my ugly border.
A grid is an area made up of columns and rows, so this would be great for displaying a table of data. You’ll need to go to the ColumnDefinitions property and add ColumnDefinitions for each column you want in the table. For each column you can specify a MinWidth and MaxWidth property. Then you need to go to the RowDefinitions Property to add a RowDefinition for each row. There is also a ShowGridLines property that controls whether you see the lines on the grid between columns and rows. You can then add controls in the different squares of the grid. Here’s my 3 row, 2 column grid with the grid lines displayed.
Okay I know Images can be used to display data or to make things look pretty, I had to pick somewhere to put it! The image control allows you to display images. Use the Source property to specify the image to display. If your images aren’t the same size as your image control, play around with the Stretch property to control whether it clips, or resizes the image for you. It looks like JPEG and PNG formats are supported
This just draws a rectangle on the screen. The Stroke property controls the color of the outline of your rectangle. StrokeThickness controls the width of the line. Fill controls the background colour of the ellipse. Weird how all the property names are different for Ellipse than they are for Border and Canvas eh? I decided to go with blue and green for my rectangle
The ScrollViewer lets you create a scrollable area, great for letting users read large amounts of text that might not fit on the scree, the user can then scroll to see all the content. It can have a horizontal or vertical scroll bar which you control with the HorizontalScrollBarVisibility and the VerticalScrollBarVisibility properties. Now what’s interesting is when I did a little searching I found a few articles that said you need to use Blend to create a ScrollViewer, those were pre 7.5, but when I tried to dig into 7.5/Mango I found comments about performance improvements so maybe you still need to use Blend to create this, still not sure. I could see this control being very useful though!
A StackPanel lets you nicely line up child controls horizontally or vertically, for example you could make sure all your radio buttons are nicely lined up. I like this one, easy to use and helps me make my form look much cleaner!
Metro is gaining popularity as a way to create compelling app designs for Windows Phone. It’s theme is distinct and very oriented towards providing the user with information. At the same time, given its emphasis on information, it is more than just presenting data on the screen. A well-built Metro app follows a set of principles that make the app truly flow and through that makes the app useful.
The marketing for Windows Phone often proclaims it as the glance and go platform. The intent of this catch phrase is to convey the fact that you can get information from your phone in only a very short amount of time looking at it. And from that quick glance and the information you retain from it, you can decide the course of action you want to take from it, be it opening your email client to check your email, find out who called you, answer a Twitter message, or even grab that umbrella because your weather app told you that it’s raining outside. The platform really tries to live up to that glance and go mantra.
But how does an app use Metro to achieve the glance and go goal? Like life, there is really no one answer to that question; your creativity as the author of the app plays a distinct role in this process and guides it to its finish. That said, free reign to do whatever you want can lead to issues with the experience the app provides its users.
With great power comes great responsibility.
That’s where the Metro Design Principles come in.
The principles as laid out in the graphic above are meant to provide you with a set of guidelines for building your app using Metro the right way. What it is not is a blueprint. The guidelines above are not meant to define your app or its personality; the intent is to allow you room to express the creativity of your app.
So, with that said, here is a brief description of the principles as laid out above:
Clean, Light, Open, Fast: This refers to the flow of the app. How is the experience of the app from the user perspective? Is it responsive and dynamic? Is it inviting and usable?
Celebrate Typography: Rarely is text mistaken for art (at least in the visual sense; in a literary sense it is absolutely – one of my personal favourites of literary text as art is Ken Follett’s Pillars of the Earth, but I digress…). In Metro, however, text is very much artful. Because Metro is very text-driven (again, due to its focus on information), how you use fonts and how you place text on the screen is very important. That said, your app should not be only text; this is a common misconception with Metro. Use text wisely. Use it as much as you need it and no more. Make sure that the text flows with other screen assets like images, video, buttons, etc. It should look and feel natural.
Alive and In Motion: This principle follows closely with Clean, Light, Open, Fast. Your app should not feel or be static. Use animation (but not too much to cause negative distraction). Use of colour is important (you know those apps in the Marketplace that are black backgrounds with white text and not much else? Yeah, those apps may look “metro-ey”, but they are not really Metro). Make sure your app invites interaction with the user. Your app should compel the user to explore and use your app.
Content not Chrome: When we say “chrome” we speak of the facilities of the app meant to provide peripheral functionality. Chrome in this context are things like app toolbars, system information like battery life remaining, URL bars, etc. Your app should focus on giving the prime real estate of your app to its content. Content is king. Not buttons.
Authentically Digital: In the times of the Renaissance, there was an explosion of discovery that made a permanent impression on the human condition and how we view ourselves. Art, science, philosophy, social awareness – all of it was viewed through new lenses with the guidance of genius of the likes of Galilei, Michaelangelo, da Vinci, Machiavelli, Copernicus and others. The world was their canvas and the expression in their creations were limited only by their own creativity. We, on the other hand, are not afforded the boundlessness that these great thinkers had in the physical sense. The unlimited potential of the apps we create are truly found in their digital nature. This is because apps are limited by the form factors that they are housed in. The art and awesome power of the app are found in the bits that are interpreted by the hardware.
The content of this post is just a very brief description of the Metro Design Principles. If you want a truly immersive description of them, I encourage you to check out Arturo Toledo’s post titled 31 Weeks of Metro Design | #1 Metro Design Principles and the Metro Design Language.