In a web or screen-based GUI, when a user performs an interaction, or there is a state change triggered by another user or server processing, what are the parameters you can change given a specific UI element to denote that it is changed?

For example, a UI element such as a button state can have an "inactive" or "active" state.

What parameters are available, and what are the weighting on effectiveness and response time?

I've heard it cited as:

  • Position
  • Size
  • Rotation
  • Color

I think there are two more, and I'm not sure what weighting each one have or if it is a weighting or just an ordered list.

I'm not looking for a specific UI design, rather the psychological theory behind some UI designs. Having some Google-Fu problems.

  • Did you ever find the other two you were looking for?
    – DA01
    Apr 21, 2015 at 2:11
  • No. I guess I'll email the professor I learned it from? Maybe just flag for deletion and wipe it from my memory. Apr 21, 2015 at 5:38
  • Well now you have us curious! Email the prof! :)
    – DA01
    Apr 21, 2015 at 16:13
  • I got a response, she said I may have been remembering Bertin's Visual Variables. Her reference was in Designing Visual Interfaces by Mullet & Sano (1994). Here's one wiki article I found: infovis-wiki.net/index.php?title=Visual_Variables Apr 26, 2015 at 16:14
  • 1
    Answering your own question is encouraged if you feel it is good information. Go for it!
    – DA01
    Apr 27, 2015 at 7:14

2 Answers 2


Adding information I found that I originally posted in a comment.

I was thinking of Bertin's Visual Variables, which seems to originated from the French book, Jaques Bertin's Sémiologie graphique, referenced in reference was in Designing Visual Interfaces by Mullet & Sano (1994).

They are:

  • Position
  • Size
  • Shape
  • Value
  • Colour
  • Orientation
  • Texture

In addition to the ones you list:

  • Position
  • Size
  • Rotation
  • Color

You could list many, many more:

  • typeface
  • type/icon weight
  • brightness
  • contrast
  • pattern
  • animation
  • opacity
  • shadow/border
  • etc
  • 1
    This isn't really what I'm looking for. The design patterns I am looking for were based of a psychological study, and they were weighted and not necessarily tied to context-dependent items, such as text and animation. This helps, but I am going to need citations if I use this. Mar 20, 2015 at 22:15
  • I remember it being described to me like Hicks, Millers, or Fitt's law were described to me. Mar 20, 2015 at 22:18
  • @JordanMcGuigan Hmm...sorry, I'm not much help there. Sounds like a list some UX speaker put together.
    – DA01
    Mar 20, 2015 at 22:32
  • @JordanMcGuigan those aren't parameters used to differentiate UI elements. They are heuristics used for interaction design which have only a very loose connection to differentiating elements. If you are looking for something along the lines of hicks/millers/fitts you should rephrase the question.
    – tohster
    Mar 21, 2015 at 5:26
  • That might be why I'm having Google-Fu issues. I'll update it. Mar 22, 2015 at 1:02

Your Answer

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

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