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

• [x] 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: #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/

[github-actions[bot]]

@christina245

Please add update using this template (even if you have a pull request)

1. Progress: "What is the current status of your project? What have you completed and what is left to do?"
2. Blockers: "Difficulties or errors encountered."
3. Availability: "How much time will you have this week to work on this issue?"
4. ETA: "When do you expect this issue to be completed?"
5. Pictures: "Add any pictures of the visual changes made to the site so far."

If you need help, be sure to either: 1) ask for help at a Tuesday or Sunday meeting, 2) put a "Status: Help Wanted" label on your issue and pull request, or 3) put up a request for assistance on the #hfla-site channel.

_{You are receiving this comment because your last comment was before Tuesday, August 3, 2021 at 7:53 AM.}

---

Note: This comment was created as part of a GitHub Action during its trial phase. If you find this GitHub Action to be disruptive/unhelpful, or if you believe there might be a bug, please leave a comment on this issue. All feedback will be used to further improve it. Thank you for your time.

[kristine-eudey]

@christina245

Please add an update to this issue:

• Progress
• Blockers
• Availability
• ETA

[christina245]

Danielle had previously added a design for the checkboxes, so I'll be adding more. There currently aren't options for input design so I'll be adding those.

[github-actions[bot]]

@christina245

Please add update using this template (even if you have a pull request)

1. Progress: "What is the current status of your project? What have you completed and what is left to do?"
2. Blockers: "Difficulties or errors encountered."
3. Availability: "How much time will you have this week to work on this issue?"
4. ETA: "When do you expect this issue to be completed?"
5. Pictures: "Add any pictures of the visual changes made to the site so far."

If you need help, be sure to either: 1) ask for help at your next meeting, 2) put a "Status: Help Wanted" label on your issue and pull request, or 3) put up a request for assistance on the #hfla-site channel.

_{You are receiving this comment because your last comment was before Tuesday, August 17, 2021 at 12:02 AM PST.}

[kristine-eudey]

Hi @christina245 can you provide an update on this issue?

• Progress
• Blockers
• Availability
• ETA

[christina245]

@kristine-eudey I was not at the last meeting so I'm unsure of how to proceed on this for now. Will discuss later on Slack.

[ktlevesque19]

Progress: Not started, this week got away from me! Blockers: None a this time Availability: Will work on this tomorrow and Saturday ETA: Expecting to have this ready for review ahead of Sunday's meeting.

[github-actions[bot]]

@ktlevesque19

Please add update using the below template (even if you have a pull request). Afterwards, remove the 'To Update !' label and add the 'Status: Updated' label.

1. Progress: "What is the current status of your project? What have you completed and what is left to do?"
2. Blockers: "Difficulties or errors encountered."
3. Availability: "How much time will you have this week to work on this issue?"
4. ETA: "When do you expect this issue to be completed?"
5. Pictures: "Add any pictures of the visual changes made to the site so far."

If you need help, be sure to either: 1) place your issue in the developer meeting discussion column and ask for help at your next meeting, 2) put a "Status: Help Wanted" label on your issue and pull request, or 3) put up a request for assistance on the #hfla-site channel.

_{You are receiving this comment because your last comment was before Thursday, November 18, 2021 at 4:50 PM PST.}

[github-actions[bot]]

@ktlevesque19

Please add update using the below template (even if you have a pull request). Afterwards, remove the 'To Update !' label and add the 'Status: Updated' label.

1. Progress: "What is the current status of your project? What have you completed and what is left to do?"
2. Blockers: "Difficulties or errors encountered."
3. Availability: "How much time will you have this week to work on this issue?"
4. ETA: "When do you expect this issue to be completed?"
5. Pictures: "Add any pictures of the visual changes made to the site so far."

If you need help, be sure to either: 1) place your issue in the developer meeting discussion column and ask for help at your next meeting, 2) put a "Status: Help Wanted" label on your issue and pull request, or 3) put up a request for assistance on the #hfla-site channel.

_{You are receiving this comment because your last comment was before Monday, November 22, 2021 at 11:19 PM PST.}

[github-actions[bot]]

@ktlevesque19

Please add update using the below template (even if you have a pull request). Afterwards, remove the 'To Update !' label and add the 'Status: Updated' label.

1. Progress: "What is the current status of your project? What have you completed and what is left to do?"
2. Blockers: "Difficulties or errors encountered."
3. Availability: "How much time will you have this week to work on this issue?"
4. ETA: "When do you expect this issue to be completed?"
5. Pictures: "Add any pictures of the visual changes made to the site so far."

If you need help, be sure to either: 1) place your issue in the developer meeting discussion column and ask for help at your next meeting, 2) put a "Status: Help Wanted" label on your issue and pull request, or 3) put up a request for assistance on the #hfla-site channel.

_{You are receiving this comment because your last comment was before Monday, November 29, 2021 at 11:19 PM PST.}

[IsaacDesigns]

@ktlevesque19 It looks like you are not volunteering anymore so I will unassigned you from this issue.

[IsaacDesigns]

Volunteers have been making progress on this issue but the action item checkboxes have not been touched. This comment https://github.com/hackforla/website/issues/1398#issuecomment-898044374 tells me that @christina245 or @ktlevesque19 might have made more progress.

I am currently asking the previous design lead @kristine-eudey for clarification on this issue.

[IsaacDesigns]

Issue Update:

Several people were assigned to this issue at different times but no one really made any significant progress.

[IsaacDesigns]

@ExperimentsInHonesty this issue seams outdated and I wanted to know if it is still a priority. If it is I would like more clarification on the task that is asked.

[ExperimentsInHonesty]

I have re-written the issue - Isaac will hide all the comments

[github-actions[bot]]

Hi @lilyarj, thank you for taking up this issue! Hfla appreciates you :)

Do let fellow developers know about your:- i. Availability: (When are you available to work on the issue/answer questions other programmers might have about your issue?) ii. ETA: (When do you expect this issue to be completed?)

You're awesome!

P.S. - You may not take up another issue until this issue gets merged (or closed). Thanks again :)

[lilyarj]

Availability: 2hrs ETA: 9/3/22 Blockers: can't find check boxes on the website at all

[lilyarj]

@kathrynsilvaconway Using the site map I've looked through like all of the pages on the hack for la website and I can't find a single checkbox, what should I do?

[averdin2]

@kathrynsilvaconway There are checkboxes on the homepage under "Current Projects" dropdowns. There may be other checkboxes in other dropdowns across the site.

[lilyarj]

@averdin2 Thank you so much I like completely missed that lol

[github-actions[bot]]

@lilyarj

Please add update using the below template (even if you have a pull request). Afterwards, remove the 'To Update !' label and add the 'Status: Updated' label.

1. Progress: "What is the current status of your project? What have you completed and what is left to do?"
2. Blockers: "Difficulties or errors encountered."
3. Availability: "How much time will you have this week to work on this issue?"
4. ETA: "When do you expect this issue to be completed?"
5. Pictures (optional): "Add any pictures of the visual changes made to the site so far."

If you need help, be sure to either: 1) place your issue in the developer meeting discussion column and ask for help at your next meeting, 2) put a "Status: Help Wanted" label on your issue and pull request, or 3) put up a request for assistance on the #hfla-site channel.

_{You are receiving this comment because your last comment was before Tuesday, September 6, 2022 at 12:28 AM PST.}

[lilyarj]

Progress: Not a lot Blockers: I have a problem with git, and I don't think I have access to the figma page Availability: 3hrs ETA: idk