improve experience visibility & navigation

[thatbudakguy]

this issue (hopefully) captures the changes to interaction buttons and experience navigation coming out of the most recent curator meeting, as articulated by @ggeisler at standup on 11/22.

See the clickable prototype to see the proposed changes in context.

• [x] three new index pages are created for each wallscreen, each of which aggregates all the experiences of one type (slideshows, guided tours, oral histories). See #244 for screenshots and some notes.
• [x] these pages serve as the new "attractor" pages, and use the existing animations we have configured for each experience type. for slideshows and oral histories, this page combines or mixes the attract mode thumbnails from all the experiences of that type. for guided tours, it probably just picks one of the available images. See #245 for some notes.
• [x] the card area on these index pages lists each of the experiences of the currently selected type, with a large animated button to begin the experience similar to the ones on the initial slide of the experience. No visual transition effect is needed when moving from the experience type index page to a chosen experience instance.
• [x] the links in the interaction area now go to the three index pages (slideshows, guided tours, oral histories) instead of individual experiences.
• [x] the "start over" button now goes to the index page of the same type as the experience one is currently viewing (e.g. hitting "start over" on Bay Area Video Arcades would go to the slideshows index page).
• [x] the "attract mode" that takes effect when the wallscreen is left unattended after running all the way through an experience now cycles in between the index pages, rather than in between the initial slides of all experiences. #264
• [ ] the experience initial slides that display attractors can possibly be reconfigured to do less "attracting" since the index pages now serve this function. we could display all the images at a higher opacity, for example. #294

[thatbudakguy]

current work remaining on this is the optional final checklist item: do we want to make initial slides of experiences less "attractive" (i.e. don't do the grid animation, or do some other kind of presentation) since the experience index pages now have attractors?

[ggeisler]

I personally feel that we can stick with using the same experience attractors since they also serve as decent "previews" for that experience and I'm not sure it's worth expending the design and development effort at this stage to figure out something new for the experience instance context.

(I would sort of like to use new terminology for these, to clearly distinguish them from the three experience type attractors -- "experience home previews" or "experience instance previews" or something.)

However, since the experience instance attractors are now serving more as previews of the experience the visitor is presumably currently reading the intro card for, I don't think we need to keep the images as dimmed as I suggested for the experience type attractors. My concern there is that the experience type attractors could be playing in attract mode for long periods of time (when no one is at the wallscreen) and showing the images at full visibility might be (not sure how to express this exactly...) too aggressive or distracting to people who are walking by and already know about the wallscreen but don't care, etc.

But when the visitor is looking at one of the experience instance attractors/previews, we know they've explicitly chosen that experience and we're not really trying to provide an ambient attractor. We're just showing a preview of the experience they've selected. So it feels more appropriate to make the preview images more visible and less ambient. Below are my suggestions for how we'd customize the relevant grid.scss and pan.scss values for the experience instance previews from the existing experience type attractors.

(Just to make sure I'm being clear: I think the existing grid.scss and pan.scss values are mostly fine for the experience instance previews, but we want to figure out how to override a few values just for the experience instance previews, while leaving the experience type attractors alone.)

Slideshows and Oral Histories

For the grid attractor we currently adjust from opacity of 0.1 to 0.5. For the experience instance preview version of the grid attractor, I suggest we keep everything the same except change the starting/minimum opacity to 0.3:

https://github.com/sul-dlss/wallscreens/blob/a324ddc09acbe61683c1c6c6d8d82dd5d1f1db99/_scss/wallscreens/attractors/_grid.scss#L13

and the minimum and maximum opacity values to 0.3 and 0.8 in this section: https://github.com/sul-dlss/wallscreens/blob/a324ddc09acbe61683c1c6c6d8d82dd5d1f1db99/_scss/wallscreens/attractors/_grid.scss#L63)

Guided Tour

Just give the image full opacity when it's used as the experience instance preview. So just making this line 1 (while leaving the current value when it's used as the experience type attractor):

https://github.com/sul-dlss/wallscreens/blob/a324ddc09acbe61683c1c6c6d8d82dd5d1f1db99/_scss/wallscreens/attractors/_pan.scss#L9

[camillevilla]

(unassigned Nick and moved to ready so that someone can pick up the last task on this tomorrow morning)