Stack Exchange Network

Stack Exchange network consists of 174 Q&A communities including Stack Overflow, the largest, most trusted online community for developers to learn, share their knowledge, and build their careers.

Visit Stack Exchange

Questions tagged [affordance]

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

2
votes
2answers
69 views

Affordance for dismissing the search function

Goal I'm experimenting with the recent Material Design pattern - Backdrop. My goal is to include the search bar into the header of the front panel, but I'm not sure on how to create an affordance to ...
1
vote
1answer
67 views

Affordability for clicking

I'm making a screen for a charging station for a IOT device. The screen displays charging status, and that will be a functionality initially. Moving forward it will have more functionalities such as ...
2
votes
4answers
156 views

Affordance in Human-Human Interaction

"The word "affordance" was originally invented by the perceptual psychologist J. J. Gibson (1977, 1979) to refer to the actionable properties between the world and an actor (a person or animal)." ...
3
votes
5answers
448 views

How to ensure that buttons look clickable? [duplicate]

I always notice that my designs look good but buttons and other clickable elements don't look clickable. Can you provide any tips or links that can help me?
2
votes
1answer
70 views

Auto-complete / @-mentions: when to trigger?

In the context of looking-up users with @-mentions, what are the pros and cons of starting showing results right after @ has been typed or only after first letter (eg, @e. The number of users can be ...
0
votes
2answers
81 views

Display the values of a boolean criterion and which one it takes

In the app the user is profiled according criteria. Let's say a criterion has 2 values : Aerial or Ground. What would be the best way to display the value of this criterion ? The value of this ...
9
votes
3answers
3k views

UI pattern to hint at important content outside of viewport

Does anyone know the name of the pattern where you add indicators that there is important content outside of the viewport? I am trying to find some inspiration but for the love of God I can't find ...
1
vote
1answer
81 views

Animation of files moving from one folder to the other is what? [closed]

Consider the animation that appears when you drag and drop a bunch of files from one folder to another and you can see the files moving from the first folder to the second. Is that an example of any ...
2
votes
3answers
103 views

Indicator for a context action menu on gantt bar

Current Situation: In our SaaS solution for portfolio management we have several actions that are context dependent, e.g. delete a project. Those actions can be found on the element itself, e.g. the ...
1
vote
1answer
41 views

What are the rules MacOs use to determine when to use hover or not on interactive elements?

So, on the web, designers use hover effects (for example a grey button becomes lighter when my pointer is above it) to signal affordance/interactivity for pretty much all types of controls. But on ...
0
votes
1answer
193 views

How to hint to the user to click on the arrow for slide navigation

I've been doing user testing to make sure users would know how to navigate between elections on the following schema. The left side has voter information, always visible. The right panel has election ...
1
vote
1answer
381 views

Input field with icon and placeholder as label

I was prototyping some inputs for a product I plan to develop and was wondering about the bad practice issue envolving the use of placeholders as labels. My question is: with the use of an icon ...
2
votes
2answers
447 views

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

To my knowledge, to avoid distractions in reading flow underlines should be avoided in any circumstance, not just hyperlinks. BBC avoids coloring them at all and boldface them instead. However, the ...
1
vote
1answer
258 views

Acceptable to use Google's material design forms on touch screens?

Google's material design champions the use of text fields that imitate ruled lines on a piece of paper. This is a pattern that seems acceptable to me when using a mouse because of the precision that ...
0
votes
3answers
386 views

If everything is clickable, nothing is clickable - how to improve text links?

I am working on an app that shows quite a bit of textual information. None of it can be safely removed without losing the meaning (icons that you see improve scanning of the page, but still require ...
1
vote
2answers
238 views

Should anchors acting as buttons use the pointer cursor?

I've styled my webapp such that buttons use the default cursor, anchors use the pointer cursor (obviously), and buttons acting as anchors use the pointer cursor. Semantically, should an anchor ...
1
vote
2answers
161 views

Using different styles of buttons to enhance the “accept” button over the “cancel” one is a good idea?

When it comes to completing an action/form you want to highlight the "accept" button rather than the cancel. I have seen android uses only text rather than boxing words to make them look like ...
3
votes
1answer
59 views

Communicating lack of interaction

Today, when sharing an update on LinkedIn, I have noticed that touching own avatar in the upate edit window on iPad makes it (avatar) "bouncy" zoom in and out (let me know if there is a better word ...
0
votes
2answers
183 views

How to improve layout and design when having different fill-out components?

There are different types of information requirements: drop down menus, text input, picture upload and radio buttons. Is there a standards or research supporting the idea to put certain requirements ...
3
votes
3answers
125 views

Is an edit button necessary for a row of data?

If we have a data table, each row is clickable to see more details (and is editable from there). But for affordance purposes, should we explicitly include an edit icon / button for each row even ...
1
vote
1answer
76 views

Affordance for small image/icon removal

I have a stacked collection of images/icons that look similar to the following when placed in a relatively narrow column: These can be removed one by one, and currently the way I do this is similar ...
1
vote
2answers
444 views

Re-ordering items on a list… Should we use drag & drop or a dropdown with a number list?

What is the most intuitive / easiest way to sort a list of items? Is it through drag and drop (drag and drop the rows in the order you want) or do something like put a dropdown list beside each row / ...
1
vote
2answers
127 views

Desktop Website - Navbar - How to communicate that a menu item has both Onclick and Onhover functions?

My query is for Web - Desktop. I have a list of 6 items in the primary header. Out of which 2 items needs to be functional on click and on mouse hover. Rest 4 are functional on click only. OPTION1 ...
1
vote
3answers
427 views

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

To have awareness on interacting for the second time, the user is able to differentiate between edited and non edited items. Here is a picture of the element :
10
votes
5answers
2k views

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

We have a CMS like panel where user needs to manage orders. We have table which you can see below. A friend (who is known experienced in UX) says we should remove checkboxes and select/discard rows on ...
13
votes
7answers
573 views

Is there a visual way to represent drag capability?

In this data visualization chart, we wanted to make user understand that the chart is interactive. When someone clicks and drags any point, the selection expands. This helps drilling down in the data....
0
votes
2answers
385 views

When to hide, disable or gray out a button that shouldn't be clicked on until a field is filled?

I've heard two conflicting principles for UI design. disable or hide functions that are not applicable to the current state of the program (maybe this is more for large forms such as in surveys) ...
2
votes
2answers
119 views

How important is visually indicating that ListBox items are drag-dropable in an application where not every List has this functionality?

We're building an application with various modules a great deal of which involves browses with lists of items (not unlike the list of questions here on Stack Exchange). One of the modules (thus far) ...
2
votes
1answer
70 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
71 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
184 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 ...
18
votes
6answers
16k 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 ...
4
votes
4answers
288 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 ...
7
votes
5answers
671 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 ...
1
vote
2answers
375 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
81 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 ...
42
votes
7answers
9k 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
143 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
308 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
435 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. ...
2
votes
2answers
225 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
454 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 ...
3
votes
2answers
321 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 ...
20
votes
5answers
4k 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 ...
26
votes
4answers
3k 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
112 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 ...
21
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
471 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
63 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 ...
4
votes
3answers
756 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 ...