Location settings

Location settings allow the user to manage their location preferences across Βι¶ΉΤΌΕΔ products. Users can store multiple locations.

Contributors

  • Jacek Barcikowski
  • Nick Randall
  • Tom Allison
  • +4
Platform:WebApp

Please read the Licensing terms before you download this content.

Overview

Examples of the core features for location settings

How it works

Location settings enable you to add your home and other locations, to your Βι¶ΉΤΌΕΔ account when you're signed in. They can be available on any device when you're signed into the Βι¶ΉΤΌΕΔ. When not signed in, locations that you view or search for are remembered only on that device and are not stored in your Βι¶ΉΤΌΕΔ account.

This allows us to create personalised experiences based on the places that matter to you, providing local weather, news and TV scheduling.

Added locations are also used as links to relevant information i.e. added locations in Weather let you quickly check the weather rather than having to search for your location each time.

Location settings consist of the following components:

  • A location search box based on the local search pattern
  • An 'auto-detect location' button (web) or your 'current location' (apps)
  • Your home location
  • An 'edit' icon beside your home location
  • A list of your added locations labelled 'my locations'
  • A list of your recently searched for locations labelled 'recent searches'
  • A 'close' button
Location settings panel, annotating the different elements

Finding location settings

Web

Location settings are opened by selecting the location search box and revealed in situ on the same page, as an overlaid modal that retains focus.

Location settings can be closed by selecting the 'close' button or moving focus outside the modal, by using the 'esc' key, mouse or touch, which will return focus to the location search box.

App

Location settings can be found in the app menu. For guidance on using the app menu, please see the side drawer menu pattern.

Location search

Location search is a variation of the local search pattern.

The location search box and 'auto-detect location' button are always displayed together on the page (Βι¶ΉΤΌΕΔ websites). You can search for a location or your current location can be detected.

Searched for, or viewed locations will be remembered in 'recent searches' as local storage on your device. You don't have to be signed in to search for and view location information.

Βι¶ΉΤΌΕΔ location

The home location is captured from the home postcode entered during registration.

You can edit your home location by selecting the 'edit' icon beside your home location, then updating your home location in account settings.

The home location will always be presented as first in the 'my locations' list and accompanied by the GEL 'home' icon.

An example of the 'my locations' screen with a prompt to add more

Adding locations

Added locations are listed in 'my locations'.

Locations cannot be added from within location settings. Locations can be added and removed by toggling the 'add' button where the location information lives within a product i.e. the forecast page for 'London' in Weather.

Only higher granularity locations, such as postcodes, towns, or cities can be added, while counties or regions cannot.

'Add' button

For guidance on using the 'add' button, please see the content utilities pattern.

A flow diagram showing sow to add a location from a location's page

Removing locations

You can remove your added and recently searched locations individually by selecting the GEL 'no' icon beside a location.

Web

Added locations can be removed in situ via 'my locations'. Removing added locations requires additional confirmation.

Recently searched locations can also be removed in situ via 'recent searches'.

A flow diagram of how to remove a location from 'my locations'

App

The default way to remove added locations in apps is via the 'edit screen'.

Native gestures can also be used in the app menu as an alternative way to remove added and recently searched locations.

The 'edit screen' is a list of your added locations, but with the ability to remove multiple locations quickly. You can access the 'edit screen' by selecting the 'edit' button beside the 'my locations' label.

Removing added locations via the 'edit screen' is a two step process. How it works depends on which platform you're on:

  • iOS - Added locations can be removed by selecting the GEL 'no' icons and then the 'save' button in the app's navigation bar. Selecting the 'cancel' button instead of the 'save' button would undo any changes.
  • Android - Added locations can be removed by selecting the GEL 'no' icon beside a location. You then have the option to undo the change by selecting the 'undo' button via a snackbar.
Examples of the 'edit' screen on iOS and Android

'Clear all recent searches'

You can clear your recently searched locations by selecting the 'clear all' button beside the 'recent searches' label.

For guidance on removing locations, please see this patterns downloadable assets.

Number of locations

'My locations'

You can add up to 15 locations. If this amount is reached, you will need to remove one before you can add another.

When attempting to add a location via the 'add' button, an information panel appears. The panel explains that you have been unsuccessful in adding the location due to having already added the maximum amount of locations.

When you have more than 3 added locations (or 5 on larger breakpoints), the 'show more' button appears, allowing you to display the remainder of your added locations.

Once selected, the 'show more' button turns into a 'show less' button.

An example of the 'my locations' screen in closed and open states

'Recent searches'

Location settings list up to 5 recently searched locations. If this amount is reached, newly searched locations will appear at the top of the list and the oldest entry will be removed.

Messaging

Within the location settings pattern there is space to provide messaging.

Messaging should explain to users whether they are signed in or out, as well as promoting the benefits of adding locations.

Note

Tone of voice: Speak human, don't 'productise'.

Messaging should be as human as possible. For example, the list of added locations is labelled as 'my locations'. It is not a product and therefore should not be called 'my locations'. When referring to it elsewhere, it should be labelled as 'your locations' i.e. 'London has been added to your locations'.

When signed out…

You need to be signed in to see added locations.

When signed out, location settings can still be accessed, although the list of added locations is replaced with an upsell to sign in or register. The same upsell appears in an information panel when attempting to add a location.

An example of an up-sell to sign in or register

Rules

Logic

Order of locations

Both 'my locations' and 'recent searches' are ordered by most recently added, or most recently viewed, with the exception of the home location, which is always at the top of 'my locations'. Adding a location in another product affects the order, viewing a location in another product does not.

Location settings do not support the manual reordering of locations.

A flow diagram showing how adding location logic working

Adding locations

The same location cannot appear in both 'my locations' and 'recent searches' simultaneously.

Areas which map within each other are treated as separate locations. For example, W1A and London.

Removing locations

When locations are removed from 'my locations', they do not reappear in 'recent searches', even if recently searched or viewed prior to removing.

Locations removed from 'my locations' can still appear in 'recent searches' if searched or viewed again.

For people living outside the UK, and children

People living outside the UK and children are unable to have a home location listed in location settings.

Adding international locations may be possible depending on whether the product supports it. If a product doesn't, and when inside that product; the names of any added international locations are disabled in location settings. Disabled locations appear grey.

Accessibility

Considerations when there's no Javascript on the web

  • Location settings are revealed on a separate page
  • The 'auto-detect location' button is not displayed
  • Auto-suggest in location search is not displayed
  • Location search results are revealed on a separate page

Considerations for keyboards and screen readers

The tabbing order depends on where components are positioned on the page (from top-left to bottom-right). With the exception of the 'close' button, which should always be first and looped back to when the sequence starts again.

Licensing

These assets are available for download on the following licence terms:

You can:

  • Download the assets and use them free of charge;
  • Use the assets without attribution; and
  • Modify or alter the assets and edit them as you like.

You can't:

  • Use the assets in a way that would bring the Βι¶ΉΤΌΕΔ into disrepute;
  • Make available the assets so that they can be downloaded by others;
  • Sell the assets to other people or package the assets with others that are for sale;
  • Take payment from others to access the assets (including putting them behind a paywall);
  • Use the assets as part of a service that you are charging money for; or
  • Imply association with or endorsement from the Βι¶ΉΤΌΕΔ by using the assets.

Disclaimer: The assets are offered as is and the Βι¶ΉΤΌΕΔ is not responsible for anything that happens if you use them.