Can we transfer insights about user expectations from physical world UIs to online UIs?

Question

Are insights about user expectations (regarding visual consistency and visual hierarchy) in physical world UIs congruent with online UIs' user expectations?

---

Let me illustrate my question with an example of this UI component from the physical world: door handles.

When it comes to visual consistency, we can break it into the following parameters:

• size;
• shape;
• material
• colour;
• spatial position;
• type of mechanism.

Now let's think, if somebody changed door handles overnight, in our homes, would we have trouble using them:

• if size was changed >> I'd say not really, unless it was a significant change;
• if shape was changed >> I'd say not really, as long as the change was some artistic variation of the usual shape of a door handle; if it was a violation of the convention, I think, that'd be quite of a usability trouble;
• if material was changed >> might not even get noticed;
• if colour was changed >> might not even get noticed;
• if spatial position was changed >> e.g. put the door handle in the middle of the door, or half way above or below its usual position - quite heavy an issue!
• type of mechanism >> e.g. lever latch to a door knob >> serious issue, again.

(I am speaking about my personal UI expectations, of course and I am speaking hypothetically. If you have any difference here, please, share it in the comments.)

Now think about transferring these insights to buttons on a web page. If spatial positioning matters most in door handles, and shape and size have some importance, while colour doesn't matter, does the same hold true for buttons?

If you have ever tried this approach to design, what are your observations about validity of physical world UI expectations to online expectations?

Answer 1

The problem here is what you correlate between the real world and the computer GUI world.

I think a door handle and a button are not the same things among those worlds.

A door handle might not have an equivalent in a GUI even, in that it has similar implications as in the real world, i.e. the usage to "pull it down" (or "turn it") and not "push it".

You can of course compare a real world button with a computer button.

That is what the concept of analogy is all about. If you change the characteristics, which allow the analogy to be drawn, you effectively remove the helpfulness of analogy-thinking from your GUI.

GUIs are all about "usability with ease", because they are familiar to us as good as can be. And this familiarity is directly drawn from experiences the user brings along already when being confronted with a GUI. Those experiences are from the real world. So the GUI should resemble the real world.

You already identified that inconsistencies are prone to cause irritation on the user's side. Now additionally consider that a door knob or door handle has a very specific use case that is strongly correlated to physics and anatomy in the real world. If the door knob is at the same side as the hinges are, the door could not be swung open that easily. A handle or knob is very easy to use for our human hands and arms - A bird or dog for example would condemn your design of a door and such a design would be considered unsuitable (some dogs might manage a handle).

GUI elements are not directly bound to those limitations, but they should be to be easy-to-use. Therefore the GUI elements you can use are restricted from the get go: You need to find those elements which have a counterpart in the real world but also work the same way in the GUI world - IF you want to draw advantages from analogies.

To answer your quintessential question of congruency: Both worlds are not congruent to full extent and in any case. But there is a subset of elements which are. In GUIs you mostly focus on this subset and drop the rest being regarded as not helpful (for humans). And if you consider different users, young/elderly/impaired humans for example, this subset will also change. It is all about the intended users and their goal to achieve (by the provided functionality) primarily. The UI/GUI follows. Not the other way around.

Humans are very adapt and versatile thinkers. They will figure some strange UI design elements out how to use them to get to their goal, if they closely observe cause and reactions. But his cost "brain energy". Thinking costs energy. Therefore the famous idiom "Don't make me think" in GUI design.

If the GUI provides its functionality in a way the intended goal can be achieved in no time and with the least (brain) energy drained, this is considered a good/suitable GUI for the task at hand. Everything else might be something like a game, a playground or some skill test.