9 steps to design a mobile application

If you’re considering building a mobile app, there isn’t a lot of advice out there about how best to do it. There’s a ton of web design advice, but it ports rather poorly to the small screen. Mostly by trial and error, I’ve been able to come up with a simple method to determine whether a design will work, so here it is.

The biggest difference between a mobile app and a web app, from the designer’s point of view, is the need to cater to a different pointing device: the finger. It’s fatter, and there is a lot less real estate. If you try to design a mobile app using paper prototyping and static photoshopped screenshots, you are going to end up with an app that is hard to use, hard to navigate, and too small on the eyes.

Instead:

1. Create the flow. Start by breaking down the flow that supports your use cases into small chunks. These will be the screens. Focus on the content, and the operations will naturally follow. Then, make a map which describes how to get from one screen to the other. Just remember that there are established navigation guidelines for some platforms like the iPhone, and no guidelines for some other platforms, like Android.
2. Make mock screens. Design each screen with a program like OmniGraffle… or anything that allows you to layer and reuse UI elements.
3. Look at the screens on the smartphone. Cut each screenshot into an image, then save all the images to the device you want to support. Use a gallery / image viewer software on the device’s screen to view the artwork. How do things look? Do you think you could fit a finger in that widget? Are the fonts too small (generally, yes)? Did you try to fit too much information (generally, yes)? Are there too many rows of data? (generally, yes)… Iterate over steps 2 and 3 until you’re comfortable with the answers to these questions. Also, don’t forget about landscape view.
4. Make a very simple static app to test the navigation. Implement the home screen of the app with real widgets. Don’t implement any behaviors for the widgets. If you touch a widget, all it does is open up the image of the corresponding screen. Touching the image takes you back to the home screen, or progresses you through another image until you finish the sequence. The idea is to figure out if the navigation will work. Are there too many steps? (probably yes) Is it obvious how to accomplish the task? Did I get the sequence right?
5. Determine if you picked the right widgets. Take some time to replace the most important screen images with actual widgets. Use mock data, just try to reproduce the most important states based on some representative samples. Did you pick a drop down/button/slider/menu that is appropriate for this function? Wherever there are lists of choices, did you have the right choices? Did you name the actions correctly?
6. Screen the app with a developer. At this point, you should have large chunks of the GUI elements of the application implemented in a static manner. Show it to a developer who will be in charge of implementing the application. What does he think? Are there areas of the design that will be hard to implement? Are there potential performance issues in some screens (e.g. the widgets can’t be reused when you scroll, they need to be redrawn so the response time sucks). If the developer gives you a go ahead…
7. Test the mock application with users. This would be no different than mock application prototyping. If the users like it…
8. Apply the visual styling. Things like colors for buttons, backgrounds, shades, etc… Don’t get too cutesy, there’s only downside.
9. Implement. Take all the design artifacts, the visual assets, and hand them over to the developer, the app is ready to be implemented.

What have you found that works best to design a mobile app?