The product of our company is an engineering workflow platform for enterprises. In order to configure new projects in this platform, a great deal of configuration and modeling (product hierarchy etc.) needs to be done.

End-users don't do any configuration, they just perform tasks.

This is why our platform has two environments, and administrative one and an operational one, that are separated entirely. Currently, it's difficult to tell these environments apart. Same color scheme, same navigation layout (tabs).

My question: should we create explicit differences in styling so that the environments are more distinct? What is a best practice in this respect?

  • 1
    Does this cause problems to your users at the moment? easiest changes would be colour and logo with the environment next to it or something similar.
    – Igor-G
    Nov 8 '13 at 14:16
  • Why, it sounds like one group uses one and the other group uses the other. Why do you need to tell them apart? Nov 8 '13 at 19:12
  • @JamesJenkins or maybe there are "hybrid" users who use both (such as high level managers). Igor's suggestion of colours would be the easiest to implement.
    – jingtao
    Nov 9 '13 at 5:55
  • @JamesJenkins indeed, there will be hybrid users, e.g. project managers working in the operational environment, but also being able to administer their own projects.
    – t.hendr
    Nov 11 '13 at 8:51

I have a similar set up for a test environment and a production environment.

I found myself accidentally adding test data to the live database. So I wanted to make sure that it was easy to identify which server I was on. I could glance at the address bar, but it was too easy to forget. I wanted the differences to be minimal but obvious.

I chose to add a red corner banner and a red border that runs the full length of the page. All code is exactly the same for both environments. Whether or not the banner and border display is based on environment variables so it's easy to move files from test environment to production.

Here's a screenshot of the top right corner of the test site.

enter image description here

  • We used exactly the same system at a bank I worked at.
    – Fractional
    Nov 11 '13 at 11:45

The standard in my experience is to allow users select their own color based on log in ID. As you can see in this screen shot, I have admin and normal user access to 3 different versions of the same system (production, test & Development) for a total of 6 different access/environments. I have seen a few systems that don't allow for this, but most do.

In this particular application you use the same tool to log in with different ID for different levels of access. But you can still apply the same principle to your system. The additional benefit is that everyone has different levels of comfort with background color and readability by allowing them to choose, you empower the user to make their experience with your application more pleasant.

I personally use different tones of the same color for different levels of access in the different environments. Production admin is light green, while normal production is darker green. The end result is that by allowing users to select their own color then can pick which best fits for them.

enter image description here

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.