Image search UI refinements

[jennpb]

What is it?

Our 'images only' search is a way for researchers to get a quick view of an image and see 'related' images to explore

Purpose of the image preview panel is discovery, exposing a breadth of images that might not surface in a word-specific search

At this stage, our hypothesis is that this is a serendipity machine, not an extension of search. For example, we are not trying to replicate a search experience by using the related images to kick off a new search query.

We want to make UI improvements to image search results and search preview, with a mobile focus.

User story

In order to source images for my project As a Content Hunter I want to see all images that meet my interest, regardless of the format of its original.

Design decisions

Non-JS

• No image preview
• No visually similar

JS

• Click full image -> opens work page
• Click 'visually similar' option -> opens work page
• i opens tooltip inside modal
• Constrain preview to viewport

Break down into 2 separate pieces

1. Design and implementation of modal
2. Image alignment on results

Considerations

• Success measures
• URL design
• Event tracking
• Cardigan documentation

[davidpmccormick]

Add tooltip

Does this refer to whatever lives behind this 'i' icon?

[jennpb]

Correct. Does that need its own design or is there browser rendering?

The content of the tooltip is TBD but we should involve @harrisonpim in deciding what that should say. The point of it being that we should tell users how we have determined visual similarity (in the least-techy way possible).

[davidpmccormick]

Cool.

Does that need its own design or is there browser rendering?

It would need to be designed (cc @GarethOrmerod).

[harrisonpim]

As a rough starting point:

We use machine learning to detect which shapes and structural features are present in each of the images in our collection.

[jennpb]

Try this

+ How are these visually similar?

These images have similar shapes and structural features. We use machine learning to detect visual similarity across all images in our collection.

[pollecuttn]

Design review decision:

• [ ] remove + How are these visually similar?
• [ ] move These images have similar... text below the visually similar images