Mobile interface: How to highlight or pause a button select?


We have written a new mobile interface for a survey.  We are aiming for a fast, single click response approach, so that the User simply selects the answer and is then taken to the next question.  This is working well and we are quite pleased with the design of the interface.

The problem is that is that it is almost working too well.  As soon as the User selects the answer the next question appears.  There is no feedback to the User as to which answer they have selected and the only way to confirm is to select previous to check their response.  The change is so quick that some Users don't even know that it has happened and even worse click the same response again without knowing that it is for a different question.

The perfect solution would be to highlight the selected answer for a second (or some variable element of time) before moving to the next question.  I have attached a screen shots with 3 separate screens.  Screen 1 and Screen 2 show how the screens currently show as a User selects a response ("3 Satisfactory).  In the middle I have inserted an idea of how we would like the response fed back before automatically moving to Screen 2.

We are using Jquery with Twitter Bootstrap and Themeroller for the CSS.

Any suggestions or examples would be wonderful :)

Many thanks
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Rainer JeschorCommented:
sorry - no screenshots attached.
Second - it would be helpful to see the code.

Without the code just a textual possibility:
instead of directly executing the redirect to the next question, just add a class to highlight the answer and run the redirect through
setTimeout(functiontoredirect, 2000)

(somehow similar to this question:


Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Actually if all you want is a highlight and delay, you can probably do it without adding any scripting just use a CSS transition fired by using the click to change the class.  

However by not giving us code or a link you are just going to get guesses, and waste a lot of your time.

Chris_RyanAuthor Commented:
Thank you both for your advice.

We will try both approaches.

Kind regards
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today

From novice to tech pro — start learning today.