Susan IbachTechnical Evangelist
Ok, I admit it. The headline was a bit of link bait given how obvious it is. That being said, it’s surprising how often the mistake is made by app developers to add more features and screen activity than is necessary. This is especially true of developers porting a PC app to the mobile form factor. It’s actually really easy to fall into the trap of making an app busier than it needs to be. Good mobile app design is more than an appealing UI. It’s even more important to understand the purpose of the app and how it will be used. Take your cues from that and your app will be more usable to the masses. This post is the first in a five-part series on creating awesome mobile UIs and creating your app with mobility-first in mind. The second post will be on placement of controls in your UI to be most effective for frequent use. The third post will be on the size of UI assets on the screen and why it is important. The fourth post will be on when to use an app bar vs. populating controls on your app’s screens. The fifth and final post will be on implementing gestures and animations to make them useful to the app.
A little while back, I wrote a 5-part Metro Primer blog post series that has received some pretty great reviews (thanks to those who shared your feedback on this series!). The intent of this series was to introduce you to Microsoft’s Metro Design Language if you hadn’t yet seen it as an app developer and if you had seen Metro before, to help you craft great Metro experiences. Metro is powerful and expressive and you can really create amazing and artful experiences for your apps with it. Like any other user interface paradigm, however, it’s just as easy (actually, maybe even easier) to create truly horrible experiences that ultimately hurt your app’s chances of being adopted.
This series of 5 blog posts (the others will be posted throughout the next few days on this blog and the Canadian Mobile Developers blog) is meant to be a companion to the Metro primer in that its purpose it to provide some good practices to use for your apps’ screens so that they are effective, intuitive and make your users come back to the app. Even if you never read the Metro Primer series, you might want to read this series as I will dive into tips that will make you think critically about how to build the UI for your app. And a little hint here – a lot of what I’ll talk about is actually platform agnostic. So if you are an Android developer, iOS developer or any other mobile platform developer, this content could be very useful to you.
Again, duh. Clearly they are not the same. Even the smallest of laptops are distinctly different from mobile devices. Yet many app developers make the fatal mistake of assuming a mobile app is just:
In the back of our heads, we all innately understand the concept that mobile devices and PCs are fundamentally different. But when we make the mistakes like the ones listed above (and trust me, app marketplaces across all platforms are littered with examples), it becomes clearer that the issue is not as cut and dry as it first seems.
Let’s face it. Even app developers that are currently in high school have earned a pedigree in understanding their way around a computer. In many cases, that history with PCs is long and full of experience building technology solutions that target PCs. When we make the change to becoming mobile app developers, we have a bias (whether or not we are aware of it) towards building apps that adhere to traditional PC software design principles, at least in part. Children in grade school are seeing a very different technological reality. Their first experiences in technology are just as likely to be on a mobile device (phone or tablet) than on a PC-form factored device.
If you take a look at the PC, it is a true workhorse tool capable of doing almost infinite things. It also has a lot of power behind it. It also has the ability to provide a huge amount of screen real estate. Mobile devices are by nature almost the opposite. They are capable of doing amazing things, but the use case is generally much more limited than that of a PC. Likewise, the power of the device, while equivalent in modern smartphones to PCs even just 5 years ago, is limited and the intent is to have it untethered from power sources for much larger amounts of time. Finally, screen real estate is generally fixed and often small.
As developers of traditional PC or web solutions, our mindset must change from creating apps that are scaled down versions of PC apps. That just doesn’t work. And believe me, it’s tough to remove yourself from a PC mindset when designing a mobile app. Instead, try to watch grade school children use mobile technology and try to understand the patterns they employ to get tasks done on those devices. The activities that grade school children do on mobile devices are much more pure to the spirit of the mobile form factor as they have no real past history on the PC form factor and provide hints as to how to best implement functionality in your mobile app.
The last point I will bring up in this post is to always keep in mind that we need to design for motion. By motion, I don’t mean crazy animation on the screen (that’s a topic for the fifth post in this series). I mean we have to design our app with the understanding that our users are always in motion. Your app will be used by someone that is just as likely to be walking to an elevator or shifting in the cold waiting for a bus as someone who is sitting at his/her desk.
In other words, this is what we think mobile experiences are like:
When, in fact, mobile experiences are more like this:
Busy user interfaces on mobile apps simply don’t work in truly mobile conditions. Users are not going to pay 100% attention to your app if they are on the move, so designing the user interface to take this in mind will make your app exponentially better to your users.
March 8th, we have a full day of free webinars just for you. A great opportunity to learn about Web, mobile, design, cloud computing and more…
Here is the amazing schedule we put together for you:
Oh and don’t wait to register: the first 100 people to register for a seminar AND to attend WebCamps on March 8 will get our latest Web Not War gear! It's super secret.... but super awesome! You'll definitely want to get one. Just sayin'.
For more details about the sessions keep reading!
11:00 – 11:45am - Designing Mobile Apps that Don’t Suck - Paul Laberge
Over the past 3-4 years, mobile apps have moved from a niche market for a select few developers and designers to a massive new economy across multiple platforms. Gone are the days where a mobile application is seen as an afterthought; it’s simply not enough for a mobile platform to be “good at email”. While this is true and there are apps that cover almost every imaginable task, its arguable that the majority of those apps are poorly designed and could use significant improvement to their user experience. In this session, we’ll show you what you as a mobile app developer/designer should be thinking about when building your app, regardless of the mobile platform you are targeting. We will go through a great number of topics including how to standardize the look and feel of your app to the platform, creating an effective and appealing user interface, implementing your idea for the mobile form factor and more.
Click here to register.
12:00 – 12:45pm - Take the red pill and enter the Matrix - Frédéric Harper
Don't fear the Agents anymore. In this presentation, we'll show you how it's easy to build a Website with the right tools. Including a Web server, a database, a SEO reporting tool and much more, WebMatrix, a free IDE, give you anything you need to be as fast as Neo. Coding in PHP or HTML5 has never been so easy. You work with Wordpress, DotNetNuke, Joomla or Umbraco? Don't worries, you'll be up and running with these (and more!) in less than five minutes. If you don't want to control the Matrix, you can always take the blue pill...
1:00 – 1:45pm - Winning on Mobile Marketplaces: Strategies for your Mobile Apps to Gain Traction - Paul Laberge
If you are a modern mobile developer then you already likely already know that it’s tough to gain traction in a crowded, central Marketplace. In this session, we go through strategies for distributing your app and game both publicly and privately. You can use these strategies to help market your app or game and give you some ideas for addressing how you can convince users not only to download your app, but also to keep opening it and using it over your competition.
2:00 – 2:45pm - Responsive Web Design: The View of the World Depends on the Glasses I Wear - Thomas Lewis
There is no mobile Web, there is no desktop Web, and there is no tablet Web. We view the same Web just in different ways. So how do we do it? By getting rid of our fixed-width, device-specific approaches and use Responsive Web Design techniques. This session will focus on what is Responsive Web Design and how you can use its 3-pronged approach on your current apps today which will also adapt for new devices in the future.
3:00 – 3:45pm - What’s That “Cloud” Thing? – Jonathan Rozenblit
The Cloud is like the new “HD”. Everywhere you go these days, there’s something about the Cloud or someone is talking about it. So what’s hype all about? Why do your applications need it? Tune in to find out. You’ll see how your existing apps can go to a whole new level and how your new apps, whether they’re on the web, on the desktop, or on devices roaming the world, can go from being awesome to being epic.
Click here to register.
There are extremely few popular device apps that do not connect to some kind of web-based or cloud service. Today’s apps are connected experiences and derive a great deal of value through the content they consume from services. See, through an end-to-end development experience, how connecting your Windows Phone, iOS, and/or Android device apps to the Cloud opens up a world of interesting possibilities.
5:00 – 5:45pm - Introduction to Drawing with HTML5's - Thomas Lewis
Ever wondered what life is like for an independent game developer? Microsoft Student Partner Jessica Pellow interviews Lisanne Pajot and James Swirsky about their film “Indie Game: the movie” a film selected for the 2012 Sundance Film Festival that follows the stories of four game developers.
Bruce Mau, a Canadian designer, said “To invent something you have to be removed from the world. In order to have liberty to imagine something better, you need to step outside for a while.” This seems to be fit the premise of the new documentary film Indie Game: The Movie, a film which at its core is a story about imagination and perseverance. Indie Game follows four developers at the various stages in their projects and captures the trials, tribulations, and the human element behind game development.
Indie Game: The Movie is the creation of Canadian filmmaking duo Lisanne Pajot and James Swirsky. In addition to the initial idea, they are behind the producing, directing, cinematography, editing, and writing that went into this film. For over a year they have gathered the stories that make the film what it is and were kind enough to answer a few questions about their film, the world of gaming, and what makes them passionate.
To start with, do either of you play video games?
LISANNE: James has been a lifelong gamer. I got into games through this project. I wasn’t much of gamer before.
JAMES: I grew up on games. All events were plotted and personally valued in terms of their proximity to Arcade machines. A trip to the Grand Canyon was considered a waste of time ... unless it had a Double Dragon machine in the gift shop lobby. In which case: Best. Trip. Ever. This went on for a long time ... until it didn’t. Something odd happened. The magic kinda stopped for me. It could’ve been growing older, drifting away from childhood things. It wasn’t until I was introduced to independent gaming that the magic came back to games for me. There was that sense of childhood discovery returned in indie games.
From what I understand, this project was sparked because the province of Manitoba reached out to you to do a documentary of a game developer. What was it about working on that initial project that attracted you to the gaming community?
LISANNE: We were commissioned to do a series of documentaries on people in new media in Manitoba. One of the docs was on a programmer/designer Alec Holowka, who made Aquaria, with designer/artist Derek Yu.The story was about the making of their game and their eventual-winning of the Grand Prize at the Independent Games Festival.
In talking to Alec, we learnt about his creative process and how his personal experience of making it basically shaped the feel/tone of the game. That was really compelling to us.
What was your impression of the Game Developer's Conference in San Francisco? In some of your interviews in the past you've drawn parallels between game development and film making as both being forms of storytelling. Do you feel that filmmakers and game developers have a similar sense of community?
JAMES: After the short doc on Alec, we ended up at the Game Developers Conference in San Francisco. There we found the Independent Game Summit, and we just saw this whole room of similar people with similar stories of making games.
The games were interesting, looked amazing and they were reaching millions of people online. It felt like there was this sort of thing happening. There was this energy in the room. Everybody was sharing. When they were sharing, they were sharing about their games but really they were sharing about themselves. That whole idea of the game as an extension of personal expression was something that was interesting to us and something that we hadn’t really thought about. That’s sort of what kicked it off.
LISANNE: I think that we identified with feeling of working on your own, on your own thing. It was the DIY spirit that attracted us to it. We hadn’t met any other creators like this. We just hadn’t in the film worlds we were exposed to. We thought what theses people are doing is really interesting and inspiring to us - even though we don’t make games.
Being so fully immersed now in the gaming community, do you feel that this prolonged exposure has changed anything about you as individuals and/or filmmakers?
LISANNE: I think, seeing all the examples of hard work and perseverance in the indie game world helped give us confidence and propelled us to finish our big project.
It was life-changing to watch the developers in the film, go through what they went through, and come out of it.
In the film you see the developers, go through a wide range of emotions. They go through challenging situations. It’s tough to make something on your own. But, I think there’s value in seeing people go through that. It’s motivating, because, “if they can do it, I can at least try”.
What impact do you feel your film will have on gaming development, whether it be indie game development or more mainstream?
LISANNE: We hope it will have impact with all gamers, but also people that don’t necessary identify as gamers. We tried to make the film satisfying for people in the gaming community, but also accessible enough that your friends that don’t understand, yet, will get it. It was a tough balance, but we think, we hope, we achieved that.
Now that you've fully dived into the world of gaming, have you stayed part of the community? Do you feel the release of this movie has guaranteed you a place among the gamers of today?
LISANNE: We talk game community every day. We get lots of e-mails and tweets. We try to respond to everything. We get such a thrill out of reading e-mails from kids (they are really kids) who were inspired to start making games, in part, because all the clips we released. That’s an amazing feeling.
You've had the opportunity to be exposed to some very talented and passionate game developers now. Have you considered or tried making a game or app yourselves? If you did make a game, what would your game be about?
LISANNE: Nope! Mainly because we were so consumed with making the film the past year and a half. When the dust settles, if would be great to try to stretch our brains around an idea. But, really the talent for that stuff lies with the guys in the film.
What suggestions or advice do you have for students interested in developing games?
LISANNE: All the developers from the film would say - just start making stuff. The more you create, the better you get. And, that’s experience as well.
Indie Game: The Movie is an official selection of the 2012 Sundance Film Festival and the 2012 South by Southwest Film Festival. Visit www.indiegamethemovie.com to see trailers and learn more about the film.
Simon Carpentier a student from École de Technologie Supérieure shares a few great resources and tools on storing data and barcode scanning he discovered while building his first Windows Phone App
Want more tips and tricks from students? Check here.
Could you briefly describe your application/game? Wine Cellar is a Windows Phone 7 app designed for Québec's wine enthusiasts. Scan the UPC code of your bottle or enter it manually and get information such as the price, origin and appellation. The app stores your wines so you get a nice database of your favourites. Right now it's pretty basic but I plan to update it so you can add additional information to a wine (tasting notes, how many bottles you have in your cellar, etc...)
Did you use XNA, Silverlight or both? It uses Silverlight only. It's not a game so there was no need for XNA. Maybe one day I'll add some animation to make thing prettier, but I think Silverlight is more suited for this kind of application.
What was your banging your head against a wall moment? I have a web development background so I'm used to having full control over my database from the server side. I had trouble with data services when came the time to add tables between updates. The app crashed because the database schema wasn't the same from one version of the app to another. I thought I would need to maintain separate schemas and migrate the data from one to another manually.
Did you ever solve that issue? After a little search, I found there's a built-in DatabaseSchemaUpdater class made exactly for this scenario in the WP7 SDK. It's also very well documented on MSDN
If you had to build this same app again from scratch, what would you do differently? I think my app is ugly. Starting from scratch, I would take my time to learn WPF and XAML correctly with Microsoft Expression or ask a designer friend to "prettify" (© Susan) my app. The best I could do was to buy a 10$ graphic and use it as an icon.
Any nice suprises? Besides the SDK being really easy to install, I never really expected the Isolated Storage and Data Binding to work at first try. Well it did and I was shocked on how simple it was.
Did you leverage the mobile platform? The app uses the camera and Windows Phone 7 Silverlight ZXing Barcode Scanning Library to scan barcodes of bottles right from the phone. That's something a PC wouldn't do and I don't usually drink my wine around PCs.
Did you leverage the touch screen? No, not really since it's not a game. I respect the metro design principles though so my app reacts the way a user would expect.
Did you have a favourite feature? The Model-View-ViewModel project template of the WP7 SDK helped me get right into developing. I easily learned my way through the development stack.
What is one thing you think you did really well in this application? The navigation between the pages using query strings. I pass the ID of the wine right in the Query String when I call the wine details page. With the OnNavigatedTo event, I load the data so there's no need for tombstoning or keeping application state.
Are you publishing your application/game? Of course! It's available right now here
Where can I learn more about your app/game? The source code is available at Codeplex.
Who developed this application? I did, it took about 2 days to build from scratch with no prior WP7 knowledge. I'm graduating in IT Engineering this semester from ÉTS. I also have a personal website where I showcase my other projects and ramble about technology on my blog.
It’s not too late to enter the Windows Phone Game Design category for Imagine Cup, just register and submit a summary of the game you plan to build before 23:59 GMT February 14th
Warning! 23:59 GMT means 19:59 Atlantic, 18:59 Eastern, and 15:59 Pacific so I suggest you get this submitted on the weekend or by end of day Monday so you don’t accidentally miss the deadline because you lose track of time zone differences! (Those times are based on my math which may be incorrect)
The Canadian Imagine Cup Finals are hosting two categories: Windows Phone Game Design and Software Design. The first round deadline for Windows Phone Game design is just around the corner, Tuesday February 14th! You know you can build a phone game, I’ve spoken to many of you who have already done it! If you have been thinking about it, or you have registered but not yet submitted your summary. Here’s what you need to do. A full description of the requirements and instructions to enter round one can be found here
Download the Game Summary Template (example) or the Game Storyboard Template (example) You only need to fill out one OR the other. This document basically needs to describe the game you are building. This round is not judged, it is simply a way for us to find out how many teams are entering and what they plan to create. But submitting your Game Summary or Storyboard by midnight GMT February 14th is mandatory!
The Game Storyboard should contain at least four image panels and at most 20 image panels
The content of your game must address a social cause connected to the Imagine Cup 2012 Theme: “Imagine a world where technology helps solve the toughest problems”. There is an example of a completed storyboard here.
A couple of little things to be aware of when you submit your entry
Because we want to be able to share information about your entry with judges (and if you advance to finals, with the public) we require a few extra details as well.
I know there are lots of students in Canada who can built great phone games, I’ve seen some of the games you have created! Register and submit your idea for the Game Phone Design and maybe you will be on stage at the Canadian finals representing your school!