Mobile Design — Basics & Best Practices
While enterprise design is continuously transforming, not all applications are truly mobile ready, yet. It’s a slow process to make the necessary changes that allow users to adapt to new experiences, especially given the vast landscape of products that are running businesses behind the scenes. So, as a designer in the enterprise world myself, I’ve compiled tips for transforming a traditional web or desktop experience to mobile.
Use Case
The first and most important thing to keep in mind when designing for mobile is that the entire product suite will not make it! Start by identifying which parts of the use case are vital for a mobile application.
For example, in a Travel & Expense scenario, the most critical feature for mobile is the ability to capture expenses and receipts on the go, so that a user can submit them under an expense report later.
Cognitive Overload
Cognitive load refers to the total amount of information your working memory can handle. Cognitive overload happens when your working memory receives more information than it can handle comfortably, leading to frustration and comprised decision-making.
Screen real-estate is premium on mobile! After narrowing down the scope of what should go mobile, it’s important to prioritize the most important actions and snippets of information to be presented on a tiny screen.
Identify critical information snippets that add value to the user’s decision making and help accomplish the task faster. For example, when buying a product, key information like price, discount, number of reviews, and the primary “add to cart” action are what matter first. Supplemental information can always be presented upon request.
This is the fundamental principle of Progressive Disclosure- surfacing critical information and letting the user decide when they want to see more.
Screen Clutter vs Screen Flow
Another component is establishing the information and screen hierarchy. Should all of the information be presented on the same screen, or should it be broken down into a hierarchy of screens? A good starting point is to identify the end-user’s goals and break large tasks into smaller, meaningful chunks.
In an online shopping experience that involves adding products to the cart > reviewing cart > choosing shipping speed > reviewing shipping info> confirming payment info > completing acknowledgement, a designer could choose to present all of the information in one long scrolling view. But, even better, he or she could instead group each step into a multi-step wizard experience to reduce cognitive overload.
Immediate Resurfacing
With the number of features developers try to squeeze into a mobile app, it’s very easy for users to get lost in a hierarchy of screens. Imagine starting with a map > searching > picking a restaurant > going to a related restaurant > browsing photos > reading reviews > replying to a review and now wanting to go back to that map!
This is when it’s key to allow the user to resurface back to main screens. Otherwise, it’s super frustrating to hit back! back! back! back! back!
Gestures
With a current design emphasis on using the fewest number of physical buttons possible, and also given the limited real estate on mobile, app developers must take maximum advantage of gestures to make content and actions accessible, faster.
It’s critical to use existing standard gestures for standard actions. Users are accustomed to it, so surprising them with a different response to a gesture or making them learn a new one isn’t ideal. It’s okay to introduce new gestures, but designers must ease the users into it, train them, and keep the gesture consistent throughout the application.
All recent social applications like Snapchat, Instagram, Facebook, and WhatsApp allow the user to flip camera views (rear camera to selfie camera) when the user double-taps anywhere in camera mode. If an app has a camera view, it should naturally inherit this same gesture.
Bottom line- don’t forget the target audience. If they’re not power users, don’t rely too much on gestures.
Reach
Reach is simply the ability to reach content and actions on a UI when it comes to larger handheld devices. iOS Reachability is a built-in feature that allows the user to bring items at the top of their iPhone 6 or 6 Plus’s screen into finger’s reach. Its a great idea to place key elements towards the bottom of the screen for better/faster reachability.
Single-handed mode is another factor to keep in mind. If an end-user is operating the device with one hand (eg. scanning and stocking products on the shelf), it’s important to think about placing the most prominent actions where they can always be accessible.
High Contrast?
If the end user of an application is likely to use it for extended periods of time, designers should also consider ways to conserve battery life. “Dark Mode” user interfaces are one of the best ways to do this.
iOS has a built-in feature in the settings to “Invert Colors,” which reduces the power consumption of the screen and extends time needed between charges.
The Apple Watch is another good example, in which black backgrounds are used across the entire watchOS platform to maximize uptime on the device.
Another instance in which it’s important to consider high contrast UIs is applications to be used outdoors. In one of my recent customer projects, coaches were given iPads to monitor realtime player performance outside. We had to, not only consider element size for readability, but also consider using high contrast colors to make content more visible under direct sunlight.
Feedback
In creating any “mobile” experience, we can’t always assume the user is Connected. There are always instances in which there’s a lag in load time or, sometimes a complete offline situation. Progress bars & loaders are key elements that keep users informed about background activity. Users shouldn’t be left wondering whether the app is frozen or something failed to load.
In addition to progress bars, Confirmation messages are let the user know that the requested/executed action did complete successfully. These could range from obvious callouts, to subtle icons with animations.
Sensitivity is the second aspect of feedback, when it comes to touch based mobile devices. With the growing number of gestures users can use to interact with a multi-touch device, it’s important to give users instant feedback on any interaction. Simple on/off states, tap-down states on buttons, or haptic responses when users force-touch are good examples of feedback.
Performance
While maybe less obviously related to design, layout decisions and interaction models impact the overall user experience of an application. On an average mobile device over 3G, under 5 seconds is a good goal to achieve Time to Interactive (state of the screen where enough is loaded that the user can start interacting with it).
From a design standpoint, Perceived Performance is one way to do so! This is when content placeholders are equipped with subtle graphics or loaders so users feel that something has loaded and grow accustomed to the layout, while they also know what to expect when the content renders. Good examples of this are media heavy apps like Facebook, Instagram, etc.
Another decision that could impact UX is Lazy Loading vs Eager Loading. Lazy Loading is when only the minimum amount of information that is visible on the screen real-estate is loaded, while the remaining content is requested and appended as the user starts scrolling. This is ideal, since the initial load time is minimal.
Eager Loading is when most of the content is pre-loaded on the page, giving a faster post-loading experience, but a longer initial load time. Anticipative Loading is when pre-loaded subsequent pages (based on usage patterns) appear after the main page is fully loaded, making the overall UX faster.
It can take time to make enterprise applications mobile ready, but there are many best practices designers can follow when making the switch. Let me know what you think and share your own experiences in the comments!
