Susan IbachTechnical Evangelist
Have you ever sat down and really thought about what made games like Guitar Hero and Rock Band so successful? Certainly the challenge of competition had something to do with it. But at its very heart, all those games are is a challenge to hit the right coloured key on a device (guitar, drumkit or otherwise) at the right moment. That’s it. So why did those games achieve such popularity? Well, it doesn’t take much to realize that these games cater to our inner fantasy of being a rock star. Seriously, who hasn’t thought of how awesome it would be to be performing in front of 50,000 screaming fans that love your every move? These games have achieved making users awesome in the moment. As a mobile app/game developer, if you can achieve that same emotional connection to your user with your app, I’m guessing your app will be quite successful too!
Mobile apps and games are interesting things. Around 5 years ago (not that long ago!), mobile apps and games were considered niche and not many people paid attention to it. Then Apple came along and changed the game with the iPhone. A stream of consciousness that every mobile platform company had finally awoke. Apple got there first, but now there are many other great mobile platforms (like Windows Phone) with great and increasing momentum and how these platforms support their application and game ecosystems has become just as important as the OS experience itself.
Windows Phone is a now a modern smartphone platform with features that are on par as well as ahead of our competitors. We also have amazing velocity with our app ecosystem, having hit over 50,000 applications in our marketplace in just over 1 year of availability. Clearly, developers see the value.
But one of the things that Microsoft is keenly aware of is making sure that good quality applications are prevalent in the Marketplace rather than 20,000 “Hello World” apps or apps of equally dubious value. This is an area where Windows Phone is doing very well. A good number of the app developers on the Marketplace have embraced and found out that their success is tied to making their users awesome in the moment.
It is pretty obvious if you take the bullet points above and integrate them into your mobile app that you will likely have more success with its adoption than if you didn’t. These ideas are not Metro-specific or even Windows Phone-specific; they are true of any mobile platform. But what do these points really mean?
Don’t make the user think about the interface: Interfaces can be minimalistic or busy depending on the goal of the app. Always remember, however, that regardless of how busy the interface is, the goal is to ensure the user doesn’t have to think about how to use the app! Make the app intuitive. Make it fun. Make it easy. Remember the quote I used in the first post in this five-post series? A user does not want to use your app. A user wants to have used your app. The quicker a user can get done what they need with your app, the happier they will be.
Deal with complex tasks, but insulate the user from the complexity: Your mobile app may do rocket science in the background but the intent is to insulate the user from that complexity.
Make accomplishing a goal easier: The intent of a mobile application is to get stuff done quickly. Always keep in mind the form factor you are dealing with; simple is usually better and reduction of complexity is key.
Help users be awesome in the moment: I’ve talked about this quite a bit already so I’ll finish with this – creating an emotional connection with a user for your app is critical to its adoption. The phone is a deeply personal piece of technology. We all tend to choose which phone we use and its often our own choice as to which apps we use the most to get things done. When a user downloads your app, they are hoping that your app will make them awesome. Always keep that in mind.
This post is the fifth and final post in a series of posts on Metro found on this blog. The first post (“Unlocking the motivation of your mobile app user”) can be found here. The second (“My app has principles – understanding the Metro design principles”) can be found here. The third (“Isn’t “tile” just another word for “icon”? Infography vs iconography explained.”) can be found here. The fourth post (“Going with the flow… Using Metro to control the experience”) can be found here.
Microsoft is showing students how to get the most out of skydrive at skydrive.com/student
Okay, I personally am not a huge fan of videos that specifically say ‘Anything you can do I can do better’ but the video at skydrive.com/student on how skydrive is a better tool than google docs for working on joint projects does make some good points and does ring true with my own experience.
The Skydrive team has even taken the time to provide you with tips for working across PCs and Macs and trying to make it easy to collaborate on office documents.
If you are going to create a Word, Excel, or PowerPoint document together, why not use a web tool designed to integrate with Office! It does kind of make sense when you think about it.
Skydrive (free) + Office (last I checked only $89 for students!) > GoogleDocs? you decide.
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: