Introduction

The Totara Mobile app design guidelines contain the visual and behavioural design specifications for all component and assets found in the app. It is a living document and will be updated as the app evolves.

The design guidelines have been created for developers and designers working on app customisations. Please refer to the latest version when designing and implementing new interfaces and behaviours.

For all the native controls (e.g., switches, status bars etc.) used in the app, please refer to iOS and Android design guidelines:

• iOS
• Android

Colour

Colour theme is applied consistently across all components featured in the app, with the default theme being based on the Totara brand.

Colour variables, as depicted below, follow an abstract semantic framework that is applied in a meaningful manner consistently throughout the app. This enables users to derive meaning via colour, aiding the user experience. Each colour variable is customisable to match the customer's brand and design needs.

Primary

Neutrals

Notifications

Grid

The Totara mobile app's interfaces are based on an eight-pixel grid because it favours consistency and flexibility. The dimensions of the elements and the distances between them will always be multiples of eight: 16, 24, 32, 40, 48, etc. Follow this grid when designing and implementing new layouts in order to maintain a consistent UI.

Spacing

All the design component and elements follow the spaces across the grid. The same principle applies when you stack multiple elements within and between a component. 

Works on different screen sizes

Using the eight-pixel grid allows creating a vertical rhythm. But there are screen sizes which are not compatible with the eight-pixel grid system.

Typography

Typography is used to communicate information in the most efficient way possible through legibility and visual hierarchy. It's a crucial tool to guide users on their tasks. It should be used in a clear and delightful way.

Typefaces

Totara Mobile uses system fonts for both platforms (iOS & Android).

Brand app icons

The app icon appears on the phone home screen and makes you recognise the app on the app store. There is a set of small icons for the home screen and a larger icon for the App Store itself. The App Store and Google Play have different specifications and instructions for mobile icon design.

Buttons

Primary button

The primary button is used to show the main action on a screen. It typically portrays the 'successful' culmination of a task. To convey this, the primary button is styled so as to be prominent and, ideally there should be only one per page.

Secondary button

The secondary button is always used to display actions that may not be used and, as such, their visual style is less prominent than the primary button's style. Several secondary actions can be nearby each other.

Tertiary buttons / button links

The tertiary buttons are usually used for less important or less commonly used actions, and are often used along with a primary button or as a standalone button.

Guidance

• Buttons should indicate an action, not a navigation link
• They should be discoverable, easy to identify, and specific
• Always have a text label within the button container - icons are optional
• Make buttons look and feel clickable
• If using multiple buttons, style and label them distinctly

When to use

• Use buttons to emphasise a call to action

Accessibility guidelines

• The button text and background colour must meet the minimum contrast requirement.
• If an icon button is used, an accessible label must be provided that indicates the purpose of the control. Avoid using the words “image” or “icon” in the description label.
• If an icon is used alongside the text button, the icon should not provide any text alternative for screen readers. The button’s text will serve as the accessible name, and the icon may be considered redundant or decorative.
• Use an aria-controls prop to add the aria-controls attribute to build the relationship between button and element which is managed by it. Aria-controls runs only with a single ID of an element.
• Use area expands prop to add aria-expands to indicate to screenreaders, that element controlled by button-through aria-controls is expanded or not.
• Use a disabled prop to indicate to users that a button is inactive and they can’t interact with it.
• Use the title to add aria-label when you need to add extra information to screen readers, or there are no children presented to be used as a label.

Cards

Cards are a UI component that display content and actions on a single subject.

When you have lots of information, combining it into appropriate groups can help users to navigate it all. Cards are excellent for assembling a lot of related data into one block to organise it.

Empty state

Empty states may occur at any time. The purpose of an empty state guideline is to provide appropriate advice to the user on any relevant actions to take (e.g. guide them to the next step to take to get to their desired goal).

Icons

Icons draw attention and convey the meaning of specific actions and information, using semantic glyphs.

They can help to clarify a feature’s primary purpose or draw attention to a commonly understood action.

Icon sizes used based on screen resolutions:

• @1x - 24/24 px
• @2x - 48/48 px
• @3x - 72/72 px

Illustrations

Illustrations can help to communicate information in an engaging and visual way.

Humans process visual information faster than text. Illustrations could help most people, but might not help everyone. You need to make sure the content is accessible to everyone by presenting all essential information in text form and not just visuals.

List

Lists present repetitive data groups that are related to each other. There is a common visual layout for lists.

Modal

Use modals to complete subtasks or provide critical information while maintaining the context of the underlying page. 

Tab

Tabs keep related content in a single container and allows users to navigate between them quickly while remaining in the page's context.

Guidance

• Should have the similar content and labels should be clear

• Order the tabs based on user needs

Text links

Guidance

• Text links enable users to navigate to another part of your app or an external location (e.g. another website).

• The target of the text link should be clear from its label.

• Do not use text links for submitting actions. Use buttons instead.

Text input