I'm new to UI Design and I having a hard time designing a new Concept for a UI.

I can't give you full detail about what the application is for but it's basicly a production-planning-tool for electronic components. I have a specific amount of component (up to 11 based on the production machine capability).

Here is the current (IMHO flawed) concept: enter image description here

So you have a Hamburger Menu for Diffrent Settings (Memory, Processor etc.). Each Setting has a Detail View, each Detail view has a list with all Components (all 11 Components). Each Component has the same UI-Controls (like a Textfield or a Radio Button Goup)

You can edit 2 or more components at the same time by selecting them at the bottom (in the example you are editing component 1 and 2). All the textfields of the selected component would now change accoring to the one you are editing. Since an electronic component can (not must) be identically to another.

Now I have the problem, I need a concept for a new Detail View, in which you can select up to 4 different Processors for a electric component. 4 Comboboxes would not be enough because each processor have sub-settings. (baudrate, clock-speed etc.)

Is there any UI-Control or Concept which suits this case? I was thinking about a whole new concept like the Quartz Composer but I'm not sure.

In Short, I want to edit a Table with subtables. But i want the option that I can select 2 or more columns and when i edit the subtable in Column A it also should change the subtable in Column B, without confusing the user tooo much.

Is there some sort of concept for this case? I would be really thankfu for any form of advice.

Sorry for my bad english btw. I'm not a native speaker :)

  • your explanation is too much confusing plz elaborate it with short description or by giving one example. May 3, 2016 at 12:33
  • @JasminJavia 'Elaborate with short description' is like saying 'Please write a long detailed short description'. This is a tricky problem and Jack has done pretty good job considering the complexity.
    – dennislees
    May 3, 2016 at 13:09
  • Jack. 1) with the way things are set up in your mockup, if I start typing in the 'textfield' for Electrical Component 1, will that text start appearing in the text field for Electrical Component 2. Any change to one component changes all the others that are selected?
    – dennislees
    May 3, 2016 at 13:15
  • @dennislees Yes! That what i meant. (not exaclty, the text appears after hitting enter, but its kind of the same). This is the current state and i find it horribly confusing for the users. The thing is, that is not an entirely bad idea. Every Component does at least share on setting (sometime its the processors, sometime its the memory or in some cases the Cases etc.). I'm thinking all day about a better concept, but I'm lack of experience at this point.
    – Jack
    May 3, 2016 at 14:05
  • @JasminJavia I'm sorry. I know it is confusing, which is my problem in a nutshell. I want to make it way simpler (I'm the new guy, who must save the world). There are so many redudant controls. And I always think, there must be a simpler way.
    – Jack
    May 3, 2016 at 14:08

1 Answer 1


Add Another Master-Detail Level

I think you know the basic solution to the problem of adding multiple processors per component. In you’re your drawing, you have a two-level master-detail layout, where you show the components in the component pane for the current setting in the settings pane. Now you want to add a new processor pane to show the processors for the current component, making it a three-level master-detail layout.

Your problem seems to be the feature to make two or more components have the same field values (text box contents, combo box selections, whatever). As I understand the current design for assigning the same field values to multiple components, the user selects multiple components from the “global categories” pane. This essentially synchronizes the selected components so that any change to any field value in one component also changes the corresponding field values in the other components.

Improving Synchronizing the Editing of Components

Maybe the problem has nothing to do with adding a processor pane itself. Maybe the design for synchronizing component editing is just confusing, and adding any more complexity to the window drives the users over the edge. I can see why it could be confusing. Synchronizing objects in a table is a unique design as far as I’ve seen, so users are not likely to be familiar with it. Another thing that might be confusing is that the selection of components for synchronizing is visually separate from the editing of the components, so user may not intuit the relationship.

It might help to integrate the synchronizing of the components into the component pane. Instead of having a separate “Global Categories” pane, add a control to each component in the Component frame that synchronizes components together. Give all synchronized components a common highlighting or background shade to emphasize their connection to each other right where the user is looking when editing. With only a maximum of 11 components, you should be able to keep all components visible at once in the window, so the user can see at a glance which components are synchronized. However, you can add cues for synchronized components that have scrolled out of view, if that can happen. For example, you can add marks on or beside the scroll bar to show how many and where there are non-visible components in sync.

Which processor is synchronized with which?

On the one hand, adding processor pane shouldn’t change anything. When users synchronize multiple components, then changes to the processors are also synchronize, just like changes to field values are synchronized. On the other hand, I can see how it might be confusing: How exactly should processor editing be synchronized?

For example, suppose one component has processor types A, B, and C, while another component has processor types B, D, and E. The user synchronizes the two components and, for the first component, changes processor B to F. What happens to the second component? What are the rules? Does processor D change to F? Does changing the second processor in one component change the second processor in the other? Or does processor B change to F? Does changing one type of processor change the same type of processor in the other component(s). Does the order of the processors mean anything or is it arbitrary? Does order change with user-selected sort order? What if there are no processors of the same type in the two components. What if there is more than one?

Only user research will tell you the right answer. Or user research could tell you there is no answer. Maybe there are no rules that users will intuitively anticipate and agree on. If that’s the case, the solution may be to abandon the synchronizing of components for editing. You need to find another way to conveniently make two components share the same field values and processors. This might be a good idea in any case if users find component synchronizing confusing even after you improve the design.

Alternatives to Synchronized Editing

Component Number. If the components generally are identical on all field values and processors, the simplest solution may be to add a “number of components” text box or spinner to each component row in the component pane. Users enter field values and processors, and set how many components they want like that from 1 to 11. This makes for a more compact display of components (since there are no duplicates displayed), and users can easily detect when identical components are and aren’t used (as opposed to looking at components field-by-field). There’s late commitment: users can decide to have multiple identical components after they’ve started entering field values (in case they forgot or haven’t decided until then). They can even wait until the next day to decide.

Multi-attribute Selection. Allow users to copy and paste (also drag and drop) whole field values from one component to one or more other components. Allow user to select one or multiple field values (by control-click or drag-selecting), and entire components or processors. Users can then create a component they want (with any number or kind of processors), then copy part or all it to other components. This is slightly more work for your users than your synchronizing feature, but it has the advantages of late commitment (users can decide to match up field values after they’ve done some editing on one component), and is less error prone (users don’t have to remember to “turn off” synchronizing when it’s time for components to be different from each other).

Duplicate dialog. Have menu item that opens a dialog box for duplicating a component. In the dialog, the user checks the field values and processors to duplicate. By default, perhaps all are checked. This is more work and not as flexible as multi-attribute selection. It only works for creating new components that are similar to an existing component, so it’s not for changing one existing component to match another on certain field values. And you can’t make a component match a combination of field values from two or more other components (something not even synchronized editing can do). However, it’s more discoverable than multi-attribute selection.

These alternatives can be used together.


FWIW, my written English is no better than yours, and I am a native speaker.

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.