UniversalViewer
Improve visibility of config tool on examples page
@erinburnand I'd be happy to sketch something, if that'd be helpful (having raised the issue it's the least I can do!)
That would be great if you have time @mialondon ?
Perhaps on a call with you and @Saira-A ? 45 mins or so should do it
Sounds good to me! When works for you @mialondon & @Saira-A ? I'm pretty free over the next few days
Suggested text for config builder: "Use the dropdown menus to customise the Universal Viewer. Your selections will automatically populate the custom configuration box below"
For custom config box: "Enter your configuration here to see a preview of how the Universal Viewer will look and behave"
Or these sentences could be combined as a header?
From Ed: YouTube tab: to demonstrate the YouTube Content Handler. IIIF is just one type of content the UV can load via the Content Handler system. You can get rid of it if you like, although I envisioned it also having other content handlers in future like a dedicated ebooks one for example that bypasses the need to hack the IIIF spec by painting ebook urls onto canvases
Target, mute, annotations - all crucial for Exhibit. Could we have a specific Exhibit tab perhaps?
I'm curious about the best approach for presenting the text. If we just put paragraphs inline, it may look a little crowded; might something like a help button that toggles an area or drops a tooltip be more appropriate? (Obviously, we'd need to be sure to do this in an accessible way if we did it... and I'm certainly open to starting with paragraphs and improving incrementally).
Possible revisions to @erinburnand's suggested text:
Config builder: "Use the dropdown menus to customise the Universal Viewer. Your selections will automatically populate the custom configuration box above. You will have to click the Apply Configurations button when you are ready to put your changes into effect."
(Note the change from below to above -- unless we're planning to rearrange things, the config box is currently above the builder controls).
Custom config box: "Enter your configuration here (in JSON format) to see a preview of how the Universal Viewer will look and behave. Since UV uses browser storage to remember some settings, you may need to check the 'Clear saved state' checkbox to ensure that your changes are immediately visible."
We could also potentially have an overall configuration header with text along the lines of:
The Universal Viewer can be configured using a JSON file. The controls below allow you to easily test changes to your configuration, or to generate a new configuration file by browsing the available settings.
Open to suggestions on how we can best present the text. We've got a figma prototype on the go, so we could perhaps have a play around with options (hopefully you can view?):
https://www.figma.com/design/pNvxuMLIIIJNvkddVuWcqO/UV-Config-Builder-Demo?node-id=0-1&t=qKVjkH8HeHjTXUw3-1
If you can access, you will see we were thinking of rearranging the config box and builder - see what you think
Also, thanks for your suggestions on the text @demiankatz , much better!
Thanks, @erinburnand, I can see the Figma prototype. I think we may need to design this with stacked tabs, though -- right now, switching the tab between IIIF and YouTube changes the viewer. As Ed says, we may need to add more tabs here in future if we introduce additional content handlers. I don't think making Config parallel with these tabs makes sense.
I do imagine that it would be useful to have a config control that was independent of the content handler selection, since we presumably will want to be able to configure every handler. But right now, we're primarily starting with a focus on IIIF, so I'd split up the existing IIIF tab into sub-tabs: maybe "General," "AV," "Annotations," and "Configuration." This will make the screen less cluttered and give us opportunities to add documentation and notes to the other features as well. If we need to introduce a "Configuration" tab to other handlers in the future, I'm sure we can figure out a way to make the code reusable and wire it into multiple places.
What do you think?
Just for context - we didn't know the YouTube thing would still be needed, so we thought re-using that tab would be straightforward.
We'd talked about having the config builder on a separate page, if that didn't introduce too much complexity by requiring site nav etc.
The suggested wording sounds good, and this updated page would be a great candidate for developing 'guerilla usability testing' skills across the project. The feedback we'd get from usability testing could help inform decisions about layout as well as text.
Thanks @demiankatz, I think that makes sense, and like @mialondon says, its a good starting point from which to get feedback, which is what we wanted :)
Agreed, I think it's safe to close this, though happy to have a new issue opened in future if there are further improvements to discuss.