Highlight item and data providers on item details page

This is somewhat related to #1345 but a decision about whether we want to do something like I describe below is independent from that issue. I'm describing the possibility here because I believe @mwerla and I discussed this in general terms at a meeting after @jacobthill had to leave but I'm not sure we concluded whether we should definitely do it or just explore the idea. So everything below is for discussion purposes.

The potential enhancement is to more directly highlight the item's holding institution and data provider on the item details page. This would give more prominence to those institutions and perhaps help the user better form a mental model of how DLME items are composed of both the item and the item's metadata, components which might or might not be provided by the same institution.

Visual design could be refined if we decide to pursue this option, but the basic idea is to extract the Item contributor and Data contributor (Holding institution and Data provider after #1345 is complete) fields from the list of item metadata and display them in a more privileged or highlighted way. Below are examples for the two styles of item details page (with or without the Mirador viewer):

Some details to be considered:

Is there a technical constraint that would prevent us from pulling these two metadata fields and values from the list of returned item metadata and displaying them outside the <dl class="document-metadata dl-invert row"> element the currently holds all metadata elements?
Although for illustration purposes my mockups above assume different holding and data providing institutions, for most items these are the same institution. I think exposing the redundancy is valuable in helping to reinforce the idea that the holding and data providing institution are independent things, so I'm not particularly bothered by this, but want to note that we would often see the same institution listed twice.
By highlighting the institutions in this way, it feels more expected to me that the institution values are linked. Arguably, it might even create the expectation that they are linked to the institution's website itself, which we probably don't want to do (that would be inconsistent with what the breadcrumb link in the first mockup does, for example). Linking to the given value in the Holding institution and Data provider facets, however, would make sense and be useful (i.e. returning a faceted search result).

@ggeisler Thanks for reminding about this! I prepared two rough sketches that show an idea for re-positioning the new box that you designed (which I like in general).

https://preview.uxpin.com/34a79eb94efd4db36e552f38196100245000b376#/pages/146128765

There are two mockups there - one for IIIF view, the other for items without IIIF. In both cases the assumption is that the new box is located on the left side, while metadata stays on the right. I think it looks quite good for IIIF, but the example I chose for item without IIIF gives not that nice result. Maybe you will have idea how to improve it.

I also propose to add the already existing "View on contributor website" to the same box, as it's connected in my opinion.

@mwerla I like your idea of combining the "View on contributor website" link with the provider highlight box since, as you say, they are very much related. One possible drawback is it makes the box larger and therefore feel more prominent on the page than it deserves to be? Especially if we make the contributor site link a button (because that's visually stronger). I'm also a little unsure if the styling of the link should be as a button because this is the only instance on the site where we have a button (from a user perspective, even if it is technically coded as a link) that rather than performing an action within the site takes the user away from the site. But the button does look nice and feels appropriate for the box so maybe that's all okay.

I'm a little more concerned about placing the highlight box in another location on the page. While I do think your mockup example case looks good, I'm worried that there are likely many cases where this location won't work so smoothly. For example:

As you note, there isn't an equivalent location for the non-IIIF item detail page. Putting it below the image on that type of page would make it too secondary, as would putting it below the list of metadata fields. The placement in my mockup -- above the metadata -- is really the best place for it on this type of page, I think.
On the IIIF-item detail page type, the side placement will only work for wider breakpoints. At below lg (991px and narrower), there isn't enough space next to the metadata for it, so it will have to go above, similar to my original mockup.
Even at lg, I'm not sure we should use the side placement. It appears okay with your example, but 1) I think the font size there is a bit too small, and 2) many of our item or data providers have longer names than Bodleian Libraries (some quite a bit longer). If we increase the font size just a bit for better readability, and consider cases where the institution name is Ancient Near Eastern Art, Metropolitan Museum of Art, New York, NY or even British Library. India Office Records and Private Papers, we're going to have a lot of text wrapping in a lot of cases, which I think will detract from the visual appeal of the highlight box. Part of the rationale for my original approach was it was a way to give us maximum possible width for the box to handle cases with longer provider names.
So I'm only confident the side layout of the highlight box will work on xl and the future xxl (https://github.com/sul-dlss/dlme/issues/1109) breakpoints. Everywhere else we'll probably have to fallback to the above-the-metadata location, similar to my original mockup, because of available width constraints.

Given all of the above, I wonder if it is worth the technical work required to make the side location work, if it is only going to be seen by the subset of users looking at IIIF item detail pages on browsers at 1200px and above? If we stick to the top-of-metadata location we can just implement one solution that works on all breakpoints, which is likely much more straightforward.

For discussion purposes, here are my previous mockups updated with your idea for the including the contributor website link as a button. (I also updated the item provider institution to a longer one, to illustrate how the top-of-metadata location can support longer institution names):

Hi @ggeisler! I appreciate your attention to all consequences of a particular design. I get your points, and I agree that the location above the metadata makes the most sense from a practical point of view, and implementing extra location just for a small slice of users is too much.

This placement and also using the button makes the box very prominent and really promotes going to the provider's website, even before the user reads the metadata on our website. I think that at this stage of DLME development, it may be even beneficial for us, for two reasons: 1) It should be clear to all current and potential data providers, that we promote their collections on their websites. I've noticed that for some QNL colleagues less experienced in such projects, it was not obvious that the content is not really hosted on DLME. 2) In case of any metadata quality issues, it's clear that the data is provided by ..... and users can refer to the source if they find some of the data invalid or confusing.

Therefore, I think the last two mockups presented above could be the basis for the final design and implementation.

Thanks for the feedback @mwerla. I was worried that we would be making the provider box too prominent but you make excellent points about how this is actually a good thing, and I agree.

Because this ticket is so long I created a new ticket with just the final design suggestions: #1386, and will close this one.

sul-dlss / dlme

Highlight item and data providers on item details page #1380