UI/UX Design for Checkboxes/Inputs

averdin2 commented 3 years ago

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 commented 3 years ago

@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 commented 3 years ago

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] commented 3 years ago

@christina245

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

Progress: "What is the current status of your project? What have you completed and what is left to do?"
Blockers: "Difficulties or errors encountered."
Availability: "How much time will you have this week to work on this issue?"
ETA: "When do you expect this issue to be completed?"
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 commented 3 years ago

@christina245

Please add an update to this issue:

Progress
Blockers
Availability
ETA

christina245 commented 3 years ago

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] commented 3 years ago

@christina245

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

Progress: "What is the current status of your project? What have you completed and what is left to do?"
Blockers: "Difficulties or errors encountered."
Availability: "How much time will you have this week to work on this issue?"
ETA: "When do you expect this issue to be completed?"
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 commented 3 years ago

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

Progress
Blockers
Availability
ETA

christina245 commented 3 years ago

@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 commented 2 years ago

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] commented 2 years ago

@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.

Progress: "What is the current status of your project? What have you completed and what is left to do?"
Blockers: "Difficulties or errors encountered."
Availability: "How much time will you have this week to work on this issue?"
ETA: "When do you expect this issue to be completed?"
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] commented 2 years ago

@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.

Progress: "What is the current status of your project? What have you completed and what is left to do?"
Blockers: "Difficulties or errors encountered."
Availability: "How much time will you have this week to work on this issue?"
ETA: "When do you expect this issue to be completed?"
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] commented 2 years ago

@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.

Progress: "What is the current status of your project? What have you completed and what is left to do?"
Blockers: "Difficulties or errors encountered."
Availability: "How much time will you have this week to work on this issue?"
ETA: "When do you expect this issue to be completed?"
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 commented 2 years ago

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

IsaacDesigns commented 2 years ago

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 commented 2 years ago

Issue Update:

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

IsaacDesigns commented 2 years ago

@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 commented 2 years ago

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

github-actions[bot] commented 2 years ago

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 commented 2 years ago

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

lilyarj commented 2 years ago

@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 commented 2 years ago

@kathrynsilvaconway There are checkboxes on the homepage under "Current Projects" dropdowns. There may be other checkboxes in other dropdowns across the site. Screen Shot 2022-09-01 at 9 26 06 AM

lilyarj commented 2 years ago

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

github-actions[bot] commented 2 years ago

@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.

Progress: "What is the current status of your project? What have you completed and what is left to do?"
Blockers: "Difficulties or errors encountered."
Availability: "How much time will you have this week to work on this issue?"
ETA: "When do you expect this issue to be completed?"
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 commented 2 years ago

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

hackforla / website