Designing mobile business apps is more than just creating a good-looking veneer. The designer is responsible for the user interaction and a good functional understanding. Compared to common consumer apps, where fancy design and complex animations are the key features, an enterprise app needs to improve the companies productivity by providing the functions and data needed in few simple steps to the user.
The design needs to match the employees needs, based on job roles and work locations, i.e. corporate travellers, sales manager, field services or engineers working in car workshops, production halls or at rail tracks. Don’t mobilise existing enterprise software by just putting all features on a smartphone or tablet. Focus on the primary function of the app and analyse your target group and how they will be using the application. E.g. field staff focuses on their next appointments, customers, contact persons and addresses. Editing huge SAP tables on a smartphone should not be seen as a feature of a mobile app. Reduce to the max will help identify important features and design a application with the user in mind.
After considering these basic aspects you can start designing your first mobile app, keeping the following 5 tips in mind:
To cover all devices and displays, the design needs to be flexible but enterprises mostly have precise wishes, as they already have corporate devices in use. Start your design by checking the correct resolution your mockup needs, like on http://screensiz.es.
Use native interaction patterns
An interaction pattern is a solution for a common design problem that has proven to work more than once. Employees are familiar to the behaviour of their native apps which they use on their enterprise phones. Avoid confusion by informing about the target operating system and its common features. Hidden touch gestures or new navigation concepts could irritate and lead to disaffection. It doesn’t mean that your designs need to be boring and without innovation, just keep your target group in mind and if app-workshops are provided to them. A bunch of links to get inspired: Android App Patterns, pttrns.com, Mobile Patterns or Anroid Patterns.
Native elements and sizes
A good mobile designer should never forget about the app development. Complex designs have impact on the implementation and could blow up the project effort and costs. Facilitate the developer’s work by using the standard ui-components and its sizes. E.g. the native iOS navigation-bar has a height of 44px. It can be tinted or a stretchable background image can be set. If the design requires changes in height, the developer may not use the UI-element delivered by the SDK, so the navigation bar and its controller needs to be implemented from scratch. Look-up the UI-element dimensions for iOS and Android.
To make the app look great, it’s mandatory to work with scalable vector layers, as the UI-elements and backgrounds need to be scaled without loss of detail to all densities needed when providing the resources to the developers. It’s important to snap the vector edges to the pixel-grid, as half pixels will result in blurred icons, buttons etc.
Prepare resources for the developers
Before starting with the app implementation the mockups and graphic resources need to be provided to the developers. Depending on the target operating system and device there are some important things to consider: Keep the image sizes as small as possible. This will keep the app data-size low and enhance the performance. Buttons and backgrounds can be stretched to the needed size. iOS developers set the pixel-coordinates which will be stretched within their project-code while Android supports their developers with draw 9-patch resources, that can be created by the designer.
Name your resources so that related assets will group together. It helps to use a prefix for each icon or background. For example: “ic_menu_favorites.png” or “btn_dialog_accept_default.png”. Deliver resources in multiple sizes to support the needed densities. iOS requires non-retina and retina (2x). Double the non-retina image size and its-layer effects and add an “@2x” suffix to your file-name to get a retina resource, i.e. “firstname.lastname@example.org” for iPhone/iPod or “icon@2x~ipad.png” for iPad.
Android uses more complex dp units: mdpi (160dpi), hdpi (240dpi), xhdpi (320dpi), xxhdpi (480dpi) and xxxhdpi (640dpi). The OS checks the characteristics of the device screen and loads the matching assets. The resources need to be named equally. To distinguish between the different densities, put the assets into the following folder structure “drawable-mdpi/”, “drawable-hdpi/” “drawable-xhdpi/”, “drawable-xxhdpi/”, “drawable_xxxhdpi/”. Check out the Android Cheatsheet as well with all needed sizes, name conventions and a draw 9-patch explanation.
With these tips in mind start applying today – download the M-Way Solutions app-resources starter kit for mobile designers and start designing a better app experience. For more tips and inspiration, follow me on twitter @7weety.