7

I have an editor on my Material-based site that lets users edit entity data. Each item might have a large number of key-value pairs, only a few of which are required, and I'm trying to surface the most commonly used ones near the top, but I still quickly wind up in Your Company's App territory.

I've seen this older question on SO about fieldset in Material forms, and am planning on taking an approach along the lines of this example from that question's sole answer as a starting point. Flat organization will still result in an editor that might scroll for several pages, though. I'm afraid it wouldn't make sense to use a Stepper (or possibly Tabs?) either, since a user popping in to edit one field shouldn't have to click through several mystery pages to figure out where the thing they're looking for might be.

Am I right to try to make sure that all the fields stay on one page? If so, does Material have an opinion about how to make my wall-of-fields less off-putting for the user?

Improve this question

1 Answer 1

Reset to default
2

I would follow general usability guidelines about grouping form elements, but style them with material design.

A Stepper is not suitable for your purpose, but tabs generally represent different perspectives in the same workspace, or different sections, and a tabbed interface would allow your users to toggle between sections (unlike the stepper).

From Jakob Nielsen's article, Tabs, Used Right:

Use tabs to alternate between views within the same context, not to navigate to different areas. This is the single most important point, because staying in place while alternating views is the reason we have tabs in the first place.

Logically chunk the content behind the tabs so users can easily predict what they'll find when they select a given tab. (Card sorting is one option for researching this “mini-IA” problem. If you don't find clearly distinct groupings, then tabs are likely the wrong interface control for managing your content.)

Use tabs only when users don't need to see content from multiple tabs simultaneously. If people do need to compare the info behind different tabs, then having to switch back and forth puts an added burden on their short-term memory, increases cognitive load and interaction cost, and lowers usability compared to a design that puts everything on one big page.

Design tabs that are parallel in nature. If the tabs are significantly dissimilar, users will interpret them as site navigation.

Improve this answer
2
  • 1
    I haven't spent enough time with the data to group the fields with any confidence, but it's early days so I can try a rough cut and iterate based on user feedback. I'm still a little concerned that the user will miss a field they meant to fill in because they didn't notice it tucked away on a different tab, but I guess I'd have the same problem if it was way down the scrollbar...
    – Coderer
    Commented Dec 8, 2017 at 12:29
  • if they haven't filled in a field that is required, you could catch that with an error message and focus on the field and switch to the tab that it's in (though it sounds as if you don't have required fields as such)
    – Yvonne Aburrow
    Commented Dec 8, 2017 at 13:30

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.