Skip to main content

Questions tagged [affordance]

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

Filter by
Sorted by
Tagged with
0 votes
1 answer
57 views

A UX question about spatial navigation

so recently my team has been working on an interesting project that involves creating a 3D apartment showroom. My job is to design a simple navigation for people to easily navigate between 2 rooms. ...
AndrewH's user avatar
0 votes
5 answers
2k views

What is an example of false/ bad affordance?

So I'm learning Norman's design priciples but I haven't quite understood affordance. I know the defenition now. If we take a square box, it affords to be sit on, stand on, it afford to be picked up ...
Need_MathHelp's user avatar
0 votes
1 answer
105 views

Mobile tree structure with 2 tappable areas

I am designing a tree structure displaying the course content for mobile. Each row has 2 tappable areas: caret for the unfolding text area for detail content page. In the usability tests, most users ...
yellingbytes's user avatar
0 votes
3 answers
117 views

Which version gives a clear affordance on what happens when clicked?

I'm designing a drill-down chart that allows users to analyze meter readings at various locations in a factory. They are able to isolate a single location and see trends of the readings over time. The ...
Blue Ocean's user avatar
  • 10.7k
1 vote
2 answers
86 views

How to indicate that cloud files are public?

How can i make sure my Users understand that when they delete a file on the cloud, it is deleted for everyone else in the organization as well? It seems a decent amount of our users don't understand ...
Ubus99's user avatar
  • 25
3 votes
4 answers
5k views

Make it clear that a card is clickable

I am currently working on a Mobile Application, mainly using Material Design, with some client-specific adaptation. On our project, we display a list of cards, each card having a varying number of ...
Okaa-Pi's user avatar
  • 33
5 votes
3 answers
2k views

How to communicate that an image is clickable without explicitly telling that it's clickable?

Say I have an image that is meant to contemplate, not to attract click. However, if someone is interested in it, they can click on it to explore more. I feel that having an explicit text saying it's ...
Ooker's user avatar
  • 900
3 votes
1 answer
108 views

Kairos Pattern for "Opportune" Disclosure in UI

Looking for a pattern or guideline that will present an option to a mobile app user with an affordance to get some user assistance if there is no activity detected after a short time. I've looked at ...
Ultan's user avatar
  • 111
1 vote
1 answer
62 views

How (and when) do you describe "affordance" in your Interaction Design?

Take the following example of an animation in a webstore. Say you have to write an Interaction Design document about this. I would imagine it would look something like this (VERY simplified of course)...
DennisW's user avatar
  • 1,079
2 votes
1 answer
182 views

Which animation or visual queue indicates that there's more content below on mobile

designing a form on a mobile app. It's not visible within a single screen, yet not long enough to be on a 2nd screen. My question is, what kind of animation or visual queue can i use to create an ...
Blue Ocean's user avatar
  • 10.7k
3 votes
2 answers
4k views

How can I best display a three-way toggle (show, show all, and hide)?

I'm creating a filter for a search and I am wondering how to best approach this interface. I have a bunch of events in a database and my website displays certain events based on the user's criteria. ...
Brendan's user avatar
  • 31
1 vote
1 answer
186 views

emphasize clickable areas in a data visualization

I want to show a stacked bar chart (single bar) that only one part of it (the dark green one that has 15%) is clickable, when clicked this section will drill down. see examples below: stacked bar ...
Eran Bar's user avatar
  • 1,040
21 votes
4 answers
7k views

How do I make my fill-in-the-blank exercise more obvious?

I developed an app for learning Chinese that requires the user to do fill-in-the-blank exercises. A word in the sentence will be blank, and the user has to select which options is correct. It looks ...
Peter Olson's user avatar
  • 5,308
2 votes
1 answer
165 views

Features of a complex interface: learnability or discoverability?

I am currently working on a new version of a Saas which clients can use to manage all of the content on their screens, which is going to be quite extended and complex. To make sure it will be easy ...
StarGirl's user avatar
  • 205
2 votes
1 answer
257 views

User friendliness of 'floating' WYSIWYG editors such as Medium and Summernote 'Airmode' [closed]

Currently there are some WYIWYG editors (medium.com and summernote airmode)that provide a 'floating' toolbar to edit the text. I.e. The user highlights the text and a toolbar shows up above the text ...
Alesis's user avatar
  • 558
3 votes
2 answers
105 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 ...
illright's user avatar
  • 153
1 vote
1 answer
188 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 ...
Daniel Vianna's user avatar
3 votes
3 answers
199 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)." ...
Tiago Peres's user avatar
5 votes
5 answers
8k 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?
narengs7's user avatar
2 votes
1 answer
251 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 ...
Roman Susi's user avatar
0 votes
2 answers
362 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 ...
BenDev88's user avatar
9 votes
3 answers
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 ...
Ovidiu Berdila's user avatar
1 vote
1 answer
267 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 ...
Sreten Jocić's user avatar
2 votes
3 answers
168 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 ...
sli's user avatar
  • 21
1 vote
1 answer
389 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 ...
Tony Bolero's user avatar
  • 7,304
0 votes
1 answer
335 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 ...
Judit Casacuberta Bagó's user avatar
1 vote
1 answer
883 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 ...
lelukas's user avatar
  • 11
2 votes
2 answers
824 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 ...
Ooker's user avatar
  • 900
1 vote
1 answer
355 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 ...
Audrey B's user avatar
0 votes
3 answers
801 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 ...
Alex Leonov's user avatar
2 votes
2 answers
928 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 ...
wrymug's user avatar
  • 123
1 vote
2 answers
321 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 ...
UX Research's user avatar
2 votes
1 answer
64 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 ...
Dominik Oslizlo's user avatar
0 votes
2 answers
210 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 ...
UX Research's user avatar
6 votes
3 answers
864 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 ...
catandmouse's user avatar
  • 4,308
1 vote
1 answer
101 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 ...
Dan's user avatar
  • 143
1 vote
2 answers
1k 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 / ...
catandmouse's user avatar
  • 4,308
1 vote
2 answers
149 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 ...
sruzan's user avatar
  • 41
1 vote
3 answers
489 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 :
jatin pherwani's user avatar
10 votes
5 answers
4k 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 ...
Hasan Gürsoy's user avatar
13 votes
7 answers
666 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....
Zameer Ansari's user avatar
0 votes
2 answers
1k 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) ...
Celeritas's user avatar
  • 1,365
2 votes
2 answers
172 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) ...
Logan's user avatar
  • 123
2 votes
1 answer
78 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 ...
Cherian's user avatar
  • 121
3 votes
1 answer
81 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,...
asynchron's user avatar
2 votes
1 answer
487 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 ...
KyleMit's user avatar
  • 669
24 votes
6 answers
31k 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 ...
Celeritas's user avatar
  • 1,365
4 votes
4 answers
596 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 ...
Bill Martin's user avatar
7 votes
5 answers
2k 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 ...
az123's user avatar
  • 199
2 votes
2 answers
1k 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 ...
Chris Spittles's user avatar