Design: Create mockups for page 1 and 3 with reset buttons

[NilakshiS]

Overview

Currently, page 1 and 3 of the calculator do not have "Reset Page" and "Reset Project" buttons like page 2 and 4. UXR recommends adding them for consistency and so that users don’t have to move forward or backward to reset a project.

Action Items

• [x] Create a mockup of calculator pages with reset buttons:
  • [x] mockup of page 1
  • [x] mockup of page 3
• [ ] Review with product and dev. Update if needed based on feedback

Resources/Instructions

• Link to create project on TDM Calculator dev site
• UX Research recommendation on consistent reset buttons

[mjldesign]

Created two options:

• Option 1 retains the existing position of the Reset buttons from P2 and P4, and simply places them on P1 and P3. With this option, however, the buttons can look out of place on P1 and P3:

• Option 2 relocates the position of the Reset buttons on all P1-4, placing them with the page navigation buttons at the bottom of the screen. There are the options to have the Reset buttons above or below the navigation arrows, each with their inherent pros/cons:

Additionally, I recommend updating the verbiage of the "Reset Page" button to "Clear Page". This helps distinguish the difference between losing all progress on the project, and simply clearing the page. It also reduces cognitive load for the user about what it means to "reset" versus "clear".

[ExperimentsInHonesty]

Try to find other places for the button. For instance they could be vertical on the right side.

[mjldesign]

Explored two further avenues for the position/layout of the Reset Project and Clear Page buttons:

---

First option: Reset buttons stacked vertically on top right of page.

Benefits:

• Harder to accidentally press either of these buttons when trying to navigate pages
• Aligned with header so that user knows of its existence and location
• In a natural, familiar location to the user that is consistent across various page layouts

Drawbacks:

• Requires page subtitle text box to be condensed, which may lead to taller subtitle/directions for certain pages
• Exists in the margin/padding of the page, which may cause functionality issues when viewing page on a narrower browser window or screen

Notes/discussion points: With this scenario, should this set of buttons’ positioning be sticky or relative?

---

Second Option: Reset buttons stacked horizontally above form fields, below page title/subtitle, centered with page

Benefits:

• Harder to accidentally press either of these buttons when trying to navigate pages
• Centered and visually appealing, without breaking the flow of the page
• In a visible location that the user will likely see after reading the title/subtitle of the page
• Doesn’t require buttons to be placed on the side of page, which benefits responsiveness
• By being placed before the form’s fields, an accidental click on “Clear Page” won’t clear out any fields, as the user likely will not have entered any information in yet`

Drawbacks:

• A possibility of high cognitive load, as buttons immediately follow the page instructions

Notes/discussion points: With this scenario, can the verbiage “Reset Project” and “Clear Page” be easily comprehended, since placed immediately following the page instructions?

---

[marlenamellody]

Team feedback from 11/6/24: The second option is preferred. Suggestion: Explore updating the text buttons to a tertiary button style and consider alternative placements.

[mjldesign]

Based on team feedback, explored using the tertiary style for reset buttons

---

First Option: Change button style to Tertiary. Retain position.

Benefits:

• Buttons are easier to click, with a wider click target

Drawbacks:

• May break visual hierarchy
• Buttons now look too similar to each other and on some pages appear as the CTA, which shouldn’t be the case.

Notes/discussion points: Is the tertiary button style appropriate for these buttons? Or, do they need to be relocated?

---

Second Option: Change button style to Tertiary. Change position to bottom of page

Benefits:

• Buttons are easier to click, with a wider click target
• Buttons are located after main CTA, reducing accidental clicks

Drawbacks:

• Buttons still look too similar to each other and on some pages may still appear as the CTA, which shouldn’t be the case.

Notes/discussion points: In order to have the buttons retain the tertiary style, my recommendation is that the CTA (next/back) buttons need to be more prominent, perhaps with text instead of navigational arrows.

[NilakshiS]

From team meeting 2024-11-13:

• The buttons in the tertiary style look too prominent on the page compared to the text style buttons. Especially when it's centered on the page, and if the buttons are centered then they might clash with the infobox for bonus package.

  Bonus package infobox on the page

  

• Bonnie suggested creating a vertical button mockup on the side as it is a space that is not utilized, the buttons can be sticky (stay in their place even when the user scrolls) for longer pages but be careful about placing them too close to the scrollbar to avoid accidental clicks.

  Image for Bonnie's suggestion

  

[mjldesign]

Update: Change buttons position to the right edge, vertically stacked and sticky as page scrolls

Benefits:

• Buttons are easy to click, with a wider click target
• Utilizes empty space on page and does not affect the format or flow of the fields

Drawbacks:

• Appears too prominent on the right side of the page
• If browser window is very narrow, the page may break and buttons may overlap main content.
• Because the button text is rotated 90 degrees, reading the function of each button is more difficult and can lead to accidental clicks and increased cognitive load.
• Scroll bar may be affected on MacOS

Notes/discussion points: Does not seem like an intuitive or natural place that a user expects to find a reset button

[NilakshiS]

Team meeting 2024-11-20: Need to discuss the two options:

1. Text buttons aligned on the right, like how they are on the page currently.
2. The sticky vertical tertiary buttons, in the previous comment.

with the stakeholders in the next stakeholder meeting. Put the pros and cons for each option.

[NilakshiS]

From the stakeholder meeting on 2024-12-03:

• Option 1, with Text buttons on top and aligned on the right is selected.
• However, move the parking provided and the rest of the content on page 3 lower so it is not on the same line as the buttons.

Make changes to the design and update this issue with new images.

[mjldesign]

Updated designs with stakeholder feedback:

Page 1

Page 2

Page 3

Page 3 Error

Page 4