Mobile app design presents some familiar challenges and some that are new. A good blend of discipline and tools can help.

Over the past few years, I've discovered that the most difficult part of designing mobile applications is the user interface design piece. The difficulty is getting the client a good visualization of the user experience in the requirements phase without actually having developed enough of the app so that they can test it on a device.

Designs for mobile apps are typically done in tools that simulate the user experience but require a lot of imagination from the person looking at them in order to visualize how the functionality will work. For example, let's say the design is done in Adobe Photoshop. There are a few problems with this approach... The stakeholder cannot visualize how the app works because the static images are not functional and also the stakeholder loses the depth of the app in regards to popovers, pulldowns, etc. One solution that I have seen for this is to storyboard the screens in every possible state but this can be time consuming and overloads the stakeholders. By far, the biggest problem I have seem with this approach is that the stakeholder gets involved with the aesthetics and ignores the function.

Balsamiq is a tool that helps to alleviate some of the issues with the problem of stakeholders getting wrapped up in aesthetics and it also provides a rapid way in which to storyboard your mobile screens. When storyboarding using Balsamiq, you can more easily convey to users how the app will function and keep them focused on this area of the design. The only drawback to this approach is that some stakeholders are turned off by the sketched look and don't have the "imagination" to visualize it. Another drawback with Balsamiq, is that often you will need to have a second design phase to accommodate the aesthetics of the look and feel since those concepts aren't conveyed with the tool.

Omnigraffle is another tool that provides functionality similar to Balsamiq but it gives the user a better look into how the application will really look in the final product. Using Stencils in Omnigraffle, you can build a set of storyboards that closely resemble what the app will look like. Again, the drawback here is that the app doesn't function and the stakeholders do often get bogged down in aesthetics instead of concentrating on function.

Another hurdle to clear in mobile design is that often designs are presented and manipulated with a mouse. Using a mouse to run through a design changes the experience. For example, on an iPhone checkboxes are often too small to pinpoint and frustrate users, but you don't realize this when you are clicking through a design with a mouse. So even if your design tool can replicate interactivity, you may see vast displeasure from your stakeholders once they hold a device in their hand and start using it.

What's the solution?

So we've identified the problem with the various approaches to mobile design and we haven't solved it either. The short of it is there is no one-size fits all solution, but I have come up with some tips to help out based on my experience.

• Try an iterative design approach from general to specific. Start by getting users feedback in the form of sentences on how they want the design to look, then use a tool like Balsamiq and go through some design iterations and once final, then use Omnigraffle and a few more iterations and hopefully by then, the stakeholders will be settled. Make sure you get a completed set of designs signed off by the end of this process.

• An alternative method that I have found successful is to layout the interface in the development tool itself so that the interface can be held and manipulated by the stakeholder on their own device. This takes a bit longer as you have to “fake” some data to allow the application to work. Apple’s Interface Builder tool that is built into Xcode for iOS development is the perfect tool for this. An advantage to this approach is that once your get the interface ironed out, it is simply a matter of filling in the “meat” behind the screens for the app to function.

• No matter what approach you use, stakeholders need to hold the user interface in their hands early in the process. Do not wait unit you have 50% of the screens complete before you start piloting the app. If you do this, change is inevitable. I recommend utilizing a tool like Test Flight or Hockey Kit to deliver builds to the stakeholders early and often.

• Guide your stakeholders to make good decisions based on best practices. Steer them away from complexity, non-native components (such as the checkbox on iOS). Mobile design should be simple. The idea is to accomplish the same task that you would on the desktop with a fraction of the complexity to do so. Remember that simplicity on the front end usually equals complexity behind the scenes.

• Know your palette. Review all of the available controls for your mobile platform before you choose the controls you will use. If possible give your stakeholders a tutorial about what controls they have as options, especially if they want a hand in the design.

• Do your best to set the expectations that you won’t address aesthetics issues until all the functional issues are resolved. For example, don’t reposition buttons or images on a screen when an element of that screen is not completed coded and working. If you fall into this trap, you’ll be moving buttons all during the project when you could have done it once.

• Make sure you have a good graphic designer on hand that knows how to create images that will scale appropriately on the devices or you’ll be working through issues with pixellation in the final design

• Not particularly an element of design but make sure you set the expectation that just because an app seems smaller, it is not always cheaper to develop. Remember what I said about simplicity on the front end usually equals complexity on the backend.

There are more tools out there than Omnigraffle, Balsamiq and Photoshop. I've also seen a smashing job of design done in Keynote using some premium templates from Kenotopia. At the end of the day, you can use whatever tool you are comfortable with. The important thing is to deliver to your client a professional mobile app that exceeds their expectations and keep in mind that the process in how you get there is equally as important as the end result.

Google+