Creating an experience

Best practices for how to create an exceptional mobile experience.

Configuring apps

The platform provides purpose-built tools to tailor native mobile applications to users’ needs and company brand. Implementers use Mobile App Builder to create mobile app navigation, tailor screen layouts, and connect views to data. Mobile App Builder also allows administrators to add screens to an application’s scope. For detailed step-by-step guidance on how to configure mobile apps go to product documentation.  

Mobile App Builder on the Screens page with a list of screens in the Field Service Mobile scope.


Getting started

When designing a mobile app, it's crucial to consider the target audience and how to use native device features to enhance engagement. Understanding users' primary mobile actions will help you structure navigation and identify necessary screens and content. Sometimes, improving the mobile experience involves highlighting information that is more useful on mobile devices. Utilize mobile strengths like portability, geolocation, and push notifications to elevate the app. 


Simplify navigation

The primary way people move around within an app is through the navigation bar at the bottom of the screen. They offer access to three to five destinations, with one destination always active. Each destination is depicted by an icon and a text label. The navigation bar is placed at the bottom of the screen for easy and convenient access. Once you know what content needs to be within the app it’s important to group that content logically as tabs within the app. Each tab should have unique content. The label for each tab should be short, the icons should be unique, and it’s ideal if the number of tabs can be limited to 5 so that nothing gets hidden behind the “more” tab.  

Navigation bars are best suited for:

  • Top-level destinations that need to be accessible from any part of the app
  • Three to five key destinations

Navigation bars should be avoided for:

  • Single tasks, such as viewing an individual record
Do
Don’t

Prioritize key content

When designing mobile apps, it's important to consider that not all desktop features are suitable for mobile use. Users interact differently on each platform, so mobile app content should prioritize the core objectives and minimize the number of actions required on each screen to keep users focused. Additionally, arranging the UI content from top to bottom aligns with the way users read, and it's important to support both Left to Right and Right to Left languages automatically.


Stay consistent and familiar

Keep icons, labels, and colors consistent throughout the app. Using the same icons for similar actions across screens helps users navigate quickly and reduces cognitive load, allowing them to intuitively understand the app's functionality. Associating specific tasks with distinct colors can guide users more effectively; for example, use red for all time-sensitive tasks to signal their urgency or importance.  

Ensuring consistency in your design not only enhances the user experience but also helps in building a strong brand identity. Consistent use of color schemes, typography, and iconography creates a cohesive look and feel that users can easily recognize and trust. Each element in the app should have a clear purpose and be easily distinguishable from others, preventing any confusion.  

Diagram showing The same sidebar icons in navigation and on a record page

The same sidebar icons shown in navigation and on a record page

  1. Sidebar icon in navigation bar
  2. Sidebar icon in a record

We use the same icon in the navigation bar and a record to open the sidebar. By maintaining consistency across screens, you make it easier to navigate and take action, fostering a more intuitive understanding of the app’s functionality.


Prepare for various environments

People often use mobile devices in various environments like factories, trains, and outdoors, where connectivity might be unreliable or the sun is creating a glare on their screen. It's crucial for mobile apps to offer an offline mode to ensure work continuity. This feature allows users to access vital information and perform essential tasks even when they are not connected to the internet, thus avoiding disruptions in their workflow. 

In addition to ensuring offline functionality, it's beneficial to offer alternative input methods such as voice commands and image search. Typing on mobile devices can be cumbersome, especially in dynamic environments where users might be on the move or have limited dexterity due to wearing gloves. Voice input can streamline many tasks, from searching for information to sending messages, while image search can enhance user interaction by allowing users to simply capture a photo to obtain relevant data. 

Integrating modern technologies such as generative AI can also significantly enhance user productivity when on the go. AI-driven features can provide personalized recommendations, automate routine tasks, and even predict user inputs based on their use of the app. This not only makes the app more intelligent and intuitive but also drastically reduces the time users spend on performing repetitive tasks. 

Lastly, consider the physical and environmental conditions where the app will be used. Features like theming, larger font sizes, and touch-friendly sized buttons can make the app more accessible and user-friendly. Ensuring that the app is operable in various lighting conditions and can be navigated easily with one hand can greatly enhance user satisfaction and efficiency. 


Brand and theme mobile apps

Branding is defined as what users see before log in, while theming is what users see after they log in. 

Mobile Publishing is used to manage the branding of mobile apps. This includes a unique app name, icons, and splash screens. One benefit of Mobile Publishing is to create a unique presence in the app stores to help employees quickly find applications. The Mobile Publishing plugin is a paid plugin that can be installed from the ServiceNow® Store.   

For theming, use the same Theme Builder experience that manages Workspace and Core UI themes. Theme Builder allows administrators to set color variables to use throughout an application. If dark mode is enabled on an instance, users can also turn on the dark mode theme variant in their Native Mobile apps.