How to indicate to visitors that they are using a test environment?

Question

We often release a test version of our web service to a select group of customers. This version of the web service normally has a few bugs and anomalies (database being reset every day) and we would like to remind customers that they are using a test environment.

What is the best way to tell visitors that they are using a test environment?

• A banner across the top of every page with a contrasting background colour and relevant words, e.g. This is a test environment.
• A watermark across the website
• A different colour background across the website
• A "Alpha" or "Beta" type label added to the web services logo?

What is the best practice here?

Answer 1

We use a number of factors to indicate this, including:

1. A URL that clearly indicates this. test.yourdomain.com or beta.yourdomain.com are my preferences.
2. A modified logo that includes the words "test" or "beta", whichever is clearer to whomever will be using the test version.
   
3. Change the colour of the header if you have one. This isn't particularly clear to most people, but it draws their attention to something being different from the non-test version which often leads them to noticing 1. or 2.
4. In some cases a coloured background is used, but I tend to avoid that as often the design is part of the test, and changing the background colour has a large impact on my ability to get useful feedback on UX as it relates to visual aspects.
5. A watermark is a better solution than 4. but it also has an impact on the design, so if you're testing parts of the visual UX or design, I would avoid this.

With only points 1-3 above, I have never had a problem with a user not realising that they are working on a test version, but then the users that I've worked with were typically very competent. If you choose your test users at random, then you may have to include 4. and/or 5.

---

As a side note, there are aspects that you wouldn't want performed on your live data that often need testing (such as deleting), and so it's often useful to create a separate environment with copies of the live data, that is stored separately. That way a user is free to try anything out without a risk of them damaging their live data.

Answer 2

An obvious and explicit label (in the banner is good) indicating that it's a test version, along with the different colored background to reinforce it and act as a reminder when the banner isn't visible.

Answer 3

I was in this same scenario. I also condidered a watermark at fullsize but it was to intrusive. After several trial an error I've ended up adding a "test ribbon" on the upper left corner. For me it was great because it ocuppies little space, it's near the menu so it's always visible and it's message is very clear.

Something like this:

Answer 4

In my company we

• simply use a HIGH CONTRAST text next to the Company's logo.
• have a different URL with ".test." in it..

It is mainly to help out developers to be honest, who jump between many tabs with the same looking page but they all go towards different databases and versions of the UI. We even have it for localhost. Production is the only clean one.