Finding aid viewer: sticky sidebar

[johnjung]

Finding aid viewer: sticky sidebar

[johnjung]

If you'd like to review other interfaces to see how they solve this problem, please do, and let me know what you'd like to try. I'll tag this one "design" no matter what, but if you'd like to try something in the meantime just let me know.

[MomoMoses]

it may be instructive to view how this finding aid appears on the UChicago site

[johnjung]

I'm going to leave this for design, since the UChicago interface uses a fixed sidebar for the table of contents and smooth scrolling, which is now available as "scroll-behavior" in CSS. If there are markup changes I can make, just let me know.

[MomoMoses]

another site solution: also a fixed sidebar - from Archives West

[kzadrozny]

This can be resolved by adding:

position: -webkit-sticky;
position: sticky;
top: 0;

to the class .browse-sidebar

[johnjung]

Laurie, is it possible to collect a few more solutions from well-designed finding aid viewers?

There are some usability issues I'm trying to avoid here. For example:

• Right now the entire portal, including the finding aid viewer, uses a fixed nav at the top of each page. If we include an additional fixed side nav on the finding aid viewer, we need to make sure that the two navs are not confusing to users, and we need to make sure that interface elements fit together in the viewport in ways that make sense. (Alternatively, we might want to omit the top nav from the finding aid viewer, etc.)
• A fixed sidebar navigation requires scrollbars, since the content can be taller than the viewport. Inner scrollbars create some usability issues that we should be aware of.
• We may want to omit the sidebar navigation on mobile devices, or design it in a way that makes sense for mobile, since it's easy for it to take up a lot of space in the viewport if we're not careful.
• We should be careful with accessibility issues here too, since usability issues might magnify problems with keyboard navigation, etc.

Seeing a few more examples of how other sites have solved this problem will help us avoid re-inventing the wheel here.

[kzadrozny]

My recommendation would be not to use a sticky sidebar and instead use something like an "off canvas" collapsible menu for the sidebar in mobile. We use this method on the Library site with great success and ADA compliance.
Using this along with a "scroll to top" button that shows up as you scroll down the page will create a better user experience. We use the "scroll to top" button on our subject guides and it is something I've been considering adding to the Library site.

[MomoMoses]

Can we use the sticky sidebar, as indicated by Kathy's code above, and use the "off canvas" for the mobile display?
In either case, it couldn't hurt to have a "scroll to top" button.

[kzadrozny]

Due to the length that the sidebar can get as well as the expanding nature of the facets, having a sticky sidebar will introduce many bugs that will need to get fixed with hacks. Go with the mobile-friendly sidebar + "scroll to top" for this launch and then test to see if the sidebar is an issue that comes up with users in UX testing.

[MomoMoses]

Ok, let's go with Kathy's solution for this launch. Thanks KZ!

[johnjung]

Thanks very much, Kathy. Could you copy and paste a URL where I can see how this is set up on the library site?

[kzadrozny]

Any page with a sidebar uses this; the Law homepage is a good example: https://www.lib.uchicago.edu/law/
You can see the template code in our Library base template: https://github.com/uchicago-library/library_website/blob/a3e39ff95613c36d40cdfdfd25291ec1e57ff556/base/templates/base/public_base.html#L138
Most of the heavy lifting is in the template structure; the JS is minimal: https://github.com/uchicago-library/library_website/blob/master/base/static/base/js/offcanvas.js

[MomoMoses]

As for better examples of an easily accessed/accessible sidebar, honestly, they're hard to find. Let's go one better!

[MomoMoses]

Also noticed that for a full SERP, the page seems very long to scroll. Similar solution = back to top link with mobile-friendly sidebar.

[johnjung]

Going to implement "back to top links" based on our Zoom conversation today.

[MomoMoses]

Understood that this enhanced nav comes after making the pages and ingesting the data! :)

[johnjung]

As per our Zoom conversation, this is optional for the December 10 launch.

[MomoMoses]

Going to implement "back to top links" based on our Zoom conversation today.

What's the latest thought about having these links implemented? Is February possible?

[johnjung]

Implement this as "back to top" links.

[MomoMoses]

Can Kathy's solution be implemented using the library base code she referenced? please indicate your understanding of the extent and scope of this task as outlined by Kathy above.
"Go with the mobile-friendly sidebar + "scroll to top" for this launch"

[MomoMoses]

Has this been dropped from the launch to-do list?
Let's discuss where this should go in the post-launch to-do list if so (as I am guessing it will need to be done later).