AUDIT - Right Sidebar Zoom

[trallard]

• 200%
• 400%
• Change the default value of text size from 16 to 30 in the web browser
• Test with different screen sizes

References

• Theme scope checklist
• Audit spreadsheet

[steff456]

These are the results of the Zoom Audit,

Icon behavior

Right pane behavior

Notes

• Vertical padding is defined in px, therefore it doesn't change with the zoom or default text value in the web browser
• If using the default layout in Jlab and the user tries to open the right sidebar pane, it will not be visible or usable
• If the screen is too small, the user will not be able to have the left, right and main content visible.
• Changing the default text size doesn't do any effect in Jlab UI, but changing the minimum text size in the browser does create changes.
• Modifying to responsive layouts doesn't break the sidebar and its usability - as long as the left sidebar pane is hidden
• Sidebar container changes size dynamically for the height, the width always remains in 250px. This needs to be discussed to allow the rest of the interface to have more space.

Suggestions

• The definition of vertical padding and height are working as they are and they have sense to leave them in px.
• As already stated in AUDIT - Left Sidebar Zoom #3, we need to define a new UX for when the left sidebar is taking too much space compared to the main area. My suggestion will be to compress the left pane to give priority to the main content area.

[isabela-pf]

I'm following up on this now that we have a direction for how the whole interface will interact with zoom and reflow. Based on this audit, to improve this area for high zoom we need to

• (as @steff456 noted) Design how the sidebar interacts with the main content area so that it can scale with the larger font and icons while not pushing things out of the viewport. This can be mirrored and should match the solution in the left sidebar.
• Make an overflow/"More"/… collapsing menu for the right side bar tabs. @steff456's audit doesn't show them running off the viewport, but since I think it would be wise to add it to the left side bar I'd like to see the matching behavior here. I think the left and right side bars should have the same basic UX.

[isabela-pf]

For further notes on how the side bar tabs could collapse, please check this comment on the left sidebar version of this issue.