1

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

Improve this question
5
  • 3
    Why not just use a button below the loader instead? People don't generally think of loaders as clickable.
    – RobbyReindeer
    May 29, 2018 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, 2018 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, 2018 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, 2018 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, 2018 at 9:00

2 Answers 2

Reset to default
6

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
3
  • 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, 2018 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, 2018 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, 2018 at 8:09
2

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
3
  • 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, 2018 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, 2018 at 8:03
  • I second Rob. Sometimes the client is wrong. It's your job to sometimes tell them no.
    – Kelderic
    May 29, 2018 at 16:45

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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