Responsive Design in the Oildex Suite

Tags: ,

Our user experience team at Oildex spends a lot of time thinking about context. Where you are, and what’s going on around you when interacting with our apps are just some of the factors we look at when making decisions on how our app will function and how it will look.

For example, we intentionally keep the colors in our apps limited to black and white with subtle greys. The reason is that a lot of people using our apps are power users. Most of our users are looking at our apps for hours at a time, day after day. Using more grey tones decrease eye strains; whereas too many bright colors and contrasting elements have the opposite effect.

A context observation that we’re applying to all of our apps right now involves mobile use. Our users’ office chairs today can be just about anywhere; or not even a chair at all.

Our software is built on the various demands of oilfield services including invoicing, spend management, field ticketing, and run tickets, just to name a few. With the increasing number of users adopting mobile devices into their workflow, we have upgraded our apps to keep up with this change by implementing a ‘responsive design’ approach into our apps; changing the way the Oildex Suite looks to our users.

So, what does this mean for our users?
Jason Shannon is the senior user interface designer at Oildex. He’s been working with our development teams to get the look and feel of our software up to speed in ways that meet the growing needs of our oil services and procurement users. He shares how responsive design directly affects the software you see:

Page Layout
“First and foremost, you’ll be able to use our applications on any device,” Jason said. “We build our apps so that the pages adjust, and they’re optimized based on the device you’re using.”
Since mobile screens reduce the amount of space available by a lot, Jason explains how some page elements like headers and footers will be in a fixed position on the screen to ensure they are always available without scrolling regardless of the device you’re using.

Target Size
The actual size of clickable elements on the screen is a big consideration for mobile use. On phones and tablets, you’re tapping with a finger which doesn’t give the precision of a mouse pointer or cursor. To handle that, Jason specifies designs with the buttons (or targets) in slightly larger dimensions, making it easy for users to accurately tap them whether they’re using a finger, stylus, or mouse.
Targets onscreen that are easier to tap has the added benefit of reduced eye strain over time as well. With larger buttons, it takes less work to find them. Over the course of a day, this adds up to more positive soft ergonomics.

Form Fields
Many of our apps rely on input fields to add or edit data. Those are typically grouped together to speed up invoice coding, approvals, field ticket entry, etc. As we look to accommodate more mobile users, the layout and design of forms become a priority.

“Large forms will be broken up into smaller chunks that can be viewed easily on small screens,” Jason explains. “On larger screens, those chunks can be assembled and shown together using all available screen space.”

We spend a lot of time considering the order and importance of certain fields over others. When space is limited we try to surface the most important items first, which can help our users enter data more efficiently.

A lot of the ideas we have come through direct user feedback. We’re continually testing our designs with the people who use them. If you have any suggestions, feedback or comments, please email the Oildex Usability Team.

The result of these efforts means that our software is available wherever you need it. Whether that’s in the field or in the office, the Oildex Suite is being continuously improved to work for you.