Unlike users of laptop and desktop applications, mobile and tablet users are very finicky about apps being simple,...
easy-to-use and quick. With a large number of apps available for them to download and use, they delete ones that they find difficult to use and replace them with others that are simpler and less complicated. This means that a lot of thought, design time and upfront testing of mockups are needed before coding of the app begins. Designs of user interfaces may need to be shared with other designers and even prospective end users, across geographically distributed locations over the Internet, feedback obtained and designs fine-tuned. There are a number of wireframing tools that are available for management to choose from – free/open source or licensed, client or software as a service, specific to mobile platforms or general purpose ones that cover many platforms including mobile devices.
Here are some of the most popular and frequently used wireframing and mockup tools:
1. Balsamiq: Balsamiq follows an interesting hand-sketched wireframing approach. The wireframes designed have a rough, hand-sketched look so that designers can concentrate on the more important work flow and smoothness aspects of the app rather than the look and feel. The various screens designed are all linked together and can be clicked to go from one screen to another to simulate the flow of the app. The full prototype can be converted into a PNG or PDF format and shared with others over email. Balsamiq could be used to design for Web, application and mobile platforms.
2. Justinmind: Justinmind is client software that you buy and install on your Mac or Windows. You can wireframe and test mobile, Web and application user interfaces. You can design similar looking controls for your Web presence and have the same look and feel copied on to your mobile user interfaces also. You can also simulate inputs without writing code and do some preliminary testing. It comes with a rich library of widgets to choose your user interface elements from, or you can create your own libraries and share them across your organization.
3. Mockapp: Mockapp is a set of wireframing templates that helps you design iPad apps. Mockapp uses an accurate native look and feel in their designs so that the wireframes look exactly like what they would look like in the implemented app. It is also one of the simplest wireframing tools to download and start using since it is just a set of templates from which you drag and drop elements of the user interface you want.
4. Mockingbird: Mockingbird is a hosted Software as a Service (SaaS) offering where designers can share and collaborate on designs online. It is made only for designs for the Web and mobile Web apps. They do not support mobile native user interfaces but useful for rich mobile Web apps that do not work if Adobe Flash is used, like on Apple’s iPhones and iPads.
5. Mockability: Mockability is an interesting app design tool that is part hosted server, and part iPhone app. Mockability is especially useful for apps that are heavy on the graphics part. Using graphics design software on your own computer you design the graphics and text on each screen. You then upload individual screens to the Mockability server. You can then open the mockability app on your iPhone, and link the various screens with buttons and transitions. You can then test out the workflow inside the app. You can change the transitions right there on the app and test them out immediately to see how alternative user experiences feel to the user.
6. Pidoco: Pidoco is a hosted Software As A Service (SaaS) offering that you can interactively drag and drop elements of user interfaces on to a screen and link screens together with simulated links into a full user interface prototype. Mobile user interfaces are one of the types of user interface mockups that can be designed along with client or Web/browser based ones.
7. OmniGraffle: OmniGraffle for iPad is a diagramming tool that has additional features for creating iPad app mockups. It is useful for apps that deal with diagrams and on clicking on various parts of objects within these diagrams you need to navigate to other screens, like an interactive user manual. It addresses a specific subset of apps that need special navigation and OmniGraffle does this with great ease.
8. iRise: iRise is an interesting mockup and prototyping tool that users from senior software development managers to user interface designers and implementers can use all the way from high level sketches of the system down to individual screens of an app and how they are linked to other screens within that app. iRise can also be used to design Web pages and mobile apps simultaneously, so that they have a uniform look and feel to them.
9. Pencil: The Pencil Project is an open source prototyping framework with which different contributors have built user interface stencils, icons and images for iPhone, iPad and Android devices and placed them in the public domain. User interface elements can be dragged and dropped from these stencils and used in user interface designs.
10. Axure: Axure is Windows or Mac client software with which you can create websites, mobile and tablet applications. The widgets used can all come from the same library for a uniform look and feel across websites and mobile apps.
11. Protoshare: Protoshare combines wireframing with collaborative, communication features like comments, reviews and alternative designs in a hosted online portal. This makes collaborating and reviewing designs cooperatively across distributed resources easier.
Mobile user interface design is a critical part of app development. When you have more than 500,000 iPhone apps and more than 300,000 Android apps vying for a user’s attention every day, a poorly designed user interface can mean the user abandoning the use of an app or even deleting it from the mobile device. A variety of user interface mockup and wireframing tools are available for use with mobile apps, from simple stencils to capable of creating fully linked and interactive prototype in client or hosted, licensed or open source forms. Proper research and matching of the right tool to the app at hand can ensure that the resulting user interfaces are easy to use, and quick and smooth to operate. They can mean the difference between apps that are used every day and those that are ignored and deleted from mobile devices.
About the author: Nari Kannan is currently the Chief Executive Officer of appsparq Inc., a Louisville, Kentucky-based mobile applications consulting company. Nari has over 20 years of experience in information technology and started out as a senior software engineer at Digital Equipment Corp. He has since served variously as vice president of engineering or CTO of six Silicon Valley startup companies, working in the areas of business process improvement, IT consulting, automotive claims processing, human resources and logistics applications. He can be reached at firstname.lastname@example.org.
Learn more about mobile prototyping tools
Dig Deeper on Mobile Application Testing Techniques and Tools