https://open-images-browser.vercel.app
The MediaScape project investigates how innovative interfaces can provide generous access to audiovisual collections in order to make connections between the interests of individuals and heritage objects. Or:
How to find happiness in AV collections without searching for it?
Most collection interfaces employ a query-based interface model, usually in the form of search bar. This paradigm generally works great when a user:
- knows what sorts of things are present in the collection
- has a clear idea of what they are looking for
- can express that idea as a textual keyword query
If one or more of these requirements doesn't hold, the search bar's convenience quickly breaks down. An alternative is to be more forthcoming about what can be found in a collection and offering readily available paths to access different parts of it. This idea of 'generous interfaces' was first formulated by Mitchell Whitelaw in 2012 and since applied and expanded in various directions in the Digital Cultural Heritage field.
As part of our investigation in the MediaScape project, we are developing a series of generous user interface (UI) concepts for audiovisual collections.
The Open Images Browser provides access to the Open Images collection, some 3.5 thousand videos with an open Creative Commons license. Instead of the usual search bar, this interface generously displays how these images are distributed across time, location and subject matter. This shows at a glance the scale and diversity of the collection and allows the user to step-by-step zoom in on interesting parts and easily watch them as a playlist.
The interface employs data visualisation and commonly used web elements to uphold the following principles (as formulated by Ben Ennis Butler):
- Show first, don’t ask; not requiring the user to provide a query in order see content
- Provide rich overviews; showing how items are distributed over time per decade
- Provide Samples; using thumbnails to give an a visual feel for a video's content
- Provide Context; showing common location and subject filters as well as distribution over time, expanding items in the context of the full filtered set
- Share high quality primary content; embed the orginal video and link to the original record.
install dependencies
npm install
serve development version
npm run serve
build production version to /dist directory
npm run build
to test the build locally, serve /dist, e.g. using serve
serve -s dist
serve Storybook environment
npm run serve-storybook
build Storybook as static site to /docs directory (auto deployed via GitHub Pages on push to master)
npm run build-storybook
the project is deployed via Vercel's git integration. A push to master triggers a production deploy. A push to any other branch triggers a deployment preview on a unique URL.
To load Open Beelden data via the NISV Search API, contact us to acquire secret API credentials and fill them into an .env.local file (see .env.local.example).
The src/assets/data/ directory contains sample data from the public Open Beelden collection, acquired from the ElasticSearch API via the (internal) labs notebooks:
openbeelden-item.json: example item pretty printed for manual inspectionopenbeelden-items-1k.json: sample data set of 1000 items (containing all meta data fields)openbeelden-sample-date-hasFormat-spatial-subject.json: 3 pretty printed example items, containing the fieldsdcterms:hasFormat,dcterms:date,dcterms:spatial,dcterms:subject
Full data sets of 3489 items, filtered to contain specific meta data fields (in addition to @id and dcterms:title):
openbeelden-items-date.json: containing the fielddcterms:dateopenbeelden-items-hasFormat.json: containing the fielddcterms:hasFormatopenbeelden-items-spatial.json: containing the fielddcterms:spatialopenbeelden-items-subject.json: containing the fielddcterms:subjectopenbeelden-items-date-hasFormat-spatial-subject.json: containing the fieldsdcterms:hasFormat,dcterms:date,dcterms:spatial,dcterms:subject