Group Created with Sketch.

CUTTING EDGE UX STARTS HERE.

WE'RE HERE TO HELP YOU SUCCEED.

25 Tips for Better Mobile UX Design

Written by Paul Giurata on Jul 1, 2019 11:35:07 AM

In UX Design Trends, Mobile UX

Implementing best practices for mobile design is key to ensuring users have a good experience. When the process of usage is so smooth and effortless that people don’t even think about it, it is the sign of the professional design work. On the other hand, if there are some problems in the interaction system, users will definitely notice them and won’t be pleased about it.  What’s more, you either give your users what they need, regardless of the device they’re holding or sitting in front of… or you’re losing ground to competitors.  

At Catalyst UX, extending your software to multiple devices is our unique capability. We know it's difficult. That’s why we distilled our expertise into 25 mobile UX tips to guide you.  Get the PDF here.

 

TIP #1: SIMPLIFY, STAY FOCUSED

Our Number One, “Do This” Tip. Provide only the navigation, controls and resources the user must have to complete their task. Cutting out all else enables users to focus. Quick, accurate task completion is the foundation of user delight.

TIP #2: OPTIMIZE CORE EXPERIENCES

You can’t make everything perfect, especially in early releases. Spend most of your time in the areas where your users spend theirs. Typically, 80% of users spend 80% of their time in a few places doing a few things. At first, get the key parts working right.

TIP #3: GO ALL MODULAR

Build your UI out of self-contained, modular, reusable panels. It makes your developers’ lives more manageable. It speeds up the design process, too. Panels are the basis of coding building blocks for your software. This is your secret weapon for faster time to market and reduced development cost!

TIP #4: REUSE DESIGN PATTERNS

Users now jump from device to device. It’s easier for them if the design, functionality and view patterns are familiar and seamless on all devices. Common patterns let users leverage expertise they already have.

TIP #5: THINK ABOUT INTERACTIONS

An effective mobile interaction system should be simple and clear to use so that it can be operated without problems.  That said, effective interactions help to guide users and set context. Fun interactions keep users curious, engaged, and delighted. After a screen is visually designed put in a relevant extra cycle just for interaction design.

TIP #6: MAKE NAVIGATION INTUITIVE

With far less screen real estate, users need help getting to key information and controls. Present what users need and tuck other items in global navigations that are accessible on demand.

TIP #7: DESIGN FOR ACTIVE USERS

Design for a user who’s in motion while accessing your application. Smartphone users usually access apps in between appointments and events (edge times), have limited time and plenty of distractions. It’s a far cry from the desktop user who sits down at his desk with a cup of coffee.

TIP #8: SEARCH IS GOOD. FILTERING IS BETTER

Minimize users’ options on mobile devices to simplify work. Make interface and navigation focus on what you know they want to do. Make it super easy to do those things.

TIP #9: SPACE IS AT A PREMIUM—MAKE WORK AREAS EFFICIENT

Define views as efficient work areas that show just what users need to complete their work.

TIP #10: USE MOBILE FOR COLLECTION AND CONSUMPTION, NOT PRODUCTIVITY

Mostly, mobile devices are used to collect data or for reviewing. For example, a psychologist uses a tablet device in a counseling session to collect information and access previous information. After the session she probably moves to a desktop to edit, produce and submit a report.

TIP #11: START AT THE TOP

Go with the flow. The user’s work process should start at the top left hand side of the screen and work its way down and to the right. That’s what they’re expecting; keep the workflow intuitive and smooth.

TIP #12: TARGET SCREEN SIZES MOST OFTEN USED

Pick sizes to target based on the ones most frequently used. If you’re not sure going in, survey current users. It can be a very short survey.

TIP #13: MAKE YOUR LAYOUT FLEXIBLE

Breakpoints are a great starting point, but resolutions are changing all the time. Building a fluid layout will future-proof your design for screens of the future.

TIP #14: UNDERSTAND WHO ELSE IS INVOLVED IN YOUR MOBILE EXPERIENCE

For example, if your mobile solution is a healthcare application used in front of a patient, make certain to consider the patients, their likely states and the potential caregivers present. Design user experience for all participants involved.

TIP #15: RESPONSIVENESS IS ALL

The only way to manage proliferation of monitor, notebook, tablet and smartphone sizes and resolutions is to design responsively at the outset.

TIP #16: GO BACKWARDS: USE COMMONLY ACCEPTED MOBILE CONVENTIONS ON DESKTOP

Mobile applications already have well accepted patterns, like clicking on a list item and sliding right. Capitalize on these well understood capabilities. Migrate them to your desktop interface.

TIP #17: RESPONSIVE OR ADAPTIVE

Do all you can with modular responsive panels. Behavior should be implemented via style-sheet properties before you add adaptive capabilities. Adaptive gets complicated very quickly.

TIP #18: DESIGN FOR TOUCH UPFRONT

Even if your app won’t be used a lot on tablets or smartphones, it doesn’t matter. More and more notebooks and monitors are touch-enabled. So design for it at the beginning. Retrofitting touch is difficult.

TIP #19: MAP THE DATA JOURNEY

Map the path your application’s data takes. Are there large queries? Are there times when a device won’t be connected but still must access data? Data travel path is a key factor in defining your overall mobile UI technology strategy.

TIP #20: REMOVE NON-ESSENTIAL CONTENT

Some content that’s useful on desktops will never be used on mobile devices. Get rid of it.

TIP #21: DELIVER HIGH-VALUE MOBILE CAPABILITY

Don’t worry about delivering all application capability. Deliver truly high-value for the mobile setting. Let the rest go.

TIP #22: YOUR CODE STRUCTURE SHOULD MIRROR THE STRUCTURE OF YOUR DESIGN

Utilize the same descriptive terms and panels to enable developers, product managers and designers to have a single software lexicon. When you do this, topics and words are relevant when discussing either design or code.

TIP #23: DEFINE NAVIGATION AND CONTROLS TO REFLECT THE BUSINESS PROCESS, NOT THE DEVICE OS

You want your users to seamlessly move from device to device to complete their work. If you start with the work they need to get done, navigation and controls will support seamless transitions between devices. But, if you optimize for each OS, navigation and controls will require users to adapt as they switch environments.

TIP #24: EVALUATE NATIVE, HYBRID OR WEB FOR EACH APPLICATION

This is a big decision and can result in the need to maintain separate development teams and code bases for years. Go into the situation with your eyes open and understand the real needs to be addressed by your UI technology strategy.

TIP #25: REALISTICALLY UNDERSTAND YOUR ORGANIZATION'S CORE COMPETENCIES

If your organization is, say, a risk-mitigation firm or a medical-device company and not a pure software-maker, be realistic about the devices and code bases your organization can support and maintain.

Get the Help You Need

A simple mobile interaction system is not that easy to create. It requires hard work, concentration and lots of practice before you receive sufficient results. If you need help building a mobile application or moving to mobile, contact us: