Non-linear mixed-media canvas interaction

[sammeltassen]

Elaboration of improved exhibition UX described in:

• Stand-alone exhibition viewer, presenter mode and other exhibition improvements #15

Issues

When currently opening an exhibition modal:

• On mobile, the text seems to have priority over the image (long blocks of text will hide the image canvas).
• On desktop, the text is stretched out at the bottom, which is less readable.
• The "start tour" button is sometimes hidden on mobile or stuck away at the bottom right corner on desktop.
• On mobile, the tour doesn't zoom to the correct coordinates.
• There's no overview of the tour, or ability to access the tour directly from the canvas.

Possible solutions

1. Turn the tour into a scroll, like the (now defunct) Ocean Liners example or the Reuzenarbeid app. This will require an extra button to exit the tour and freely navigate the canvas. On desktop, the text will scroll by on the left side of the canvas, while on mobile, it would scroll over the image. This keeps the lineair tour, while solving much of the other issues.
2. Automatically change the text when zooming to (or tapping) annotations. This is similar to the Mansholt app. When zooming to a location (in red) on the map, the text scrolls to the right position (the opposite also works: scrolling the text pans and zooms the map). This makes the tour less lineair but it might be less intuitive to operate. On mobile, there's not enough space to show both canvas and text.
3. Using 1 on mobile and 2 on desktop.
4. Keep the current interaction (tour steps and buttons) but allowing users to enter the tour by clicking annotations on the canvas, while improving the design.

[sammeltassen]

New proposal

On desktop, two blocks are overlaid on the right side of the canvas. One contains the canvas label and summary (which can be scrolled if longer than the block). The second block contains the list of describing annotations, with the annotation body and links to object pages if available. When the annotations are hovered, they turn white together with their targets on the canvas (this could also work the other way around, but that might be disturbing for the experience exploring the canvas). When they are clicked, the canvas zooms to the annotation. When zooming into the canvas, the list is filtered for only those annotations currently in view.

This could also be combined in a sidebar (on the right) rather than overlays. In a side bar, the READ MORE + approach of the sharing panels can be reused to abbreviate the summary.

[stephenwf]

Looks great @sammeltassen I think it would be good to still include the forward and back (or maybe up and down) controls too.

For mobile, could a 50/50 vertical split work? So the top half is the image, the bottom half is the label/summary and the list of visible annotations to click through. There could be a button to "expand" the viewer to explore too.

[sammeltassen]

For mobile I think it's maybe better to use a fully collapsible panel. It could only depict the title. When unfolded, it covers the complete canvas with the contents of the sidebar. If you tap an annotation, the overlay disappears and the canvas zooms there. Could be possible to indicate the target as well: temporarily, fading out, or with a border.

Not sure about the back and forth (or up and down) since zooming now determines the filtering of the annotations (so zooming to a single annotation would make the rest disappear). Instead, maybe we should add a button to show all annotations / zoom extents when the canvas is zoomed?

[Heather0K]

For mobile, we should consider some users might turn their phone when looking at a full sized image instinctively and make sure the designs can work with that.

I do like the collapsible panel but agree with keeping 'next' 'previous' buttons for mobile usability.

[stephenwf]

Yeah @Heather0K I agree the buttons are important - especially if in the "slideshow" mode that will be the primary way of going to the next and previous canvases, in addition to the annotations.