6 ms·

Very slick method for comparing two images, but maybe the UX is a little obscure. I have to admit I thought it was two images side by side, and wondered why th

Very slick method for comparing two images, but maybe the UX is a little obscure. I have to admit I thought it was two images side by side, and wondered why they were different proportions, until I noticed the handle. The explosion is of course very similar to the 1947 Port Texas disaster (581 dead) But it also reminded me of the Halifax explosion of 1917 (2,000 dead). In Halifax, the train dispatcher on the pier stayed at his post to send one last message to keep the next passenger train from entering town. “Hold up the train. Ammunition ship afire in harbor making for Pier 6 and will explode. Guess this will be my last message. Good-bye boys”

angrais 6y ago
It's a standard UI design for comparing images on the web and is often used in online news websites when comparing "then" and "now" similar to the article
- rubyfan 6y ago
  it’s also commonly used in the insurance industry for before and after image compare for large scale catastrophe management.
whatisthiseven 6y ago
A little obscure? I have seen this same image comparison ux many times before And it was instantly recognizable. I would improve it for new users by having a little animation after load that "wiggles" the handle a bit to get the user's attention.
- dylan604 6y ago
  It is common and intuitive, but the one thing that is unique is it is pretty much full frame. It is normally used on an image within the layout of the website. It took me a second to find the handle knowing it'd be there, but the sheer devastation kept my eye from finding it. The GP did not say it took them 20 minutes to find the handle obscure, but it does kind of get lost in the carnage.
- WarOnPrivacy 6y ago
  > I would improve it for new users by having a little animation after load that "wiggles" the handle a bit to get the user's attention. Please don't. It's just one more reason to apply Kill Sticky.
  - BoorishBears 6y ago
    What? What does their suggestion have to do with Kill Sticky?
    - WarOnPrivacy 6y ago
      Kill Sticky kills tons of animations, many unexpectedly. Ultimately, modern animations are just as distracting as animated Gifs were. They're somewhere between an ideal reading experience and wholly unwanted autoplay videos. If autoplay videos are a swarm of angry hornets, animations are summertime gnats. We live with them but they're hardly something we asked for.
      - BoorishBears 6y ago
        ... ok? I mean the animation suggested would be over before most people could react, a couple of millimeters of movement To show it can move and that's it.
        WarOnPrivacy 6y ago
        You'd think so but how many of those forever looping animations actually need to run for more than a second - any? Tone deaf web design earns my skepticism, pretty much non-stop. I guess it's statically possible he'd be the exception.
- jehlakj 6y ago
  Please. No animations. Just provide a tooltip suggests it can be dragged and clear it on drag. Or something subtle like that.
  - pc86 6y ago
    Some people like animations. Some people like tooltips. Some people like figuring out the UI without instruction. Different people prefer different things and there is no objective right answer.
    - andybak 6y ago
      > there is no objective right answer. If we're talking about UI/UX then there kinda is. It's the UI that the largest proportion of your target audience would find intuitive if they tried it. So it's not the lack of an objective answer that's the problem, it's the difficulty of finding a proxy for your target audience and a testing process you can afford. Sometimes the proxy is "you" and the testing is "your experience and intuition" and sometimes the proxy is a statistically significant number of formal user tests.
  - baq 6y ago
    tooltips don't really work on touch interfaces
- relate 6y ago
  Here is an example of a demo we released that uses a tooltip to make it more obvious how it works: https://hific.github.io/ https://hific.github.io/
- Izkata 6y ago
  ...contrary to sibling replies, I agree with you: I knew what it was going to be before even clicking.
- gambiting 6y ago
  Nope, I was the same. I spent a good while wondering why the comparison images look like they are of different areas - and only then realized that you can use the middle bar to move, it was very obscure.
  - Someone 6y ago
    I see triangles pointing left and right next to the thick part of the bar. Those, for me, are strong indicators of draggability.
- panic 6y ago
  Another solution could be to make the date labels at the top look and act like buttons. Then you could still use the UI by clicking on the dates without having to understand the scrubber.
btowngar 6y ago
I've seen this UX for comparing images multiple times and it does seem rather standard, but I'm frequently stumped by the affordance for a few seconds. Maybe if it quickly slid over and back to show how to interact? Anyway, incredible pictures.
TheGrassyKnoll 6y ago
Port Chicago munitions explosion (~ 1800 tons TNT): https://en.wikipedia.org/wiki/Port_Chicago_disaster
Jach 6y ago
I had a similar thought and slow reaction finding the slider, I expect "before and after" images to show me the full images side-by-side. After thinking about it I still think that's the better UX, my eyes can identify the same areas and switch back and forth more easily than I can drag my mouse back and forth over a slice. That it's apparently popular on news sites probably explains why I don't remember seeing this UX before (though I probably have), those few that I browse also get the most limited set of JS enabled.
- bryanrasmussen 6y ago
  the benefit of this is of course the images can be really big, so even if you have poor vision you can understand the difference. I would probably prefer a side by side and then a way to enter full view. I suppose that might actually be what happens, I would think this page was linked to from an article where you saw the both images side by side and had a compare link and then went to the posted view.
pbourke 6y ago
> In Halifax, the train dispatcher on the pier stayed at his post to send one last message to keep the next passenger train from entering town. One of the best Heritage Minutes: https://youtu.be/rw-FbwmzPKo https://youtu.be/rw-FbwmzPKo
kingaillas 6y ago
Don't have to go back to 1947... an ammonium nitrate explosion happened in TX in 2013: https://en.wikipedia.org/wiki/West_Fertilizer_Company_explosion https://en.wikipedia.org/wiki/West_Fertilizer_Company_explos...
- Aeolun 6y ago
  True, but the scale there was totally different. Measured in tons of TNT, not kilotons.
booleandilemma 6y ago
I agree. It took me .335 seconds to realize what it was. We need more UX designers I guess.
- skinkestek 6y ago
  It would help a bit if ux wasn't so hostile to help-screens and help texts generally. I get it that it is better when the ux is self-explanatory, but the second best option isn't to pretend everything-is-obvious-and-the-user-is-dumb, but to include a help screen or some pop over or in this case a text under the picture.
pentode 6y ago
My first thought upon seeing the video was that Halifax must have felt a lot like that. My second was that the AZF explosion in Toulouse in 2001 was also ammonium nitrate. Obviously there are a painfully large number of other examples too.

angrais 6y ago

It's a standard UI design for comparing images on the web and is often used in online news websites when comparing "then" and "now" similar to the article

rubyfan 6y ago
it’s also commonly used in the insurance industry for before and after image compare for large scale catastrophe management.

whatisthiseven 6y ago

A little obscure? I have seen this same image comparison ux many times before And it was instantly recognizable. I would improve it for new users by having a little animation after load that "wiggles" the handle a bit to get the user's attention.

dylan604 6y ago
It is common and intuitive, but the one thing that is unique is it is pretty much full frame. It is normally used on an image within the layout of the website. It took me a second to find the handle knowing it'd be there, but the sheer devastation kept my eye from finding it. The GP did not say it took them 20 minutes to find the handle obscure, but it does kind of get lost in the carnage.
WarOnPrivacy 6y ago
> I would improve it for new users by having a little animation after load that "wiggles" the handle a bit to get the user's attention. Please don't. It's just one more reason to apply Kill Sticky.
- BoorishBears 6y ago
  What? What does their suggestion have to do with Kill Sticky?
  - WarOnPrivacy 6y ago
    Kill Sticky kills tons of animations, many unexpectedly. Ultimately, modern animations are just as distracting as animated Gifs were. They're somewhere between an ideal reading experience and wholly unwanted autoplay videos. If autoplay videos are a swarm of angry hornets, animations are summertime gnats. We live with them but they're hardly something we asked for.
    - BoorishBears 6y ago
      ... ok? I mean the animation suggested would be over before most people could react, a couple of millimeters of movement To show it can move and that's it.
      - WarOnPrivacy 6y ago
        You'd think so but how many of those forever looping animations actually need to run for more than a second - any? Tone deaf web design earns my skepticism, pretty much non-stop. I guess it's statically possible he'd be the exception.
jehlakj 6y ago
Please. No animations. Just provide a tooltip suggests it can be dragged and clear it on drag. Or something subtle like that.
- pc86 6y ago
  Some people like animations. Some people like tooltips. Some people like figuring out the UI without instruction. Different people prefer different things and there is no objective right answer.
  - andybak 6y ago
    > there is no objective right answer. If we're talking about UI/UX then there kinda is. It's the UI that the largest proportion of your target audience would find intuitive if they tried it. So it's not the lack of an objective answer that's the problem, it's the difficulty of finding a proxy for your target audience and a testing process you can afford. Sometimes the proxy is "you" and the testing is "your experience and intuition" and sometimes the proxy is a statistically significant number of formal user tests.
- baq 6y ago
  tooltips don't really work on touch interfaces
relate 6y ago
Here is an example of a demo we released that uses a tooltip to make it more obvious how it works: https://hific.github.io/ https://hific.github.io/
Izkata 6y ago
...contrary to sibling replies, I agree with you: I knew what it was going to be before even clicking.
gambiting 6y ago
Nope, I was the same. I spent a good while wondering why the comparison images look like they are of different areas - and only then realized that you can use the middle bar to move, it was very obscure.
- Someone 6y ago
  I see triangles pointing left and right next to the thick part of the bar. Those, for me, are strong indicators of draggability.
panic 6y ago
Another solution could be to make the date labels at the top look and act like buttons. Then you could still use the UI by clicking on the dates without having to understand the scrubber.

btowngar 6y ago

I've seen this UX for comparing images multiple times and it does seem rather standard, but I'm frequently stumped by the affordance for a few seconds. Maybe if it quickly slid over and back to show how to interact? Anyway, incredible pictures.

TheGrassyKnoll 6y ago

Port Chicago munitions explosion (~ 1800 tons TNT): https://en.wikipedia.org/wiki/Port_Chicago_disaster

Jach 6y ago

I had a similar thought and slow reaction finding the slider, I expect "before and after" images to show me the full images side-by-side. After thinking about it I still think that's the better UX, my eyes can identify the same areas and switch back and forth more easily than I can drag my mouse back and forth over a slice. That it's apparently popular on news sites probably explains why I don't remember seeing this UX before (though I probably have), those few that I browse also get the most limited set of JS enabled.

bryanrasmussen 6y ago
the benefit of this is of course the images can be really big, so even if you have poor vision you can understand the difference. I would probably prefer a side by side and then a way to enter full view. I suppose that might actually be what happens, I would think this page was linked to from an article where you saw the both images side by side and had a compare link and then went to the posted view.

pbourke 6y ago

> In Halifax, the train dispatcher on the pier stayed at his post to send one last message to keep the next passenger train from entering town. One of the best Heritage Minutes: https://youtu.be/rw-FbwmzPKo https://youtu.be/rw-FbwmzPKo

kingaillas 6y ago

Don't have to go back to 1947... an ammonium nitrate explosion happened in TX in 2013: https://en.wikipedia.org/wiki/West_Fertilizer_Company_explosion https://en.wikipedia.org/wiki/West_Fertilizer_Company_explos...

Aeolun 6y ago
True, but the scale there was totally different. Measured in tons of TNT, not kilotons.

booleandilemma 6y ago

I agree. It took me .335 seconds to realize what it was. We need more UX designers I guess.

skinkestek 6y ago
It would help a bit if ux wasn't so hostile to help-screens and help texts generally. I get it that it is better when the ux is self-explanatory, but the second best option isn't to pretend everything-is-obvious-and-the-user-is-dumb, but to include a help screen or some pop over or in this case a text under the picture.

pentode 6y ago

My first thought upon seeing the video was that Halifax must have felt a lot like that. My second was that the AZF explosion in Toulouse in 2001 was also ammonium nitrate. Obviously there are a painfully large number of other examples too.