Model Enterprise UI: Familiar, Frictionless, and Transparent

Steven Brykman | March 20, 2015 | Mobile App Development

When it comes to enterprise mobile applications, usability is key. The focus here is on utility—increasing revenue by streamlining manual or paper-based processes through mobile devices. There’s no reason to try to impress users with a revolutionary new interface that wraps a 3-d menu around a rotating sphere, for example, as cool as that might look. Priority number one is to ensure that users become fluent in using the app as quickly as possible. Ideally, users should be able to launch your app and immediately understand how to use it. The best way to accomplish this is by using native controls everyone is already familiar with. If you’ve built an app that requires an instructional overlay to explain what each button does, chances are your design has gone astray. In summation, an enterprise app interface should be familiar, frictionless, and transparent.

Think for a moment of a book. Words are the only content, and the only interaction, other than the back and forth movement of ones eyes, is flipping the pages. There’s a reason books all tend to use the same fonts: Times New Roman (created 1931, it has since become one of the most widely used typefaces in history, primarily due to Microsoft), Palatino (created 1948, based on the humanist fonts of the Italian Renaissance, and incorporated into the Apple LaserWriter in 1985), Garamond (an old-style Roman type designed by Claude Garamond in 1530, based on a 15th century Aldus design), and Helvetica (developed by Max Miedinger in 1957, and influenced by earlier 19th century typefaces). These are all highly readable fonts created decades to centuries ago. According to Wikipedia, of these, the oldest, “Garamond is considered to be among the most legible and naturally readable serif typefaces when printed on paper.” Now imagine how annoying it would be if the book were written in Comic Sans or impact. The font would be detrimental to the act of reading and would serve as a comprehension speed bump, slowing the reader down and preventing the enjoyment of the content itself—the emotion encapsulated in the meanings of the words.

kayak-169x300Such is the case with mobile app interfaces. Oftentimes, it’s hard to see the forest for the trees. Designers can become so impressed with their own cleverness that the app’s usability suffers as a result.

hotels.com_-169x300

In the following examples, Kayak—an incredibly valuable service—stumbles over its own verbiage. The arrows and labels (“Today,” “Tomorrow”) don’t immediately communicate meaning and may, at first glance, appear confusing. There’s no convention in which a right-pointing arrow means ‘arriving’ or a left-pointing arrow means ‘leaving’. Combined with the nebulous labels, these might be mistaken for ‘daily deal’ buttons versus being part of the search criteria. Conversely, the hotels.com app gets it right, explicitly indicating “Check In” and “Check Out” as options and going with a more familiar (not to mention visible!) calendar format for date selection.   

When I describe an app as frictionless, I mean the app should behave in exactly the manner a user would expect. Screens should transition one to the next in an intuitive fashion, menus and navigation should animate and respond appropriately to user input. Let’s return to the book analogy for a moment. Imagine if you tried to flip the page but instead of the page remaining attached to the book, the laws of physics suddenly changed and the page flew upwards out of the book. That would be weird, right? Similarly, app interaction-physics demand that things on your device respond as though they were real-world objects. No element should ever just suddenly appear or disappear, rather everything must follow a logical progression and have its own storyline.

kayak2-169x300The Kayak app also suffers in this category—again due to over-cleverness—in its distance selector. First off, exactly how much farther is a “wicked long walk” than a “longer walk”? These are relative terms and as such aren’t terribly useful. It’s only once the user figures out that the mile indicator above the selector menu reflects the user’s selection and indicates the exact distance meant by “longer walk,” etc. that the UI makes any sense. Therein lies the friction. The problem is the user has to figure out this relationship between elements before the UI makes any sense, since there’s no existing convention where one table-cell acts as a selection-display for other selectable (yet identical) table-cells. A selection-state is always indicated on the item selected, by a change in either table-cell background or border color or by the inclusion of a checkmark. Why make users guess what’s going on here when they could have simply placed the mileage beside each label so it would always be visible, like so: “easy walk – .2 mi.” Or better yet, just use the mileage itself and forgo the cutesy labels, particularly since some users (especially in this country) might be offended by the suggestion that a mile represents an “easy walk.” Also, “infinity”? Come on, guys. Who is that helping?

While consumer apps like Kayak can get away with a little sass, the same can not be said of enterprise apps where a confusing menu for a critical process might translate into a loss of revenue for the company.

Lastly, by transparent, I simply mean the UI should never call attention to itself. Enterprise UI works best when it doesn’t draw attention to itself in any manner, in a sense when you don’t even notice it at all. As I’ve just shown, in the case of consumer apps (particularly games), the exact opposite is often the case. The game is the manipulation of the controls, and the controls are the interface. Or think of the many varieties of downswipe-to-refresh animations we see these days (rocket ship, bird tweet) that have nothing to do with utility and everything to do with creating a fun experience.  But in enterprise UI, all eyes should always be on the data or on the task at hand. No distractions allowed. iOS 7 first helped in this regard, eliminating chrome from iOS devices and putting the focus squarely on content.

finger_UI-300x169As cool as LEAP MOTION applications are, touchless interaction does not make for good Mobile Enterprise UI (at least not yet). And it’s not what I mean by “transparent UI,” either.

parking-225x300Here’s a real-world example why familiarity—in the form of standard conventions—is so important. Take a look at this pay-for-parking machine. Notice there’s no distinction made between numbers and letters, only the tiniest bit of extra space separating the two. This is a completely alien layout. Rows of five letters each with the Z between the OK and Cancel buttons? We’ve never seen any of this before. Also, all buttons have been given equal weight: they’re all exactly the same size. A more conventional, usable, intuitive layout would have included an isolated standard numeric keypad, along with a qwerty arrangement of letters.

Difficult to interact with by day, this parking machine becomes nearly impossible to navigate by night since nothing is illuminated. Unlike a MacBook, the key labels on this thing don’t light-up. In the dark, a user could still navigate the machine if it were laid out in a method described above.

Think of a new enterprise app user as one who is also ‘in the dark,’ and you’ll begin to understand the true value of interface conventions. That said, an enterprise mobile app also needs to be visually stunning to create enjoyment and to keep users coming back time and again—enabling the client company to maximize their ROI and reap all the benefits a mobile app can provide.  Take a look at a recent iteration of our enterprise Audit App product.

IMG_6780-169x300This example illustrates how an enterprise application can combine native language with gorgeous custom UI elements to create an ideal, frictionless experience. Here, panels expand and contract intuitively to display additional info or provide further opportunities for interaction. Native icons clearly declare their intentions while the custom Yes/No toggle also serves a simple, obvious purpose. The bars to the left of the buttons cleverly indicate past results without consuming much screen real-estate or requiring additional user-interaction to view. The thin bottom color bar indicates a completed answer while the number beside the Cleanliness header provides a running tally of all the response-scores for that section. 

Propelics designers and architects fully understand the complexities of this visual negotiation. We provide premier app designs and mobile strategies for Fortune 500 companies worldwide and proudly boast a 100% client satisfaction rate.

Steven Brykman

Steven is a Digital Strategist and UX Architect focusing on Mobile Products with a diverse background in writing and literature. He spent much of the last decade as Creative Technologist/Lead Strategist of his own design company, helping Fortune 500 companies define the direction of their digital campaigns, websites and mobile applications. Additionally, he co-founded Apperian, a Boston-based mobile technology startup.

More Posts

Follow Me:
TwitterLinkedIn