Design: Clearing the search bar on the My Projects Page

Overview

We need a convenient way for users to clear the search bar.

Details

In the current design of the My Projects page, the Reset Filters/Sort button is used to clear the search bar. However, the search bar is centered while the Reset Filters/Sort button is right-aligned. If the browser has a wide viewport, there is a large separation between the search bar and the Reset Filters/Sort button. This separation can cause frustration for users because they have to move their mouse a large distance across the screen to clear the data they have entered in the search bar.

Distance between search bar and Reset Filters/Sort button

Please design a solution to the inconvenience that users face when trying to clear the data they have entered in the search bar. Possibilities include:

• Putting the search bar and Reset Filters/Sort buttons closer together
• Creating a separate "clear search" button
• A new design altogether

Action Items

• Assign yourself to this issue.
• Move the issue from Prioritized Backlog to In Progress.
• In Figma, move a blank page to the Design section.
• Change the Figma page's title to have the format "#Issue Number | Title | Assignee Name".
• Copy contents from the Figma Template page to this issue's Figma page.
• Include a link to this issue's Figma page in the Figma section below.
• Research other similar button placement conventions within TDM calculator sits.
• Research button placement and label best practices, specifically when it comes to the Reset button.
• Use the Figma page to design solutions for this issue.
• Once this issue is ready to be reviewed:
  • Add a comment tagging the team design lead that explains the design.
  • Move it to the Visual Review column.
  • Add the "ready for Design lead-[team]" label specific to your team.
  • Once you have received feedback from the team lead, implement feedback as necessary.
• Use presentation structure to review proposed designs with the design director. Implement feedback as necessary.
• Use presentation structure to review proposed designs with the product, development, and research teams. Implement feedback as necessary.
• Create a new slide (or edit one if it already exists) in staging and add images and appropriate text.
• Receive design approval from stakeholders. Implement feedback as necessary.
• Add any annotations to the Figma design that would help the developer with implementation.
• Create a Ready for Dev section around the final designs on the Figma page.
• Update the Figma Design System with changes resulting from the issue's final design, if applicable.
• Update the Style Guide Presentation, if applicable.
• Add a comment to the issue that references the final design and adds any annotations that would help the developer with implementation.
• Create a development handoff issue that references the comment.
• Move the Figma page to the Development section of the Figma file.
• Add the development issue's number in parentheses at the beginning of the title of the Figma page.
• Include the development handoff issue number in the GitHub section below.
• Reassign any previous assignees to this issue.
• Close this issue.

Resources

External Research

• Nielsen Norman Group article about reset and cancel buttons

GitHub

• Epic for designing the My Projects page: #1816
• My Projects page redesign: #2219
• Adding tabs to the My Projects page: #2381
• Reducing vertical padding for all pages, including My Projects: #2356

Figma

• Figma My Projects mockup
• https://www.figma.com/design/nD9QK56Mzq7xNSaSUoeGx0/TDM-Calculator?node-id=18525-58

Slides

• Staging Deck
  • Staging Deck, slide 2364
• Release Deck
  • [YYYY-MM-DD Release Deck, slide 2364]