Image Comparison Slider

[KianBadie]

Things to implement:

• [ ] Image slider functionality
• [ ] Image slider styling

Initial Mock

[KianBadie]

@coiko This is how things look for the image slide currently! Going to work on coming up with some styles soon. Will subsections also have the image comparison feature?

[coiko]

@KianBadie Oh awesome! And yes, the subsections will also have the feature (basically anywhere there's a movie). Thanks!

[KianBadie]

@coiko Sounds good!

[KianBadie]

@coiko I will be adding more mocks to the links below as time goes on. Through those links you can see some prototypes I have currently made. Having a bit of a tricky time coming up with something that looks good, matches the site, and is still accessible/easily visible. If you have any ideas or comments please let me know! Especially if any of the prototypes are getting warmer/colder to something satisfying. That way I can hone in on a nice design.

Slider: https://www.figma.com/proto/4YSFrdKZxG5jmHQNq1nwk4/Image-Comparison-Slider?node-id=5%3A3&scaling=min-zoom Tabs: https://www.figma.com/proto/4YSFrdKZxG5jmHQNq1nwk4/Image-Comparison-Slider?node-id=28%3A0&scaling=min-zoom

[coiko]

Thanks @KianBadie! These are great, and definitely going in the right direction. Here are my first thoughts (not sure if they'll help), in case you want to try some of them:

• it might help to add a bounding box around the section so the tabs look like they're attached to a frame (it could disappear when the video is enlarged or I guess, practically speaking, just stay there hidden by the video)
• I like slider option 4 and how it matches the theme color. If you do add a bounding box, it could be that same blue-green color. Alternatively, the box and slider bar could be light grey, with the arrows blue-green.
• I like tab option 3. The icons are cool and self-explanatory. (As a stream-of-consciousness aside, I've been wondering about hover notes for the desktop version and this could be a cool use of them for accessibility, with "video" or "image" appearing on hover over the icons.) I might make them smaller relative to the tabs (probably both the icons slightly smaller and the tabs bigger around them). The black stands out a bit since we don't use it elsewhere (except for the scale bars in the videos). What about white icons instead?

I'm attaching a couple images to help visualize the color ideas. What do you think?

[KianBadie]

@coiko Those looks great! I like the style and theme that you made. For your points:

• We could add that frame. I think it would be a good idea to keep the frame/tabs available when the text is shelved, but should disappear when the video is full screen. That way the user could view the image slider while the text is shelved instead of having to minimize, switch, and enlarge. What do you think?
• While these look awesome, it might unfortunately be a little tricky in order to meet sufficient color contrast guidelines. Unfortunately, it looks like using our signature dark blue will not provide enough color contrast for the video/image tabs with the gray background we have. The light grey option does have sufficient contrast for the tabs (which sounds weird since it's grey on grey, but the lightness made a difference). On the other hand, I'm wondering if the grey option would have sufficient contrast over the actual image, which is a mix of grays. My current idea is what if it was a mix of both, with grey tabs and blue frame/slider, but I'm not sure if that looks good. What do you think? I'll try to roll the ideas around a bit more and see if there's another option or if it's necessary to have another option in the first place. If another option isn't needed, I would vote for the all grey option, since it hits the marks for the color contrast on the tabs.
• Icons it is! Hover notes seems like it could be nothing but an improvement to the site! I think that would be a great idea to add in the future. The color of the icons I feel like are determined by what I mentioned in the comment above. It seems like the grey option for the tabs might be a necessity and it looks like our dark blue would add more contrast for the icon colors than the white.

What are you thoughts on all of this?

[KianBadie]

@coiko Just to give an idea and follow up with my previous comment. This is what I was thinking of when I was talking about mixing the blue/grey:

Screenshot

[coiko]

@KianBadie Of course - I always forget that buttons themselves have to have contrast against the background, not just the icons/text on them. I love the mixed blue/grey solution! As super minor tweaks, what do you think about having the bar of the slider grey (like a continuation of the frame) and the arrows light grey instead of white (something like the attached)?

And yes, I think your idea of how to handle the tab/frame behavior is perfect. Thanks!

[KianBadie]

@coiko Visually, I think I like what you created (blue button, grey separator) better than what I made (blue button and separator). In terms of meeting the actual guidelines, it's still a bit tricky. I would have to do a bit more research, but I would like to say that it's ok since the button is the "essential" part to the component, the separator is not even necessary to have (as in it could be removed and the functionality/information portrayed would still be the same). For now I will start developing things to be how they look in your screenshot and see if I run into anything that says otherwise! How does that sound?

[coiko]

@KianBadie Sounds perfect! (Yeah, I was also thinking that the separator isn't really an interactive/informative element so it would be fine (and maybe even useful for the functionality) to blend into the background. But if you find out that's not okay, the blue bar is also a great way to go.) Thanks!

[KianBadie]

@coiko Sounds like a plan!

[KianBadie]

@coiko Here is how things are looking for the image slider so far. I also have a couple of notes/questions that have come up in my development:

1. I used the same video icon we have for mobile instead of the "triangle play button in circle" icon just for convenience/consistency. Would you prefer to have another icon used?
2. To indicate which "tab" is currently selected, I made the selected tab icon our blue and the non-selected tab icon white. What do you think about this?
3. For mobile, I ended up just hiding the image slider/frame all together. On mobile, the display area for the video is already pretty small and I figured the slider wouldn't be very functional with our current layout. What do you think about this? Do you think there is enough room?
4. I'm still looking into how color contrast accessibility works with image sliders. It seems there isn't much discussion on it. It might be a niche feature.

Gif

[coiko]

@KianBadie Beautiful - I love it! I like the video player icon, and I think the white/blue to indicate the selection is perfect. And the modal looks even better than before with the way you incorporated the citation info into the frame!

I'm still pondering the mobile question. I agree that the layout doesn't leave much room for it. If there were a way to make it usable, though, I can imagine the feature being even more useful on the phone. For instance, a reader might be doing a quick review, or they might have more trouble loading the videos than on their desktop (or just not want to use as much data). On my phone, it looks doable in portrait orientation, but pretty tight in landscape unless we do something like shorten the top title bar. Anyway, I'll think about it some more....

[KianBadie]

@coiko Here is how things are looking for mobile so far (at least on android, ios causes some hiccups). I am going to add the fullscreen button, but this gif shows what the bottom control bar will look like with the third "image" tab available. What are you thoughts on how it looks so far?

Gif

[coiko]

@KianBadie I think it looks fantastic! The icon bar looks perfect. My first impression is that the slider itself looks a bit big relative to the image. I know it has to be big enough to be easily draggable, but maybe we can shrink it a bit. What do you think?

[KianBadie]

@coiko I think it could be shrinked as well! I will go ahead and add that.

[KianBadie]

@coiko Haven't decreased the size of the slider yet. I was fiddling with the full-screen functionality all of yesterday. Things are turning out satisfyingly (at least to me). I added a dedicated "exit full-screen" button in the top right. This is because it turns out iOS only allows "true" full-screen with videos, so I emulated the full-screen affect. A side affect of this however is that the touchscreen dead-zone (where touches aren't registered) is still present in this emulated full-screen. So any presses to the bottom right of the screen aren't registered. So I would go full-screen on iOS but would not be able to exit out on landscape since the dead-zone was preventing me from pressing the button in the bottom right of the screen. Any thoughts on what is shown so far?

Gif

[KianBadie]

@coiko I have also received some new and helpful information on the visual accessibility part of our element. There are some additions to the slider that I think can help us get closer to meeting accessibility guidelines

• The definitions in the guidelines leave the dividing line up to interpretation if it is "essential" to using/understanding the information. I think it is helpful in locating where the slider is and distinguishing the before/after. What do you think? Adding a border to the divider/slider with sufficient contrast to the inner divider/slider will help ensure that those components will stand out (because it will either contrast with the border, or the background image if the border blends into the background).
• One of the accessibility guidelines states "Color is not used as the only visual means of conveying information, indicating an action, prompting a response, or distinguishing a visual element." Maybe we should add some labels somewhere to the "before/after" image to indicate what exactly is on the left/right side?

What are your thoughts on these points? If you want to see more details and background, this is the response I received in regards to our questions.

[KianBadie]

@coiko Also, this is an idea of how things are looking for the image sliders in the modal containers on mobile. I brought the "image/video" buttons back because I felt like it was a good way to bring the option back (since the modals don't have a dedicated control bar at the bottom of the screen). Another thing you will notice is that the image is much larger than the video. This is because of technical difficulties, as well as not being sure about the user experience. If the image was as tall as the video, it would be much harder to see. This seems ok for the video since the videos always play in fullscreen. But that is not the same for the image slider. Do you have any thoughts on what I mentioned or is everything looking good so far?

Lastly, my apologies for all the updates with long explanations today! This is my last message before signing off for the day.

Gif

[coiko]

@KianBadie Thank you so much for all of this! And sorry for my late response (the day got away from me).

First, regarding the fullscreen controls, I really like them! I think it might make more sense to put the enter-fullscreen option also at the top right for consistency. I think it's a very intuitive spot. For styling, maybe we could consider something closer to the video controls with a transparent (or semi-transparent) background. (This image is particularly handy with the white on either edge, but many don't have that, so it would be good to leave as much of the image visible as possible.)

Second, regarding accessibility, that's some very helpful advice. Personally, I guess I'd say the dividing line isn't essential. I think the before/after are strongly delineated because they share the same background, so the additional elements are clearly visible. Maybe conceptually it's more like a layer being added/removed than an image comparison? If you think it is essential, though, we can definitely add a high-contrast border (maybe a thin line the same blue as the button). My only concern is making sure the presentation doesn't distract the user from the information in the image.

As for the color-only to denote information, I think we're okay since we're also using text (all the annotations are labeled). What do you think?

Finally, the modal interface looks great! I definitely agree with bringing the tabs back. The sizing does feel like it could be improved a little. My first instinct is that in landscape, the full image (and the fullscreen button) should show without scrolling. It will be smaller, but I imagine nearly everyone will go fullscreen to interact with/study it.

And a bonus thought for (maybe very) future discussion: the accessibility discussion made me notice ways of indicating selection besides color, e.g. the yellow halo around the clicked tab in your last gif (or around the whole modal when it's opened). On my browser, keyboard selections highlight things in blue. Is it possible to specify those "selected" colors, or are they set by the browser/OS? If it is possible, we could make the site a bit spiffier by specifying a complementary color to our scheme, e.g. the orange we used to use for the Library link.

[KianBadie]

@coiko No problem and no worries at all!

I see, I will go ahead and move the button to that position then! Would the semi-transparent background stretch across the whole width of the image, or would it just surround the full screen button? Backgrounds like that are an easy thing to change, so I could try out some different things and see how they look.

That is an interesting point, that I will roll around in my head more. I think it would be ok to treat the dividing line as non-essential and focus on making the slider itself more accessible. And if any new thoughts or realizations say so, we could revisit that dividing line and add some simple changes.

I see your point as well with that. If everything is annotated, then that might already solve that problem!

Sounds good. I will go ahead and make it smaller and circle back when I have something to show and we can test things out.

Good point! So I think all the current outlines that pop up on keyboard focus/on mobile are the default focus outlines set by the browser. So it is currently differing from browser to browser. That could definitely be an option to change them and set our own because we are able to define our own outlines (you even have the option to turn them off, but that of course would not be good). As always, we would just have to make sure the outline always has sufficient contrast. When you use the default outlines, you don't have to worry about poor contrast because default outlines in any situation are excused by the guidelines. But when you define your own that's when the guidelines become more strict and require sufficient contrast in all situations.

[KianBadie]

@coiko As a follow up to my previous comment, here is how a shorter image slider looks. I think the whole thing can be raised a little bit too in order to better use space (if you notice the gap between the x and the image slider).

Gif

[coiko]

Thanks @KianBadie! I agree that it can use more space at the top, but this is a great start. It might be good not to let the slider extend past the image.

And as for the transparent background for the fullscreen button, I was thinking of it just behind the icon to keep it clean.

[KianBadie]

@coiko Sounds good! I will see what I can do by the end of Friday! Hopefully I can have something that can be merged into our testing branch so that you can finally play around with this feature.

[coiko]

Wonderful - thanks @KianBadie!

[KianBadie]

@coiko I tired experimenting with transparent backgrounds on the image slider buttons.

With our classic blue color, I used a white transparent background so the background will still have enough contrast even on the darkest of backgrounds (shown in screenshot). I also tried a white color with a black transparent background. With this combination, the button will have contrast on even the lightest of backgrounds (also shown in the screenshot).

What are your thoughts on these? Do you think this is heading in the right direction in terms of styling?

White semi-transparent background with blue color

Black semi-transparent background with blue color

[KianBadie]

@coiko I just merged all the current work into our testing branch, so things should be testable soon! I don't have gifs currently of how things look, but I do have a gif of a specific behavior I wanted to give a heads up about. Since iOS is not using true fullscreen, the top search bar still gets in the way of usage. As you can see in the gifs, if you swipe up/down the nav bar will appear. The result of this is now the window is scrollable and you must scroll to see the whole image. However, on my iPhone I sometimes have to attempt and fiddle for a good amount of time to swipe the right spot to scroll (shown in the second gif) or I have to switch orientations because I can't find the right spot, which leaves me looking at a cut off image. Ideally, the image would shrink when the nav bar shows up, but I figured this was an acceptable functionality for now until next week.

On android, true fullscreen is used so you might not experience this!

Gif

[coiko]

@KianBadie Wonderful - thank you so much! I love the white semi-transparent background for the fullscreen control. I think it should cover any situation well.

Thanks also for getting everything into the testing branch! I can't wait to play with it over the next few days. (And sorry about the iOS headache....)

[KianBadie]

@coiko Just to give an update on this, all the images are uploaded in the correct place. I haven't merged the images into our testing branch yet because there are some presentation bugs I've been trying to fix before that merge (similar to the cut off buttons/video height bug that we have mentioned before). I will merge all the updates related to this as soon as possible!

[KianBadie]

@coiko Happy to say that the image slider updates are finally live on our testing site! Sorry this took so long. The good news is, I was able to get rid of those presentation bugs that was holding me back from merging the updates. There are a couple important points that I want to share that are not that obvious with the update:

• The slider images on desktop act similar to the desktop video container/mobile sliders. That is, as the screen get's wider (but not taller), the container will extend the full width with the inner slider/images staying at a width that maintains its ratio. However, the slider can not extend past the length of the image. I attached a gif below since I think this is hard to convey through text.
• Up until now, the inner videos/images inside the grey border containers had curved edges (to match the border). I found that this looked a bit odd when you could see the curved corners while the image did not reach the full width of the container (in the gif below, or while viewing the slider in a modal container on mobile landscape). I added the sharper edges to the videos for consistency. I don't think we've talked about this small point before, but please let me know if you think going back to the curved corners will make for a better presentation!
• From my experience, the after image always lagged a bit in loading compared to the before image. So for a second, it could appear that there is no after image. The code to load the after image is a bit farther down in the script, so that could be why. I will try to see what I can do with that. In addition, sometimes one of the before/after images would not load and I would need to refresh. I'm not sure if it is just my internet. I am not sure whether to call that a bug since the images urls are just simple plug in values with nothing else going on functionally. However, maybe there could be some sort of visual indicator to show one of the images are not loaded? For example, just show a white background for the empty image if it did not load? Or maybe even a text recommending to refresh? What are your thoughts on this? I knew to refresh since I knew what the images intended to look like, but it might not be obvious to all.

Gif

[coiko]

@KianBadie This is fantastic - thanks so much! I definitely like the slider not extending past the image border, and the sharp corners on the image. And yes, I think it would be good to indicate that the after image hasn't loaded; I like the idea of just showing a white background until it loads. I agree that's an odd bug.

From my initial playing with the feature, everything behaved perfectly and it looks great!

The only oddity I noticed is about the landing page and it's something that was always there but I never noticed (sorry!). Basically, if you resize your browser window too small, the main text can move over the banner logo. It's not obvious with roughly-default window sizes on the main site, but it is now on the testing site because I had you move the Download button (so the other floating page elements moved up). Playing with that also led me to notice that the switch from big text to smaller text (or, I guess, mobile layout) as the window shrinks should probably happen a little bit earlier so the title is never cut off. Is that easy to fix? (Let me know if any of that description doesn't make sense or if some gifs/screenshots would help.)

[KianBadie]

@coiko No problem! What do you think about text displaying if the image fails to load? I had some instances where the image just flat failed to load. Maybe it could be in the center of the white background for the image that did not load. It is weird indeed that I ran into that a couple times. It wasn't all the time, but it was enough to be expected. I will look into it and see what I can do.

That is fantastic to hear!

I think I understand what you are saying. And no worries, I don't think moving the download button was the problem at all. Like you said, it was always there. I will see what I can do with that as well. Like you said, maybe increasing the threshold to initiate the mobile view on the landing page could be a good idea!

[coiko]

@KianBadie text could be a good option. Or we could try an image-failed-to-load icon. A lot of sites use something like a broken image, which might be easily recognizable. What do you think?

[KianBadie]

@coiko I think an image failed icon would be great. I will add it to my to do list! I'm guessing it's not the highest priority, but please let me know if it is higher!

[KianBadie]

@coiko Since we are going to discuss what touch ups to prioritize tomorrow, I found myself with some time to to implement an isolated view for the comparison slider (I also realized that it was literally just a button to shelf the text. I think I was over estimating it's functionality at first). I attached a gif below. Is what is pictured in the gif similar to what you had in mind? Also, do you feel like this should be a function in the modals? If so, would it behave similar to the tree? As in, just enlarge to take up a similar amount of space that a modal would. I would imagine that in reality, it would take up a bit more space than a modal.

Gif

[KianBadie]

@coiko Here is also a gif of what how I imagined this being implemented in the modals. What are your thoughts on this?

Gif

[coiko]

@KianBadie This is absolutely perfect! (Both the main and the modal.) Thanks!

[KianBadie]

@coiko The enlarge functionality for the comparison sliders are now live on the site! Please let me know if you experience anything unintended with them.

[coiko]

Wonderful - thank you so much @KianBadie!

[KianBadie]

@coiko I am currently setting up an image failed system for the comparison slider. I am setting things up to show an error message when either the before or after image does not load. The message/icon is an svg, so it can be edited if you think changes should be made. I wrote the message to cover both an image not existing and the connection related errors. Basically, it will show that if any error happens while trying to source the image. What are your thoughts?

Screenshot

[coiko]

@KianBadie I think this is fantastic! I really like the combo of icon and text. I can suggest a few minor tweaks to match the style of the site (which I tried to sketch out in the screenshot below):

• I'd make it smaller, so the icon and text are on the same order as the other icons and text on the page (otherwise it might be a surprise when it pops up and you're used to reading smaller things)
• I'd make it dark grey instead of black to match other colors (but still have sufficient contrast against the white)
• Since the "does not exist" should really only be a problem for us (i.e. we forgot to add one or I messed up the name), maybe we should just stick to "Image failed to load" for the general user. (And if we see the error message, we'll know to check if the file's in the right place.)

What do you think?

I also thought it might add a little humor to have a more site-specific icon - something along the lines of a sad-looking cartoon bacterium. If you think that could work/be fun, I can play around with making something tomorrow.

[KianBadie]

@coiko I think those are all great points! I will go ahead and implement that.

I also think a site specific icon sounds fun. Would it replace the broken image icon? Or would it be placed somewhere else on the image? I think either would be fine since there would also be words describing exactly what happened/what to do (failed load, refresh). I think it would work and be fun! If it is saved as an svg, inserting it into the site will be straightforward.

[KianBadie]

@coiko The error message feature should be live on the testing site soon after this message (after everything rebuilds). Obviously, this feature is a bit harder to observe in the wild since we have to encounter a connection error of sorts. But from my experience things looked good with it. Please let me know if you experience otherwise or if the error picture doesn't show when it should!

[coiko]

@KianBadie Wonderful - thanks! (I haven't managed to trigger it yet by interrupting my connection, but I'll keep trying :)

[KianBadie]

@coiko Yeah, it's a bit rarer to see it in action. While testing it, I forced the errors to appear. I did encounter it in the wild about twice when I got some connection reset errors on Chrome.

[KianBadie]

@coiko I have mentioned this before, but full screen behavior on ios has been not as elegant as android. This is because android allows any element to access a built in full screen interface, while ios only allows this for videos. So the solution was to emulate a full screen. At first, this is satisfying because you get behavior like the beginning of the first gif below. The black background takes up the full screen and the slider takes up the full width/height when it needs to. The problem is when the search bar comes into the picture (shown in the 1st and 2nd gif below). I will let the gifs speak for themselves with the non elegant behavior the search bar creates. On ios chrome the experience is slightly buggier, with the black background not fully covering the page when changing from portrait to landscape, shrinking the viewport even more (this was the case on my actual phone, but on the emulators the behavior was similar to what the gifs show of ios safari below).

I've been trying to think of ways to alleviate this, and an idea I wanted to throw out there was what is shown in the 3rd gif. Which is simply decreasing the height that the slider takes up. That way the search bar never covers anything. What are your thoughts on this? I guess it would be more so an isolated view than a full screen view, like desktop.

Also, to give more context, ios adds scroll to landscape pages no matter what. In the past, I have tested empty pages with no content on them. When I flip them to landscape, extra height is added which creates an area to scroll. It might have been an ios design choice to respond to the search bar appearing. It looks like Androids solution is to have a search bar locked in place that shrinks the viewport. It looks like ios's search bar is floating above the viewport. All of this goes for the phylogenetic tree on mobile as well.

Gifs

Current behavior

Current behavior from landscape

Idea of a fix

[coiko]

@KianBadie I think that's the perfect fix! (And I'm sorry iOS is always such a pain!)

[KianBadie]

@coiko Sounds good! And no problem really, just the realities of the internet!

[KianBadie]

@coiko I've attached a gif below of the fix in action. Does it look like an overall improvement to you? I feel like the area is a bit grey because I'm not sure how inconvenient the previous "issue" was. I think it is an improvement because the search bar covering the slider felt a bit jarring in the previous implementation.

In the gifs below, you can see that the iPhone 8 does not have as smooth as an experience as iPhone 12, but still works with a little bit of a wonky step in between. On my actual iPhone 8, I had an experience that was closer to the iPhone 12 gif. So I guess both kinds of experiences are possible (since the iPhones in the gifs are supposed to be actual devices).

The Chrome gif on iPhone 8 shows a pretty smooth experience. However, the very last picture is how things looked on my iPhone 8 on chrome. The only thing I worry about with that is if the pictures are too small. I think it would be nice tomorrow during our meeting to show my phone in the camera, since it can show the functionality in context of the physical phone screen/my hands.

Gifs

iPhone 12 Safari

iPhone 8 Safari

iPhone 8 Safari in landscape

iPhone 8 Chrome

Picture on my iPhone 8

[coiko]

Thanks @KianBadie! We can discuss more today (and look at it on your phone), but I think it's a great improvement, and I wouldn't worry about the slight wonkiness on certain systems.