5 ms·

Here's a tip: any time you've got before/after screen grabs, don't do this thing where you've got to drag a line to switch between the two, don't have a fade, d

by tom_ 8mo ago

Here's a tip: any time you've got before/after screen grabs, don't do this thing where you've got to drag a line to switch between the two, don't have a fade, don't have a sliding transition, or anything like that. Just have it display one, then have a single button that you click to have it immediately display the other. Then when you click the button again, it goes back to displaying the first one again. Click, click, click - and your eyes do all the work for you. (Not unrelated: answer from Andrei Herasimchuk at https://www.quora.com/Why-does-Adobe-Photoshop-differentiate-between-Undo-and-Step-Backwards-The-consequence-of-this-is-that-you-cant-repeatedly-hit-Control-Z-to-undo-but-rather-the-awkward-Control-Z-Control-Alt-Z-Control-Alt-Z https://www.quora.com/Why-does-Adobe-Photoshop-differentiate...) Also: I can't work out which image is which. Taking the first image as an example: we've got MATERIAL-STYLE on the left, and LIFTKIT on the right. But what's the left? Does this mean that when you drag the line to the right, revealing the left image, you're looking at MATERIAL-STYLE? Or does this mean you see MATERIAL-STYLE when you drag the line to the left? (This might seem like pointless quibbling, but this thing bills itself as the The UI Framework for Perfectionists.)

accoil 8mo ago
I've been wondering that myself. The descriptions seem to indicate that fully dragged to the left is liftkit, but my first assumption was that would be fully dragged to the right.
- reactordev 8mo ago
  it's bad UX. There's a little tiny arrow on the line's grab indicator showing which "side" you should look at. You can barely see it. Below there's the two labels floated to either side...
  - tom_ 8mo ago
    If you're referring to the <·> thing, you could well be right? I figured that was merely an indication that you could drag the thing sideways! (And I'm clearly not the only one that feels this aspect of the site would benefit from another pass...)
    - reactordev 8mo ago
      Ironically a UX double entendre that misses both.
bobbylarrybobby 8mo ago
I agree, the x-axis labels are not helpful! Thankfully, the first example is “buttons with corrected icon spacing”, and the image on the right looks much better than the one on the left (a bigger difference in quality than in the other two examples), which is visible when the slider is on the left. Suggestion to devs: put the label “material-style” in the lower left of its image and “liftkit” in the lower right of its image, and cover them appropriately as the slider moves, and then it'll be clear which framework the current image (or portion of it) belongs to.
- Garrett_Mack 8mo ago
  Thanks for the tip! That actually was the first idea but I didn't end up doing it, for some reason. Thanks for the suggestion.
  - rablackburn 8mo ago
    ... just to be a (hopefully helpful) pedant: If you were going to do this for the slider approach you can arrange the labels to the `block-start` and `block-end` of the image and support non-RTL scripts/languages natively.
- jstanley 8mo ago
  > the first example is “buttons with corrected icon spacing”, and the image on the right looks much better than the one on the left For me the better image appears on the left. The left image has the icon in the centre of the radius and the right image has it in a random place.
Garrett_Mack 8mo ago
Hey Tom, I'm the creator. They're actually even worse than what you're describing. On touchscreens, the handle slides up and down as you try to move it left or right. Horrible, isn't it? One of these days, I'll get around to fixing it. The only reason it hasn't been done yet is that, to be perfectly honest, you're the first one to give this feedback. So I appreciate it!
- tom_ 8mo ago
  If you got rid of the slider entirely and just had it flick between the two images instantly, the entire handle business would become irrelevant, and you'd never need to think about it again! I admit I don't do web stuff, so perhaps this is hard to do. But I think it's the ideal. Before/after comparisons are very easy to assess if you can flick between the two cases and let your eyes show you the differences. The value of having an image that's part one and part the other (and two completely separate parts!) seems a bit questionable. (My line of work means I'm unlikely to end up a customer, so you don't have to pay attention to my opinions.)
  - rablackburn 8mo ago
    The flipping-between is a great hack -- as you said your eyes (really, brain) just do the work for you. I learnt about it in Japan where proof-readers and editors would (or do) quickly lift a top page up and down to spot mistakes with kanji (pictographs). And sure enough, even from a page of dense script the dissonance of the error really does pop out at you. I likewise tucked that little trick into my belt -- it comes in useful anytime you're trying to manually spot a pattern across complex data. This technique has the same "vibe" as FFTs to me: it's just neat feeling like you're getting computation from the universe for free. Solar PV in a similar category: free electrons if you can arrange the magic rocks just right :)
    - Garrett_Mack 8mo ago
      Whoa that's fascinating! Thank you so much for sharing this, I never would've thought of it that way at all.
heliographe 8mo ago
I always found this UI pattern a bit odd, because there just aren't that many situations where you want to compare the left side of image A and the right side of image B. I see it a lot in photography, to show before/after processing - but what you want to be able to quickly compare are the same part of an image with and without the processing applied. One of the photography tools I make is a LUT viewer/converter - and while I didn't have the slider at first, I guess it's standard enough at this point that people asked for it and I added it. But I made two additions to it that make it more useful IMO: - have labels on the left/right top corners, so it's immediately clear which version of the image you're looking at - click and hold on the image to preview the full unprocessed version; release to revert to the view. That makes it easy to quickly compare the two versions of the same spot of a photo. (similar to what you suggest, but non-latching) I have a video of it in action here: https://lutlab.com/#viewer-photo https://lutlab.com/#viewer-photo
david422 8mo ago
I turned this into a game. Which image do I think looks better? Now I try to figure out which image is supposedly supposed to look better.

by tom_ 8mo ago

accoil 8mo ago

I've been wondering that myself. The descriptions seem to indicate that fully dragged to the left is liftkit, but my first assumption was that would be fully dragged to the right.

reactordev 8mo ago
it's bad UX. There's a little tiny arrow on the line's grab indicator showing which "side" you should look at. You can barely see it. Below there's the two labels floated to either side...
- tom_ 8mo ago
  If you're referring to the <·> thing, you could well be right? I figured that was merely an indication that you could drag the thing sideways! (And I'm clearly not the only one that feels this aspect of the site would benefit from another pass...)
  - reactordev 8mo ago
    Ironically a UX double entendre that misses both.

bobbylarrybobby 8mo ago

I agree, the x-axis labels are not helpful! Thankfully, the first example is “buttons with corrected icon spacing”, and the image on the right looks much better than the one on the left (a bigger difference in quality than in the other two examples), which is visible when the slider is on the left. Suggestion to devs: put the label “material-style” in the lower left of its image and “liftkit” in the lower right of its image, and cover them appropriately as the slider moves, and then it'll be clear which framework the current image (or portion of it) belongs to.

Garrett_Mack 8mo ago
Thanks for the tip! That actually was the first idea but I didn't end up doing it, for some reason. Thanks for the suggestion.
- rablackburn 8mo ago
  ... just to be a (hopefully helpful) pedant: If you were going to do this for the slider approach you can arrange the labels to the `block-start` and `block-end` of the image and support non-RTL scripts/languages natively.
jstanley 8mo ago
> the first example is “buttons with corrected icon spacing”, and the image on the right looks much better than the one on the left For me the better image appears on the left. The left image has the icon in the centre of the radius and the right image has it in a random place.

Garrett_Mack 8mo ago

Hey Tom, I'm the creator. They're actually even worse than what you're describing. On touchscreens, the handle slides up and down as you try to move it left or right. Horrible, isn't it? One of these days, I'll get around to fixing it. The only reason it hasn't been done yet is that, to be perfectly honest, you're the first one to give this feedback. So I appreciate it!

tom_ 8mo ago
If you got rid of the slider entirely and just had it flick between the two images instantly, the entire handle business would become irrelevant, and you'd never need to think about it again! I admit I don't do web stuff, so perhaps this is hard to do. But I think it's the ideal. Before/after comparisons are very easy to assess if you can flick between the two cases and let your eyes show you the differences. The value of having an image that's part one and part the other (and two completely separate parts!) seems a bit questionable. (My line of work means I'm unlikely to end up a customer, so you don't have to pay attention to my opinions.)
- rablackburn 8mo ago
  The flipping-between is a great hack -- as you said your eyes (really, brain) just do the work for you. I learnt about it in Japan where proof-readers and editors would (or do) quickly lift a top page up and down to spot mistakes with kanji (pictographs). And sure enough, even from a page of dense script the dissonance of the error really does pop out at you. I likewise tucked that little trick into my belt -- it comes in useful anytime you're trying to manually spot a pattern across complex data. This technique has the same "vibe" as FFTs to me: it's just neat feeling like you're getting computation from the universe for free. Solar PV in a similar category: free electrons if you can arrange the magic rocks just right :)
  - Garrett_Mack 8mo ago
    Whoa that's fascinating! Thank you so much for sharing this, I never would've thought of it that way at all.

heliographe 8mo ago

I always found this UI pattern a bit odd, because there just aren't that many situations where you want to compare the left side of image A and the right side of image B. I see it a lot in photography, to show before/after processing - but what you want to be able to quickly compare are the same part of an image with and without the processing applied. One of the photography tools I make is a LUT viewer/converter - and while I didn't have the slider at first, I guess it's standard enough at this point that people asked for it and I added it. But I made two additions to it that make it more useful IMO: - have labels on the left/right top corners, so it's immediately clear which version of the image you're looking at - click and hold on the image to preview the full unprocessed version; release to revert to the view. That makes it easy to quickly compare the two versions of the same spot of a photo. (similar to what you suggest, but non-latching) I have a video of it in action here: https://lutlab.com/#viewer-photo https://lutlab.com/#viewer-photo

david422 8mo ago

I turned this into a game. Which image do I think looks better? Now I try to figure out which image is supposedly supposed to look better.