User Experience Stack Exchange is a question and answer site for user experience researchers and experts. Join them; it only takes a minute:

Sign up
Here's how it works:
  1. Anybody can ask a question
  2. Anybody can answer
  3. The best answers are voted up and rise to the top

I'm currently making an enigma machine in JavaScript (early working prototype here). I've now just reached the stage where I need to implement the plugboard.

Now the plugboard is a set of 26 sockets, one for each letter, that can be patched together with a cable, with the effect of swapping those letters around in the output. An example of a plugboard is here:

example plugboard

Each socket can only be connected once. (so if I connect D to E, then neither D nor E can be connected to again).

Now, the problem I have, is that I really don't know the best way to implement this in a user interface. I've thought of making each socket a select box, but I don't think that would be intuitive to use. directly representing plugs and patch cables would look quite messy, and would a nightmare to develop.

So does anybody have any ideas on how to implement such a plugboard in a web interface?

share|improve this question
up vote 3 down vote accepted

Dropdowns (or spinners) would be a fairly obvious choice. Change corresponding pairs together, so that if you link A to D, D gets linked to A.

The implementation problem would then be changing an already-linked D to link to (say) F: you would need to unlink it from A (so you get A↔A) and make a new reciprocal link F↔D. It would be easier to disable D's spinner when it's linked from somewhere else, so that the user would need to explicitly set A↔A before changing D; but that's not as intuitive.

You could use colour to show letters which are linked. (I'd suggest a single colour for "This letter is patched", rather than indicating each pair with a different colour.)


download bmml source – Wireframes created with Balsamiq Mockups

share|improve this answer

Your Answer


By posting your answer, you agree to the privacy policy and terms of service.

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