1

TLDR: I'm currently using a contextual menu in a web app for a complex form, but it has limitations and I'm seeking alternatives

I have a very complex form which follows a non-fixed model. This means, the user can sometimes add new fields of the same type, or add new sub-fields. Plus, each field and sub-field have one or more actions linked to it (e.g. add new, remove, mark as stale etc).

In order to keep the form de-cluttered (as it can really get huge, and it is not possible to split it in parts as the user needs to be able to see the whole of it, my first idea was to use a contextual menu on some elements in order to make those actions available.

You can see how this form currently works in the part # 1 of the attached image. (This is a very simplified example, the real form is WAY bigger - actually composed by many of those forms where each form have much more fields than those shown in the sample picture)

current functioning of my form

The contextual menu, though, comes with some disadvantages, some of which are mitigated by the fact that the users get a training in how to use this web application (closed system that they use for work):

  • People are not used to contextual menus on web applications
  • This content is hidden, if you don't know that the menu is there you will miss those actions
  • Not all elements on the page have a contextual menu (even though if they do a different cursor is shown to the user) so the user doesn't even know where to right click
  • Even if there is a way for keyboard-only users to open a contextual menu, they will have absolutely no clue if the menu is available or not for a certain element

The advantage is, as I said, that the form is a bit cleaner so the user is less intimidated by it and can work in a more comfortable way. They need to check the form multiple times across fields before submitting, so it is important to have a layout as clear as possible. It is also important to show them as many field as possible in the smallest space possible so that they don't have to scroll up and down to find what they need.

Anyhow, we noticed that even some of our power users are totally unaware of some of the functions "hidden" in those menus, which is the main reason why I'm considering changing this approach.

As an alternative, I thought of having a 'classical' menu button that extends the same menu on hover or on click. Anyhow, having this button always present makes the form very cluttered (check part #2 of the image). Imagine going through this form 8 hours per day, your head will explode.

I thought about the possibility to have this button appear only on hover, but it would make the interface 'jump' a lot, and I'd possibly have to move some of the content in order to show the menu button (for example, I'd have to move the 'stale' label)

Other ideas I thought about is to have something as gmail for phones does (slide to show options 'hidden' behind the actual field) but this interaction would not really feel natural on desktop, and this web app is mostly used on desktop.

I thought about displaying on hover some icons at the bottom or right of the field but this still makes everything jump around. Furthermore, some actions (e.g. mark as stale) does not have an obvious icon to represent them.

Does anyone have any idea about how to solve this? Any existing pattern I could reuse?

3
  • I’m very interested about your comment that everything needs to fit on one page, which is simply impossible considering responsive design and zoom-levels for accessibility. I know from primary research that users comment on scrolling and might be put off at first, but I did not identify issues. Based on secondary research I believe that scrolling is not an issue and users are very well able to keep a map in mind. Have you actually identified issues in testing when scrolling is necessary?
    – Andy
    Aug 10, 2022 at 13:37
  • of course, adding a table of contents would probably help a lot, which could be another first column in koosvdolk’s suggestion.
    – Andy
    Aug 10, 2022 at 13:40
  • And, if verifying the whole form is so important, an additional required test step might be a good idea. Users find errors more easily if they have the feeling they cannot change it directly. They would print documents or export them to PDF to proofread.
    – Andy
    Aug 10, 2022 at 13:41

2 Answers 2

1

I think I would go for a side panel, something like the Wordpress Plugin Forminator (https://wordpress.org/plugins/forminator/):

enter image description here

See https://blog.hubspot.com/marketing/form-builder-tools for some other ideas.

-1

I think you have already thought this through very well.

I thought about the possibility to have this button appear only on hover

I think this suggestion can work if you make sure that no content jumps around if the menu icon appears. This pattern is pretty common. The icon should also appear if the field is focused (e.g. for power users that do not use a mouse)

1
  • We’re talking about a web app here, touch and keyboard control need to work as well if you’re out for good usability.
    – Andy
    Aug 10, 2022 at 13:31

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.