User Interaction Issues

[tyler-yin]

Issues tracked by @stefanietam @tyler-yin

DESKTOP & TABLET

GLOBAL

Side Navigation

• Side navigation without secondary panels should not have a collapsible arrow, ie: home page, copyright page, terms of use page, etc.
• Side navigation with the secondary panels should never have both panels collapsed. If the main panel is expanded and the secondary panel is collapsed and the user opts to collapse the main panel, it should expand the secondary panel and vice versa.
• Hovering over the black instances p5.js logo should switch to magenta, and vice versa.
• Secondary side navigation panel should say “Jump To” instead of “Reference” / “Tutorials” / “Examples” / “Community” / “About” on overview pages (detail pages are correct as is)
• When the secondary side navigation panel vertically overflows, the title line should not stay fixed, it should scroll with the anchor link items. The only thing that should stay fixed is the dropdown arrow.

Rich Text and Type Styles

• Magenta hyperlinks within rich text should have a magenta underline on hover, not black underline.

Top UI

• Search icon and arrow in the search field currently disappear in monochrome mode and dark mode.
• If the accessibility or language dropdown is expanded and the user scrolls away, the dropdown should automatically collapse.
• Can we remove the focus state from the search bar when clicked on with a mouse?
• Hovering over the language and accessibility panels should show their inverse colors.
• When a user clicks on an anchor link, the top UI should not drop down. The top UI should only drop down upon scrolling to the top manually or by hovering over the top area of the viewport.
• Hovering over buttons in monochrome and dark mode should make the button text black.

HOME

• The homepage hero image needs to output a random image from a selection of 10 images entered in the backend CMS.

REFERENCE

• Hovering over the entire area of the reference item (title AND description) should trigger the hover state, rather than just hovering over the title area.

REFERENCE DETAIL

• The copy button within the example editor should be a circle. The hover state should not have a white outline.
• The reset button within the example editor should have a white background and should be a circle. The hover state should not have a white outline.
• Remove underline from the Body Caption sized description of the related reference items’ hover state.

TUTORIALS

• Secondary side navigation panel has unnecessary vertical overflow that allows the user to scroll.

TUTORIALS DETAIL

• Remove underline from the Body Caption sized description of the related reference and related examples items’ hover state.

EXAMPLES

• [BUG] Sometimes the sections overlap and example items are vertically stacked over one another. It’s unclear what causes this issue. Refreshing the page normally fixes this, but if you tinker with the page, it sometimes occurs. Whether that’s resizing the browser, hitting an anchor link, etc.
• Remove underline from the Body Caption sized description of the example items’ hover state.

EXAMPLES DETAIL

• The copy button within the example editor should be a circle. The hover state should not have a white outline.
• The reset button within the example editor should have a white background and should be a circle. The hover state should not have a white outline.
• Remove underline from the Body Caption sized description of the related example items’ hover state.

CONTRIBUTE

• Remove underline from the Body Caption sized description of the contribute cards’ hover state.
• Secondary side navigation panel has unnecessary vertical overflow that allows the user to scroll.

COMMUNITY

• Remove underline from the Body Caption sized description of the sketch/event/library cards’ hover state.
• Secondary side navigation panel has unnecessary vertical overflow that allows the user to scroll.

SKETCHES

• Page button hover should not have an underline. The hover state of the circle should not make the outline white. The black outline should stay black, only the white fill should become black and the number becomes white.

EVENTS

• Remove underline from the Body Caption sized description of the event cards’ hover state.

LIBRARIES

• Remove underline from the Body Caption sized description of the library cards’ hover state.

ABOUT

• Secondary side navigation panel has unnecessary vertical overflow that allows the user to scroll.

SEARCH RESULTS

• See Figma documentation of the hover state for these search items. This prototype will show you the hover state behavior. It’s also available in the component library.
• Can we remove the focus state from the search bar when clicked on with a mouse?

MOBILE

GLOBAL

Top Navigation Menu

• [BUG] When resizing browser from desktop/tablet to mobile, the top nav doesn’t automatically change to the hamburger icon with “Menu” to the left of it. When resizing the browser from mobile to desktop/tablet, the side navigation isn’t populated with any of the menu items.
• Top main menu and secondary menu, collapsed, should be fixed to the top of the viewport.
• Top main menu and secondary menu should never both be expanded. Expanding one should collapse the other.

[ccanash]

Copy pasting description from above as I am unable to edit the texts from other users.
DESKTOP & TABLET

GLOBAL
Side Navigation

• Side navigation without secondary panels should not have a collapsible arrow, ie: home page, copyright page, terms of use page, etc.
• Side navigation with the secondary panels should never have both panels collapsed. If the main panel is expanded and the secondary panel is collapsed and the user opts to collapse the main panel, it should expand the secondary panel and vice versa.
• Hovering over the black instances p5.js logo should switch to magenta, and vice versa.
• Secondary side navigation panel should say “Jump To” instead of “Reference” / “Tutorials” / “Examples” / “Community” / “About” on overview pages (detail pages are correct as is)
• When the secondary side navigation panel vertically overflows, the title line should not stay fixed, it should scroll with the anchor link items. The only thing that should stay fixed is the dropdown arrow.

Rich Text and Type Styles

• Magenta hyperlinks within rich text should have a magenta underline on hover, not black underline.

Top UI

• Search icon and arrow in the search field currently disappear in monochrome mode and dark mode.
• If the accessibility or language dropdown is expanded and the user scrolls away, the dropdown should automatically collapse.
• Can we remove the focus state from the search bar when clicked on with a mouse?
• Hovering over the language and accessibility panels should show their inverse colors.
• When a user clicks on an anchor link, the top UI should not drop down. The top UI should only drop down upon scrolling to the top manually or by hovering over the top area of the viewport.
• Hovering over buttons in monochrome and dark mode should make the button text black.

HOME

• The homepage hero image needs to output a random image from a selection of 10 images entered in the backend CMS.

REFERENCE

• Hovering over the entire area of the reference item (title AND description) should trigger the hover state, rather than just hovering over the title area.

REFERENCE DETAIL

• The copy button within the example editor should be a circle. The hover state should not have a white outline.
• The reset button within the example editor should have a white background and should be a circle. The hover state should not have a white outline.
• Remove underline from the Body Caption sized description of the related reference items’ hover state.

TUTORIALS

• Secondary side navigation panel has unnecessary vertical overflow that allows the user to scroll.

TUTORIALS DETAIL

• Remove underline from the Body Caption sized description of the related reference and related examples items’ hover state.

EXAMPLES

• [BUG] Sometimes the sections overlap and example items are vertically stacked over one another. It’s unclear what causes this issue. Refreshing the page normally fixes this, but if you tinker with the page, it sometimes occurs. Whether that’s resizing the browser, hitting an anchor link, etc
• Remove underline from the Body Caption sized description of the example items’ hover state.

EXAMPLES DETAIL

• The copy button within the example editor should be a circle. The hover state should not have a white outline.
• The reset button within the example editor should have a white background and should be a circle. The hover state should not have a white outline.
• Remove underline from the Body Caption sized description of the related example items’ hover state

CONTRIBUTE

• Remove underline from the Body Caption sized description of the contribute cards’ hover state.
• Secondary side navigation panel has unnecessary vertical overflow that allows the user to scroll.

COMMUNITY

• Remove underline from the Body Caption sized description of the sketch/event/library cards’ hover state.
• Secondary side navigation panel has unnecessary vertical overflow that allows the user to scroll.

SKETCHES

• Page button hover should not have an underline. The hover state of the circle should not make the outline white. The black outline should stay black, only the white fill should become black and the number becomes white.

EVENTS

• Remove underline from the Body Caption sized description of the event cards’ hover state.

LIBRARIES

• Remove underline from the Body Caption sized description of the library cards’ hover state.

ABOUT

• Secondary side navigation panel has unnecessary vertical overflow that allows the user to scroll.

SEARCH RESULTS

• See Figma documentation of the hover state for these search items. This prototype will show you the hover state behavior. It’s also available in the component library.
• Can we remove the focus state from the search bar when clicked on with a mouse?

MOBILE
GLOBAL
Top Navigation Menu

• [BUG] When resizing browser from desktop/tablet to mobile, the top nav doesn’t automatically change to the hamburger icon with “Menu” to the left of it. When resizing the browser from mobile to desktop/tablet, the side navigation isn’t populated with any of the menu items.
• Top main menu and secondary menu, collapsed, should be fixed to the top of the viewport.
• Top main menu and secondary menu should never both be expanded. Expanding one should collapse the other.