3

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 '15 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. – Julia McGuigan Apr 21 '15 at 5:38
  • Well now you have us curious! Email the prof! :) – DA01 Apr 21 '15 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 – Julia McGuigan Apr 26 '15 at 16:14
  • 1
    Answering your own question is encouraged if you feel it is good information. Go for it! – DA01 Apr 27 '15 at 7:14
5

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
| improve this answer | |
1

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
| improve this answer | |
  • 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. – Julia McGuigan Mar 20 '15 at 22:15
  • I remember it being described to me like Hicks, Millers, or Fitt's law were described to me. – Julia McGuigan Mar 20 '15 at 22:18
  • @JordanMcGuigan Hmm...sorry, I'm not much help there. Sounds like a list some UX speaker put together. – DA01 Mar 20 '15 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 '15 at 5:26
  • That might be why I'm having Google-Fu issues. I'll update it. – Julia McGuigan Mar 22 '15 at 1:02

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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