1

There are different Design Patterns to indicate something was clicked depending on whether it's text (changing the link color) or an image (special clicked picture).

I'm looking for an effect that will work well with anything (text, symbols, graphics, photo).

I've got a button with text and images on it and an outline.

I'm considering the different Patterns to indicate the button was pressed.

I"m thinking the most universal (and easy to implement, requiring on special versions of the graphics) would be: Show the button outline as beveled in so it looks like it's been depressed and move the contents of the button down and to the left a few pixels.

Update

The goal here is to make sure that the user always gets immediate feedback when they have successfully touched the button.

Use Cases

  1. User accessing this web app via Touch Screen and sometimes touches too quickly and thinks they have touched long enough. They then wait for the app... to do nothing.
  2. Internet connection is slow and the the app is slow to respond. So when they touch the button, they get no immediate feedback that they've touched it.
1

My suggestion would be to go for a visual indicator which informs the user that the interaction is happening. An excellent visual indicator would be these progress buttons

enter image description here

The loda buttons are also a good example to show the progress when you are not sure about the exact time which is needed to highlight that the interaction is taking place.

enter image description here

0

I'm wondering why you need this feature.

If you want to indicate the user has seen information "behind" the button, it's navigation and should not, IMHO, be a button, but rather a link.

If it changes some state (toggling something on or off), it should also probably not be a button, but rather a checkbox or radion button group.

If it's a function (processing), it's a button, but why do you need it to indicate it has been clicked? If it produces results (like "+" on a calculator), the user sees the result. If no results of the processing can be seen nowhere (except the "clicked" button style), something else is wrong, I think.

Maybe you can extend the question to explain where you need to this feature.

  • Reasonable questions. I updated my question to address those. – Clay Nichols Jun 12 '14 at 13:41
0

To address your updates:

  1. The button doesn't need to give the feedback. If the button produces a result (like something loading as you mention), you should show a spinner to let the user know that A) they did click the button & B) that something is loading.

  2. If you're on a touch device, hover styles do still apply. So if you touch a button & there is a darker color on hover, it still shows up. Again, if the button loads something on touch/click, you should show a spinner which would appear regardless of laggy connection.

  • what is there is (occassionally) a long delay (5+ seconds) between the click and...say.... loading a new page (that the click triggers) – Clay Nichols Sep 12 '14 at 14:49
  • Why do you feel that a loading spinner is not a solution here? To get technical, you use simple AJAX to show the spinner until the success event which would be the loading of the page. This is an incredibly common scenario in every app/website & the most common way it is handled is with a spinner. – Angela Smith Sep 13 '14 at 15:42
0

Most UI frameworks have evolved rich "malleability" feedback. So try and use the platform behaviours as consistency supports better UX. As example Google "Material Design" has a material response section explains their approach well.

What you really should avoid is using is the "touch" feedback to mean same thing as "busy processing". They are not equivalent. For example if application uses a "button down" effect as meaning "app is waiting for network", then to a user this "button that sticks down" for a while is likely to be interpreted as one of the (a) UI library is buggy (b) the graphics library is very inefficient or (c) the app is broken.

User should receive an explicit display for "application processing your request" separate from an interaction feedback. Such a communication could be via spinner, message, blank page with watermark, light-box, wait cursor, etc

To avoid interactions that normally appear to be instantaneous generating a flickering effect don't always display a "please wait" indicator. Only display the indicator when interaction experiences a delay when delay happens. From the study Nielsen's Response Times: The 3 Important Limits this would be greater than 0.1 seconds but less than 1 second. If framework is responsive I'd target 0.350 seconds.

  • That's a good point. One issue with a web app is that sometimes we get a slow down for 5 or 10 seconds. It' rare but it happens. So I dont' think we want to show some sort of indication of "thinking/processing" (b/c most of the time it'll just flicker on and off). But if we do give them feedback that "yes, you touched this button" and there is a slowdown, I think it's better than not showing that feedback (which might lead them to think they hadn't touched it and then they get "elevator button" syndrome : I'll press it again, and again til it "takes" which can cause other problems. – Clay Nichols Sep 25 '14 at 22:46
  • Indeed one would want to avoid flickering with mostly instantaneous interactions. I have updated answer about that aspect. But key thing that I'd note is that the "touch registered" and "application busy working" (i.e. not frozen) are conceptually NOT the same thing to the user. Trying to use same feedback mechanism could well be confusing. Which would explain "elevator button" syndrome: "Yes, button clicked, but system could provide a count down to when doors will close and I'll be on the move" – Jason A. Sep 30 '14 at 9:32

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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