User Interface Guidelines

Introduction

The Mobile Data Plan Sharing API enables mobile subscribers to see their plan information within Settings using established Android user interface patterns. It also optionally enables users to view and manage their plan using other surfaces like the Assistant. Many users will be introduced to Mobile Data Plan first from a notification telling them they can view and manage their plan. After consenting for data plan sharing between their operator and Google, subscribers will be able to view Mobile Data Plan with information sent through the API.

The UI to the right is an example of what an integration could looks like as of Google Play Services 15.3. Scroll inside the image to see more.

Guiding principles

  1. Accuracy
    The operator delivers accurate and timely information using the API to the best of their ability. Any inaccuracies will negatively affect the trustworthiness of Mobile Data Plan and degrade the user’s experience with Google apps that use this information.
  2. Clarity
    The user can see what they subscribed or purchased using the plan and module API structure. Plan & module name and descriptions are written to be as clear as possible. Expect that some users will be less digitally literate or have their phone set to a language that is not their first. Instead of using technical terms like “throttled” use a non-technical word when appropriate, e.g. “your data will be slowed to…”.
  3. Brevity
    Users often scan instead of read text to look for key pieces of information. Put key words at the start of sentences and remove words that do not change its meaning and leverage context. For example when the context is the user’s account balance, “When you top up your account your account balance validity will be extended” could be shortened to “Extend validity by topping up your balance”.

Setup options

Logo example

1 Logo 2 Operator brand name

Before testing your integration a team member will ask you for an image asset of the logo that will appear next to your name. Check your operator’s brand guidelines to find out approved uses of your logo. Please provide a square logo that is 600 by 600 pixels or larger on an opaque background preferably in PNG or SVG format, but a high quality JPG is also acceptable.

Your operator's logo in combination with its brand name is a signal to users that their plan and account information can be trusted. Choosing the right logo for the UI is important because it should be recognizable at a glance even at small sizes. Brandmarks work best for those reasons. If color is strongly associated with your brand, consider using a version of your logo that makes full use of it. Avoid using wordmarks if possible since they may not very legible at a small size and your operator name will appear next to it. Do not combine brand and wordmarks into one image as this will be even less legible.

Recommended logos

Do use brand marks or abbreviated word marks

Avoid using these types of logos

Avoid long word marks because of legibility & duplication

Do not use these logos

Don't use logo lockups or logos with extra elements

Operator brand name

Your brand name should be the one users will easily recognize while also being the shortest version of it. Do not use taglines or spell out acronyms when a shorter version is possible. See some examples below:

Good: "MyTelco", "ACG"

Avoid: "MyTelco Wireless", "American Cellular Group"

Bad: "MyTelco - Innovation unbound", "ACG Inc."

Writing guidelines

  1. Be brief
    Space is limited and it'll be easier for users to scan. This is especially important for users who have come online for the first time.
  2. DON'T USE ALL CAPS
    Users may feel like you're shouting at them and it’s also harder to read or scan. This doesn't apply to acronyms or brand names.
  3. Avoid unnecessary punctuation
    Don't be bombastic! Always end the last sentence with a period. Don't use periods if there's only one sentence or phrase.
  4. Don't include URLs
    Unless otherwise noted by the API reference, they won't be tappable in the UI.

Plan type

For most operators this is simply “prepaid” or “postpaid” though sometimes users will identify with a unique or marketed plan type that they subscribed to. Do not use a descriptive plan name that can change from month to month or include plan details like calling or SMS rates. This field can also be left blank if not needed.

Page header with 'SuperMetro' as plan title

1 planStatus.title 2 planStatus.updateTime

Do Don't Character count Truncation
Prepaid

Postpaid

SuperMetro

GoJUMP

Unltd in-ntwk calls, 20c/SMS

No plan

Super Internet 5GB 129b

Recommend less than 50 characters Ellipsis after two lines

Module name

API reference: PlanModule.moduleName

Module line item and dialog for Ultra entertainment pack dialog pointing to description

1 PlanModule.moduleName 2 PlanModule.description

Keep modules names short using unique names when considering all of the possible plan names that could appear here. Use the modules's description to communicate the details of the plan. Avoid putting quota or validity in the title as they will appear duplicated in the data bar and above it.

If the module name is left blank, the UI defaults are "Data" for metered data and "Unlimited Data" for unmetered.

Do Don't Character count Truncation
Internet Speed Max

Social Fun Pack

Movie Night

3G data

Unlimited data at 1Mbps

1 GB Internet Speed Topping

Unlimited video with iFlix, Netflix, YouTube, LINE TV, JOOX, Apple Music, Fungjai, TIDAL, AtimeOnline, Deezer, Cat Radio, COOLISM, and BEC TERO RADIO

Recommend less than 24 characters none

Module description

API reference: PlanModule.description

Describe any details that were left out of the title. For example, explain the benefits of the "Ultra entertainment pack" in a succinct way. Avoid marketing or promotional language, repeating the plan name, or phone call/SMS details.

Do Don't Character count Truncation
Unlimited entertainment streaming at 2Mbps speed on YouTube, LINE TV, JOOX, Apple Music, Fungjai, TIDAL, AtimeOnline, Deezer, Cat Radio, COOLISM, and BEC TERO RADIO Keep the good times going with 12 hours of Unlimited Internet & 24 hours of Unlimited Calls.

The new SuperMetro plans ensure your account always stays active throughout your subscription period!

Recommend not exceeding 180 characters none

Offer name

API reference: Offer.planName

Keep this as short as possible using a unique or descriptive name when considering all possible offer plan names. Rely on the offer's description to communicate the details of the offer like fair usage policy or other restrictions. Do not use superfluous promotional or marketing language when a descriptive name will do. Avoid including price in the name because it appears next to the offer.

Offer list item and dialog in Mobile Data Plan

1 Offer.planName 2 Offer.planDescription 3 PlanOffer.FormOfPayment 4 Purchase terms

Do Don't Character count Truncation
Go No Limit 1 Mbps Day Pass

1 GB Top up

1 GB of 3G data

Unlimited Internet Day Pass

Best 4 GB Top up!

1GB topup at discount

Recommend less than 40 characters none

Offer description

API reference: Offer.planDescription

Be short and as specific as possible to communicate limitations on usage around, speed, expiration, or time bounds if applicable. Avoid excessive promotional and marketing language.

Do Don't Character count Truncation
4G data at maximum 10 Mbps speed. Valid for 24 hours. Fastest 4G internet. Get it today!

Unlimited LTE data on the nation's best mobile carrier

Recommend critical info under 50 characters to appear in offer list Ellipsis at 2 lines in the offer list

No truncation in the offer dialog

Form of Payment

Translated and appended to the offer description, this text supplied by GTAF is set for all offers sent to a user. E.g. “Deducted from account balance” for most prepaid users or “Charged using your saved payment method” for cases where a credit or debit card is on file. Exact messages are subject to change. See other options.

Purchase terms

Mobile Data Plan can support any purchase terms or conditions that currently appear with offers in other channels that they are sold. For instance, if VAT is typically excluded from the price, say “Price excludes 7% VAT”. This is set up when the operator onboards.

Quota & Usage

Mobile Data Plan provides a way for users to easily track their usage and remaining quota. Some fields are required, but all operators should fill as many fields as possible to help the user track what they’ve used and what they have left. In the UI pictured below, everything but the module title, “Internet Quota”, is formatted and translated by Google.

1Icon based on the type of data specified in PlanModuleTrafficCategory. The icons below will appear with the noted traffic categories. Do not arbitrarily set the traffic category to force a particular icon to appear.
traffic icon legend

2quotaBytes less remainingBytes

3Progress bar only appears if quotaBytes and remainingBytes are filled

4expirationTime

5quotaBytes

6remainingBytes

7planState set to INACTIVE for cases where plan features are temporarily inactive

Notifications

Notifications are critical to users users managing their mobile data effectively. Operators can send specific notifications to their subscribers about their plans via the API. Notification text is generated, translated, and sent by GTAF based on required API fields. For an up to date list of supported notifications and their required field, view the notifications API guide. Their design follows Material Design Android Notification guidelines with the goal of providing timely, contextual, accurate, and specific notifications so users can manage their data.

4 example notifications

Examples of supported notifications: (content subject to change)
1 Low data balance 2 Out of data 3 Expiration reminder 4 Welcome notification

Support page

A support page can be configured to help direct users towards your support channels instead of sending it to Google's feedback tool. As of Google Play Services 15.3+, users can access it from the more options menu at the top of Mobile Data Plan. Reach out to a Mobile Data Plan Sharing team member to set up.

1 Support help 2 Link title 3 Link subtitle

Users can see a list of email, SMS, call, and web support options as well as a text snippet to set context for the user. Linking to other apps or the downloading other apps from the Play Store is not supported. Link title and subtitle are specified in English and translated by Google.

Email and SMS intents can be populated with a body and subject line (email only). Use these if you want to direct the user to give the appropriate information to handle their support request.

Support page tips
When users arrive here how should they know which option to pick? If certain options are for particular account types make that clear. Use the subtitle to give users an idea of when or why they should use this option using expected response times, open hours, or other helpful information.