Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

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?

share|improve this question

1 Answer 1

up vote 5 down vote accepted

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

share|improve this answer
1  
Nice ideas - thanks –  John Mar 13 at 10:31

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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