Mobile Applications | How to Create Solutions that are intuitive for Users
By: Grace Hennessey
ServiceNow Mobile Applications allow users to access information from anywhere with just their cellular device. This ease of access and availability of information can be an invaluable tool for users.
Having the necessary information contained within an application is only one factor contributing to the application’s usefulness. User engagement is driven by ensuring applications are intuitive. If an application is not intuitive, users may resort to only utilizing the desktop version.
The primary pillars to creating an intuitive application are to simplify bottom tab bar navigation, focus on unique content, ensure content consistency, and setup various environments.
Simplify Bottom Tab Bar Navigation
- Sort content in a logical manner: Ensure the content on the page flows in a logical manner and items that are for similar actions reside together, so it is easier for users to find them. The most heavily used application items should go on the home tab to promote ease of accessibility.
- Keep labels succinct: Ensure the label clearly depicts the content contained within the topic as succinctly as possible. This will allow the users to easily find what they are looking for without overfilling the mobile view.
- Choose icons that are familiar and unique: Ensure no two icons look too alike to reduce the instances of users going to an unintended page. Additionally, make sure the icon accurately represents the content contained within.
- Keep the number of tabs to three or less: As the image on the left displays, five tabs is the ideal number to have at the bottom of your application view. It is fine to have less, but any more can result in the page appearing too busy.
Focus on Unique Content
- Order content left to right and top to bottom: Simply put, ensure content is ordered left to right and bottom to top, just as the user will read the information. Put the most important information toward the top of the page and toward the left end of a horizontally organized section.
- Keep content centered on primary objectives: Focusing on what is most important within your mobile application will keep users focused and allow them to more easily find what they are looking for.
- Reduce the number of actions on screen: To keep the various pages within the application from becoming too busy, ensure there are only three visible actions in the primary user interface.
Ensure Content Consistency
- Icons: Within your mobile application, the icons should remain consistent from page to page. If you have icons to represent items on your webpage, utilize these same icons in applications to promote user familiarity and prevent cross platform confusion.
- Labels: Ensure the label that corresponds to a given icon remains consistent to reduce user confusion. The label font and size should remain the same across various pages.
- Colors: Having a consistent color palate can help users associate related items. Utilize the same colors or closely related colors for various tasks and workflows to drive this association. Only use two or three colors to keep the design simple and keep the focus on the content. Have the theme of your mobile application align to the company identity and keep it consistent across the web and mobile version of your website. The following colors can be determined by you: brand, primary, secondary, destructive, positive, and tertiary.
Note: Color can be utilized to enhance readability. Ensure when text is overlayed on an image that the contrast is significant to accommodate low vision and color-blind users. WCAG 2.0 compliance mandates the contrast is 3:1.
Setup Various Environments
- Enable Offline Mode: Users can work via the mobile application without internet connection using Offline Mode. The purpose of Offline Mode is to ensure users can still work when they anticipate they will have limited or no internet connection.
- Vary the theme based on the environment: Ensure the theme you use is best suited to the environment. What looks well suited to a web version may look too cluttered in an application. A variance of themes within the application helps users to gauge when they switch to a different environment. Test various themes with users to determine what provides the best experience in different environments.
References:
- Knowledge 24- Elevate Mobile Solutions Presentation
- https://docs.servicenow.com/bundle/washingtondc-mobile/page/administer/tablet-mobile-ui/concept/now-mobile-app.html
- https://www.servicenow.com/content/dam/servicenow-assets/public/en-us/doc-type/resource-center/data-sheet/ds-mobile-app.pdf
- building-mobile-apps-white-paper.pdf (servicenow.com)