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

learn more… | top users | synonyms

1
vote
2answers
100 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 ...
0
votes
2answers
217 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
98 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
57 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, ...
4
votes
3answers
433 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 ...
6
votes
3answers
145 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
156 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
181 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
361 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 ...
9
votes
7answers
476 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
2k 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
232 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
252 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
121 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
171 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
81 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
215 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
478 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 ...
11
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 ...
43
votes
7answers
3k 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 ...
15
votes
6answers
550 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 ...
5
votes
3answers
304 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 ...
97
votes
19answers
13k 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 ...
14
votes
5answers
2k 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
756 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 ...
5
votes
2answers
523 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
278 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
122 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
1k 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
365 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
542 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 ...
11
votes
4answers
5k 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 ...
1
vote
1answer
60 views

How to Show Object Multiplicity

I am creating a visual programming language. In this language objects are represented as rectangles, like this: I thought that the best way to represent that an object is actually a collection of ...
13
votes
6answers
3k 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 ...
2
votes
5answers
634 views

How can I indicate that images can be clicked on a mobile site?

I've created a mobile site with a portfolio page. On the desktop version, hovering the mouse over the images changes the mouse pointer to a finger indicating the image is hyperlinked. To try to get ...
4
votes
1answer
205 views

Selecting overlapping objects on «3/4 perspective» map

I am in process of making the UI of application, that has a 2.5D map (3/4 perspective) made as image, which displays equipment in rooms and areas of power plant. There are no multiple views of the ...
14
votes
3answers
550 views

Is there a difference between affordance and discovery?

Looking at the UX principles that mozilla use as keywords to tag bugs in bugzilla it looks like ux-affordance and ux-discovery are very similar: ux-affordance — controls should visually express ...
7
votes
4answers
569 views

How do you show non-affordance?

There is a tendency to use badges or status images to show information, but very often these badges look like other items which you interact with, such as buttons. There is a lot of information on ...
3
votes
1answer
126 views

Is a layout with '3D' elements easier to parse?

Contemporary web applications favor designs that make heavy use of shadows and gradients to create the effect of 3D elements. One justification for this practice is that 3D effects can be used to ...
3
votes
4answers
288 views

Will users understand this digital spinner without shading affordances?

I am using Mobiscroll jQuery plugin for a web page I am designing. However it does not blend nicely with the template I use so I had to make some major changes to it. I have removed any background ...
4
votes
6answers
330 views

“Adding and Subtracting a Value” Horizontal or Vertical Controls better affordance?

"Adding and Subtracting a Value" is Horizontally aligning the controls less effective than Aligning Vertically? I am working on a project, where we are trying to squeeze a user interface equivalent ...
4
votes
4answers
362 views

Making a linked page more obvious?

I've got a portfolio much like the one displayed below. One of the people who I have shown the portfolio to, asked if I could put some live version of the game/web page in action, or have some video ...
8
votes
2answers
526 views

Chart drill-down affordance?

I'm wondering if anyone has any suggestions for improving the usability of chart drill-down? More specifically, imagine we have a bar chart (or any other visualization) where a user is able to select ...
5
votes
1answer
674 views

Is the asterisk the common symbol to mark fields as required in all languages?

I did some research but didn't find an answer to it. The asterisk seems to be a common symbol on the web for marking input or user interaction as required. Most likely it has it's origins in print ...
16
votes
6answers
937 views

Is it acceptable to make a text field look like a write in line?

My designer would like to implement a text field that drops down on hover against a white background, and only have a bottom border to define the field. Also, the designer would like to see a flashing ...
8
votes
3answers
403 views

App icons borderless or on a button?

In an app, when using icons, we can have place it on a button, or have the icon borderless. I would think that having it on a button gives better affordance, but it seems that many reputable ...
12
votes
5answers
595 views

Should I use radio buttons or check boxes (or something else) for email address?

So I'm building an application where the users will be able to send some information via email. The previous system had an interface something like this, where the users would select whether they ...
7
votes
6answers
833 views

How do you indicate that a UI element affords sliding, without using an actual slider?

I'm designing an interface for an Android app that would allow the user to control the pitch, tempo, volume, etc. of some music playing in the background. Here's what I've sketched so far: I ...
5
votes
4answers
305 views

When is something too easy?

Let us assume that satisfaction can be derived from challenges, such as in games. Let us also also assume that the appeal of many websites or real-life experiences comes from incorporating gaming ...
3
votes
1answer
143 views

How to indicate that part of a chart can be re-scaled or redefined visually to present a clearer, and/or more specific representation of the data?

I'm wondering about several issues I have with drill down behavior on graphs: How can we visibly show that a certain graph is "drillable" (affordance issue). In more details: On a single chart, how ...