User Interface Events

Owned by Silva, Carlos
Last updated: Jul 16, 2024 by Rodrigues da Silva, Manuel
11 min read

Contents

Overview

User Interface (UI) events, also called User Interactions, are triggered by the web, iOS and Android apps. In most cases, they correspond to interactive UI components or patterns that are visible in the application. These allow us to:

  • Keep the list of events limited and intuitive.

  • Create micro funnels based on component-to-component interaction.

  • Quantify the application's overall error rate and the breakdown per flow, page, and component.

Standard events

Typically, user interaction events are named as follows:

Button

The user clicks/taps on a button.

Card

The user clicks/taps on a card.

Checkbox

The user checks/unchecks a checkbox.

Chip

The user clicks/taps on a chip.

Content Rendered

A module or content is displayed to the user.

Dropdown

The user clicks/taps on a dropdown.

Dropdown Item

The user clicks/taps on a dropdown item.

Error

An error is triggered after a user action.

Input

The input field gets focused.

Link

The user clicks/taps on a link.

List Item

The user clicks/taps on an item in a list.

Modal

A modal is displayed to the user.

Navigation

The user clicks/taps on a navigation item.

Number Input

The user clicks/taps on one of the interactive elements of the number input component: the minus button, the plus button, or the number field.

Paginate

The user clicks/taps on the pagination button.

Page View

The user lands on a page (URL).

Radio Button

The user clicks/taps on a radio button.

Segmented Button

The user clicks/taps on a segmented button.

Sheet

A sheet is displayed to the user.

Snackbar

A snackbar is displayed after a user action.

Switch

The user clicks/taps on a switch.

Tab

The user clicks/taps on a tab.

Text Area

The text area gets focused.

Standard properties

See to understand what event properties are. User interaction events typically contain the following standard properties:

Name (All events)

While the event defines the component, e.g. Button, the name property specifies which button, e.g. Save

Path (All events)

The path URL after the domain, e.g. / (home), /menu, /store-locator/service-mode, etc.

Type (Card and List Item)

Exclusive for lists to help better differentiate content like different reward cards by tier, or pages where we might have offers mixed with rewards.

Category (Card and List Item)

If Rewards relates to the tier the reward belongs to, e.g. "100", "200", "300", etc, if Offers then would be "All Offers", "External Offers", etc.

Status (Card and List Item)

It can used to determine if a Reward is “Locked” or “Unlocked”, or if an Offer is “Coming Soon” for example.

Destination Path (Card, List Item, and Link)

The path URL where clicking/tapping the component will lead the user.

Sanity ID (Card and List Item)

Relates to the ID of the content in Sanity.

Engine ID (Card and List Item)

Relates to the ID of the recommendations engine if there's one.

Reward ID (Card and List Item)

Only applicable to Rewards Card types.

Favorited (Card and List Item)

It is to determine if the user interacted with a product that he had previously favorited, values should be “Yes” or “No”.

Error Code (Error)

The alphanumeric code of an error. It specifies the error cause.

Response Title (Error and Modal)

The title of an error or modal that is displayed to the user.

Response Description (Error and Modal)

The description of an error or modal that is displayed to the user.

Source Path (Page View)

The path URL of the page from which the user came.

Events Catalog

Event

Properties

Component

Notes

Burger King

Popeyes

Firehouse Subs

Button

  • Name

  • Path

 

 

 

 

 

 

 

 

 

Icon buttons should have the Name as the action they perform, e.g. "Favorite".

Card

  • Name

  • Type

  • Category

  • Status

  • Path

  • Destination Path

  • Sanity ID

  • Engine ID

  • Reward ID

  • Favorited

 

 

 

 

 

 

Type can be used to specify the card, e.g. "Rewards", “Marketing Tile”, “Upsell”, etc.

Category if Rewards relates to the tier the reward belongs to, e.g. "100", "200", "300", etc, if Offers then Category would be "All Offers", "External Offers", etc.

Status can used to determine if a Reward is “Locked” or “Unlocked”, or if an Offer is “Coming Soon” for example.

Engine ID relates to the ID of the recommendations engine if there's one.

Reward ID is only applicable to Rewards Card types.

Favorited is to determine if the user interacted with a product that he had previously favorited, values should be “Yes” or “No”.

Not all Card types will have Category, Status, Engine ID or Reward ID, in those cases the values for these properties should be "NA".

Checkbox

  • Name

  • Path

 

 

 

 

 

 

If there isn’t a clear short label that can used as the Name property, it must be created one that summarizes the interaction, e.g. “Terms Agreement”.

Chip

  • Name

  • Path

 

Content Rendered

  • Name

  • Path

 

 

 

 

Dropdown

  • Name

  • Path

 

Dropdown Item

  • Name

  • Path

 

Error

  • Path

  • Error Code

  • Response Title

  • Response Description

  • Name

 

Name is the English name of the error

Input

  • Name

  • Path

Name for input groups can be combined like "Date of Birth (Year)", "Date of Birth (Month)", etc.

Link

  • Name

  • Path

  • Destination Path

 

List Item

  • Name

  • Type

  • Category

  • Status

  • Path

  • Destination Path

  • Sanity ID

  • Engine ID

  • Reward ID

  • Favorited

 

 

 

 

 

 

 

Type can be used to specify the list item, e.g. "Menu", or "Offer".

Category if Rewards relates to the tier the reward belongs to, e.g. "100", "200", "300", etc, if Offers then Category would be "All Offers", "External Offers", etc.

Status can used to determine if a Reward is “Locked” or “Unlocked”, or if an Offer is “Coming Soon” for example.

Engine ID relates to the ID of the recommendations engine if there's one.

Reward ID is only applicable to Rewards List Item types.

Favorited is to determine if the user interacted with a product that he had previously favorited, values should “Yes” or “No”.

Not all List Item types will have Category, Status, Engine ID or Reward ID, in those cases the values for these properties should be "NA".

Modal

  • Name

  • Path

  • Response Title

  • Response Description

 

Name would be the short name (in english) of the modal such as “Cancel Order”.

Response Title is the actual title of the modal, this is a dynamic text as it's going to vary by market and by language.

Response Description is the actual secondary copy of the modal, this is a dynamic text as it's going to vary by market and by language.

Navigation

  • Name

  • Path

 

Number Input

  • Name

  • Path

Name for number inputs need to have a reference of the context they’re in, such as "Whopper (Cart Item)".

Paginate

  • Name

  • Path

Name would be used to provide context, e.g. "Rewards (Tier 1)".

Page View

  • Name

  • Path

  • Source Path

 

 

 

 

 

 

 

 

 

 

 

 

Name would be the name of the page, e.g. "Home", "Sign Up", "Sign In", etc.

Radio Button

  • Name

  • Path

 

Segmented Button

  • Name

  • Path

Name for segmented buttons that have a group label can have the group label and the button label combined such as “Donate (£0.00)”, “Donate (£0.50)”, etc.

Sheet

  • Name

  • Path

 

 

 

 

Snackbar

  • Name

  • Path

 

Switch

  • Name

  • Path

 

Tab

  • Name

  • Path

 

Text Area

  • Name

  • Path

 

Pages' events and properties

This section is a work in progress. We are currently re-structuring the client-side event documentation to make it clearer and more complete

These pages document specific events that are captured in each page of the RBI apps: