Building Mobile Apps with ServiceNow Quebec, March 2021 Building Mobile Apps with ServiceNow Table of Contents 1 Purpose of the document 4 2 How to use this document 4 3 Native mobile clients 4 3.1 Mobile Agent . 5 3.2 Now Mobile . 5 3.3 Onboarding . 5 4 Navigation tab bar 6 4.1 Naming conventions . 6 4.2 Ordering . 6 5 Applet launchers 7 5.1.1 Applet launcher concept . 7 5.1.2 Applet launcher structure . 7 5.1.3 Applet launcher header . 8 5.1.4 UI sections . 8 5.1.5 Icon section/Navigation UI section . 9 5.1.6 Item section . 9 5.1.7 Chart section . .11 5.1.8 Media section . 13 5.2.1 Campaigns . 14 5.2.2 Global search . 15 5.2.3 Applet launcher quick actions . 17 5.2.4 Applet launcher examples . 18 6 Applets 25 7 Lists applets 26 7.1 List . 26 7.2 Item stream segments on list . 27 7.3 Item streams on list . 27 7.4 Grouped list . .28 7.5 Employee Directory . 28 7.6 Calendar . 29 7.7 Map . 29 7.8 Filters . 30 7.9 Empty state . NEW. 31 8 Chart applet 32 9 URL applet 32 10 Form applet 33 10.1 Screen field types . 35 10.2 Activity stream . 37 10.3 Related list . 38 10.4 Embedded List . 38 10.5 Embedded browser .NEW . 38 March, 2021 2 Building Mobile Apps with ServiceNow Table of Contents (Continued) 10.6 Dynamic segments NEW. 39 11 Saved views NEW 40 12 Actions and functions 41 12.1 Action completion NEW . 42 12.2 Parameter screen NEW . 42 12.3 Swipe actions location . 45 12.4 Footer actions location . 45 12.5 Top menu actions location . 46 12.6 Jump to navigations . 46 12.7 Smart buttons . 46 12.8 Deep links NEW . 47 13 Mobile styles 48 13.1 UI styles . 48 13.2 Mobile UI rules NEW . 49 14 Icons 50 14.1 Applet icons . 50 14.2 Navigation icons . 50 15 Using color 51 16 Mobile Cards 52 16.1 Mobile views NEW . 52 16.2 Item views . .53 17 Native features 54 17.1 Phone . 54 17.2 Camera . 54 17.3 Geolocation . 54 17.4 Push notifications . 55 17.5 Siri shortcuts . 56 17.6 Deep linking . 56 18 Offline 57 19 User acceptance testing 57 20 Branding 58 20.1 General . 58 20.2 Apple iOS . 58 20.3 Google Android . 58 21 Integrations 59 22 Migration 59 23 Deployment 59 24 Security 59 24.1 General . 59 24.2 Working with MDM and MAM . 60 March, 2021 3 Building Mobile Apps with ServiceNow 1 Purpose of the document The ServiceNow platform enables you to create powerful mobile experiences. However, creating these experiences for mobile is different than building for desktop. You need to think about the form factor and usability of the device to optimize for mobile users’ behavior and expectations. This document is meant to guide ServiceNow mobile app creators on using best practice mobile design and product principles to create consumer grade mobile experiences. 2 How to use this document This document is organized into sections focusing on different aspects of mobile app configuration. It is not meant to be read cover-to-cover, but looked at individual sections for tips, recommendations, and best practices. As you configure and finalize your apps, refer back to the sections of this document to align with how our designers and product managers optimize the ServiceNow platform for the Now Mobile, Agent, and Onboarding apps. In addition to this document, reviewing the pre-configured apps created by ServiceNow’s BUs is recommended before creating from scratch. 3 Native mobile clients ServiceNow platform supports 3 Native clients in the store. All the apps have the same capabilities, but the app name gives indication on the persona and usage. ServiceNow’s approach to app design aligns with how users work in consumer mobile apps. Each app specializes in a specific area of the platform. These specialized apps give your users the best experience, providing them with what they need in that moment. The idea is to keep each app focused on a specific set of tasks to facilitate quicker interactions. When building custom apps, consider the use case and user persona. Understanding that will guide you on the best native client to place your app configurations. March, 2021 4 Building Mobile Apps with ServiceNow 3 1 Mobile Agent ServiceNow Mobile Agent delivers out-of-the-box, mobile-first experiences for the most common agent workflows, making it easy for agents to triage, act on and resolve requests on the go. Use the ServiceNow Agent mobile app to update records, coordinate with coworkers, and get work done. Deploy the Mobile Agent app for service agents who need to work remotely. • Resolve an incident • Coordinate with co-workers Agent • Track or catalog assets on • Manage approvals your instance • View your work schedule 3 2 Now Mobile Now Mobile allows employees to find answers and get stuff done across IT, HR, Facilities, Finance, Legal and other departments, all from a modern mobile app powered by the Now Platform®. Enable your users to submit incidents and requests, manage tasks, and access company resources from anywhere using the Now Mobile app. Deploy the Now Mobile app if your users need to regularly perform these tasks while away from their desk or out of the office: • Submit and view requests and • Upload images and attachments issues to ServiceNow records Mobile • Submit approvals • Search people, knowledge • Edit their profile articles, and catalog items • View a personalized home page • Request help from Agent Chat • View and complete tasks 3 3 Onboarding ServiceNow® Mobile Onboarding empowers new hires to complete tasks, view content, and get help across departments - including IT, HR, Facilities, Finance, and Legal - all from a single native mobile app. Enable your new hires to complete your onboarding processes and get up to speed quickly and easily. Deploy the Mobile Onboarding app for new hires who need to complete onboarding tasks: • Complete onboarding to-dos • Chat with an agent • View relevant media sections • Receive notifications Onboarding • View relevant banners defined by from your instance your administrators March, 2021 5 Building Mobile Apps with ServiceNow 4 Navigation tab bar The navigation bar displays multiple icons, called navigation tabs. Configure these tabs to navigate to applet launchers or an applet Work Inventory Articles Notification Settings within your mobile applications. The navigation bar contains a Settings and Notification tabs. Removing these tabs is possible, but prevents your users from accessing important information and features of the app. Consider changing the order in which they appear in the navigation bar rather than removing them. 4 1 Naming conventions Give your navigation tabs a descriptive name that provides context. Avoid generic names like “Home” or “Apps”. Note the limited space available for titles in the navigation bar. When testing your application, watch for titles that do not completely display on the navigation bar. The navigation bar can display up to five icons. If you have added more than five, a “More” icon is added to display the additional icons in a list. Try to limit your navigation bar to five icons to avoid requiring your users to take this additional step. Make sure tab bar icons are visually consistent and the text length is balanced. 4 2 Ordering Ordering should be determined by level of importance top to bottom and left to right. March, 2021 6 Building Mobile Apps with ServiceNow 5 Applet launchers 5 1 1 Applet launcher concept With an applet launcher, users can access applets in a variety of formats, 9:41 as well as search, do quick actions, and find user information. An applet launcher can be accessed at the bottom of the app or through a Hello Danielle navigation button. Search for services, articles, or people An applet launcher can be defined based on context for example – FSM, ITSM, Finance, Timesheet etc. or to be divided to smaller use cases for Diversity, inclusion and example My work, My Inventory, My cases. belonging Read our The navigation bar is limited to 5 tabs. If you exceed this limitation, journey the last tab on your navigation bar is a “More” tab that will display the remaining tabs as a list. Limit your navigation bar to 5 or fewer tabs to How can we help you? prevent a cluttered appearance and ensure your users can easily see the available options. You can use role restriction to further limit the number of tabs on your Ask a Request IT Knowledge HR Label 5 question assistance base information navigation bar. The required roles field on an applet launcher controls which users can see the launcher. Use this restriction to ensure your user only see tabs relevant to their work. Recommended for you See all Use capital case for your titles. For example, “Team Members”. Limit the New New length of your titles so they are not cut off when they are displayed in the Submit travel expenses Travel Create an expense report for every Lorem navigation bar. If you intend to support multiple languages, consider the business expense incurred on the trip length of titles in each of the languages you intend to support. By Monica Miller Text 2 Design your applet launchers to provide information and direct your users to other screens where they perform their work. The applet launcher should not be where users perform most of their tasks. Services Information For Me Notifications Settings 5 1 2 Applet launcher structure Applet launchers contain a configurable header, and UI sections to provide access to applets in several formats.