This fall and winter we were hard at work making substantive updates to the XForms Mobile app.  While some visible changes were made, most of the updates are not visible in the user interface, and more akin to “under-the-hood” updates.  These includes refactoring code and updating the underlying frameworks and technologies used by the app.  They are briefly described below:

Refactored code

Refactoring is defined as “the process of restructuring code, while not changing its original functionality.” The goal of refactoring is to improve internal code by making many small changes without altering the code’s external behavior.

An example of refactored XForms code: the old app used two different number control codesets for managing the formatting attributes (e.g., # of decimal places) for a number control placed on a form versus a number control placed inside of a table.  Now all number controls in the updated app are managed by a single codeset.

Structural enhancements

In addition to updating the app’s underlying frameworks such as Ionic, some structural enhancements were also made.  These included the replacement/swapping out of older, large 3rd party packages with newer, lightweight ones, making the app more lightweight and responsive.  These updates have brought about some more visible changes as described below.

A new date control picker on iOS devices

The old app’s date picker on iOS devices consisted of the typical iOS wheel selector.  This has been swapped out with a picker that behaves more like a true calendar.  See the new date picker below.

Automatic dark mode

It’s finally here!  Dark mode.   And it’s automatic. It triggers based on your device’s OS dark mode settings.  So if you have your phone set to switch to dark mode at sunset, then the XForms Mobile app will switch to dark mode at that time.

Here are a few screenshots illustrating the hex colors used in dark mode:

 

Light mode color changes for increased contrast

The color palette for light mode was also changed substantially.  It now uses the XForms logo colors as its basis (orange, dark grey, and black), and uses these colors and its complementary colors in a contrasting way, such that viewing elements of your form on a small screen in bright sunlight are easier and more obvious.  An important consideration when your hyper-focus is on the very busy field user experience.

Here are some screenshots illustrating the hex colors used in light mode:

 

Renamed the “Dashboard” menu item to “Forms”

Whenever we discussed “the dashboard screen”, we’d have to give it more context…”do you mean the dashboard screen on the mobile app, or the dashboard of the reporting web app??”.  Now this is much clearer, as the mobile app “dashboard” screen was renamed to the “Forms” screen.

Renamed the “Approvals” menu item to “Rejected Forms”

 On the mobile app, the “approvals” menu item has been renamed to “rejected forms” which is more intuitive and simpler to understand.  

Larger touch target for listboxes

In the old version of the app, the touch target for listboxes surrounded the “Tap to Select” text on the left side of the listbox.  In the new app, we’ve extended the touch target to include most of the listbox.  This should reduce taps, especially for people working in cold weather wearing gloves and for people with big fingers and thumbs. 

Here’s a comparison of the original touch target for listboxes vs. the new expanded touch target area.

 

Been there, done that

We are hyper-focused on the field user experience.  This is because we’ve been there, having come from doing lots of field work ourselves in shitty weather conditions, battling mosquitos and equipment malfunctions, extremely cold and extremely hot weather, and everything in between.  A mobile app just HAS to work., and it has to be fast and efficient.  No one wants to have to squint at a tiny screen and fumble around trying to touch a very specific tiny icon to get their work done.  They have more important stuff to do.  And that means higher contrast, bigger touch areas, fewer options, and simple controls that are understandable.  

 

 

 

Want to give XForms a try?

Click/tap the button below.