UI/UX Design for Checkboxes/Inputs

[averdin2]

Overview

How should the design of checkboxes and other inputs be throughout the site? For example: Should there be a pointer on checkbox text, or just on the checkbox itself? Maybe take a look at other input items and come up with designs for those as well?

Action Items

• Find each page on the website that uses checkboxes/ inputs and add the list in the recourses section of this issue. Create a H4LA Figma page to work on this issue, and name it Checkboxes/Inputs - Issue #1398 .
  • Confirm with development the names of the related classes and add to your Figma page.
• Determine what the current design and functionality for checkbox inputs and annotate.
  What happens when...
  • Hover
  • Chosen
  • Unchecking
• Let the design lead know if the behavior is uniform or not across the site
• Compare what you find with the documentation in the Design System that describes the intended functionality (hover over behavior, etc.) on checkboxes.
  • Write a list of discrepancies in the comments below

Possible change carried over from this issue from a previous version

• Update the Design System examples for "Active" and "Active Hover" on the Dropdowns/filters section, since those shown are not up to date. They should reflect the design shown here: Change mobile menus on Toolkit page #2171

Resources/Instructions

• Figma - Design System
• Figma Design System
• For inspiration on how checkboxes/Inputs could be implemented for the site, maybe checkout how other sites implement their checkboxes.
• There are various checkboxes in the dropdown menus on the home page of the Hack for LA site in case you need to see how the site has them implemented: https://www.hackforla.org/
• Here is a list of web inputs in case you are considering designs for other input items: https://www.w3schools.com/html/html_form_input_types.asp

[averdin2]

@daniellex0 I'm putting you on here so you and the UI/UX team can take a look at this issue when you get a chance. I will also try to add some research and resources when I get a chance.

[averdin2]

I looked at how Postmates, Doordash, and Uber Eats implement their checkboxes. Funnily enough, all three do something different 😄! In terms of where we should have a pointer on checkboxes, there doesn't seem to really be a consensus on what is best, so I guess it is up to our own discretion on how we want it implemented.

I have some resources for UX/UI principles from Google and Apple that I will share below. I don't think reading these are necessary for this issue, but I think having these resources around for your own reference is good as its always worth while to see how the best do things.

Resources

Material Design (Google): https://material.io/develop/web/components/input-controls/checkboxes

Apple: https://developer.apple.com/design/human-interface-guidelines/macos/buttons/checkboxes/