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

learn more… | top users | synonyms

1
vote
1answer
16 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 ...
32
votes
7answers
5k 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
78 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 ...
1
vote
3answers
127 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 ...
7
votes
1answer
186 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
142 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 ...
1
vote
2answers
171 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 ...
2
votes
2answers
133 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 ...
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 ...
21
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
51 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
1answer
165 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 ...
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
326 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 ...
1
vote
1answer
85 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 ...
0
votes
2answers
173 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 ...
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 ...
59
votes
14answers
11k 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
172 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 ...
3
votes
3answers
683 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 ...
1
vote
1answer
200 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
87 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
981 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 ...
7
votes
3answers
335 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 ...
1
vote
2answers
256 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: ...
4
votes
3answers
236 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
921 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 ...
10
votes
7answers
658 views

How can we communicate the ability to use the same login credentials across multiple sites?

We currently own siteA.com and have a pretty big user base. We are now planning to introduce siteB.com and siteC.com into the mix. Since we want to end up with a "network of sites" and make things ...
26
votes
10answers
3k views

Make object look draggable

I have a selection object (with the text SELECTED on it) that floats around on a background. The selection object is draggable and is used to drag it onto a furniture to make a selection. The user is ...
2
votes
1answer
330 views

What is the best way you have seen to represent something is draggable? [duplicate]

I've seen many different ways to represent an object on a page as being draggable, but I was the most effective way in your experience of doing so?
3
votes
4answers
294 views

How obvious is it that an element that looks like a flick switch can be clicked?

When looking at a form element styled to look like a flick switch but that actually behaves like a clickable element, how likely is the user to realise that they can click the element to switch it, ...
0
votes
1answer
162 views

Add button as part of a custom carousel menu

A client wants a web app built where the user can add items to a 3*2 carousel. There would be arrow buttons on either side that make it slide to the next 6 items, and so on. However the design calls ...
2
votes
2answers
227 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 ...
0
votes
2answers
96 views

How to inform an audience a TV show is playing from a DVR and is not live?

The scenario: You are watching a recorded TV show from your DVR. You end up watching all of it, forgetting you can fast-forward through some parts. I attribute this to a lack of an indicator actually ...
0
votes
1answer
315 views

Split button for navigation?

In our application, users can choose a "section" that controls what they're looking at. If they go to a different page, they should be able to click on the section name to be brought back to the "home ...
14
votes
5answers
602 views

How to handle users typing without input focus

An issue I repeatedly observe with novice web users is that they will occasionally begin typing without first properly selecting (focusing) an input field. A typical pattern I see is this: the user ...
12
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 ...
55
votes
7answers
8k 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 ...
16
votes
6answers
624 views

Will a Paste button increase usability?

There comes cases where it's quite obvious that users are most likely to copy and paste a value into a given text-box. One of those cases is a URL fields. This made me thinking of adding a paste ...
6
votes
3answers
823 views

Whether to use pointer (hand) over a button or just the default cursor

Gmail uses the pointer on mouse over of a button, while many of other websites uses a hand So I am wondering which kind of cursor is more friendly to users (on web applications), or it just ...
108
votes
19answers
27k 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 ...
19
votes
5answers
6k views

How to make it obvious that you can drag things that you normally can't?

My interface allows users to move things that usually have fixed positions in other applications, such as text boxes. What can I do to make it obvious to the user that they can move certain objects? ...
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 ...
8
votes
2answers
1k views

Can a mobile application be made using a totally flat design?

In a current attempt at designing a mobile app using a "flat" design à la Windows Modern UI, I noticed that some aspects of the application feel weird to the average user. The main aspects here being ...
7
votes
3answers
346 views

How should I indicate that an element responds to user click?

I have a list of people that the user wants to contact. They can "Mark as done" when they have made the contact (then it goes to their follow up list 3 days later). Displaying the "Mark as done" ...
5
votes
4answers
129 views

Representing how many you have with how many they want

I have a problem whereby we are asking a user for multiple items. This is in a gaming scenario and the game has lots of items. Each item is manufactured from other items and is only counted once it ...
15
votes
6answers
2k views

Make calendar icon obviously clickable

On a webpage there is a calendar that shows just the current day of the month. When that calendar is clicked, a current month's calendar pops up. How can I make it obvious that the calendar is ...
4
votes
2answers
514 views

Affordance (indication) of an editable grid

Working on a form with multiple small grids for information display and adding a new grid. (Grid is the right display here.) The business unit wants the legacy grids to remain editable with a pop-up ...
2
votes
2answers
792 views

Click and drag affordance

We have a Silverlight application which has two main areas: a vertical list of fields on the left, and a work area on the right. There are two possible operations that the user can perform on the ...