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...

  • 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? Commented Jul 20, 2011 at 10:18
  • 1
    Can you give us a concrete example? Commented Jul 20, 2011 at 13:19
  • 1
    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
    Commented Jul 20, 2011 at 14:09
  • 1
    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
    Commented Jul 24, 2011 at 6:27

7 Answers 7


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.

  • That would work for buttons maybe, but in some cases these are text fields. Maybe the buttons to save these can look different...
    – Olgaarsh
    Commented Jul 31, 2011 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. Commented Jul 31, 2011 at 9:08

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.

  • A visual decoration to indicate that a change isn't "published" yet would help reinforce this metaphor. Commented Aug 29, 2011 at 18:24
  • This would have been a good option if only the minority of actions required 'publish', yet this is the other way around...as 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
    Commented Sep 1, 2011 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. Commented Sep 1, 2011 at 17:51

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.


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.


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.

  • 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
    Commented Sep 1, 2011 at 6:28
  • My point is: don't rely on text alone. Different Icon is a good start, yes.
    – giraff
    Commented Sep 1, 2011 at 7:25

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.


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?

  • Sadly no...this is part of a technical limitation and so it's the way it must be...
    – Olgaarsh
    Commented Sep 1, 2011 at 6:30

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.