UV IIIF transcription search UX

Initiated May 2024. Updated October 2024

British Library, Riksarkivet (Swedish National Archives)

Contact digitalresearch@bl.uk

Overall goals - transcription search UX

Implement 'search within' that presents the search keyword with snippets of transcribed text (keyword in context); from the search results a user can navigate to view the image with that keyword

We need to…

• Define success overall, at different stages (deployment, updates)
• Map sprints to hard dates for each group
• Design a UX with easily understood search results indications
• Could we turn the sparkline view off as a config option? Or ditch altogether?
• Ensure it doesn't clash with any functions developed for the Player
• Avoid clashing with mental models created by Mirador, etc
• Meets accessibility requirements (WCAG AA) and considers mobile UX user stories
• Agree / document UX guidelines about grouping and placing like functions (e.g. navigation within an item, page viewing options, displaying metadata, transcripts)
• Update 'search within' to use the current IIIF Search API

What decisions do we need to make to support September launch for Riksarkivet?

Define MVPs for each stage / group; confirm timelines and definitions of success

Tidy up inconsistencies and quirks in how the UV spatially organises and labels features/functions

Work out MVP for mobile UX and touch screens

Convene group to think through UX layout; search results

Riksarkivet also interested in providing download options including full text transcriptions

Look at mobile usage stats; attempt to understand key user needs

​

NB: content search API and test files live by June 13

Sample implementations of search

UV4

Location of search results indicated by 'teardrop' icon on 'timeline' of pages in the item

​

Number of results per page available on mouseover (touchscreens?)

​

Keyword highlighted on the page

​

'Navigate within' functions on LHS column, search results on the bottom, 'go to page' at the top

​

Location of results not highlighted in thumbnails or index

Swiss Federal Archives

Search icon on LHS bar along with 'About this item' information. Hamburger icon toggles the 'sidebar'

​

Search results display in same location as meta information

​

RHS doesn't change during search - no highlight in transcription or thumbnails

​

'Eye' icon toggles transcriptions

​

'View' has option to toggle thumbnails

Archival IIIF Viewer based on Mirador.

Harvard

Search in pop-up box

​

A sort of keyword in context (the surrounding line is included)

​

Clicking on the line takes you straight to the page

​

Not given an indication on contents down left side where keywords are located

​

Mirador

Cambridge University Library transcription

All navigation is on the RHS except for page controls at the top

​

Transcription display (but not search?)

​

Hamburger menu is very subtle and probably easily missed when closed (but it opens with it open, so hopefully users remember that more is available)

​

Image controls bottom LHS, image label on RHS

​

Custom cudl-viewer, Java?

John Hopkins

Digital Library of Medieval Manuscripts

Narrow panel on RHS with 2 options, annotations & search

​

No option to close or widen panel

​

Thumbnails across bottom

​

​

John Hopkins

Digital Library of Medieval Manuscripts

​

Basic search or advanced search

​

Results listed in sentence with searched word highlighted

​

Option to combine terms in advanced

Clover IIIF - scroll interface, JS search

Emily Lynema on IIIF Slack:

'Clover also has a new component called Scroll (in beta) that provides a JS client-side search within of annotations': https://samvera-labs.github.io/clover-iiif/docs/scroll

​

* Keyword in context results; clicking on a result takes you to the location in the transcript

​

Also: Clover is working on a PR to pull IIIF content search into their Viewer Component (https://github.com/samvera-labs/clover-iiif/pull/172)

​

Ramp AV player

Emily Lynema on IIIF Slack - Ramp just merged a community PR to add ‘search within’ to the Transcript component. This is currently a JS client-side search, but we’re working to hook it up to IIIF content search right now. https://ramp.avalonmediasystem.org/

​

Shows keyword in context. Player jumps to the timecode when a result is clicked

Annocoda

John Moore on IIIF Slack - Here is a proof of concept to search annotations across collections/manifests

​

Screenshot - annotations on link: Mentions of Pinner in Rustic walking routes from within the twelve-mile radius of Charing Cross

https://annocoda.onrender.com/?manifest=https://miiify.rocks/manifest/rustic_walking_routes&search=pinner

Wellcome

Thank you Alex Hailey @ BL

​

Has 'full text search, displays links in the left hand pane, highlights words in image, and colours thumbnails when they contain the word.'

Qatar

Thanks Alex Hailey @ BL

​

'I like the QDL UV (UV2)implementation, which highlights searches in image, and displays locations as flags on a location bar. The Wellcome viewer used to display like this.'

​

Mia notes: it also adds a subtle magnifying glass symbol and number (of matches) to the thumbnail view. Also offers RtL mode in Arabic

Please duplicate this slide and add other examples!

Add notes here!

Additional UV / IIIF viewer UX layouts

UV 3 version

​

More compact layout - navigation-within, settings, download, print full screen all in top bar

​

Also has image contrast, brightness control from on-image icon, 'show entire page' icon

​

Spells out 'IIIF manifest' link in Information panel

Getty Digital Florentine Codex

Thanks to David Newbury on Mastodon

Universal Player

British Library Universal Player (the UV displaying time-based media)

UV functions / icons

Viewing options - what's on your screen

Navigate within item

Zoom thumbnail size

Image manipulation

UV verbs, design principles

Goal: settle on one verb for each function e.g. open, expand, toggle, etc

​

Which functions are toggles (e.g. click once to open, again to close), which have separate open and close icons?

Previous work

Universal Viewer Text and Search - Google Slides - 2018

• Stanford’s design proposals for the Universal Viewer in general
• Universal Viewer design principles (topic for discussion?)
• Stanford’s proposals for Search in particular

Transcription display and search at the SwNA

Very much inspired by Mirador and trying to stick to the Keep It Simple Stupid-principle. Intentionally very lo-fi also to indicate it’s not set in stone. Including it here to give you all sense of the Swedish team’s current “working hypothesis”.

David’s sketches of a UV4 with in-text search functionality

May 2024

Work in progress at SwNA, as of May 30

Work in progress at SwNA, as of June 26

SwNA release version 1.0

Code: https://github.com/Riksarkivet/universalviewer4

SwNA release version 1.0