UI updates for How-To page

[subaha-cob]

Currently, How-To pages use a tabs, located below the header, to differentiate between sections. UX research has demonstrated that users often miss these tabs as they scroll down the page. To address this issue, the tabs should be replaced by series of drawers, as shown in the wireframe below:

The current UI is shown below for reference:

Complete specs can be found here: https://www.boston.gov/sites/default/files/embed/a/annotated_wireframes.pdf

The "carrot" indicating the state (open/closed) of the drawers has also been shown to be confusing for users, and should be replaced by a +/- symbol indicating open/closed state, respectively. The content of the new drawers is identical to the content previously housed in each tab.

This looks different from the wireframes now. With the $charles-blue and $optimistic-blue-dark colors instead for hover and open states.

[subaha-cob]

Can test the single tab auto-open and mobile styles at: https://d8-ci.boston.gov/departments/neighborhood-development/boston-home-center/get-financial-help-remove-lead-your-home

https://d8-ci.boston.gov/departments/parking-clerk/how-get-resident-parking-permit

[subaha-cob]

There are 3 states: Open, close and hover states:

[subaha-cob]

@carolyn-wang you have had this task for a while now. Where are we at with this task?

[phillipbentonkelly]

I pulled down the branch and from what I see it still needs work, not all 3 states are there. We can discuss/assists later, but preferably separate from the 1pm meetings

[carolyn-wang]

Branch #582 is outdated for this task, do not use. I created a new branch (#583) so that the how-to tabs would be separate from the group of links

[rachelsater]

@subaha-cob hiya! Can you please let me know what link to test with?

[subaha-cob]

@rachelsater
https://d8-uat.boston.gov/departments/public-works/how-pay-fine-code-violation

[rachelsater]

@duffy-james this looks good to me, what do you think?

[duffy-james]

@rachelsater @subaha-cob the sidebar and the drawers look a little too close together compared to the original:

Current version:

The text in the header here in the first step looks slightly gray instead of black:

Current version:

One last thing, on mobile, the title of each step is still appearing as it would normally on desktop. Also, I think the text underneath each step is slightly larger:

Current version:

There's a ton of extra white space at the bottom of the last component on the page and the sidebar section, but that was also in the original:

[rachelsater]

@subaha-cob Looks like this is still an issue. Mobile has a lot of extra spacing and the Back To Top box is covering text

Please Keep In Mind is two different colors

[subaha-cob]

@rachelsater this is not a bug we introduced, but it is a bug that is currently on production. This will be fixed in this project.

[rachelsater]

@subaha-cob both the mobile and "keep in mind" issues?

[subaha-cob]

@rachelsater That is also what it looks like in production. We can also fix in this project

[rachelsater]

@duffy-james what do you think?

[duffy-james]

@subaha-cob the title text is still appearing really large on mobile:

Ideally the text size would be much smaller on mobile (an h3 instead of an h2), and the numbered step would be next to the title of each step, not above it.