hackforla
Minor changes to Filtering UI Mockup to match the style guide
Overview
The Figma designs and prototypes created for the Filter functionality on My Projects page need to be updated to be consistent with the styles in the style guide.
Details
The style guide has some different styles than what the design mockups for filter use, we need to update the design mockups to keep it consistent with the style guide. There are also some suggestions to implement.
- Change "Show Result" on buttons to "Apply".
Details
The Primary Call to Action button on each popup is labelled "Show Result", but the usual word used for something like this is "Apply".
- This is just John's opinion, so we can use another working if you want.
- Product agrees Apply is more consistent with industry standard.
- If Design has a different word we should use, please provide industry examples.
- Examples
- Google Sheets uses "OK"
-
Dev has already implemented this, see screenshot from dev site
- Apply the "Primary" button style from the style guide to the "Apply" button.
- Design a style for "Cancel" button or propose another from the existing styles.
The Reset button is functionally equivalent to a Cancel button on, say the Duplicate Project Dialog, so we will apply that style unless directed otherwise. It's not clear to me if the style guide includes a button style for "Cancel". In some case Cancel is the Primary (safest option) and in others it might be Secondary, but maybe Cancel-type operations need their own button design.
Action Items
- [x] Implement the changes to the design mockup and update the designs and prototype on Figma:
- [x] Change "Show Result" on buttons to "Apply"
- [x] Apply the "Primary" button style from the style guide to the "Apply" button.
- [x] Design a style for "Cancel" button or propose another from the existing styles
- [x] Review with Product, Dev and Research and iterate if needed based on feedback.
- [x] Update the style guide to add the new design.
- [ ] Once finalized, get Stakeholder sign-off via the stakeholder meeting slide deck.
Resources
- Link to Buttons and Pagination in the style guide presentation
- New Filter Designs:
- Design Issue #1885
- Link to new prototype on Figma
- Link to interactive prototype
- Old Filter Designs:
- Progress: I made 3 new designs for the cancel button. I'd like to get the team's feedback before moving on to the next step.
- Blockers(Difficulties or errors encountered): Unsure about the best approach for updating designs and prototype in Figma. Should I update all pages individually?
- Availability: I will be busy next week, but I'll do my best to squeeze in about 3 hours for our project.
- ETA: Within 2 weeks.
https://www.figma.com/design/nD9QK56Mzq7xNSaSUoeGx0/TDM-Calculator?node-id=3337-11979&t=touGMwZ0jX3D4rMy-1
Updated all the cancel and apply buttons on #1885 New prototype for filters and my projects based on dev site.
@serena1214 Could you also change the button text to "RESET" instead of "CANCEL". It is more accurate for use in context of filters and is also used on the dev site. I've added a "Button Text" property to the component so it should be easier to change the value for multiple instances.
)
New button styles suggested for cancel and reset buttons:
- https://github.com/hackforla/tdm-calculator/issues/1768#issuecomment-2421364257
New button styles have been approved by the stakeholders on 10/29/2024. Updated the new filter prototype (#1885) with the new design.