search

elastic / uptime

This project includes resources and general issue tracking for the Elastic Uptime solution
12 stars 3 forks source link

Large Screenshots - Usability Challenges #291

Closed drewpost closed 3 years ago

drewpost commented 3 years ago

When viewing the large screenshots from the test result screen have a few UX challenges

1 - The "enlarge" icon is in a random position on the screenshot. Further, especially on lighter backgrounds, it's virtually impossible to see

Screenshot 2021-01-29 at 08 03 42

2 - When you've opened the large screenshots, I'd expect to be able to use the keyboard arrows to advance forwards and backwards through the journey but this does not work which means I have to find and click the tiny buttons which takes us to the next challenge

3 - These buttons move around relative to the length of the step title. This makes it impossible to quickly scan through the screenshots as you're constantly having to look for where the arrows are from step to step.

Screenshot 2021-01-29 at 08 01 04 Screenshot 2021-01-29 at 08 00 57
elasticmachine commented 3 years ago

Pinging @elastic/observability-design (design)

drewpost commented 3 years ago

Actions: Get rid of all forward/backward buttons and expand button screenshot from the thumbnail Add keyboard controls (left and right cursor) to move between screenshots on the lightbox (expanded) version of the image Move controls on the lightbox (expanded) image from the bottom, to the left and right of the image (not on top of the image itself) The thumbnail image should never change, but always represent step 1 (even if the lightbox (expanded) version is changed to a different step)

paulb-elastic commented 3 years ago

Discussed in refinement, closing as the feature works better now (accepting no keyboard prev/next controls).