Headers on FAQ/About/Donate are smaller than the subheaders

[itserindean]

Problem: Headers on FAQ/About/Donate are confusing because the overarching header "About Food Oasis LA" "Donate" FAQs" are smaller than the subheaders lower on the page.

Step to repro: goto: https://foodoasis.la/donate
https://foodoasis.la/faqs https://foodoasis.la/about

Severity 2- Minor usability problem: fixing this should be given low priority

Heuristics Violated: 4 Consistency and Standards 8 Aesthetics and Minimalist Design

Recommendations: Use larger font size, or style (spacing between characters or bold), etc. to indicate that this is the heading for the entire page of information which has subcategories of information. Or change banner size (?).

Action Items

• [ ] Design mocks up how it would look
• [ ] make change as designed

This is related/could be fixed at same time as https://github.com/hackforla/food-oasis/issues/1286 & https://github.com/hackforla/food-oasis/issues/1284

This is issue was created from a list of food seeker issues identified by a heuristic evaluation completed by @Gigi P & @ryu-jieun at the end of last year.

[itserindean]

I created this with severity 2, as described in the heuristics spreadsheet but I think the severity should be: 1 - Cosmetic problem only: need not be fixed unless extra time is available on project

I agree this isn't ideal but I'm not sure it's actually confusing anyone. Also these pages are not the primary use case for the site nor a place we're funneling users.

[staceyrebekahscott]

Making heuristics a priority for Impact Sprints 2022, moving to Prioritized Backlog.

[itserindean]

assigned to @sei1122 after a discussion with her because it's related to https://github.com/hackforla/food-oasis/issues/1286 & https://github.com/hackforla/food-oasis/issues/1284 and all can be fixed together.

[fancyham]

https://www.figma.com/file/D3oq9QOXl0rFkwrEUJbABs/FOLA-Design-System?node-id=6467%3A10939

[sei1122]

• Updated the body font-size from 14px to 18px.
• Design Tablet and mobile screen sizes are added.
• Create accent color background options

https://www.figma.com/file/D3oq9QOXl0rFkwrEUJbABs/FOLA-Design-System?node-id=6467%3A10939

[fancyham]

If possible, can we make the column widths narrower to make text easier to read on wide devices? Something perhaps around twice as wide as the mobile sketch above? (in the 2nd row)

Here are some examples of wide vs really-wide text. I think we’ve got “super-wide” text, making it hard to read. :) https://baymard.com/blog/line-length-readability

[sei1122]

I created a sample. I checked the WCAG guideline and it mentioned lines of text should be 80 or fewer characters So I set the design under 80 characters per line.

https://www.figma.com/file/D3oq9QOXl0rFkwrEUJbABs/FOLA-Design-System?node-id=6621%3A12125

[itserindean]

I think this looks great now! Nice work, @sei1122

[fancyham]

Looks great! It feels easier for me to read for sure. The text still looks kinda small to me though! How's it reading for everyone else?

I had some time so I added some variations for you to consider/review (don't feel pressured to adopt them)

• with larger body text and taller leading,
• also tried adding photos (as future options), with/without icons, and tried removing color to see how it feels.

Also, I like the dusty sage green by itself, but I wonder if it goes with the colors we're using elsewhere on the site?

https://www.figma.com/file/D3oq9QOXl0rFkwrEUJbABs/FOLA-Design-System?node-id=6641%3A11562

[sei1122]

I agree. It is a good idea to use a bigger text size for better legibility. I'm wondering if we change the font size, any affect with other pages. I just quickly check the map pages, it looks ok but need to ask @entrotech.

If we want to look into more font, it would be good to close current one and move on to this issue https://github.com/hackforla/food-oasis/issues/991

I looking at the font size on our website as well as the Design System. The font sizes are not consistent. We need to check the em calculation on site too. It seems a bit random.

We can create the latest font sizes guide and review the sites. This helps consistency and hierarchy throughout the site.

[sei1122]

@fancyham and I had a meeting last week. Based on the feedback I updated the design. Hope this can be final. If there is some detail we'd like to change like icons or images, I recommended closing the current 4 issues that are attached to this design and creating a new issue.

https://www.figma.com/file/D3oq9QOXl0rFkwrEUJbABs/FOLA-Design-System?node-id=6748%3A11218 https://www.figma.com/file/D3oq9QOXl0rFkwrEUJbABs/FOLA-Design-System?node-id=6458%3A10917

[itserindean]

I like the relative sizes of these headers! Nicely done! Let’s hand this over to engineering to implement.

[staceyrebekahscott]

I concur with @itserindean, we should proceed with the designs as Seiko has presented them here. Moving to Questions/ In Review for final approval for Dev tasks.

@sei1122 If the other related issues can be closed once this is fully approved for Dev tasks, please make some brief notes in the comments in those issues before closing them, so it is clear that the issue has been addressed and resolved.

[sei1122]

This is sent to development #1332.