0

To add an entry to the table, a user must fill out the form above and click the Take it button. He can also edit an existing entry by clicking on the pencil. How can you best signal to the user that this data record has then been loaded into the form above in order to be able to edit it?

Is this an understandable operating concept? Are there any other disadvantages?

Wireframe with Fomular above of a table

[EDIT 1 from here] Okay, my problem is a little bigger. I clarify my question. I am already in a modal window for editing the article data record and have to create several conditions again. And I don't really want to put a modal window on top of a modal window.

Wireframe with Fomular above of a table in a modal window

4
  • Is the pattern that the user selects an item BELOW in the list, then it populates ABOVE to edit? Also, is this constrained to a specific viewport (desktop, mobile)?
    – Mike M
    Dec 13, 2021 at 17:06
  • @MikeM: Yes. I want to use it for the desktop.
    – Jean
    Dec 13, 2021 at 17:17
  • Is there also a way to ADD a new item to the list? What does the action TAKE IT do?
    – Mike M
    Dec 13, 2021 at 17:25
  • Yes, an new item can be added with the Button "Take it". This is a bad translation for the german word "Übernehmen". In english it would be better to use "Add". You're right.
    – Jean
    Dec 13, 2021 at 20:09

1 Answer 1

0

Leverage common patterns whenever possible; users come to your application with lots of shared patterns from other sources.

The form above (current) approach: Is there a specific reason to use a vertical pattern?

Going from detail to list vertically tends to confuse which elements are grouped together. We often approach a list first for what's already present, then make decisions as to Add a new item to the collection, or edit / delete what's there already.

Since most desktop viewports are wider than tall, making a vertical add pattern tends to be confusing for several reasons:

  • The value of the list is to show all elements already created, and to quickly search for a particular item or value. Putting the list below the list will push down some of the elements.
  • The action buttons such a Take It and Clear Fields look like they belong to the table (which is a common pattern)
  • There's also not an obvious way to abandon an edit. 'Clear fields' is different than Cancel. There needs to be an exit that reverts any edits to the pre-edit state. 'Cancel' is a common label for this.

A list detail pattern on desktop using a panel

Try honoring the list and provide a quick way to edit in place by using either a dialog or sliding panel. It's a common way to add or edit items in a collection.

enter image description here The panel comes in from the side when editing or adding a new item:

enter image description here

Now if there's a sub object (the conditions), focus their attention by drilling into a condition detail:

enter image description here

8
  • Okay, my problem is a little bigger. I clarify my question again above.
    – Jean
    Dec 13, 2021 at 21:41
  • are the conditions similar to a sub-object for the instance you're creating? It seems like you have to do a drilldown while editing to add/edit a condition, and save that
    – Mike M
    Dec 13, 2021 at 22:11
  • Conditions are price conditions that are negotiated with a supplier for each article. What do you mean with drilldown? There can be several conditions per article. For example, a discount from a certain purchase quantity.
    – Jean
    Dec 13, 2021 at 23:12
  • 1
    @Jean I've updated my answer to allow for a drilldown pattern within the panel, so things don't feel like they're stacking on top of each other. This can scale, because you can pin the save buttons to the bottom, and allow vertical scroll in the case of long forms.
    – Mike M
    Dec 14, 2021 at 0:16
  • 1
    Okay, thanks for your answer. I'll leave the question open for a few more days to see if anyone has another idea.
    – Jean
    Dec 14, 2021 at 17:19

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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