I am working with a complex system which will have a lot of different long forms.

I did this first prototype and I would like to know what you think.


Adding a new employee

I updated the design adding the collapsed sections. Also, for the completion bar, what I am doing is using color, blue for the parts that have been completed and light gray for the ones that are uncompleted. When the user mouseover over the bar will reveal the exact completion percentage.

Adding a new employee Version 2

closed as off-topic by Joel Tebbett, Matt Obee, Devin, Ken Mohnkern, Midas Aug 19 '17 at 5:48

This question appears to be off-topic. The users who voted to close gave this specific reason:

  • "Questions about Site Reviews are off-topic because questions here are expected to be relevant for a variety of people in the same situation. Reviewing a site, flow or interface only helps one person at a specific time. Instead try to ask a focused question about a particular aspect of the design that solicits solutions, not opinions." – Joel Tebbett, Matt Obee, Devin, Ken Mohnkern, Midas
If this question can be reworded to fit the rules in the help center, please edit the question.


First off it is a nice clean design.

However I'm going to present some counter opinions.

I'm not a fan of the collapsible sections.

  • If they start collapsed then the user has to take an extra step to expand then to do their work
  • however if they start expanded, I don't see the benefit in closing the sections (and thus even providing the option)

The caveat would be if the sections are drastically different, accessed by many users and thus each may want to hide the sections they don't care about.

The progress bar is neat, but if it isn't for a multi step form split across screens (where knowing how far into something you are is important) then I think it is actually just visual noise.

Eg the user's task is to fill in the employee form... I don't think part of the way through they are wondering... "I wonder, am I 67% the way through this form?"

In my experience the user's main goal is to complete a form as quickly as they can so they can do whatever it is they need to do next. Everything we can do to simplify forms making them quick, easy & clean is what improves their user experience.

  • 1
    Thanks. My idea for the collapsible sections is to add jQuery so as the user scrolls down they will expand automatically. I agree with you that the progress bar if it is not for a multi-step form, is just becoming visual noise. I will delete it. – Leo Aug 20 '17 at 4:30

Cool idea for the progress bar, Leo. I love seeing innovation in UX. And the vertical format lends itself, literally, to the progression of the page workflow (up and down).

Do you have to consider mobile browsers too? If real estate gets tight, you may have to just allow plain-old-text do it's job without any visual representation. For example, simply add text to the Page Title Bar.

enter image description here

  • Thanks, you are right, for mobile I will need to come up with just a regular completion bar on top. – Leo Aug 18 '17 at 17:42

Oh man, this thing looks like it will take some time. I think you're off to a great start!

One small suggestion I have is that I believe you should start the form sections in the collapsed state instead of open. This would just allow the user to focus on one at a time and looks less intimidating.

Also, your progress bar confuses me a bit. Are those three sections a total of 5%, or just the General Information tab? Or, is my name and ID what makes up the 5%? Maybe take some time to figure out the best approach in tracking the progress.

Personally, I would introduce a check icon/alert to notify which section or question is completed and revealed on the progress bar.

  • Thanks a lot for your positive feedback. Yes, I agree I will collapse the other sections to allow the user to focus on the one that he is working on, and as he scrolls down maybe they will expand automatically. On regards the icon alert, I agree, that will make the whole experience easier and rewarding for the user. And for the progression bar, I will think of something else to make clear what has been completed. Thanks again. – Leo Aug 18 '17 at 17:40

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