I've got a page editor that gives users the option to indicate their progress. I've got a couple options I'm considering pictured here, but the problem is indicating to the user that they need to choose the current step of their progress. Apart from underlining the words what can I do to indicate that these are essentially radio buttons.

enter image description here enter image description here

  • 1
    If I understand your situation correctly, you can start from "Complete", then go to "Mockup" and finish with "In-Progress"? I'd rather opt for progressing linearly through the steps, thus Next/Previous buttons should be enough. – Mike Mar 2 at 8:48

If I understand you correctly, the progress is supposed to indicate the current status, rather than the kind of progress you see in a multi-step form (which your arrow design is implying). In that case you could highlight the current status of the page and allow people to freely alter it.

enter image description here

If you are able to go back and forth between pages (and the content changes), you should not use checkmarks. That implies the step is done and cannot be changed. Your arrow design should suffice in this case. Keeping the arrow white and only highlighting the current step should be enough to convey clickability. If the steps are conditional, grey out the future steps until it's possible to backtrack to it.

enter image description here enter image description here

  • Thank you! Any suggestions on creating such elements using CSS? I had to use pseudo classes and borders to create that shape, so using that method I'm unable to create bordered elements like your illustration. – Hawkee Mar 2 at 14:11
  • I admittedly don't know much about coding, but would a svg help in such a situation? – Wanda Mar 2 at 15:45
  • @Hawkee you may use any of the CSS frameworks like bootstrap, materializecss or one of the others as you may find many more. They're so many different type of components comparingly similar what you're looking for. You'd better at least take a look at material design guideline – Erhan Yaşar Mar 2 at 16:23
  • @ErhanYaşar Thank you. Yes I am referencing the material design guideline. That is why I am considering the stepper instead of these arrows. It's actually quite a technical challenge to create responsive arrows such as those illustrated above. – Hawkee Mar 2 at 16:33
  • I suppose you're a better developer than me and you can get what you with a few changes to this jsfiddle @Hawkee – Erhan Yaşar Mar 2 at 16:43

mockup

download bmml source – Wireframes created with Balsamiq Mockups

You may display as a radio button directly under these texts which seems more proper and suitable to your upper illustration.

-------------- 1 ----------------------------- 2 ---------------------------- 3 ------------------

------- Radio Mockup --------- Radio In-Progres -------- Radio Complete -------

Edit: UI wireframe added since it wasn't applicable with the computer I'm working on during the time of reply.

I agree with Mike's comment, add some buttons that indicate that the user can progress by selecting them.

They can either select the buttons on the bottom or the progress bar.enter image description here

Your Answer

 
discard

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.

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