Hacker News Reader

Comment by valuearb | Hacker News Reader

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”

View on HN

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.

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.

Please. No animations. Just provide a tooltip suggests it can be dragged and clear it on drag. Or something subtle like that.

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.

> 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.

tooltips don't really work on touch interfaces

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.

I see triangles pointing left and right next to the thick part of the bar.

Those, for me, are strong indicators of draggability.

...contrary to sibling replies, I agree with you: I knew what it was going to be before even clicking.

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/

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.

> 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.

What? What does their suggestion have to do with Kill Sticky?

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.

... 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.

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.

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

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

> 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

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.

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.

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.

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.

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

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.

Port Chicago munitions explosion (~ 1800 tons TNT):

  https://en.wikipedia.org/wiki/Port_Chicago_disaster

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_explos...

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

Reply on news.ycombinator.com