69 votes
Accepted

How do I make my fill-in-the-blank exercise more obvious?

You could suggest a shape that matches the choices below, and use a color to suggest interactivity. Then, to match that, make a hover state that matches the area above: Another slight option is to ...
user avatar
  • 22.8k
65 votes
Accepted

Make people understand they can click on a button in a flat design

The problem with your buttons is that they are not raised above the background, so they don't seem clickable. I highly recommend the Material Design for details on how to choose between flat buttons ...
user avatar
  • 4,893
49 votes
Accepted

What's the rationale behind Google's "no save" approach?

Save is a byproduct Save is a byproduct of early hardware- and software design. It doesn't have a common equivalent in the real world. Consider: If you take a pencil and make a mark on paper, that ...
user avatar
  • 6,366
38 votes

How to indicate that something isn't to scale?

You could: Remove the axis line entirely. If the diagram is not to scale, then the axis line itself is the confounding/confusing element of the UX that is causing failed perception. Use simple labels ...
user avatar
  • 693
36 votes

How to show user there's more photos behind a thumbnail image?

Stacks are an effective user interface method to indicate additional content behind what's currently visible. Some examples of stacks in different applications: Thumbnail Stacks Most likely closest ...
user avatar
  • 3,858
35 votes
Accepted

How to make irregularly shaped objects / elements look clickable?

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 ...
user avatar
  • 903
30 votes
Accepted

How to show user there's more photos behind a thumbnail image?

I think @Alan George approach is correct, I'll just add two possibilities thay could help the user to get the message easily: Label + number: Because sometimes there's nothing better than being ...
user avatar
28 votes

What's the difference between the terms "affordances" and "signifiers"?

Affordances are what an object can do (truth). Perceived affordances are what one thinks an object can do (perception). Signifiers make affordances clearer (closing the gap between truth and ...
user avatar
  • 1,286
24 votes

How to make irregularly shaped objects / elements look clickable?

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 ...
user avatar
  • 1,144
23 votes
Accepted

How to indicate that something isn't to scale?

Start by figuring out what you want to communicate Since you are (rightly) looking for a reasoned, non-hacky way to lay this out, you can start with first principles. 1. Understand the layout pattern ...
user avatar
  • 40.3k
22 votes

How to indicate that something isn't to scale?

I have graduated as a Petroleum Engineer, so perhaps I can help you here. This is a domain specific problem and the right solution depends on the kind of equipment you're using in the oil well. Let ...
user avatar
  • 3,410
17 votes

Make people understand they can click on a button in a flat design

The problem is it's not flat enough Are they icons or buttons? This is a common problem with flat design (see other answers) but one possible solution I haven't seen here yet is to remove information ...
user avatar
17 votes
Accepted

How can employees be subtly reminded that when they talk loud in the cubicle farm corridor they disturb people in the cubicles?

If you want to avoid the simple and obvious solutions: place signs above the cubicles reminding people to be quiet encourage cubicle dwellers to discourage loud behavior through constant reminders ("...
user avatar
  • 1,031
14 votes

How can employees be subtly reminded that when they talk loud in the cubicle farm corridor they disturb people in the cubicles?

Print full-size images of people at work similar to what sometimes happens with empty shop hoardings. This would be effective because it's a visual reminder that people are behind the blank cubicle ...
user avatar
  • 178
14 votes

How to indicate that something isn't to scale?

Broken axes are only useful if they are intended to be used sparingly. If, as you say, the axis is broken everywhere, it makes more sense to use a table instead describing the relevant points. +---...
user avatar
  • 270
13 votes

What is a good visual cue for drag and drop? (for reordering a list of items)

Came across this post today and wanted to provide a response based on some developments in the past couple of years (since 2012). Google offers a good solution signaling its Gmail users of sortable ...
user avatar
  • 383
13 votes

Is there a visual way to represent drag capability?

You can add a scrollbar or preview chart to clearly indicate that users can zoom in/out and interact with the chart. This makes instructional text unnecessary. See the following demos. In addition ...
user avatar
  • 336
13 votes
Accepted

Should we use check boxes or not and select rows on click

This is an affordance question :-) The great thing about check boxes is everybody knows what they are, and what you need to do to interact with them. Row select is not so well known and it certainly ...
user avatar
  • 8,823
12 votes

Make people understand they can click on a button in a flat design

i thought of something like showing the first skill and let the user figure it out himself, that the others are clickable / tapable aswell (sorry I din't have much time on my hands to do this, but it ...
user avatar
  • 756
12 votes

UI pattern to hint at important content outside of viewport

Destiny won a Platinum award for UI design. This is the method they implemented to show there was something interesting offscreen: It tracks around the screen as the camera spins, appearing on the ...
user avatar
11 votes

Make people understand they can click on a button in a flat design

How about using a visual cue that users are most likely used to: an underline? Below is an example with solid underline and a dashed one.
user avatar
  • 486
11 votes
Accepted

Why do we say that door knobs afford twisting?

“Affordance” is one of those terms that has come to be used for so many different things that I’ve recently just about given up using it in order to avoid confusion. Affordance as possible physical ...
user avatar
11 votes

How to make irregularly shaped objects / elements look clickable?

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 ...
user avatar
  • 259
11 votes

Do I need arrows to indicate hover menus in main navigation?

It used to be that arrows were preferred as they provided a visual cue to users there was more to the menu if they clicked on / hovered over them. Over time web developers started making these menus ...
user avatar
  • 3,796
11 votes

What's the difference between the terms "affordances" and "signifiers"?

Affordance has to exist, it is an implicit property of an object. Let me cite Norman (who is citing James J Gibson): ...the actions possible by a specific agent on a specific environment. To Gibson,...
user avatar
11 votes
Accepted

Is there a visual way to represent drag capability?

When the cursor enters the graph area, change its symbol to a "move cursor" : EDIT : An alternative solution is use this icon when the mouse enters the graph area : and this icon when user clicks ...
user avatar
10 votes
Accepted

UI pattern to hint at important content outside of viewport

This is called a Contextual Notification. It does not require the user to take action but informs them of something. It announces a significant event while not requiring something from the user nor ...
user avatar
  • 2,644
9 votes

Does flat design reduce affordance of actionable objects?

My interpretation is that people are getting used to the new world of computer interfaces and they don't need metaphors to hold their hand anymore. Something doesn't need to look exactly like a button ...
user avatar
  • 4,763
9 votes
Accepted

How do I indicate that a subset of icons aren't clickable?

Please Ignore the Following Rant Congratulations. You’ve been web-abused. You’re the victim of all those other sites/apps failing to apply a consistent simple absolute distinction between clickable ...
user avatar

Only top scored, non community-wiki answers of a minimum length are eligible