I'm creating a GUI for a program which maps keys from an external device to keyboard keys.

The process is:

  • [Waiting for keyboard key] (Shows a blank key)
  • Press a keyboard key (Now blank key has what was pressed)
  • [Waiting for external key press] (Show a blank button, and that they are unlinked)
  • Press an external key (Now blank button shows what was pressed)
  • [Show that they are linked]

Here's the layout, showing the blank and non-blank buttons:


What I need is something for between those objects.

So, the user would see the light gray, then light gray with A and dark gray, then the bottom image.

What I want to convey is that they are unlinked in the stage where it has light gray with A, and dark gray, and that they are linked when you have the bottom image.

Even better if the "linkage" shows that the circle is connected to the square, since pressing whatever the circle corresponds to is the same as pressing whatever the square corresponds to.


  • welcome to UX, is the external device like a game pad or controller? Commented May 16, 2015 at 2:22
  • @BobSinclar, Yes.
    – David
    Commented May 16, 2015 at 2:31

1 Answer 1


What I would do is show the controller or whatever the external device is. Then grey out every button minus the botton you are mapping. Then show a keyboard below it. As you animate the pressing of the 0 button on the external device/controller , animate the pressing of the A button on the keyboard with everything greyed out.

Do the same for all the buttons on the external device.

Sadly this may be more work but i think the mapping is very clear and there is little left to interpretation.

You possibly could take a shortcut and put two columns like you have with titles called keyboard key and external controller button and tell the user that the left maps to the right. Then possible give them either a tool tip or a snippet describing where that button resides in the external controller if users may not be familiar with its shape and the location of all the buttons.

  • At this point, I don't know what the controller will look like, hence the very simple design.
    – David
    Commented May 16, 2015 at 2:35
  • That's very difficult without some special mapping I might revisit this once you have that. Take the n64 telling them the Z button maps to the space key would be almost useless because how would a user know to flip the controller over that it resides on the back. Commented May 16, 2015 at 2:49
  • See my edit of my answer though I prefer my originally idea though it may not work in your situation. Commented May 16, 2015 at 2:50

Your Answer

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

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