UX/UI tools for Mobile Application Prototyping

[#1]

This article is provided by The Human Factors Group at AT&T Labs. The Human Factors Group conducts customer research, analysis, design, and user testing to help make AT&T products and services useful and usable for all of our customers.  

Tools for Development

 

Mobile Application Prototyping Tools

When developing an application, the best thing you can do for your users is make sure the interface is quick, easy to use, and helps users reach their goals. Before developing your app, it is helpful to prototype the user interface and show it to people who might use your app. You will be surprised what you can learn by showing a mockup or prototype to even a few people. Prototyping your app can reduce development time in many instances because you can quickly and easily iterate the user interface.

Below are links to a variety of popular prototyping tools.

Sketching Tools

Low fidelity sketches can be created using pencil and paper. To assist in sketching by hand, you can purchase sketch pads and stencil kits customized for various platforms from sites like UI Stencils and App Sketchbook.

Digital Prototyping Tools

Some software is designed specifically for creating digital prototypes.

• Balsamiq – low fidelity clickable prototypes for web and mobile
• Axure – slightly more expensive wireframing and prototyping tool

You can also use image editing, diagramming, and presentation software to easily develop high fidelity visual mockups of user interface flows. Below are templates and stencils for several popular software packages.

• Photoshop
  •  iPhone 4 template from Teehan+Lax
  • iPad template from Teehan+Lax
  • Windows Phone 7 design templates from Microsoft
  • Android template from PSDlist.com
  • Fireworks
    • UNITiD - iPhone and iPad prototyping with Fireworks
    • OmniGraffle
      • Graffletopia - Mobile
      • Graffletopia - iPhone
      • Visio
        • Visio iPhone stencil by Jonathan Abbett
        • PowerPoint, OpenOffice, Keynote – clickable slide shows can be used to represent interface flows
          • Keynotopia templates

Once you have your interface prototyped, show it to a few people. Give them some scenarios to walk through. You can even use printouts of the screen flows and manually change pages for them if you have to. You will learn that prototyping will drastically increase the quality of your application’s interface and help to simultaneously decrease development time.