4

I've been trying to build a configuration screen for a network appliance that needs to be configured by the user and has multiple parameters that each influence the max values of the others. The user may only have the requirement for one or two of these values and the others should be auto-optimized by the system.

I want to make the interdependence clear to the user and give him the freedom to set the values, but also allow him to have the system auto-calculate the ones he didn't adjust.

Is there an established pattern for such a scenario?

A very preliminary visualization of the problem: enter image description here

Thanks a lot!

|improve this question
  • is there a base state, such as 'good / bad' in which the system is either in harmony or out? And, how many dependent system variable are there, and would exposing them confuse the customer? – Mike M Jun 24 at 20:49
  • Well, the only two states are: The configuration is valid (the sum of the parameters does not exceed the capacity of the system) and The configuration is invalid because the sum of the parameters exceed the capacity. The dependent variables are Latency, Packet Size and Retransmissions. Increasing any of these increases the demands on the system. Does that help? – Grinner Jun 24 at 21:27
  • "sum of the parameters" – 500 + 60 + 6 = 566 = good. 500+60+10 = 570 = bad. 500 + 70 + 0 = bad? 500 + 50 + 16 = 566 = good? – 習約塔 Jun 24 at 23:20
  • "capacity of the system" – Not helpful because it is vague, variable, and unknown to the user. – 習約塔 Jun 24 at 23:20
  • The formula to calculate the capacity is quite complicated and thus unhelpful, I agree. – Grinner Jun 25 at 6:48
8

Show a current state of the systems capacity, and update the pane as they tweak the thresholds.

If you can show a base setting, either by a % of capacity, or a binary state, you can allow this pane to adjust as the thresholds are adjusted.

If their changes are within the bounds of the system capacity, you can surface the Save button, or cancel their changes.

Keep the system status visible

This is one of the 10 usability heuristics from Jacob Nielsen. It's been around a while. It's not a specific pattern but a series of principles.

The first is Visibility of system status

The visibility of system status refers to how well the state of the system is conveyed to its users. Ideally, systems should always keep users informed about what is going on, through appropriate feedback within reasonable time.

enter image description here

Update: responsive concerns

You indicated your team is looking at applying this to small viewports.

Since the most important information is the current system status, you can place that on top. One issue you might have to revisit is the sliders, which can be difficult to adjust (more so on mobile). You could emphasize the text input in this case.

While mocking this up, I realized that even for your desktop version, you could swap out the Current settings pane with the adjustment pane, so the first thing the user reads is the current setttings.

enter image description here

|improve this answer
  • 2
    I love the way you include sticky notes in your answers. – Levano Jun 25 at 9:36
  • Thank you for both questions and answers quality provided on this forum. However, we have a further question on behalf of this answer. How should we adopt this strategy if we would like to have a responsive solution also? – Francisco Maria Calisto Jun 25 at 12:44
  • 1
    @FranciscoMariaCalisto I've updated my answer with a consideration for smaller viewports. It places the current status top and center. – Mike M Jun 25 at 13:22
  • Again, thank you @mike-m for your appreciation. However, it has exactly the issue that we were thinking on. As you convert the pattern strategy for a responsive display, the solution is converted to an unsatisfactory solution. For a responsive display, we believe that an appropriate solution should be vertical components of the User Interface (UI) instead of as is. – Francisco Maria Calisto Jun 25 at 13:29
  • @FranciscoMariaCalisto are you saying you'd prefer to stack them vertically side by side? – Mike M Jun 25 at 13:38
3

Some options to consider:

  • Include some explanatory text. What are packet size, latency, and retransmissions? Why would someone want to use higher or lower values for each?

  • Make the rule explicit. As it is, I don't see why 60ms latency with 6 retransmissions is good, but 10 retransmissions is bad. Include the formula if you have to. Something like "capacity of the system" is not helpful because it is vague, variable, and unknown to the user.

  • If the rule is too complicated, you could display a "health" gauge that changes color from red to yellow to green, like password strength indicators some sites use.  When the indicator turns yellow or red, there could be an accompanying message suggesting fixes. The gauge should give users an idea of how close they are to choosing acceptable settings.

  • Include visual indicators of dependency, such as indenting or tree structure. The mock-up looks like these are three completely independent settings. If they're related, but not dependent, you could group them together within a frame.

|improve this answer
  • 1
    Thanks for your suggestions! There will be general tooltips next to each setting, but I was looking for a visual cue. I also can't really expose the formula because it's quite complicated and thus won't be helpful either. The three settings are not in a direct hierarchy to each other, so a tree structure doesn't really apply unfortunately. – Grinner Jun 25 at 6:56
  • 1
    Somehow I got the word "dependent" in my head. To show they're related, you could put them together within a frame that is set off from other options. You can show problems with settings using a color-coded "health" indicator, like what some sites use to show password strength. When the indicator turns yellow or red, there could be an accompanying message suggesting fixes. Only green settings would be accepted. – 習約塔 Jun 25 at 7:35
0

Thank you all for your input! I have devised a solution that uses a system indicator (unfortunately I can't simply ask for a system capacity in %, only good or bad).

Also, I can ask for the maximum settable value of each specific parameter, so using that I built sliders that have hard gradients as backgrounds showing the acceptable limits.

A jsfiddle is worth a thousand words, so here it is (the buttons seem not to work in jsfiddle, but they do normally):

https://jsfiddle.net/grinner/rLju4o2p/

|improve this answer

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.