Track Usage of Next Buttons on Checkout Page

[jaycmb]

Problem

As described in this issue https://github.com/openfoodfoundation/openfoodnetwork/issues/2830#issuecomment-725643672, the "Next" Buttons in the current checkout flow might be confusing for users, as they possibly distract from the actual Call-to-action "Place Order now". Also, the when a user click on the "Next" Button the animation is jumpy, leading to a bad User Experience.

As a first step we would therefore like to track the usage of those buttons in order to have evidence if we could remove the buttons.

Product Area / Page

https://openfoodnetwork.org.uk/checkout

Hypotheses:

• Users are less likely to abandon the checkout if there is only one Call-to-Action on the bottom of the page - possibly users are more likely to scroll down then because they look for some way of to confirm after entering their data
• Users are not heavily using Next-Buttons to move between the sections on the checkout page

Questions:

• how heavy are "Next" buttons used to move from section to section vs. users just scroll down the page?
• how many users exit the checkout page after they hit (one of) the "Next" buttons?

Proposed Method

• [ ] Create an event when user clicks "Next" button

• [ ] Create a funnel

  1. User enters /checkout
  2. User clicks "Next" button 3a. User clicks "Place Order now" 3b. User exits page (before having placed order

[jaycmb]

First attempt for Trigger on the Next Button here https://openfoodnetwork.innocraft.cloud/index.php?module=TagManager&action=manageTriggers&date=yesterday&period=day&idSite=3&idContainer=ubVt5KXy#?idTrigger=91

[jaycmb]

After discussing with @mbudm, we decided that tracking "next button" usage vs "place order button" could be misleading, since there could be many other reasons why people decide not call off the purchase - not only because annoying animation or because of they thought, the order was placed by clicking next.

It would be more precise to compare the funnels of

A)

1. User enters Checkout page 2. User uses next buttons 3a. User exits page / 3b. User places order

B)

1. User enters Checkout page 2. User scrolls down (defined by "Place order now" button is visible, but no next buttons were used) 3a. User exits page / 3b. User places order

Next Steps

• [x] As a first step tags have been created for

• "Next Button Click : when user clicks any next button on checkout page

• "Place Order now Button visible": when user scrolls down checkout page

• [ ] Check if working correctly: -> Scroll/visibility event seems to be not working correctly

• [ ] Build funnels

[Erioldoesdesign]

Does this also need usability hub testing/usertesting?

[mkllnk]

I'm wondering if people actually exit the checkout page without buying or if they just take longer to figure it out. Would it be a bit easier to measure how long people stay on the checkout page on average? The shorter they stay, the more efficiently they are navigating the page and get to where they want.

Aborting and not buying is a valid user choice as well, e.g. after deciding that the shipping fee is too expensive or that the current credit card doesn't work. I think that the goal is to enable the user to make their decision quickly and have more time for fun in their life. :wink:

The risk of optimising a page to reduce visit duration is of course that we don't want people to abort after one second because they think it's too hard, ugly and just not working. So tracking checkout success vs dropout and time spent could be two good metrics that don't depend on the elements on the page.

[Erioldoesdesign]

I have four people lined up for quick usertests on this. I'll draft up a rough test script and share before I book in the usertests

[jaycmb]

The risk of optimising a page to reduce visit duration is of course that we don't want people to abort after one second because they think it's too hard, ugly and just not working.

I also think tracking visit duration on this page will not help us with the original question / discussion that was around improving the UX on the checkout page (https://github.com/openfoodfoundation/openfoodnetwork/issues/2830) and whether this can be achieved by removing next buttons and the jumpy animation or if removing next buttons will lead to confusion because they are currently used and useful (hypothesis: they are not).

But, related to simplify the work on tax, @Matt-Yorkley suggested to split the checkout process in multiple steps that would require a redesign of the page(s) anyways and solving the problem of having several call to actions (next buttons + place order button) and jumping.

So I think next step would be a decision if we want to investigate splitting up the checkout process and what is needed related to this from Analytics.

[jaycmb]

P.S. Since the visibility tracking seems not to work accurately (and can be investigated with user testing) , an alternative approach if we want to at least validate weather next buttons are used in (successful) checkout flows (as much as in aborted ones) could be to compare funnels of

Users that 1)

• enter checkout page
• click on next button
• (click on place order now button -> does not need tracking, since order cannot be placed without this)
• order confirmation page

vs. 2) Users that

• enter checkout page
• click on place order now button
• order confirmation page

Funnel for 1) https://openfoodnetwork.innocraft.cloud/index.php?module=Goals&action=manage&idSite=3&period=day&date=yesterday&idContainer=ubVt5KXy