Affordance is a property of an object that naturally indicates how the object can be used.

learn more… | top users | synonyms

11
votes
5answers
523 views

What's the difference between the terms “affordances” and “signifiers”?

I do not understand the difference between the concepts affordances and signifiers. I am given the following definitions: Affordances: "Relationship between properties of an object and the ...
14
votes
6answers
3k views

How broad is the definition of affordance?

While discussing the need for affordances to be consistent, comments between me and JeroenEijkhof indicate we don't have a similar interpretation of the term 'affordance'. I claimed that something ...
0
votes
0answers
29 views

terms for research about highlighting/visualizing functionalities for an intuitive perception on android Tablets [closed]

i'm currently working on a little project. In this project i want to highlight hidden functionalities for users in a 3D simulated environment. A little example for a better understanding: I ...
2
votes
1answer
56 views

What’s a good way to showcase “app discovery” on a platform?

A big part of our USP is to take the structure data on recipes and allow additional functionalities on top of it. Here’s an example: Clicking on the Print & Other Apps exposes “apps” like unit ...
3
votes
1answer
50 views

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

This is kind of a conceptual thing I have wondered from time to time. What I am trying to describe is when a user can provide some sort of input to software that will result in some action being taken,...
2
votes
1answer
62 views

Design implications of Balloon Tooltip vs Rectangular Tooltip

I'm using a tooltip for a validation message and trying to weigh different design options. I'm curious because in this walkthrough on using MaskedTextBox.ValidatingType, they go out of their way to ...
2
votes
4answers
135 views

Editable Field Icon Placement?

I have a form for uploading attachments (PDFs). After uploading them, there is a section (as seen in the image below) allowing you to rename the attachment, view it, or delete it. The edit icons seem ...
6
votes
4answers
197 views

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

The main navigation of a website I'm working on uses hover menus and every main navigation item has children that reveal on hover/tap. Do I need to include a down arrow (chevron) that indicates to ...
59
votes
8answers
10k views

How should you show that an accordion is expanded?

When you have an accordion, you need some way of showing the current state is expanded. There are a number of different ways of handling this, and each is used by a number of respected websites and ...
17
votes
3answers
3k views

Why does * (asterisk) mean Required on a form field

Watching a video from DIBI conference and Jared Spool mentions the mysterious origins of the asterisk (*) on a required form field. Where does this come from, why does an asterisk mean required?
1
vote
2answers
99 views

Conventions for Current/Active state on a list item

I have a list of items one of which will be in a current/active state. Let's for instance say its an outstanding list of jobs but I need to differentiate between the job I am currently working on and ...
4
votes
1answer
50 views

Is there a concept for “yet to be discovered” affordances?

We're building an app that has an element that performs some specific set of actions. The element itself is new, and tests are very conclusive: for the target the app is directed to, the affordance is ...
34
votes
7answers
6k views

How to make irregularly shaped objects / elements look clickable?

On our homepage, we have these irregularly shaped elements that are clickable above the fold (actual images are not cats, just for demo): http://codepen.io/aguerrero/pen/pgvJoa And this is how it's ...
3
votes
2answers
91 views

Which of these slider handles have the most affordance?

Working on a filter for desktop, and need to decide which kind of filter handle giveS the user the obvious impression that they can use it as a slider. Any other suggestions besides the above are ...
0
votes
1answer
208 views

What is the common UI component that can be used for expand/ collapse on iOS apps?

I am working on checkout flow for our iOS app. In one of the screen i need to use the expand / collapse behaviour to show cascading information. I am looking for a suitable UI component that provides ...
1
vote
3answers
156 views

Displaying “clickability” on flat tiles

I am currently in the process of redesining a checkout for an e-commerce that has non-techy savvy audince. I am worried that without an actionable element such as radio / checkbox / button, our ...
2
votes
2answers
157 views

How to differentiate actions that navigate away from a webpage vs interact with the page

A long time ago links and actions on web pages only served to navigate you to another webpage or process something on the server. Nowadays, many links and buttons are used to interact with the ...
7
votes
1answer
228 views

How to indicate 3d/force touch?

Force touch is an interesting interaction, but when I bought my iPhone 6S to play with it I ended up force touching all applications and UI elements to check if they support force touch. ...
3
votes
2answers
166 views

Best practice when clicking parent brand logo(upper left corner) in partnered application

We are building a white-labeled 'marketplace' application for a corporate brand. Their brand logo will reside in the upper left corner of the NAV and will have a subhead of 'marketplace'. The customer ...
62
votes
14answers
13k views

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

I'm creating a flat-ish responsive website, which basically is an online résumé. I'm displaying skills (but it could be whatever) in a grid system. Each skill is clickable, to display some ...
1
vote
2answers
192 views

Circular context menu on hover

I'm working on a mouse-centric user interface in a desktop application. The target audience are people savvy with computers. The main element of the user interface is a circular button that doubles ...
18
votes
5answers
3k views

How to indicate that something isn't to scale?

Background I'm developing a UI for displaying production equipment (pumps, tubing strings, FCDs, etc.) in an oil well. Most oil wells have equipment that is very unevenly spaced. For example, there ...
22
votes
4answers
1k views

What's the rationale behind Google's “no save” approach?

Before anything, this is something I'm seeing on several sites, not only Google, but I think it started with Google, and it's obviously the most known case. There are several UX aspects quite arguable ...
0
votes
2answers
64 views

Affordances in quicksilver like command applications

I'm developing a command based application where the user asks an agent to do stuff using a Verb--Object--Parameters pattern. e.g. SCHEDULE a meeting with bob for Tuesday BOOK meeting room at 9pm ...
20
votes
4answers
3k views

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

I am laying out an image gallery on a webpage and have several thumbnails of objects. How would I go about giving a visual clue that there is group of images behind each thumbnail? For example...lets ...
0
votes
2answers
197 views

Affordance of Muti-Select Dropdown

I wanted to get some feedback on a design concept we are working on. I am concerned there isn't enough affordance for the user to understand what the dropdown is capable of. In short, some of our ...
25
votes
7answers
9k views

Why does the Redbox machine have barriers around the credit card swipe reader?

Perhaps you've seen one of these before. A couple of inches above and below the magnetic stripe reader are protrusions that allow just enough room to swipe a credit card. The barriers are a ...
0
votes
0answers
41 views

does a down arrow as a drop-down menu affordance work on the left of a button (or only on the right)? [duplicate]

I have a need for an affordance on a dropdown menu that is clashing with my need for right hand alignment. The dropdown also serves as a row label in my 'spreadsheet-like' interface. I want the row ...
3
votes
3answers
408 views

Why do we say that door knobs afford twisting?

So many basic discussions of affordances begin with the example of door knobs affording twisting. It seems to be the second example used in Norman's 1988 definition, even. However a symmetric round ...
18
votes
7answers
8k views

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

I'm wondering if anyone has any opinions on what is the best visual cue to indicate to the user that list items can be reordered via drag and drop? Here are a few options I've been playing around ...
1
vote
1answer
86 views

which is more affordable “tap to click” is turned off or turned on? [closed]

By default in apple notebooks, "tap to click" is turned off, every time users have to press the trackpad just to select. I feel it annoying and hope other does too. Will it be more affordable if "tap ...
3
votes
4answers
1k views

Column sort-order specifier/indicator

EDIT: I should have mentioned the page I'm talking about. On a page that's just one humongous table, I have an img in each <th> that tells the user how the column is sorted; and he can click the ...
11
votes
7answers
2k views

Signifying to user that field is editable

I have a grid that has a bunch of data. Some of the fields are editable and cause a postback updating the data. What are the best ways to show that to the user? i.e. Is there a best practice for how ...
111
votes
19answers
32k views

Which way should be “on” for a switch?

Most of us use switches every day in various forms. And although there are sometimes general norms in countries as to which direction is "on", there is variation between countries. So when ...
7
votes
9answers
3k views

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

We have a software shop with a cubicle farm where cubicles have non-transparent (painted drywall) walls about 1,5 meters high. There's a corridor running through the farm. Most of the time all the ...
3
votes
3answers
811 views

Edit button or tap to edit

What is the best way to indicate edit-in-place functionality on a list view in a responsive web application? This is an in-browser application designed for mobile (not a native mobile app), so cross-...
9
votes
3answers
1k views

Does flat design reduce affordance of actionable objects?

Flat design has many merits, including being visually simple and easy to recognize. However, I don't think flat design is a one-size-fit-all solution to all situations. Flat-designed buttons or ...
2
votes
2answers
234 views

How to Display Sections that Need to be Completed

I'm sorry if the title is not clear. But basically I'm creating a website for people to apply for open jobs at our company. The requirements are that there are different sections a user must fill ...
48
votes
8answers
10k views

How to visualize the possibility of drag'n'drop?

My web application contains a list of elements, which can be sorted by drag'n'drop. How should this feature be visually represented to users?
1
vote
2answers
186 views

Is there a way to represent information with an icon in flat UI or have they to be always actionable?

I would like to represent a file status (i.e. "needs to be reviewed", "done" etc.) through an icon. However, in flat UI you can't distinguish an actionable from a non-actionable icon due to lack of ...
1
vote
1answer
238 views

Which is more intuitive to open content when the arrow is on the right, arrow pointing in or out

When looking an expandable panel, such as those which one might find in an accordion and considering the situation where the arrow is positioned on the right hand side of the element which is to open, ...
1
vote
1answer
90 views

How to show link affordance on text/passages on mobile?

I'm building a mobile app with clickable text passages from a book. How can I indicate that the text can be clicked? The app kind of looks like this image below (minus the blue text). In my app, ...
7
votes
3answers
383 views

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

I have a row of icons with labels. The first three are clickable and are in fact nav elements for the content area. The last icon isn't clickable... how do I make the lack of clicking affordance clear?...
1
vote
2answers
276 views

Designing a drag and drop sortable that can sort its own contents and copy its children into another sortable

I have this problem that's bothering me for a while. I have an interface containing 2 or more sortables in a web app (sortables are controls where you can rearrange the child contents). Example: http:...
13
votes
4answers
1k views

Are 3D icons better than 2D?

I've seen an increase of 3D icons in the recent past. I am not convinced they are better. Instead they may actually be worse because space is taken up by the projection. Is there any evidence as to ...
2
votes
4answers
564 views

How to resolve a multilevel sidebar menu where parent sections must show children AND link somewhere

Note: When reading this keep in mind we may have more of an information architecture problem than a menu usability one. Suppose we have this menu: Item 1 ............ Should link to ...
4
votes
3answers
254 views

Affordance of ContentEditable elements (without changing the background)

Context I want to use the ContentEditable attribut instead of classic inputs. It sounds like a duplicate of Affordance of Edit In Place functionality, but actually I would like to avoid the changing ...
8
votes
6answers
1k views

What is the best practice for link affordance?

If I have several links, what are the best practice to demonstrate that that link has affordance. Take this example: We have a link that only underlines on hover and has no colour. Surely, that's ...
12
votes
7answers
1k views

Best Practice for a button that performs multiple actions

Consider this scenario: A "Connect" button, which changes to a "Cancel" button when clicked. When the connection succeeds, it changes to a "Disconnect" button. Should this be handled with 3 ...
17
votes
4answers
12k views

How to indicate container is scrollable without scroll bars

In Android I'm trying to work out a way to indicate to the user that a container can be scrolled. I'm not a fan of scroll bars and usually turn them off for all containers but would enable the fading ...