3

Background

I have limited experience in GUI design, but I have to produce a desktop application (Qt) meant for expert users (our own staff mostly). Its purpose is to read/write a large set of configuration parameters for some hardware devices. It does not have to look pretty, but it needs to have a reasonably efficient workflow.

The hardware is configurable at several levels in a tree like structure. All node instances at the same level have the same type of parameters. Most levels have around a dozen simple parameters (checkboxes, dropdowns, etc...) At the leaf level, there will be hundreds of instances.

Question

How do I best design my interface to support the following:

  • Display/edit the configuration of a specific node
  • Display/edit the configuration of all nodes at a given level simultaneously
  • Display/edit the configuration of combinations of nodes at a given level simultaneously

My attempt

For each level of the configuration, I made a panel with the parameters for that level, and a dropdown to select which instance of that level is "currently selected". The dropdown also has a special value to "select all" at that level. This allows me to see and edit the value for a specific instance. I can also set the value for all nodes using select all. I cannot however display a meaningful value when "select all" is active, which is an issue. Selecting nontrivial combinations of nodes is also rather time consuming as one has to manipulate multiple dropdowns. This is unfortunately a common case, because often a setting is good for 99% of the nodes but there are a few exceptions that need an individual adjustment.

Do you have any suggestion to improve upon this design? or something completely different?

Improve this question
1
  • You should include your design, it's very hard to imagine what you have done so far Commented Oct 26, 2023 at 17:07

1 Answer 1

Reset to default
1

I will try to take a shot at this and propose a solution.

First, I will make a few assumptions:

  1. You are designing for in-house experts, your main platform is desktop and you don't have to worry about responsiveness.
  2. You don't worry about the learning curve, because you can train your colleagues for how to use the interface.

Base on that, I would split the UI into 2 panels:

  1. Left-side panel would include the tree view, plus a toolbar.
  2. Right-side panel would include the details view, with editing behavior.

Left-side panel:

  1. It would have a tree-view component (like the one used for folders and files), but with a checkbox in front of each node.
  2. The user can select an individual node or expend/collapse to see the child nodes. When selecting a node, details panel will display all data for that specific node.
  3. The user can also select multiple nodes and detail panel will display data for all selected nodes.
  4. When a specific node is selected, all child/parent nodes would be disabled, so the user can only select other nodes at the same level. The user would have to deselect the node in order to select other child/parent nodes.
  5. There would be a toolbar on top of the tree view with some buttons:
    • button for selecting all nodes at the same level
    • button for deselecting everything

Right-side panel:

  1. It would display all data related to selected node or nodes. Data would be displayed as a form (labels on left, fields on right) and a "save" button would appear if something is edited.
  2. If the user deselects all nodes, details panel would be empty. Also, if there were any changes, they would be lost (or you can show a warning dialogue, it's your choice).
  3. When a single node is selected, details panel would display all data for that node as editable fields.
  4. If multiple nodes are selected, details panel would display some data as field, plus a summary note below with the aggregated values for all nodes. For example, if you have 5 nodes and a checkbox field, with 2 nodes being checked and 3 nodes being unchecked, it would display the summary note 2x checked, 3x unchecked.
  5. When multiple nodes are selected, the value displayed as a field would fallow these rules:
    • if all nodes have the same value, the field shows that value
    • if nodes have different values, the field is empty and required (save action cannot be done without filling this field)
  6. After saving the changes, all data in details panel would be updated and it would be 100% the same for all selected nodes. A success notification should also be displayed.

This would be the minimum implementation. I imagine there are other details that you will need to handle, like more buttons in left-side toolbar, or various fields in right-side panel.

Improve this answer
2
  • 2
    Thanks for your suggestion. I accepted your answer because I had in fact tried to implement something like this in the meantime, but could not get your 4) of the right panel done in a way that people were happy about. I ended up doing something else entirely, reversing the problem basically. I now show the all the values for one parameter displayed and editable "on the nodes", and then have a menu to choose which parameter to show and another to select nodes and groups. Maybe when it's done I can post it as an additional answer. Commented Jan 2, 2024 at 21:51
  • 1
    I think you can show your implementation by answering your own question :) Commented Jan 3, 2024 at 12:10

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.