Skip to main content
The 2024 Developer Survey results are live! See the results
175 votes

Why are animations out often neglected, even from Google?

Animation is used to draw focus to objects. It makes less sense to draw focus to an object the user is no longer pointing to (and thus, is no longer interested in focusing on), than to draw focus to ...
Rotem's user avatar
  • 1,456
37 votes

Why are animations out often neglected, even from Google?

I don't think it's a design decision; I think they're neglected because, at least in web development, they're kind of annoying to implement and don't contribute enough to the UX to make them worth the ...
cdrini's user avatar
  • 490
17 votes

Why are animations out often neglected, even from Google?

Pay attention to the fact that the three examples above are all functional animations but serves a different purpose. The first two examples acts like a modal box pop up. User opens a box and expect ...
Amit Daliot's user avatar
5 votes

social sharing ui/ux on mobile. actionable text + icons or icons only

Your decision should also be informed other factors: how much you desire to encourage that behavior how dense/sparse the information on screen already is how many social networks you plan to provide ...
theChrisMarsh's user avatar
5 votes

Should I fake like facebook "like" button?

You're asking whether actions which need to be sent to the server should be shown to happen instantaneously, or after a delay as you wait for the confirmation to be received back by the client/...
Zenon's user avatar
  • 544
5 votes
Accepted

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

You don't need an animation for this as long as you make sure to avoid the Illusion of Completeness. If users have the impression that there is more content down there then they will eagerly scroll. ...
QWERTZdenker's user avatar
  • 1,355
4 votes
Accepted

Improving UX for multi-selectable cards

As Muhammad Jahangir already hinted at, using Chips to select multiple results in searches is a very common approach. If you google "ux search multi select", a lot of the results look like this: ...
Big_Chair's user avatar
  • 6,835
4 votes

Novel design patterns used to attract user attention but not a call-to-action

There is a word in german for it (for this very specific purpose in graphic design): "Störer". Which I have seen translated to eye-catcher. The purpose is simply disruptive marketing, interrupting ...
KMSTR's user avatar
  • 422
4 votes
Accepted

Novel design patterns used to attract user attention but not a call-to-action

UI Mascot ...repetitive tasks often struggle with retaining users: people abandon them because they feel bored, and boredom is simply lack of stimulation. By using positive stimuli like humor, ...
Danielillo's user avatar
  • 19.2k
4 votes
Accepted

What type of design pattern to use to toggle list actions?

I would consider making "Add to watchlist" and "Add to send list" a togglable button: Add to watchlist => Remove from watchlist Add to send list => Remove from send list ...
Alex Marcevoi's user avatar
3 votes

range/single field switcher

you could achieve this by using a range slider. Like this: Problem with this pattern: you have a fixed starting point. If your site deals with very old cars, this solution doesn't work. To get it to ...
BrunoH's user avatar
  • 3,435
3 votes

Repeat or not repeat actions buttons?

What if I told you, you both can be right? Your boss is right by offering the same actions on a higher level. This allows advanced users to use your UI without having to individual go to each entry ...
Socrates Kolios's user avatar
3 votes

Why are animations out often neglected, even from Google?

Opening animation If the UI layout changed suddenly, like when there is no animation and the change happens fast as it happens in modern PCs, then the user would be hit by the "What did I break?!" ...
Juan Lanus's user avatar
  • 3,369
3 votes

What type of design pattern to use to toggle list actions?

Instead of a Button, you can give the Add to Watchlist and Add to Send list as Checkboxes so that they don't have to use a separate button for removing, just unchecking the options will remove it from ...
Sacha Vijay's user avatar
2 votes
Accepted

What are the variables needed for describing Friction, Elasticity, magnetism interactions in a UI

I think you are talking about something which is available in jQuery, which they call "Easings" https://api.jqueryui.com/easings/ In this website the movement is communicated using a diagram which ...
SteveD's user avatar
  • 8,934
2 votes

Best practice for prototyping and making motion animations for iOS and android

Depending on the complexity of your animations, and the methods in which you used to create them, you'd be surprised as to how easy hand off can be. Since it's just micro interactions and a loading ...
user10111's user avatar
2 votes
Accepted

Can using animation positively lengthen the user journey

Nielsen and Norman have an exhaustive article on the use of animations -- I suggest you read that. There has been research done on loading screens and animations. For example, one study found that ...
Tin Man's user avatar
  • 2,814
2 votes
Accepted

Effective view switching when space is at a premium

You could use sectional tabs (as opposed to tabs at the top level) with an underline: If you feel the need for typographic balance, another option is to add a subheader over the contact section (not ...
Mike M's user avatar
  • 24.7k
2 votes
Accepted

Is it a bad practice to hide small blocks of content under a "see more" link/button?

It is not bad practice, it is called progressive disclosure. By adding progressive disclosure you avoid clutter and only give the extra information when the user wants and asks for it. Do you think ...
jazZRo's user avatar
  • 12k
2 votes
Accepted

Microinteraction and transition are same?

Microinteractions: Small "delightful" elements that are part of a whole experience. Note: Microinteractions often use transitions to show the interaction between the user and the system. Example: ...
Socrates Kolios's user avatar
2 votes

"Cut and Paste" in a tree structure

To fix the keyboard commands issue: Microsoft softwares generally allow the user to achieve things in three different ways. the keyboard shortcut (which you've already identified), a menu-bar ...
Roux Martin's user avatar
  • 14.2k
2 votes

Preferential behaviour for displaying empty row states

I would agree with Bharath Selvaraj, but I want to point out that the Hybrid Approach and Option 1 conflict with the expectation of how data is input in the UI from your example and Option 2. In the ...
M. Curtis's user avatar
2 votes
Accepted

range/single field switcher

I was about to comment on BrunoH's answer: https://ux.stackexchange.com/a/122001/98561, which I find a very nice and straightforward solution for desktop users as setting the sliders requires some ...
Mike's user avatar
  • 3,125
2 votes

How do you document and share motion/animation information with developers?

I have no idea about Zeplin but I use others like AE, Pixate and Flinto to make UX animations. When it's needed to tell our developers how my demo works and the effects I required, I recorded the ...
Danlin Chen's user avatar
2 votes
Accepted

Workflow/design pattern for allowing user to add multiple fields

You can minimize the form for each source once it has been completed. This way, the user will only see the list of all sources (type of sources) already contributed and one form for a new source. ...
celinelenoble's user avatar
2 votes

Interaction for dependent sibling input fields?

I think this might be a better solution, in this example you can select from either parent and either hide or show the available selections in a highlight, you could also provide collapse controls on ...
DarrylGodden's user avatar
  • 6,336
2 votes

User interaction for interdependent fields

One approach is to have the default filter set to the most common search, and have users be explicit about the starting dimension. In the sketch below, I'm suggesting some friction up front aiming for ...
Mike M's user avatar
  • 24.7k
2 votes

"Click here if you are not redirected automatically"

Create page that shows some message with two buttons: “Back to the form” and “Continue” The second button performs the manual redirection. Preview: It is also possible to hide the message for some ...
jiwopene's user avatar
  • 145
2 votes

What Micro Interaction to use When Hovering Over a Button?

You are correct that reducing opacity conveys a disabled state. Hovering should make a button appear more clickable, not less. If you want to convey a hover state with color, try the opposite -- aim ...
Izquierdo's user avatar
  • 12.8k
2 votes

What Micro Interaction to use When Hovering Over a Button?

Reducing the opacity on hover, when done carefully, can deliver good UX. I believe the intention behind reducing opacity on hover is to make the buttons appear brighter. But changing only the ...
Raiyan's user avatar
  • 511

Only top scored, non community-wiki answers of a minimum length are eligible