Please can anyone guide me through this?

How can i improve the user experience of this area to make it look clickable in both mobile and web view. I tried using glowing borders but in mobile it does not work. This is a loader which displays progress but its completely clickable. Requirement of client is to not use button for clicking purposes.

enter image description here

  • 3
    Why not just use a button below the loader instead? People don't generally think of loaders as clickable. – RobbyReindeer May 29 '18 at 6:34
  • @RobE I agree, but is it a loader or a progress indicator? Ollie, you may want to edit your question to provide some more context. – Monomeeth May 29 '18 at 7:00
  • @Ollie Many times it happens that users/clients don't know what they want. it is your job to give them suggestion to make the better user-experience. – Nilesh Mahajan May 29 '18 at 7:40
  • @NileshMahajan I agree with you, that's why i suggested them a couple of ways but they were not satisfied with them. That is why i am seeking help in this case – Ollie May 29 '18 at 7:49
  • @Ollie did you put your suggestions with proper justification and evidence, such as an analytical study which shows users responses towards buttons vs progress bar. in this particular case it will be very helpful. – Nilesh Mahajan May 29 '18 at 9:00

Progress of the challenge itself should not be clickable. The image you have attached gives me the notion that you are currently showing the progress of challenge 1. The progress itself cannot be made clickable. Instead you can provide a button just beneath the progress bar which can take us to challenge itself.

Wireframe is attached:

enter image description here

| improve this answer | |
  • First we were doing this in the same way as your attached wireframe but requirement changed and they asked to make whole progress area clickable by removing button. So after removing button, sense of clickability vanished in mobile view. In webview, it somehow gives the indication that it is clickable – Ollie May 29 '18 at 7:17
  • @Ollie You can add supporting text inside the progress bar such as "Continue Challenge". Visual feedback for the text can be provided through animating colors. – Sheraz May 29 '18 at 7:32
  • 1
    this is informative. I will implement this and will see how it works out for me and client – Ollie May 29 '18 at 8:09

My experience would be improved if you would use colors with better contrast to the background so i can actually read whats going on.

You need to add a button/text which indicates its a clickable area "Open challange" or something similar.

| improve this answer | |
  • In background, we are using images. I can use different color text to make it more readable but issue remains same. We cannot add buttons as it was removed by client. – Ollie May 29 '18 at 7:20
  • 1
    @Ollie, well tell your client that you have a bad product then. In my experience you should always challenge a client when they want something changed. Ask them why, it's your job to show them that their assumptions are just assumptions. – RobbyReindeer May 29 '18 at 8:03
  • I second Rob. Sometimes the client is wrong. It's your job to sometimes tell them no. – Andy Mercer May 29 '18 at 16:45

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.