How to display a distinction between actions which affect the 'real world' vs. actions that affect only the information in the application?

Question

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

Answer 1

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.

Answer 2

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.

Answer 3

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.

Answer 4

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.

Answer 5

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.

Answer 6

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.

Answer 7

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?