Structure

Overview

ServiceNow's mobile apps share a consistent structure to help users learn the mobile experience more quickly. The task-based navigation and information architecture prioritizes easy navigation and quick access to important info and actions.  

Users engage with screens made up of elements for navigation, information gathering, and actions. These screens come pre-configured by enabled plugins and Mobile App Builder setups.

Common screen elements in a mobile app include:

1. Navigation  
2. Body content  
3. Cards
4. Actions

---

Navigation

The first thing a user encounters when opening mobile apps is the launcher screen. From there, users can navigate to other screens in several ways: with the navigation bars at the top and bottom of the screen, by interacting with the body content of the launcher, or through search.

1. Navigation bar: Native Mobile apps support primary navigation through a familiar navigation bar at the bottom of the screen. You can define what shows in your nav based on user permissions when you configure your instance.
2. Search: Search is present throughout the experience to easily find content.

Stacked navigation

Screens use a stacked navigation pattern, where each new screen is placed on top of the previous one. This pattern reveals information progressively as users search for what they need, which reduces cognitive overload and guides the user toward what’s next.  

---

Body content

Body content within screens can be configured within the platform and is different for each screen type. In general, it includes various components to provide information, direct users to other screens, and support search or object creation. The content is ordered in the direction users will read it, automatically supporting both Left to Right and Right to Left Languages.

To learn more about the different screen types and what they support, see Screens.  

---

Cards

Cards are one of the primary body content UIs used throughout the mobile experience to present data to users. Cards display important visuals, text, and data that drive users to key actions. Managing card templates provides an easy way to reuse card layouts. The Mobile Card Builder provides a visual tool to edit the templates and cards used throughout apps.  

---

Actions

Buttons, links, and other interactive elements on a screen allow a user to change data, navigate to new screens, open mail, make phone calls, send SMS, or open URLs outside of the app.

---

Screens

There are several available screen types designed to present functions and information to your users in different ways. Consider what information and actions a user needs to take, and select the screen type that best suits their needs.

Use top menu functions to navigate to a screen, group by a specific field. You can also open a URL, start a phone call, or navigate to another screen. For example, you can add top menu functions to call your support number or open your company website.

Screen name behavior

Screen names appear on a tile in the application on a mobile device. Screen names can be static, empty, or dynamic.

• Use a static name when the name is descriptive and provides value to the users.
• Consider not displaying a screen name (empty), if the name is repetitive, gives no additional value, or duplicates information that appears elsewhere in the screen.
• Use a dynamic name for a screen to provide the user with additional information or to assist with orientation.

Use this capability to display short but valuable information like an incident number or employee name. Avoid using fields with long text, which might not be fully visible. The names are inherited dynamically, either from the previous screen or from a field in the current record, in the case of a form. In this example, when tapping on a task, the task number is displayed in the header of the subsequent screen.