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.

Improve this question
6
  • Did you ever find the other two you were looking for?
    – DA01
    Commented 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.
    – Julia McGuigan
    Commented Apr 21, 2015 at 5:38
  • Well now you have us curious! Email the prof! :)
    – DA01
    Commented 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
    – Julia McGuigan
    Commented Apr 26, 2015 at 16:14
  • 1
    Answering your own question is encouraged if you feel it is good information. Go for it!
    – DA01
    Commented Apr 27, 2015 at 7:14

2 Answers 2

Reset to default
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
5
  • 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
    Commented Mar 20, 2015 at 22:15
  • I remember it being described to me like Hicks, Millers, or Fitt's law were described to me.
    – Julia McGuigan
    Commented 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
    Commented 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
    Commented Mar 21, 2015 at 5:26
  • That might be why I'm having Google-Fu issues. I'll update it.
    – Julia McGuigan
    Commented Mar 22, 2015 at 1:02

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.