1

The following device is a network switch.

This particular model contains 24 ports, arranged into 2 rows with 12 ports on each.

There exists hundreds of models of switches, each with different number & physical arrangement of ports.

enter image description here

I need to design a web interface where the user can choose to select multiple ports (& assign values to them in another part). This is what I have now for the port selection:

enter image description here

The problem I am facing is: I don't want the user to think that the UI represents the physical layout of ports on the actual device (because it may not always be the case)

How should I design the UI for this?

  • Building a customized UI for each individual model is out of the question. The only thing that can be easily done would be the number of ports, not the physical layout.
  • I could put a message on the UI explaining that the checkboxes don't reflect the actual arrangement, but I'd prefer the solution to be visual.
  • It doesn't necessarily have to be checkboxes. It just has to be a way to select none or multiple ports
Improve this question

1 Answer 1

Reset to default
1

Since you're worried about users making incorrect assumptions, it may be better to abstract away the physical layout entirely, and instead use something like a multiselect:

React-Select.js style multiselect showing no ports selected in one state, and ports 1 and 3 selected in the other

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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