Getty's Research Collections Viewer

To better understand where users were struggling while using RCV, we conducted two remote contextual inquiries with researchers who were using RCV for some of their work. By watching users interact with the application based on their individual work styles and project needs, we were able to see directly how specific use cases weren’t being adequately addressed.

We coalesced our key takeaways into 3 main problem statements:

The design mirrored that of an existing component and was relatively straightforward to create for desktop, but adapting for mobile posed a formidable challenge. The design needed to accommodate hierarchies that went as much as twelve deep, as well as collections that had especially long titles. While there was ample space for this amount of text on desktop, the limited screen size of mobile meant that we needed to rethink how this could be displayed.

We experimented with different ways to reduce the visible text on mobile, from truncation with an ellipsis to a text fade out to a swiper assistant with scroll functionality. We decided to keep the text to one line and truncate it from the left, always anchoring to the deepest or current level. A blue chevron on the far right allows users to click to view the full hierarchy in a dropdown, or they can scroll horizontally to view the text without expanding.

For both desktop and mobile we knew that creating a prototype would be essential to test whether this concept was at all useful to researchers while navigating the page. We created prototypes that mimicked the functionality as closely as possible and ran a series of remote usability tests with 9 usertesting.com participants and 6 Getty researchers.

The results of our testing confirmed the following:

After making a few changes to the design based on the feedback we received – as well as making the breadcrumbs jump links – we sent to development to implement and planned to test the efficacy of the mobile design post-launch.

Traditional finding aids include a container list of the collection materials alongside a box and sometimes folder number (i.e., where the physical materials are located within the archive). This location information had been removed in the first iteration of RCV and many researchers noted that this omission made their job more difficult. We therefore had to find a way to reincorporate this information into the new design, which, due to a more visual and increasingly indented display, meant that we were working with limited screen real estate.

A round of preference testing followed by a usability test with usertesting.com participants as well as Getty researchers showed us that none of the early design options were adequately meeting user needs. Getty researchers in particular didn’t like the placement of the box and folder information (either next to or below the title of the item), so we created another design that more closely mirrored the placement in a traditional finding aid (in its own column).

A final round of usability testing confirmed that researchers preferred the version with the box and folder information in its own column as it made it easier to scan and matched their mental model of how a finding aid is typically structured.

The addition of the horizontal grey line helped users keep their place when scanning across the page – an issue that had been brought up with the pre-RCV viewer  – and related graphically to the vertical blue lines that were being used to to mark the item levels on the far left. Lastly, we adapted the design for mobile and tablet to ensure that the additional column would fit appropriately on all breakpoints.

Another user need that was revealed during the contextual inquiries was a way to know where in a collection one can view digital materials. The original RCV design indicated this with text and a number, but we found that in testing this was difficult to scan and the number indicated wasn’t relevant.

We decided to replace the text with an icon that would immediately indicate to users where they could view digital materials, as well as create an additional icon that denoted the higher-level items that contained digital materials (but were only viewable at a deeper level).

After multiple iterations on the icon our team landed on a design that we felt most clearly indicated the relationship between the two different categories (contains digital materials versus viewable digital materials). We also added a tooltip based on an existing component to help users understand the meaning of an icon they’ve likely never seen before.

Due to timing constraints we decided to validate our assumptions post-launch, at which point we will conduct testing to ensure the icon is helpful and understandable to users.

Participant selection for testing is crucial
The importance of having relevant participants for usability tests cannot be understated. Unless participants represent potential or actual users, their feedback is essentially invalid and the testing is wasted.

We experienced this after doing multiple rounds of testing on usertesting.com, where we quickly realized that even though we set up very specific screeners, we weren’t getting relevant participants. With more niche user groups, it’s worthwhile to create a group you can trust and depend on, and offer an incentive to if necessary – something we are in the process of doing for this and future projects.

Prototyping has its limits
For more complex interactions, rudimentary prototyping only goes so far to convey what the experience is like. With the sticky breadcrumb design, for instance, the prototyping experience and scrolling interactions for mobile in particular just couldn’t be replicated effectively on a desktop.

In these cases, what made the most sense was to get enough feedback from the basic prototype to support the design and then have development implement the design while making a note to do more robust testing post-launch.