Improve user experience in the user guide - make it clear to users that images are clickable #30596
Comments
|
I have missed that pictures might be clickable as well. Though I don't think that it had been too bad, since I am (like most people?) searching by text (inside-search or search bar) anyways when on the website. Dimensions: A quick search for The first option is an overkill, I believe, and the second we're already doing in #26927. I would tend to trust this process. I think if I'd be very interested in an image, I would see the cursor changes on them after a while. |
|
I am aligned with the goal, but not sure what's the best way to achieve that. |
|
I was thinking about using a new CSS rule such as: figure > a > img::after {
content: "Click on the plot to see the code that generated it."
}but this was not enough, and I could not make it work after a few back and forth tweaks with perplexity. |
|
I am not sure what the CSS above does so my suggestion may be redundant; what about a cursor tooltip with the text suggested above, that appears when you hover over the image? |
I wanted to add a small text below such clickable images in the user guide. This text could be styled to be in italic and not as contrasted as the main text. Maybe @Charlie-XIAO has an opinion on how we could make this work?
I find tooltips that follow the cursor a bit annoying personally. Furthermore, they do not help when browsing the doc on a mobile / tablet, or browsing on a desktop but without moving the mouse over the images of the doc (scrolling with the mouse with the cursor staying over the navigation panel). |
|
I'm afraid that psuedo-elements like Alternatives:
|
|
This is the result after adding captions (the first alternative suggested by @Charlie-XIAO): 
What I learned is that a blank line between the last directive option ( The caption also looks good in different colour modes. I also attempted to create a custom class for the
as well. If we decide to fix this for all clickable images, we could use the search method suggested by @StefanieSenger to manually update them on a large scale. It might be helpful to update the contributing guide to 8000 remind contributors during the creation or review of pull requests. |
|
I agree this is an important UX improvement. Based on my experience in data visualization and UX, I'd suggest a minimally intrusive solution that maintains documentation clarity while improving discoverability:
figure > a > img {
cursor: pointer;
border: 1px solid transparent;
}
figure > a > img:hover {
border: 1px solid #e1e4e8;
box-shadow: 0 0 5px rgba(0,0,0,0.1);
}
figure > a::after {
content: " 🔍";
font-size: 0.9em;
opacity: 0.7;
} |
Well this is actually a good idea: though figure > a::after {
content: "Click to see the code that generated this plot";
display: block;
font-weight: var(--pst-font-weight-caption);
margin-top: 0.3rem;
}we can achieve what @ogrisel wanted:
The rendering is slightly less satisfactory for images that already have a caption though:
|
|
Maybe an option is to re-use some of the styling that hyperlinks have when you hover them. I'm not a huge fan of borders around images but it seems like "similar interaction should look similar" is probably a good principle to follow? |
|
Charlie's solution looks good to me. |
|
Not sure if changing img borders helps that much. I prefer explicit text. |
|
Maybe the No strong opinion. |
|
I would rather do something less repetitive than text in every single image. I don't know if there is an easy way to do it, but I like the idea of a hover border, as it gives the image a button-like feeling. Another possibility would be a slightly fade or reduced opacity whenever the user hoovers over the image. |
|
Border will cause movement - box shadow is probably what you are looking for. figure > a:hover > img {
border-radius: 0.3rem;
box-shadow: 0 0 0 0.15rem var(--pst-color-secondary);
}This effect does make explicit that this image is clickable (consistent style with other links) which I like, but IMHO (1) It is still unclear what clicking this image leads to; we can add tooltip, but this might mean some sphinx hack or javascript. (2) Hover effects do not work for mobile devices or tablets, as also mentioned in #30596 (comment).
|
|
Hover-based hints only is indeed useless on mobile / tablets or with people scrolling while keeping their mouse cursor over the side panel. I would vote to do both the border / box-shadow thing + the after text. |
|
I've been trying to google/perplexity.ai for what other websites do or what the recommendations are for letting people know that an image is a hyperlink. But haven't really found anything that is better than what we came up with in this thread :-/ A bit sad given that it seems like we haven't yet found the perfect solution/something everyone really likes |
Uh oh!
There was an error while loading. Please reload this page.
Describe the issue linked to the documentation
In the user guide, it's not very noticeable that it's possible to click on images which then leads users to the example in which the respective image is used and explained in detail. For instance see here.
Suggest a potential alternative/fix
It would be good to find find a solution that makes it clear to users that there's a hyperlink attached to the images which leads to the respective examples. The discussion came up in PR #30127 which contributes to issue #26927.
@scikit-learn/contributor-experience-team @scikit-learn/documentation-team
The text was updated successfully, but these errors were encountered: