Tell me more ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.
up vote -1 down vote favorite

I read in Designing Visual Interfaces by Kevin Mullet that 3D buttons afford the possibility of being clicked or pressed by the user. After being mindful of this for some time, I noticed that I feel compelled to click when the mouse hovering presses the button down.

Hovering press examples

Example of a menu popping forward to afford the possibility of pressing,

Does the menu popping forward afford the possibly of "press here" to you? I'm trying to lessen the user's cognitive load and make the experience as pleasurable and usable as possible. Do you think the buttons on http://hemakessites.com/nav are more effective? On the flip side of things, Jakob Nielsen says people generally perceive animation as "cheap." Maybe I'd be better off using the solid, hefty navigation at http://usability.gov/basics/index.html (with no roll-over or click effects).

Users for my website will be people who want to buy need finding, usability tests, design reviews, information or visual design.

Thanks :)

Designing Visual Interfaces by Kevin Mullet

Jakob Nielsen recommends Designing Visual Interfaces here, http://www.useit.com/books/visualbooks.html

Whitney Hess recommends Designing Visual Interfaces as well as a great list of starter UX books here, http://whitneyhess.com/blog/2009/06/30/so-you-wanna-be-a-user-experience-designer-step-1-resources/

share|improve this question

closed as not a real question by Ben Brocka♦ Dec 18 '12 at 22:30

It's difficult to tell what is being asked here. This question is ambiguous, vague, incomplete, overly broad, or rhetorical and cannot be reasonably answered in its current form. For help clarifying this question so that it can be reopened, see the FAQ.

2 Answers

up vote 3 down vote

Animation on mouseover is tricky because that affordance doesn't transfer over to touchscreens, so you have to design as though that affordance isn't always available.

I prefer animating on clicks and page transitions, because they give the impression that a user's actions have triggered a change.

Also, with all respect to Jakob, animation feels cheap because it's really easy to do animation wrong. I don't like the "popping forward" demo you linked to for that reason, because it's sudden and jarring and feels like the button is desperate for attention. Animation is good when animation is subtle and smooth, which for most designers means "less is more".

share|improve this answer
That's so interesting. Thank you Rachel :) Welcome to the site! What was your impression of the white buttons with the shadow that get pressed when hovered over? hemakessites.com/nav – Tyler Langan Nov 20 '12 at 4:43
Stuff that depresses when moused over is fine, but your demo is still pretty jarring. Have you looked into CSS3 Transitions? It'd help smooth things out. – Rachel Keslensky Nov 20 '12 at 4:49
(it won't let me edit my comment with this update) Lol now that you personify them like that, I can totally see what you're talking about. Maybe this can be a nice effect to have up my sleeve... to be used ironically, sarcastically or boldly. – Tyler Langan Nov 20 '12 at 4:50
I just had to do some transition work for a client recently. I used javascript instead of css for some reason. I have no idea what that reason is but people were saying it's better to use javascript/jquery over css for transitions. – Tyler Langan Nov 20 '12 at 4:54
1  
Probably because Javascript is supported by all browsers as opposed to just the modern ones. It's like using images instead of CSS3 gradients when you need a stripe -- both work, but one has superior load times and the other one is backwards-compatible. – Rachel Keslensky Nov 20 '12 at 14:24
up vote 1 down vote

Does the menu popping forward afford the possibly of "press here" to you?

Yes, but if the item has the more conventional indications of clickability it doesn't need any more affordance. It seems like an overreaction to a casual/inadvertent mouse move and is needlessly distracting. These kinds of things I put in the category of gratuitous special effects, and shout "amateurish design". Some special effects/animation/motion can be useful and engaging, but you should be careful not to cross the line into gratuitous. When in doubt err on the conservative side.

Alternatively you could push the gratuitous motion and tackiness to the point where it becomes a comedic caricature. ;)

share|improve this answer

Not the answer you're looking for? Browse other questions tagged or ask your own question.