Update layout of "Dig Deeper" section of final cards

[ggeisler]

As briefly discussed in Slack yesterday, we have a minor spacing issue on the final cards. When the Dig Deeper section includes a QR code item that an item with a description that wraps to three lines, the "Explore other" section is pushed too far down the card:

A couple of potential options:

• We could reduce the vertical spacing between QR items. This is the easy solution, but we don't want to reduce the spacing too much, because @camillevilla's testing showed it can be tricky to capture the desired QR code when they're too close together.

• We could try a different a layout for the QR items. A very quick, rough example from Camille that might be worth someone working on a bit more to see if it has potential:

This idea is a 2x2 layout, which might enable us to position the QR code items a bit closer together? Some goals for this layout that might not be explicit in the example:

• The widths of the two columns should be equal, regardless of how much text they have (I think this is important from a visual consistency point of view)
• The example above doesn't include the required red "Digital exhibit", "Online catalog" label. Maybe this will fit to the right of the QR code, rather than below it?
• We have at least one instance of a final card so far that has two items with descriptions that currently wrap to three lines (Labor, shown in top image above), so we should use text from that instance to make sure we're considering the worst case.

Given these constraints this second option might not work, but it seems worth a bit of time for someone to give it a shot. Otherwise I think we might have to go with option 1 and reduce the vertical spacing between QR codes a bit.

[thatbudakguy]

Here's a couple tests of @ggeisler's second idea, for reference. Two text things helped make this layout work: the subtitle for the labor slideshow got shorter, and I also removed the redundant text like "Catalog Record: " text from the links, since they're already shown in red.

And here's a version that just alters the existing layout's margins a little.

[ggeisler]

@thatbudakguy Thanks for exploring these options.

I can't quite tell based on the screenshots - in the 2x2 Bacon example (top one), does that layout (which has the three-line description example) push down the "Explore other" section? It looks like it when compared to the other examples, but I'm not sure if that's just because of where you cut-off the screenshot at the bottom.

[thatbudakguy]

oops, sorry about that — here's a zoomed-out comparison of the two layouts. as far as I can tell, neither pushes down the "explore other" section.

[ggeisler]

Okay, great. The potential issue with the second approach (original layout, but reducing the vertical spacing between items) is that the QR codes might be too close together for the user to easily capture the on they're after. (That's why we wanted to explore another option.)

So, I'm not sure we can completely compare the two options until we do a physical wallscreen test and see if the original approach with closer QRs (as in the second example) is acceptable from a usability point of view.

But, I guess an initial question might be, what do people think about how the two options look? I can't really decide which I prefer, assuming we can make the original option work with tighter spacing? Maybe we can take a quick poll at standup tomorrow.

[thatbudakguy]

I'll add to standup agenda. I don't have an immediate preference either re: layout.