Skip to main content
OverflowAI is here! AI power for your Stack Overflow for Teams knowledge community. Learn more
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 ...
Mike M's user avatar
  • 24.7k
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 ...
krychu's user avatar
  • 1,331
14 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 ...
SteveD's user avatar
  • 8,924
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 ...
Elizabeth's user avatar
  • 336
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 ...
Ian MacDonald's 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 ...
DesignerAnalyst's user avatar
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 ...
Monomeeth's user avatar
  • 3,826
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,...
Adriano Repetti's 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 ...
UIO's user avatar
  • 2,684
7 votes
Accepted

How to ensure that buttons look clickable?

The buttons lack affordance (wikipedia). In your case, I'd start by putting a diffuse box shadow on the button and see if that gives you what you need. If you want to be sure that you've made a ...
Racheet's user avatar
  • 3,810
6 votes
Accepted

Editable Field Icon Placement?

There are a couple of areas within the layout that is probably causing some issues. You have both edit and delete actions laid out in different fashions Your edit button is very faint and difficult ...
stradled's user avatar
  • 2,537
5 votes

How to indicate container is scrollable without scroll bars

A common pattern is to show the next bit of content within the scrolling area as half cut off. It annoys people to only see half and so they scroll to see it.
R Reveley's user avatar
  • 169
5 votes
Accepted

I wish to show the users that an item already edited. What visual affordance can be used for this?

Here on StackExchange the posts have these little notifications: "edited 4 hours ago" (See your original post to see it in action.) That serves double duty by telling us the item has been edited, and ...
Ken Mohnkern's user avatar
  • 9,034
5 votes

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

You may need to add any signal (icon or graphic) showing where the beginning of the area to be completed is, in this way you will avoid leaving orphan the incomplete areas at the beginning of the ...
Danielillo's user avatar
  • 19.1k
5 votes
Accepted

Which animation or visual queue indicates that there's more content below on mobile

You don't need an animation for this as long as you make sure to avoid the Illusion of Completeness. If users have the impression that there is more content down there then they will eagerly scroll. ...
QWERTZdenker's user avatar
  • 1,355
4 votes

Signifying to user that field is editable

I opted for adding a text-muted fa-pencil icon floated to the right of field. Source: https://webapphuddle.com/inline-edit-design/
Geoffrey Hale's user avatar
4 votes
Accepted

Is there a difference between affordance and discovery?

According to CodeAcademy, potentials for interaction are collectively called the affordances of an object. The visual cues or other aspects of an object that a designer uses to indicate potential and ...
Medievalist's user avatar
4 votes

Editable Field Icon Placement?

I don't agree with the others about the edit and the delete needing to be closer. The edit,as I understood, is for the attachment name only. The delete is for the entire attachment. There is no option ...
Yoav Moran's user avatar
4 votes

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

Checkbox selection sounds kind of legacy... I think spreadsheet-like selection, like this one, is a way better UX.
Vladimir Georgiev's user avatar
4 votes

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

Audience & scenario Being a CMS system, you are not targeting casual users like the chubby woman that purchases cat chow online, but people (not necessarily smarter than said woman) that use the ...
Juan Lanus's user avatar
  • 3,369
4 votes
Accepted

Is an edit button necessary for a row of data?

Answer to your question is - Yes! it is necessary to have an edit icon but the way you present it will make it usable and help in keeping the UI clean. Repetition of elements is not a good UX - it ...
Dipak's user avatar
  • 16.2k
4 votes
Accepted

What reasons to distinct hyperlinks with thick, light blue underlines?

I mean, the short-and-snarky version of this answer could be "because it's Wired". They've toned it down quite a bit over the years, but Wired was more or less founded on the principle of edgy design ...
Daniel Beck's user avatar
  • 4,592
4 votes

How to ensure that buttons look clickable?

I think your design looks good. And the button looks clickable too. A login in a rectangle after Username and password is a button and the users have evolved from the stone age of the Internet. (PUN) ...
Praasshant's user avatar
  • 1,426
4 votes
Accepted

emphasize clickable areas in a data visualization

Try placing emphasis on the legend, so it's persistent in size and prominence regardless of the % of the dataset. You could try to suggest the drilldown in the data, but you'll run into problems where ...
Mike M's user avatar
  • 24.7k
4 votes
Accepted

Make it clear that a card is clickable

You have nested actions: a clickable card with a clickable button on it. Your testing has shown that users did not understand that. Instead of having the card clickable you should provide a second ...
BrunoH's user avatar
  • 3,435
3 votes

Is there a visual way to represent drag capability?

Okay, so first, by playing around with this viz, it's difficult to understand what exactly is happening with the drag interaction. Is it selecting a new range for the x axis? Is is scrolling side to ...
shilp's user avatar
  • 31
3 votes

Is there a visual way to represent drag capability?

you can have a zoom toolbar that appears when you hold the mouse button and as you slide the graph and the slider slides
Aswin's user avatar
  • 151
3 votes

Is there a visual way to represent drag capability?

Just add text below the graph and add arrows to the left and right end of the time periods. See below:
Kristiyan Lukanov's user avatar
3 votes

Is there a word for an action that really needs an affordance and doesn't have one?

Wikipedia defines: False Affordance -- An affordance which in reality does nothing Hidden Affordance -- An affordance that has possibilites for action but they are not perceived I would add to the ...
Jack Fraser's user avatar
3 votes

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

Don Norman's definition of 'affordance', from "The Design of Everyday Things": An affordance is a relationship between the properties of an object and the capabilities of the agent that determine ...
Richie Thomas's user avatar

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