Art Institute of Chicago
Interactive layered image viewer
Chicago, Illinois, USA
A way to simultaneously explore multiple versions of an artwork
User-controlled image and annotation options
A powerful tool for curators and educators
The Art Institute of Chicago, founded in 1879, has a collection of nearly 300,000 works of art in fields ranging from Chinese bronzes to contemporary design and from textiles to installation art.
“The Art Institute of Chicago shares its singular collections with our city and the world. We collect, care for, and interpret works of art across time, cultures, geographies, and identities, centering the vision of artists and makers. We recognize that all art is made in a particular context, demanding continual, dynamic reconsideration in the present. We are a place of gathering; we foster the exchange of ideas and inspire an expansive, inclusive understanding of human creativity.”
Cogapp was commissioned to develop a layered image viewer component for the Institute’s existing website. The aim was for the viewer to be an intuitive tool to consider and interpret works of art in a new level of detail and in various formats.
Now live, the layered image viewer component lives seamlessly within the Institute's existing website and infrastructure. It is embeddable in the Twill CMS pages to be gracefully displayed on the front end, usually as part of a long-form article.
Building a better online world for audiences
The Art Institute of Chicago’s website is a rich resource for both amateur and professional researchers.
In collaboration with the Institute, Cogapp has developed a layered image viewer that can be operated and appreciated by anyone, however the viewer will be particularly useful for scholarly audiences, particularly specialists in art history and conservation.
The innovative viewer provides all the features users have come to expect when viewing art online: deep-zoom functionality, full-screen mode, as well as the ability to effortlessly pan around the high-resolution imagery.
The additional special ingredient afforded to Art Institute of Chicago audiences through the layered viewer is the ability to manipulate two images at the same time. Images are overlaid, one on top of another, allowing users to compare intricate details highlighted by the Institute using the viewer, and maybe even to make discoveries of their own.
Users can select from a variety of image types, such as x-rays and ultra-violet scans, each providing deeper insight into the construction, methods used, and history of an artwork. They can choose which image sits on top, and which is positioned underneath. Using a simple slider control to adjust the top layer's opacity, the image beneath can be gradually revealed allowing for fine-grain control over the balance between the two images. It is analogous to overlaying the blueprints of a building on top of a photo of the final construction, to compare the two.
The OpenSeadragon-powered layered image viewer is as usable and beautiful on mobile as it is on desktop. The viewer isn’t ‘activated’ until a user interacts with it, meaning a user passing by the viewer can skip over it if desired, with no chance of ‘scroll jacking’ (where you get stuck scrolling the image in the viewer, instead of scrolling the page as intended).
It can be placed on any content-editable website page, giving great flexibility for use across all departments and disciplines at the Institute.
Accessibility considerations were at the heart of our development. The viewer is fully navigable by keyboard. As a user selects different image layers, the description text read out by screenreaders updates accordingly to give an accurate reflection of what is presented on screen at any one time.
The visual and user-experience design is in keeping with the rest of the Art Institute of Chicago’s well-established and very popular website. The viewer is seamlessly integrated.
Building a better online world for Art Institute of Chicago
The Art Institute of Chicago wishes to facilitate new perspectives and discourse on works in its collection. Development of the layered image viewer provides one avenue for the Institute to further this aim online.
By enabling the team at the Institute to present alternative views of an artwork in an intuitive, easy-to-use, yet powerful image viewer, the Institute gives web users the tools to compare the various presentations and examine the details they throw light upon. In addition, editors creating an instance of the viewer, often educators and curators, can add annotation layers to the image to highlight points of interest.
By offering these features, the Institute hopes to engage users, particularly those with an interest in the detailed study of objects, with fascinating new insights into often very familiar works. The layered image viewer provides a highly flexible, deep-dive tool, to compare and interrogate many versions of an artwork.
This aim aligns perfectly with the Gallery’s mission, particularly:
“...We collect, care for, and interpret works of art … centering the vision of artists and makers. We recognize that all art is made in a particular context, demanding continual, dynamic reconsideration in the present…”
With the layered image tool, the Institute can illustrate their interpretation of a work, invite detailed interrogation of that interpretation, and encourage users to reconsider aspects of artworks they may have not seen before.
Adding the ability to create instances of the layered image viewer into the content management system (Twill CMS) is as simple as adding any other component. Editors can order the images and annotations as they wish by dragging and dropping items in a list within the CMS editing interface. They can add captions, and copyright information. They can also control the labelling of each layer.
As the format, styling and structure follow precedents set elsewhere in the CMS, there is no steep learning curve for editors who wish to use the layered image viewer; this approach empowers the team at the Institute helping maintain focus on the task at hand rather than worrying about the technology underneath.
Creating an environment where everyone can do their best work
Working on a single, detailed component called for a small, focused team. Colleagues from the Art Institute included representatives from the website and publishing teams, bringing expertise of the current website infrastructure and needs of their digital publications audiences.
We met weekly, with a Sprint Demo every Thursday to keep progress on track and focused. On such a narrow scope, it was a key decision for us to have week-long sprints, rather than the usual two-weekly cycle, because requirements were fine-grain from the outset.
At Cogapp, a core team of two developers worked on implementing the viewer and its controls in the CMS, supported by design and project management.
The layered image viewer was delivered fully tested, with useful documentation and handed over to be absorbed into the day-to-day workflow of the Institute's website management.
Art Institute of Chicago Layered Image Viewer
You can see the layer image viewer in action in this incredible article about how The Hartwell Memorial Window is installed at the Art Institute of Chicago. It features about half way through the article and is used to great effect to describe the intricate structural planning and implementation required to create an appropriate setting for the window.
A New Setting for Tiffany Glass: The Hartwell Memorial Window at the Art Institute of Chicago.
Find out more
We’d love to speak with you about our work, please get in touch.