User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

Sign up
Here's how it works:
  1. Anybody can ask a question
  2. Anybody can answer
  3. The best answers are voted up and rise to the top

I have the following challenge:

I'm designing a web application that is supposed to manage IT components. Meaning - when the user creates an IT component in the application or updates an existing one, that component is also created/updated elsewhere in the IT system (and therefore can be accessed in other ways as well etc.). So this action has consequences in the 'real-world' of this IT system. On the other hand, I have very similar create/update actions on other IT entities in THE SAME application which do nothing but update the information about those entities only within the application. When these actions are performed nothing changes outside the application...

Obviously, this situation is a result of technical constraints but nevertheless it has to be represented in the UI so the users are aware of this difference.

How would you represent this difference? Do you have an example of solutions for similar situations? I've considered the obvious option of displaying messages, yet users tend to ignore those so I'm looking for something more intuitive and immediate...

share|improve this question
Do you mean that the same controls perform slightly different actions on different entities, or that you need to provide two different sets of controls for the different actions, and you're thinking about how to convey this difference on the controls? – Vitaly Mijiritsky Jul 20 '11 at 10:18
Can you give us a concrete example? – Patrick McElhaney Jul 20 '11 at 13:19
Not sure if I am understanding this? You can either be making changes to the component you are in or making changes to other components within the same system? An example would help. – Sheff Jul 20 '11 at 14:09
I can give an example: all these entities have a 'name' property. For some of them updating the value of this property will update the name in the application and elsewhere as well, and for other not - it will only update the value within the application. So this would mean that I have the same controls performing slightly different actions on different entities. – Olgaarsh Jul 24 '11 at 6:27
up vote 0 down vote accepted

If, as I understand it, you need to distingush between local changes and - so to speak - "saved" changes that impact elsewhere, would 2-d vs 3-d work. By this I mean making the more important changes - the ones that affect elsewhere - more 3-d than similar ones for local changes.

If the processes are similar, it is also important to keep the iconography similar, so something like this could highlight the more significance of the second.

share|improve this answer
That would work for buttons maybe, but in some cases these are text fields. Maybe the buttons to save these can look different... – Olgaarsh Jul 31 '11 at 7:21
The buttons to save are where the action happens. Similarly, the styling of the text boxes can be amended subtly in the same way, to highlight the significance of these. – Schroedingers Cat Jul 31 '11 at 9:08

FTP Clients might be a good place to look, as they have to differentiate between changes in local folders (which only affect the users's version of a file) and remote folders (which affect the live site).

If anyone thinks it worth exploring, I can take a look at some i have laying around and report back with screenshots.

share|improve this answer
That would be very helpful - thanks! – Olgaarsh Jul 24 '11 at 6:28

Just a thought - and something I used a decade ago in a similar application - have a cloud icon part of the "virtual" or information only buttons, and an icon of a building (we used an image that was simply a roof with four columns under it - sort of a representation of a bank, or official building, or the front of the Acropolis, for that matter...) to denote more "real/physical" items.

Users seem to grok it pretty quick which was which, without (much) explanation.

share|improve this answer

Like you have mentioned the distinction is very important.

It would be wise to provide a visual grouping of actions. Have some kind of a header for the groups with help or notes to describe the results of action.

share|improve this answer

This question made me think about source code management software, where there is an important difference between changes made to the local code (on a developer's computer) and changes that are committed and pushed back to the repository where other developers (and sometimes the shipped product) will be affected by the changes.

An explicit commit or 'take it live' step might be a good model for communicating a) when a change will have a real-world impact and b) that the user needs to take a special step to affect that change.

share|improve this answer
A visual decoration to indicate that a change isn't "published" yet would help reinforce this metaphor. – Alex Feinman Aug 29 '11 at 18:24
This would have been a good option if only the minority of actions required 'publish', yet this is the other way most actions affect the real world, i don't want the users to have to take an extra 'publish' step in each of these – Olgaarsh Sep 1 '11 at 6:33
Why not? I'm not trying to be antagonistic, but if the extra step makes things feel more certain the experience efficiency outweighs the click efficiency. Just a thought. – Todd Sieling Sep 1 '11 at 17:51

I agree with you, purely textual information is not enough here - as they can easily be overlooked, even by experienced users. Let me rephrase your problem: you need to do similar actions (verb) on different targets (object). How do we cope with this in real life?

The first principle here is the law of proximity: similar inputs are grouped together. On the panel of an cooker you often have the button for the stove at more distance than the hot plates. This additional distance allows us to see 2 groupings of input knobs: 1 and 4. Seeing 4 hot plates above, it is pretty clear which one is directed to which target.

Other possible distinctions are colors and shapes: remote controls often allow the same actions on different equipment. However, it is only when two remote controls ressemble too close that we can't decide which one is for which. Otherwise we quickly condition ourselves to recognize them (black => TV, grey => hi-fi).

Varying to many of those variables, however, will leave the impression that they are not similar anymore. That's why remote controls all look similar at the first glance: the number block, an on-off switch, and many other buttons.

Back to your application: You could code this difference by placement (as do the FTP clients), family of icons (e.g. black/white and colored) or background colors. Or different style of text inputs: 3D-style only if they modify network entities, for example. Or right-aligning the entered text in the inputs when they impact not only locally (which will feel a bit strange, but this strangeness could remind of the impact this potentially has.)

The most important thing here, probably, is to remain consistent. The contrast needs to be clear, and without exception. Otherwise it will more confuse than help. And if you can, ask your users how they talk about this difference: which terms, which metaphors do they use? How do they picture it in their minds? Do they have a clear understanding why your application needs to differentiate between those two "modes"? Etc.

share|improve this answer
This is a good option, yet any such graphical distinction requires text anyway, as this is a very specific difference, which has no commonly associated graphical appearance (such as grey for disabled). So I decided to go with using a different icon on the 'commit' button for such actions, and the explanation will appear on the button tooltip. – Olgaarsh Sep 1 '11 at 6:28
My point is: don't rely on text alone. Different Icon is a good start, yes. – giraff Sep 1 '11 at 7:25

I doubt that you will be able to solve this problem with just a visual design. If the users can get confused with what each action does, you might run into a lot of problems. The last thing you need is for the users to be always careful of what they change, and how each change will affect their "real world" environment.

Can you take a step back, and remove the actions that affect only information in the application. Is that even possible?

share|improve this answer
Sadly no...this is part of a technical limitation and so it's the way it must be... – Olgaarsh Sep 1 '11 at 6:30

Your Answer


By posting your answer, you agree to the privacy policy and terms of service.

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