ANDRIOD Navigation drawer

Top-level transitions

At the top level of an app, destinations are often grouped into major tasks (and the tasks may not relate to one another). These screens transition in place by changing values such as opacity and scale.

Sibling transitions

Screens that share the same parent move in unison to reinforce their relationship to one another. The peer screen slides in from the one side, while its sibling moves off screen in the opposite direction.

Naviagtional Drawers

Navigation drawers provide access to destinations and app functionality for multitasking.

Bottom Navigation

Screens that share the same parent move in unison to reinforce their relationship to one another. The peer screen slides in from the one side, while its sibling moves off screen in the opposite direction.

Back Arrow vs the X Icon

Navigation drawers provide access to destinations and app functionality for multitasking.

What are sheets

Bottom sheets are anchored to the bottom edge of the screen and appear in front of other UI elements. Standard and modal bottom sheets are full-width on mobile.

what we are using it for?

Bottom sheets are anchored to the bottom edge of the screen and appear in front of other UI elements. Standard and modal bottom sheets are full-width on mobile.

SHEET Principles

Expanding bottom sheets
THE betslip

provide a small, collapsed surface that can be expanded by the user to access a key feature or task.
They offer the persistent access of a standard sheet with the space and focus of a modal sheet.

Betfair Use:

A user can add a single or multiple bets to the expanding bottom sheet, the expanded verison show more detail and the mini version is a simplified version.

INTERACTION EXAMPLE

Modal bottom sheet
BET MANAGEMENT

A user must interact with or dismiss a modal bottom sheet. Their blocking behavior make them suitable for menus, such as in this files app, to help users focus on their available choices.

Betfair Use:

Betfair management where user can view there bets and view only not actionable. this equivalent of a receipt for the bets the user place, odds and the stake the user risked for a particular bet.

Interaction example

IOS SHEET
Expanded Cards

The sheet presentation style appears as a card that partially covers the underlying content and dims all uncovered areas to prevent interaction with them. The top edge of the parent view or a previous card is visible behind the current card to help people remember the task they suspended when they opened the card.

Betfair Use:

Use for in game state and additional content that is a non betting experiences

Interaction example

IOS Action Sheets
QUick Actions

An action sheet is a specific style of alert that appears in response to a control or action, and presents a set of two or more choices related to the current context. Use an action sheet to let people initiate tasks, or to request confirmation before performing a potentially destructive operation. On smaller screens, an action sheet slides up from the bottom of the screen. On larger screens, an action sheet appears all at once as a popover.

Betfair Use:

Action sheets our used only for alerts that are actionable.

OVERLAYS

When to use:

only use at the end of an journey due the fact that the navigation is removed.this would be great to use for states or unrelated materials like podcasts ect

When NOT to use:

Do not use an overlay on an overlay, IOS do currently a version like this with sheets this is a different behaviourshould not be used in a navigational senses for example the X will take you back to the state before nothing else.

Betfair Use:

Betfair Redesign uses the overlay to show more content in a card

Backdrop

A backdrop appears behind all other surfaces in an app, displaying contextual and actionable content.

Relevant

The backdrop’s back layer is persistent, displaying controls and content that relate to the front layer.

Immediate

The backdrop’s back layer can be accessed from any scroll position.

Contextual

The backdrop focuses attention on one layer at a time.

Betfair Use:

for complex betting markets we can use backdrops for setting for the likes of unmatched/part matched bets or setting a auto cashout.

INTERATION EXAMPLE

Material SNACK BAR

When to use:

Snackbars are displayed in rectangular containers with a grey background. Containers should be completely opaque, so that text labels remain legible.

When NOT to use:

Don’t place icons in snackbars. If your message needs an icon, consider using an alert.Avoid significantly altering the shape of a snackbar container. Avoid stacking snackbars on top of one another.

Betfair Use:

Snackbars our used to show progress on the users bets

Informational

Snackbars provide updates on an app’s processes.

Temporary

Snackbars appear temporarily, and disappear on their own without requiring user input to be dismissed.

Contextual

Snackbars are placed in the most suitable area of the UI.

BAnners

Appropriately interruptive

Banners are interruptive, but their level of interruption should match the information they contain and the context in which they appear.

Clear

Banners communicate a succinct message and what will happen if users interact with them.

Focused

Banners contain a single message and specific actions a user can take.

Betfair Use:

Banners

Search (Persistent Search)

Use persistent search when search is the primary focus of your app. The search text field is presented inside of a search bar, ready to receive focus.

Usage:

When in focus, the search experience expands to fill the entire screen. Optionally, historical search suggestions can be displayed below the text field.
‍
A user can type a query or select from a suggestion (if available). Upon pressing Return, the search is submitted.Search results are displayed below the search bar.To release focus from the search box and dismiss search suggestions, the user taps the Up arrow.

Betfair Use:

In the Betfair redesign persistent search for quick and easy navigation.

Fliter Chips

Chips are compact elements that represent an input, attribute, or action.

Filter chips use tags or descriptive words to filter content.

Filter chips clearly delineate and display options in a compact area. They are a good alternative to toggle buttons or checkboxes.

Betfair Use:

In the Betfair redesign we used Chips for machine learning so the user can customise their content and edit the chips to customise their content.

Video

When to use:

only use at the end of an journey due the fact that the navigation is removed.this would be great to use for states or unrelated materials like podcasts ect

Card Principles

Cards are surfaces that display content and actions on a single topic.They should be easy to scan for relevant and actionable information. Elements, like text and images, should be placed on them in a way that clearly indicates hierarchy.

Navigation Components

Navigation refers to the interactions that allow users to navigate across, into, and back out from the different pieces of content within the app.

Event Cards will  have  the "Hierarchy" as a main navigation pattern as it's easier to keep the user in context during transactional journeys.

Supporting Content Cards is will be adoption the hub & spoke pattern as the content contained in the cards is just informative not transactional

UX Patterns - Native

Cards are surfaces that display content and actions on a single topic.They should be easy to scan for relevant and actionable information. Elements, like text and images, should be placed on them in a way that clearly indicates hierarchy.

HERO

Cards are surfaces that display content and actions on a single topic.They should be easy to scan for relevant and actionable information. Elements, like text and images, should be placed on them in a way that clearly indicates hierarchy.

Cards are surfaces that display content and actions on a single topic.They should be easy to scan for relevant and actionable information. Elements, like text and images, should be placed on them in a way that clearly indicates hierarchy.