I currently have a web form that is designed for full screen desktop/laptop/tablet displays. As it is a multi-step form, there is a progress progress tracker at the top of the page, highly designed and taking up the full width of the page.

I'm now looking at making the form mobile friendly and looking at the best way of making the tracker mobile friendly. Is there a best practice route for progress trackers on mobile screens, or anyone know of examples of good UX design in this area?

  • i used a good approach to my designs for a recent project and it was sleek and cool, i think you should implement it.. Jquery Circle Prograss bars..... go though the tutorials and see, very clean, flexible and efficient...
    – Ande Caleb
    Commented Aug 4, 2015 at 12:04
  • interesting... maybe i post my approach, how i utilized the link rite...
    – Ande Caleb
    Commented Aug 5, 2015 at 10:49

1 Answer 1


Since horizontal space is limited, a vertical progress tracker might scale well in a mobile device as shown below.

enter image description here

If the number of steps you have is less you can still keep a horizontal progress tracker but remove the text below it and use the title text as an indicator as shown below

enter image description here

That said I am not a big fan of this since there is no textual indicator what the previous steps were.

Another alternative is how this USCIS tracks a multi page entry

enter image description here

  • I dig these options! Great answer!
    – SerenS
    Commented Aug 4, 2015 at 19:28

Your Answer

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

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