5 Tips for Developing Mobile Applications with Great UX
5 Tips for Developing Mobile Applications with Great UX by Conner Charlebois
When developing mobile applications with Mendix, many customers build the application for the web first, and then pair-down the total functionality into a subset that can be accessed from a mobile application. This approach works well for applications whose requirements specify that there must be a way to interface with an application from a mobile device. Most of the logic and UI components that have already been developed for the web application can be reused and the development of the mobile application becomes more of an exercise in reorganizing existing pieces of functionality.
But what if the requirement is a fully mobile application? Should we take a different approach to Mendix development? And if so, how?
In a recent blog, my colleague Eric Tieniber explains that mobile development shouldn’t be an afterthought and gives best practices for implementing a multi-channel strategy from the beginning. This blog provides some important areas to keep in mind when developing for mobile and introduces some key features of Mendix to help you get started.
Experience Comes First
The most important thought to keep in mind when developing mobile applications with Mendix is that it is the user experience, not functionality, that drives app adoption and success. If a user becomes frustrated with your application because it takes too long to respond, or it feels clunky or has a slight hiccup in the visual UI, the user will be immediately turned off. With the wealth of beautiful, feature-rich apps available to users today, the tolerance for poor apps is lower than it’s ever been. Your app needs to look, feel, and behave elegantly, and that begins with the user interface.
Apps that have animations and can respond to multiple gestures are often seen as having sleeker interfaces. Think of your favorite app on your mobile phone. Odds are it has bright colors, some sleek typeface, and light-hearted animations. The question is, how can you design and develop the best mobile experience?
5 Tips for Successfully Developing Mobile Applications in Mendix
1. Use widgets
We have a number of widgets in the App Store that are specifically designed for mobile applications.
The single most important widget here that you should include in any Mendix mobile app is called Mobile Features. If you’re not using this in your Mendix mobile app, stop everything and go install it. This widget gives your app animated transitions between pages, native dialogs, loading spinners, and more.
In addition to Mobile Features, some other widgets that help you build beautiful mobile pages are:
- Progress Circle which renders a progress bar in a circle
- Tab Swipe which lets your users swipe between tabs in a default Mendix Tab Container
Here, using a widget from the app store, we create swipeable, animated tabs for the user to toggle between two different views of their bank accounts
- List view swipe which enables Mailbox-style swipe actions on your list views
Browse through many more widgets available in the App Store.
2. Use Page Templates to easily customize mobile pages
Mendix has a variety of out-of-the-box default page templates for screens and devices of all sizes and orientations. The mobile page templates provide a good starting point to design beautiful mobile pages. Wrapping each page in a full-width layout grid helps ensure that text is padded from the edges of the screen and is readable. The mobile templates place navigation and primary action buttons at the top of the viewport, where they are expected to be on mobile.
Here, you see an example of the Phone_TopBottom template, which provides placeholders at the top for primary buttons (sign out and settings) and navigation along the bottom for the primary sections
Even things like making sure that your content is properly aligned in a list view become of the utmost importance because finding the balance between showing too much and not enough information is something that must always be front of mind.
A listview widget shows information about transactions on a particular Account
Mobile apps tend to be more expressive than desktop apps, so it helps to vary the way your content is displayed, like this neatly laid-out home screen:
On this home screen, we see an overview of our accounts, with different visual renderings to show different important details about those accounts.
3. Use snippets for easy reusability
Since design is such a critical factor in mobile applications, use snippets/building blocks (heavily) to emphasize the importance of reuse. Mobile applications also generally just have more “cookie-cutter” screens that lend themselves well to reuse, so take advantage. Bonus points if you have snippets here that you can also use on the desktop/web version of your app if you’re building one later.
4. CSS is Your Friend
Use the look and feel of your application to entice users. CSS properties like flex, transition, box-shadow, and bright colors and gradients can help your app pop.
5. Use Buttons Sparingly, and Diversify Them
On the web, pointing and clicking is natural. It’s the primary way that users have been interacting with screens since the first graphical operating systems, decades ago. On mobile, touching is only one way to interact. Capitalize on the wealth of interactions that a user can make with your app: touches, swipes, location information, device details, the camera, etc. Only allocate precious screen real estate to primary actions, and use gestures or action menus.
Since interactions with- and expectations for mobile applications are vastly different from applications on the web, our development approach needs to be more focused on the experience first. The Mendix Platform enables you to easily design and build applications that behave like native applications across both Android and iOS devices with a wide array of mobile widgets, out-of-the-box page templates for mobile, reusable snippets to organize your code, and full control over the look and feel of your application with CSS and advanced interaction controls.