Skip to content

Gallery view: show all images in the collection

Context

This issue encompasses 2 areas:

  • Markdown tables
  • Design management

As a user who is viewing a design, I want to be able to see other designs in the collection, so I can quickly jump between designs without having to paginate through all of them.

As a user who is viewing multiple images pasted into a markdown table, I want to be able to easily switch between images so that I can see the difference between them.

Problem to solve 1: markdown tables

It's common to post markdown tables like this:

Screen_Shot_2022-10-04_at_15.40.51

However, when I want to view a close up of the image, it opens in a tab and I lose the title of the column:

Screen_Recording_2022-10-04_at_15.40.21

Problem to solve 2: design management

In design management, the only way to view the designs is to page through them in order. It's not possible to get an overview of all designs:

Screen_Shot_2022-10-04_at_15.43.51

Proposal

Figma prototype: https://www.figma.com/proto/SUlJ1nPN2xNVWiUwAc6eib/Beautifying-the-UI-15.5?page-id=131%3A47039&node-id=203%3A60155&viewport=290%2C-10858%2C0.43&scaling=min-zoom&starting-point-node-id=203%3A60523&hotspot-hints=0

Testing

round 1: https://app.usertesting.com/workspaces/509645/study/4277949/sessions?shared_via=link

  • some people did not find the gallery toggle
  • confusion about the tasks as the images were of UI and users were giving feedback on the pictures rather than the interaction 😂

round 2: https://app.usertesting.com/workspaces/509645/study/4284738/sessions?shared_via=link

  • much higher success rate
Edited by Katie Macoy