I'm currently designing a UI of which will eventually control real world machinery. Due to this, a portion of the controls will eventually represent real world positions of the starting position, I have the following as a mock of what I believe to be an okay representation of this which the user should instantly recongise about their specific machine.

I am slightly against using text, as theres an established userbase whom have seen this control throughout our previous iterations, but this design is lacklustre compared to the newest look&feel update I'm applying.

enter image description here

Top left represents the back left of the machine etc.


Is this a good method of representing the previously mentioned (real world position). Is there a better method of showing this?

  • 1
    Reminds me a lot of the burner labels on my oven. Next to each knob 1 circle out of the 4 is filled in just like that representing which burner it affects. Seems to work fairly well for me.
    – DasBeasto
    Commented Aug 18, 2016 at 19:32
  • If you are going to do this, PLEASE offer some means of orienting the diagram! e.g. with light switches, are the switches on the left representing the lights as you look at the plate on the wall, or are they representing the left as you turn around and face the room? Or perhaps it needs to be rotated a multiple of 90degrees?
    – kwah
    Commented Sep 19, 2016 at 0:55
  • Why do you choose to map top left to back left of the machine? Is the machine symmetrical? If your decide to add text labels, what would they be? Commented Jun 16, 2017 at 11:05

3 Answers 3


Without knowing the original element being represented it is difficult to know if the picture is clear enough. But here is a thought that might be useful:

  • Give a (meaningful) instruction of how to look at the picture, specially if the object is symmetric. For example, architecture plans usually display a reference to where the North is. This is useful to know the exact position of the building and gives extra information such as which facades will receive sun and which not.

You are going against the patterns that are available in today's products. That's not a bad thing and you should do it if you think this can actually make the dent in the universe but you have to make sure that your target users are not struggling in learning all these things. Either find a way to teach them in a playful way which should be worth of course from the users' side or follow the patterns in such a way that it is easy for any user to understand and proceed further.

One Suggestion though : As it is hard and a big decision then I recommend you to keep the functions less in number and keep it minimal. Don't interrupt user continuously and try to gamify the product so that user can intentionally invest his time t learn the things.


Don Norman covers this concept in the Design of Everyday Things.

He calls it 'natural mapping': basically make the interface look like a mini version of the artifact it controls.

If you don't have The Design of Everyday Things on the shelf here's quite a nice summary which contains the cooker ring controls example (if you scroll down a bit):


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.