CS 342: Mobile Application Development

Mockups, round 1

Now that you have a rough idea of the things you want your project to do for its users, it's a good time to start sketching the screens your app will have, and the ways control will flow from screen to screen. For this purpose, I have invited you to join a balsamiq.com project created for your team. Your next goal is to use balsamiq to make first draft mockups of your app's screens.

What to prepare

For class on Monday, please prepare balsamiq mockups of the 3-5 most important screens in your app. Note that you can link mockup screens so the movement from screen to screen (say, by clicking on a list item or a back button) can be simulated in the mockups.

Be prepared to show your mockups to other people. You can do this by bringing a laptop or tablet that can connect to balsamiq, or by exporting to pdf and putting it on a thumb drive, or by printing out a few copies, etc. But if I say "show this other team your mockups," have a plan for how to do so.

In addition, be prepared with two short lists:

• a list of things about your screen designs that you think will work well
• a list of things about your designs that you find awkward or problematic, and that you would like to figure out how to improve

Some design readings

There's a huge literature on interaction design and usability in general, and design for mobile devices in particular. I haven't found a favorite reading for mobile-specific design yet, but here are a few online items that are worth a read.

• Android's developer site has a good sub-site called Android Design. I particularly like this collection of Android design principles, many of which extend to other platforms quite nicely.
• Apple's gigantic iOS Human Interface Guidlines (a.k.a. The HIG) requires a significant investment of time, but is required reading for iOS development professionals. Fortunately, it's readable in chunks, and it's full of great insights.
• Googling around for things like "mobile interaction design principles," I found and liked this article on mobile interaction design, and its Part 2.
• Many of the more generic usability resources are applicable to mobile devices. I know many of you have read Steve Krug's Don't Make Me Think, which is about web design. There's also Interaction Design by Yvonne Rogers and her friends, About Face, by Alan Cooper and his friends, etc. etc.
• I'm eager to get new pointers to literature from you, especially if you find good writing about mobile-specific design. If you find good stuff, please share it on Piazza.

Monday's class

My plan for Monday looks like this:

• Tell you a short story about a design problem I had on Palm PDA's a long time ago, and how I solved it.
• Show you a design problem I'm struggling with now, with mockups and discussion of tradeoffs.
• Get a team to volunteer to have the whole class look at their designs together.
• Break into two-team groups to give a round of feedback to each other.