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

learn more… | top users | synonyms

3
votes
4answers
300 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
172 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 ...
0
votes
1answer
331 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 ...
16
votes
6answers
648 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 ...
0
votes
2answers
101 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 ...
1
vote
4answers
1k views

User experiences and double click for selection?

What about double click for selection, currently I have design a grid of thumbnails where user can select a thumbnail on double click. But higher management argues that it should be single click or ...
14
votes
5answers
652 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 ...
16
votes
6answers
1k 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 ...
3
votes
2answers
122 views

How to mark cells in a spreadsheet that are meant to be edited?

I just put together a spreadsheet to demonstrate how some calculations work. Three of the cells act as inputs. The values in those cells kick off a cascade of calculations in other cells containing ...
27
votes
4answers
2k views

Design Patterns for Discoverability

What are some tried and true design patterns for discoverability in UI/UX, where information or a feature isn't necessarily overt at first glance, but is discoverable by using the interface through ...
6
votes
3answers
992 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 ...
20
votes
5answers
7k 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? ...
3
votes
4answers
296 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 ...
1
vote
1answer
67 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 ...
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
356 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 ...
14
votes
3answers
2k views

Is a plain unadorned hyperlink sufficient for sharing a link?

This is from a post on the SO Blog: So how do you share questions? I mentioned in an earlier post that we support a shorter URL form specifically for sharing: ...
2
votes
2answers
845 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 ...
4
votes
2answers
540 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
5answers
1k 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 ...
9
votes
7answers
2k views

In Excel, how do you make it clear that a pane is frozen?

I'm making a reporting application in Excel. On some sheets, I have multiple rows of header that I want to keep visible at all times. So, naturally, I'm using Excel's Freeze Panes feature to freeze ...
11
votes
8answers
2k views

How to make an interface look touchable?

I'm designing a touchable interface. It is a non-iPad/iPhone for any mobile with touchable screen. So, if you see a big screen, how do you know if is touchable one? Showing a video that explains ...
15
votes
3answers
778 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 ...
4
votes
1answer
271 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 ...
11
votes
8answers
398 views

A button with a link: understandable or confusing?

I'm working on a design of a touchscreen version of some web application. Since it's a touchscreen I would like all clickable elements to be rather big and easy to tap (it's a simple kiosk, so ...
7
votes
4answers
752 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
135 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 ...
4
votes
6answers
485 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
410 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 ...
9
votes
2answers
881 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 ...
12
votes
5answers
647 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 ...
5
votes
4answers
320 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 ...
10
votes
4answers
13k views

For required fields, should we add the red asterisk before or after the field label?

Should we add red asterisk before or after the label of required fields, i.e., to the left or the right of the field name? My boss prefers to add the asterisk before the labels, but I like to add them ...
5
votes
1answer
1k 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 ...
8
votes
3answers
513 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 ...
11
votes
6answers
1k views

Are multiple entry points good or bad?

My example is a web-based application, but I guess this could go for anything: Multiple entry points for the same action, good or bad? My example: Adding a product against a supplier (vendor). This ...
7
votes
6answers
1k 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 ...
3
votes
1answer
174 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 ...
4
votes
3answers
567 views

Does a visual “Active” state on a button improve affordance?

I've noticed some web sites neglect adding an "active" state on certain buttons or links; the visual effect when the button is pressed, usually making the button look like it's being pushed in ...
11
votes
8answers
636 views

How do I indicate that mutliple sets of radio buttons are mutually exclusive?

I have a panel where a user selects a camera to view from a location so they can load images from that camera. They can only load images from one camera and one location. Because of this I used radio ...
6
votes
3answers
818 views

Affordance for resizing a panel

The standard way to sinalize the ability to resize is with the operating system's own mouse pointer, the double-pointed arrow in the direction you are to resize (horizontal, vertical or diagonal). ...
4
votes
7answers
330 views

How can I lead users to and use an unusual navigation

So, I'm making someone a high concept website. Basically, there's one of those old fashioned television sets with circular nobs, like those on a stove, to change the channel. You turn the nob, it ...
11
votes
8answers
892 views

How can I make it obvious that a page element is to be hovered over?

On my webpage I have five boxes containing the names of each step in a five step process. When the user hovers over one of the boxes, it expands and shows text explaining that process. How can I ...
5
votes
3answers
839 views

Which is the best way to display priority in a large list of items?

We have a list of approximately 50 items. The item at the top takes highest priority, and the item at the bottom takes the least. These items can be re-ordered by selecting the item and clicking the ...
5
votes
2answers
979 views

What affords scrolling?

Besides the obvious: Scrollbar Touch interfaces (especially mobile ones) A sign saying "You can scroll here you know!" This for a desktop application.
14
votes
3answers
1k views

What is the reason for Concave round buttons in Elevators

What is the reason many elevators have concave shaped buttons. Like this: Any special reason behind this?
2
votes
1answer
383 views

Best way to communicate the action of a non-button control

Question summary: I'm wondering what are some recommended approaches for communicating to the user what will happen once he clicks on an object, in the case that it's not possible to spell out the ...
6
votes
4answers
273 views

Should same page interactions be underlined with a dashed line?

Should there be a visual distinction between a link and a AJAX like interaction? I quite often see that dashed underlining triggers an action on the same page. Is this a new convention? Would that ...