Component view layout update: Online content

ggeisler commented 2 years ago

One of the UI updates noted in https://github.com/projectblacklight/arclight/issues/1148 involves online content. Currently there is a tab called "Online content" (callout "F" in the screenshot below) that shows a search results list for just the items in the collection that are available online:

This tab is displayed at the collection level (I'll call that Case A) and at any other component level page if that component is a parent to one or more child components that are available online (Case B). Case A displays all items in the collection that are available online and Case B displays only the items that belong to the current component (i.e., usually a subset of Case A).

In the revised layout, the proposal is to replace the "Online content" tab by:

For Case A (at the collection level), adding an info box below the collection title that offers a link that will display only the online items in the collection (same items the "Online content" tab currently shows for Case A).
For Case A, redirect the user to a regular search results page where the results are faceted by 1) the current collection, and 2) Access > Online access.
Eliminating Case B - don't attempt to cover the case where we filter by online access on a component-level page

More detail about each of those steps in the sections below.

Add an info box below the collection title

We can fine-tune this after the layout and functional changes are in place, but generally:

[x] Use a success alert box to contain the online content filtering info (this should give us the basic container and colors)
[x] Use the same icon we currently do for online content but make it somewhat larger, try a width of 25px to start
[x] Make the Online content text all caps (using CSS so it is easier for an implementer to change case if they don't want the all caps) to act as a more eye-catching label for the box
[x] Use Some materials from this collection are available online. for the main message text
[x] Use Show only online content. for the link text below the main message text

This is probably obvious but we only display this info box when the collection has at least one item available online (same as we currently only show the "Online content" tab if the collection has items available online).

Redirect the action to a filtered search results page

When the user selects the "Show only online content." link, display a search results page, filtered using the "Collection > [current collection]" and "Access > Online access" facet values:

This is just a normal faceted search results page.

Eliminate the online content filtering for component-level parents

As noted earlier, ArcLight currently enables the user to filter by online content at specific component levels, such as showing all online items in a given Series rather than all online items in the whole collection. While this is a nice feature, trying to retain that as part of the overall UI layout restructuring doesn't seem worth the effort. If a collection has so many online items where that seems useful, the user could use the updated collection-level filtering described above, and then use additional facets, such as "Level" to further narrow the result set. And the user will still see the online access icon for items in the "Contents" section of a component-level parent page.

Also, if we decide we have eliminated a useful feature here, we potentially could find a way to add back the component-level online item filtering after all of the layout updates have been made and we get a better feel for the new UI.

crugas commented 2 years ago

Would it be possible to make the online content icon hyperlinked to the link providing the online content or have a dedicated button? We at UGA found it worked better for our users when they could access the link to online content more directly from the search results page as shown in the image in "Redirect the action to a filtered search results page" section.

We built a "View Online" button, shown below, so users didn't have to click into an object only to then be able to click a link to get access to the online content.

You can also see this behavior in search results for individual items

ggeisler commented 2 years ago

@crugas I think I understand your suggestion but am not sure it's a decision we should make in vanilla ArcLight, for a couple of reasons:

If we made the online content icon a link, I think we'd have to increase its size by a fair amount, just for accessibility reasons (if it becomes a functional link, we have to make it easier to actually select). And the locations in which we currently use it would be negatively impacted because of the additional height required. For example, the content inventory tree in the (redesigned UI) sidebar displays the icon where applicable and we really want to keep that tree as vertically compact as we can (to reduce scrolling, etc.). The use of the icon in search results is maybe less of an issue, though I can still see situations where the increased height might make result item entries vertically larger than they would otherwise be (especially in the parent component "Contents" version of child item results).
I might be missing something but the benefit of enabling the user to get to the online content more quickly using the linked icon seems like it might have gone away with the new UI redesign? For example, here's a mockup of a component show page with the redesigned ArcLight implementation:

The user sees the online content when they go to the component show page, so the normal content inventory tree and search result links using the item title are sufficient to take the user to the online content with one click.

Let me know if you think I've misunderstood anything about your suggestion.

crugas commented 2 years ago

@ggeisler I think those points are valid and understandable. By attaching a link to the icon, you need to increase the size, which makes keeping the content inventory sidebar compact a challenge and could mess with the sizing of individual search results. Also, I didn’t know about the redesign to fit an online content viewer in the component show page - which is awesome! That was something on our development TODO list if we could get it to work. Could you talk more about how this new online content viewer works? We have a lot of our online content on a IIIF supported host, but there are other legacy links that may not be compatible with this (image/PDF links existing on old servers, for example).

I think you’ve nailed it on the head - we’re trying to reduce the number of clicks it takes for a user to see the online content. Whether that’s with a button or embedded viewer, it simplifies the experience. Though we did like how the button was explicit and simple - being big and, hopefully, obvious to novice users that they can see the content online - it’s difficult to tack it on considering the whole new design.

ggeisler commented 2 years ago

@crugas I'm not a developer so probably not the best one to answer your question about how to integrate the online viewer into the component show page. But you could look at the code where we're doing what I showed in the screenshot above: https://github.com/sul-dlss/nta-arclight and maybe that will help (the site isn't public yet, though).

If you have further questions you could ask the developers via the arclight channel on the code4lib Slack (not sure if you follow that, but if not seems like you might want to check it out).

ggeisler commented 2 years ago

Closing this since I believe all of the requirements of this ticket are completed.

projectblacklight / arclight