Want a Better Mobile App? Use Wireframing and Flowcharts.

Whether you’re designing or developing an app, it’s never a good idea to start without a sound plan. That’s where wireframing and flowcharts come in.

Treat a wireframe like a blueprint

You wouldn’t build a house without an architect’s blueprint, so why would you create a mobile app without a well-planned wireframe and flowchart. The UX and design portion of any programming project is not the time to cut corners, even if your deadline is rapidly approaching.

Developing use cases to describe how an app will function for different types of users is an important step before the coding begins. Your use cases need to cover the functionality of the entire app, including the welcome screen, the main function areas and any data maintenance dialog forms.

Doing this extra work upfront saves development time and costs in the future. Remember, the same principles that apply to more “traditional” platforms also apply to mobile experiences.

Design flowcharts from use cases

The information you put in the use cases should provide guidance for the flowcharts. If your app is a simple one, you might be able to get away with one flowchart to describe all the screens and user flows. More complex apps, however, should have one flowchart for each functional area. Just make sure that every screen and every possible user action is described on a flowchart.

Also, if your app contains different user roles, denote the differences in flows by either color coding or clearly labeling the arrowed lines. It’s important that this role-based information is easy to understand at a glance, especially if different team members are doing the design and programming, or if business stakeholders need to approve each step.

Lay out the wireframes

Wireframing allows for a more detailed expression of the flows you’ve mapped. Try for at least one wireframe for each flowchart diagram. At this point, it makes sense to do some initial layout work, too. Additionally, label any gestures, swipes or button presses relating to actions on screen or transitions to new screens. And before you move from design to development, solicit feedback from both colleagues and users.

Flowcharts and wireframes aren’t just artifacts from programming days of yore. They remain useful tools that should be in the arsenal of any mobile designer or developer. For some of the latest (and best) thinking on mobile UX, check out the terrific insights offered by Smashing Magazine.

via Business 2 Community http://www.business2community.com/mobile-apps/want-better-mobile-app-use-wireframing-flowcharts-0625296?utm_source=rss&utm_medium=rss&utm_campaign=want-better-mobile-app-use-wireframing-flowcharts