New answers tagged

3

From Wikipedia:, Gaver's named them hidden affordances : William Gaver divided affordances into three categories: perceptible, hidden, and false. A false affordance is an apparent affordance that does not have any real function, meaning that the actor perceives nonexistent possibilities for action. A good example of a false affordance is ...


1

"How do I make it so that the images look like you can interact with them by clicking on them?" Answer: You don’t. This answer is already given by @dan1111 but I like to add the following: Is it really an issue? Then rethink your navigation. If you don’t use this as “functional" navigation, then there is no real issue here as long as the "real" ...


3

As per our friends here at UX.SE, I suggest using a drop shadow. It perhaps relies on the fact that it's surrounded by links anyway - but they indicate that there is something 'special' about the image by adding a drop shadow. This is not hugely different from Michael Zuschlag's answer, but turning an image into a button didn't feel right. A drop ...


23

You should NOT rely on hover states. Even if you’re not developing a responsive website, now that we have touch devices, the days of relying on hover states to imply "interactability" are gone. I think you have 3 options here: 1. As long as you don't have other animations, subtle movement is all you need to draw attention to the UI elements—and a user will ...


11

Movement might provide you with an option. The human eye is so attuned to it that it need only be subtle. On completion of the page load you could consider a rolling increase in image size and shadow depth on each image, across the chevron from right to left. This would draw a user attention in without having to "feel" the site. You then apply the same ...


8

Hover-over Highlighting on hovering is worth doing, but, as you discovered, it’s not adequate by itself since the user has to make an effort to “feel” the interface to see what it can do, rather than just look at it. Hover effects also don’t do much for tablet users. “Rectangular Arrows” If you’re sure the problem is the non-rectangular shape, then work ...


23

NNG Has a great article on Making Clickable Elements Recognizable specifically for images: Ensure smaller images enlarge when clicked. Make all elements (e.g., picture, icon, text) that are associated with each other clickable. Doing so increases the target size and improves the probability of capturing an intended click. Avoid multiple calls to ...


11

These images simply don't look like navigation (as you admit) and won't be perceived as such. Users just don't expect oddly shaped images to be clickable. I don't think there is any magic solution to overcome that. It may be worth rethinking your design in order to better conform to user expectations rather than trying to put a band-aid on the problem. ...


3

Combine 1+2 with a little bit of seasoning. Option 2 is great because the selected range is thicker and a bit darker. But the black handles don't provide any affordance. So I would replace them with circular handles from Option 1, but why not throw in a bit of drop shadow for that extra-affordance?


0

Without knowing much of the context or output, I'd say four initial things: remember the affordance in context (is it to be manipulated by mouse or finger, or both, and which of these better indicate that/both of those interactions?) similarly, remember the affordance must be 'visible' in the context of use (straight up, regardless of device, 4 and 1 throw ...



Top 50 recent answers are included