| Issue 2, 2012 |
|
Download pdf |
The first stage in any development project is design and planning; development with webMethods Mobile Designer for cross-platform mobile apps is no different. Careful planning can help ensure a smooth path to completion. This article highlights some of the techniques that are needed and offers up some useful tips and resources.
Introduction
webMethods Mobile Designer is an invaluable tool when it comes to developing mobile applications targeted at multiple platforms. The development framework leaves the programmer to focus on the core functionality of the application without having to worry about individual platform requirements or idiosyncrasies. However, whilst Mobile Designer does perform much of the heavy lifting associated with cross-platform development, it is by no means an automatic app creator. The developer will still need to think carefully about what they want from their app and how they will achieve it.
In this article, we will look at some of the techniques developers can use in the early stages of app development.
Flow Diagrams
The concept of a flow diagram should be fairly familiar to anyone embarking on a software development project. Planning out the process flow of your application is the first and most important stage. At this point we are less concerned with how individual screens within the app look and more interested with how the user broadly interacts with the application and navigates between its various sections. There are two major reasons for mapping out an application in this way.
First, we must ensure that every task required of the app can be achieved – it sounds obvious but it’s all too easy to forget the simplest of features. Now is the time to ensure all the features are accounted for.
Second, we must try to cover every possible outcome and cater for unforeseen circumstances. Take a simple login screen. Mapping the flow from entering the username, password and pressing the login button to a user successfully being logged in is only the start of it. What happens if either of the fields is invalid? How specific should the error message be? Will it simply alert the user to an error with the inputted data or will it specify which element was incorrect? Do we also need to account for other possibilities such as lack of data connectivity?
The process flow diagram, as shown in Figure 1, details what happens between actions. Is the app storing data locally? At what point are connections made to online services? The combination of all of these will not only ensure the application will function properly but also will provide clear guidance to the developer writing the code. It is sensible to keep the process flow diagram updated as changes are made during development. An up-do-date flow diagram will also be invaluable when testing an application and can be used to double check that each part of the application has been tested.
There are various methodologies for creating flow diagrams and it’s easy to get lost in the specifics of which shapes to use for each part of the process. However, as long as the flow diagram is clearly labeled these details are unimportant.
Process flow diagrams can be created easily in software like Microsoft Visio (Windows PC), OmniGraffle (Mac) or yEd (cross-platform, free). There are also perfectly good web-based solutions like Gliffy (www.gliffy.com). It is possible to create flow diagrams within Microsoft Office suite (Word or Excel) although these tools are limited and major edits are more difficult.
FIGURE 1: A basic flow diagram details the first few stages of a connected mobile application
Hub & Spoke Diagram
For very simple projects the flow diagram may cover most of the user interface of the application, but more commonly it will mainly detail the more complex behind-the-scenes processes. The user-facing screens will only be touched upon. A good way to move on to the next stage is via a hub and spoke diagram. Hagan Rivers, a design consultant, calls these diagrams Application Maps. She uses them to highlight the main hubs of activity in an application. In her blog post (http://tworivers.com/blog/archives/374), Hagan describes her process in more detail and walks us through the creation of one such map in OmniGraffle, as shown in Figure 2.
FIGURE 2: An example of a hub and spoke style application map
If your mobile app is very complicated it might not be immediately clear where to start with the user interface design. A hub and spoke style application map is a good way of revealing how the pieces of your app fit together.
Wireframes
Wireframe is a term usually associated with web design, but it can apply to application design just as well. A wireframe is a simple visual representation of an app's design (sometimes referred to as a skeleton or blueprint). A wireframe does not contain finished design elements but it does display where design elements will appear on the page. A wireframe will show the order, positioning and sizing of components such as buttons, entry fields, icons, without actually showing how they will be rendered.
Wireframing is perfect for apps using the native UI of a device, as it does not concern itself with the individual characteristics of UI elements. Like a process flow diagram, a wireframe can act as useful guidance for a developer setting out each page of an application.
Unlike flow diagrams, which really benefit from dedicated creation tools, wireframes can be as simple as hand drawn sketches as shown in Figure 3. In fact, many of the dedicated mobile application wireframing tools available will actually create visuals that adopt a hand drawn style. It’s really just a case of choosing a method that works best for you. There are numerous printable templates for smartphones and tablets, and several dedicated or online software tools are available to partly automate the task.
FIGURE 3: Examples of hand-drawn and digitally generated wireframes
Mockups
Platform specific mockups provide little guidance for developers using Mobile Designer’s NativeUI library (which handles the rendering of UI elements). They may be required for marketing purposes however, or simply to help the developer in the early stages of the design process.
Mobile OS interface toolkits or stencils are freely available for many design platforms (such as Adobe Photoshop or OmniGraffle) and the iOS development kit – Xcode 4 –contains a storyboard tool which can be used to create a working mock-up of an app.
FIGURE 4: iOS mockups created quickly using drag and drop components within OmniGraffle
Conclusion
The extent to which you use the techniques described above will vary depending on the complexity of the mobile application you are building. What is vital, however, is that you do plan ahead before embarking on development. Whilst the Mobile Designer NativeUI library endeavors to be platform agnostic, it still requires the designer to make important decisions about the architecture of their application. Specific knowledge of each target platform is not required, but a broad understanding of how NativeUI is structured will enable you to quickly realize your goals.
Some final tips:
-
Don’t create dead-ends. Carefully check your flow diagram to ensure that the user can always navigate their way out of a situation.
-
Plan for the unexpected. It’s hard, but try to plan for those unexpected situations. Does your app communicate with a server? What will happen if a connection times out?
-
Simplify. Where possible, keep your app simple. Don’t be afraid to walk the user through the steps involved with any task. Whilst this may seem cumbersome it is often the best approach for a mobile application.
-
Try not to be guided by your own experiences. Most people own one particular brand of smartphone or tablet. It’s easy to be fooled into thinking all devices are the same. Let NativeUI handle the details whilst you worry about the big picture.
-
Develop first then worry about aesthetics. NativeUI will do a fairly good job of laying out your screens. Get the app working fully before you start tinkering with button placement or background colours.
- Be sure to check out the new Tech Community page for mobile at Tech Community.softwareag.com/webmethods/products/mobile and discover what’s new, share your insights and collaborate with peers about mobile design and development!
Useful Links And Resources
Diagramming, Wireframing & Prototyping Tools
Microsoft Visio:The powerful Windows app for creating all sorts of charts and diagrams. Widely used and fairly intuitive.
This Mac alternative to Visio is arguably superior. The vast library of stencils mean prototyping is a breeze.
yED is a powerful, cross-platform chart creation application with automatic layout features. Best of all, it’s free.
A comprehensive online charting tool with great support.
Pencil Project is a free and open source Firefox addon tool for making diagrams and GUI. Highly Recommended.
An online wireframing and protoyping tool with a large library of stencils.
Another online wireframing tool.
Printable Templates
UI Stencils: A selection of printed templates and physical stencils for sketching ideas on paper. Very clever.
Software AG Tech Community: Technical resources and expert advice on how to plan and develop mobile apps with webMethods Mobile Designer.