Honoring the ensemble by design.

Shelley Bernstein
Oct 24, 2017 · 4 min read

Now that you can explore our soft launch, it’s a good time to talk about the design choices that were made. We’ve written at length about using computer vision to honor the ideas of an ensemble and translate that intention, so unique to the Barnes, in digital space. Much of the design speaks to this as well.

Just like our recent website redesign, the design of our collection online is by AREA 17 and they, once again, proved to be great partners for us.

Surrounded by images with information only available upon hover honors our physical installation where there are no labels or identifiers.

One of the biggest ideas A17 put forward was to embrace aspects of our physical presentation in the online presentation. If you come to the Barnes, you are surrounded by images in a very immersive way and our collection online does the same — the physical experience is not replicated, but you’ll see A17 referencing the same ideas.

For example, you’ll notice that you’re presented with a wall of images on the collection homepage, visual search, or keyword search. Titles of works are only presented upon hover, so your initial view is similar to what you would experience in our galleries where there are no labels and works are presented in close proximity to each other.

Similar to the vision of our founder, our collection online is meant to prioritize visual relationships between objects. In order to do that with clarity, we needed to think about a multi-layered design that would let us do “one thing well” while keeping multiple audiences — casual browsers and researchers/scholars — top of mind.

As such, the casual browser is most likely the one that will play with the formal elements — sorting by light, line, color, space — and use various toggles and filters provided to dive deeper. The researcher/scholar is a more driven audience who needs to search (not browse) and find detailed information, etc. These two audiences play out in various treatments across the site.

So for starters, there are a lot of ways to browse, but there’s a also a search. However, no matter if you land at an object record by browsing or searching, you’ll see each object record has essentially three idea forks — visually related, ensemble view, details — each one dives into specific pieces of the story.

Three tabs on each object allow us to separate concerns and provide three distinct views on the same work of art.

The “visually related” tab is the one intended for casual consumption and it’s where the browsers can explore all the objects that are visually related to the primary object. You’ll notice this is put forward first, very specifically, because visual browsing was our key goal. I’ve written about a few design choices as related to visual search — the “more similar/more surprising” slider is a good example, so I won’t rehash those things here.

The “details” tab is the researcher/scholar landing area. It’s where you find all the metadata, image zooming (only available on works which are not under copyright), download and/or image requests (also copyright dependent). For the first time, we started adding contextual information to objects — here’s one that has a full set of information, so it provides a good example to look at. We can now publish short descriptions, long descriptions, and visual descriptions for those who are blind or sight impaired. We are also publishing an object’s publication history (online now), provenance, and exhibition history, both of which will be coming online in the next several weeks. Over time, these resources will continue to grow helping make information and scholarship readily available moving forward.

The “ensemble” tab is a place where there’s a lot of audience overlap. This view shows you how the object fits into its related surroundings. This is an important element for us because Albert Barnes arranged his collection in “ensembles,” distinctive wall compositions organized according to formal principles of light, color, line, and space, rather than by chronology, nationality, style, or genre. Scholars need to see this especially, but this aspect is so unique to the Barnes that it’s also important to make this connection for the more casual users as well. The “visually related” view shows this same principal in a modern tech-enabled way by using computer vision and machine learning to make those connections, but we always want to relate that back to what Barnes did in the physical location; both tabs help illuminate each other by sitting a single click away.

I think our biggest questions revolve around understanding if those tabs are discoverable, so we’ve got some specific tracking taking place on those clicks. We’re also watching user paths very carefully — are we serving these two audiences clearly? Are they each getting out of the collection what they need? This represents the long tail of user testing and analytic tracking to help guide us. It will be a while before we have enough data, so you may not see changes to this part for a long while, but these things are top of mind.

The Barnes Foundation collection online project is funded by the Knight Foundation and our code is open source. Follow the Barnes Foundation on Medium.

Barnes Foundation

Visitor experience, digital content, and strategy from…

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store