Comments (21)
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.
from bmrcportal.
it may be instructive to view how this finding aid appears on the UChicago site
from bmrcportal.
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.
from bmrcportal.
another site solution: also a fixed sidebar - from Archives West
from bmrcportal.
This can be resolved by adding:
position: -webkit-sticky;
position: sticky;
top: 0;
to the class .browse-sidebar
from bmrcportal.
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.
from bmrcportal.
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.
from bmrcportal.
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.
from bmrcportal.
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.
from bmrcportal.
Ok, let's go with Kathy's solution for this launch. Thanks KZ!
from bmrcportal.
Thanks very much, Kathy. Could you copy and paste a URL where I can see how this is set up on the library site?
from bmrcportal.
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
from bmrcportal.
As for better examples of an easily accessed/accessible sidebar, honestly, they're hard to find. Let's go one better!
from bmrcportal.
Also noticed that for a full SERP, the page seems very long to scroll. Similar solution = back to top link with mobile-friendly sidebar.
from bmrcportal.
Going to implement "back to top links" based on our Zoom conversation today.
from bmrcportal.
Understood that this enhanced nav comes after making the pages and ingesting the data! :)
from bmrcportal.
As per our Zoom conversation, this is optional for the December 10 launch.
from bmrcportal.
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?
from bmrcportal.
Implement this as "back to top" links.
from bmrcportal.
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"
from bmrcportal.
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).
from bmrcportal.
Related Issues (20)
- container inventory: labels displaying on top of other text HOT 4
- Accessibility: clickable logo in header HOT 1
- Accessibility: social icons HOT 5
- Accessibility: search button (magnifier icon) for WEBSITE HOT 1
- Error message for no site search results points to old link HOT 2
- Accessibility: need alt text for iframe HOT 4
- Accessibility: "Skip to" links not visible HOT 5
- Accessibility: two links in same context, different targets HOT 1
- Accessibility: line height too small in footer HOT 1
- Erroneous results in search
- North Park U name showing up in abbreviated form HOT 6
- Subject headings: identical heading with and without white space in dashes HOT 2
- seeing a lot of "Guide to the" in the SERP collection titles HOT 1
- font size seems very small in Edge browser
- Remove periods at end of subject and corpname terms HOT 1
- text is clipped when re-sized
- Accessibility per UC: need a link in the footer
- display of very detailed "extent" from MARCXML conversions is messy
- "Squished" display of multi-line inventory in finding aid view HOT 1
- Add contact info to Archives data page HOT 7
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from bmrcportal.