Designing interface to accommodate physical devices with different number & layout of ports
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.
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:
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