Sticky tabs and buttons and Scrollable table

[mindytom]

For Event Streams we have a very longgg page where customers make selections from multiple tables. As a usability improvement my team is considering making the Cancel and Create subscription buttons sticky to the bottom, left vertical tabs sticky as well, and have the tables in a scrollable view. Please see the video of what we have in progress so far.

CreateSubscription_lowres.mov

Was wondering if this is pattern exists today in Paste or Console? Are there any considerations or accessibility concerns with implementing this UX?

[andioneto]

Hi @mindytom 👋 I've bumped this question up in the team's queue and we will respond tomorrow with some ideas. Thank you for your patience!

[andioneto]

Hi @mindytom,

Could you provide more context around why the scrolling panel/view has a relatively small height? The current implementation (with restricted height) presents the following accessibility concerns:

1. Content hidden within a scrollable div creates confusion for users of assistive technology, especially keyboard only users.
   Assistive technology can inform the user that there is content available that is not actually in view or readily available. Similarly, a keyboard only user might end up in a situation where they are focused on and interacting with a hidden element.

2. Nesting many form controls within a large grid (e.g. table) can render the controls practically unusable.
   A user trying to find the save/submit controls will have to go through many tab key presses, which can be frustrating for users.

We suggest using only a sticky navigation panel and control panel. For an example of sticky left hand navigation, which full scrollable view you can check out the Component Overview page on our website. The Twilio Console uses a sticky command bar on all form pages, which you can follow for this as well.

Please let us know if you have any more questions, and thank you for reaching out.

[mindytom]

My team transitioned away from the design above to something like this. Wanted to make sure what we were doing isn't considered an 'anti' pattern. Thanks!

Untitled.mov

[SiTaggart]

If that's just using vertical tabs and page scrolling, which it looks like it is, I'm super into it.

I think that's a great solution.