User Experience Stack Exchange is a question and answer site for user experience researchers and experts. Join them; it only takes a minute:

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 was somewhat inspired by the Twitter login page, which has a nice "fullscreen" background picture on the login page. Here is what I did for my webserver:

enter image description here

Is using a fullscreen background with translucent input fields distracting or inappropriate? Are the input fields clear enough? How would usability be improved here?

share|improve this question

closed as too localized by Patrick McElhaney, Benny Skogberg, dhmstark, ChrisF, Matt Obee Jan 23 '13 at 16:23

This question is unlikely to help any future visitors; it is only relevant to a small geographic area, a specific moment in time, or an extraordinarily narrow situation that is not generally applicable to the worldwide audience of the internet. For help making this question more broadly applicable, visit the help center.If this question can be reworded to fit the rules in the help center, please edit the question.

Are you asking about this particular image / input field combination, or just background images showing behind fields in general? – JonW Jan 13 '13 at 15:04
This one in particular, although general considerations are also welcome. – Randomblue Jan 13 '13 at 15:12
We can't do reviews for individual sites / apps so I have made the question more generic so it serves more use to other people. If you want specific reviews of your examples then StackExchange isn't really the place for that. (perhaps it'd be OK in Chat maybe, but not the main question site) – JonW Jan 13 '13 at 15:55
I get your question but maybe you might consider how this question could be edited in order to be applicable to more than just your site's specific login screen - the question seems to be about this type of login screen, so maybe you can redirect discussion to that. – kontur Jan 19 '13 at 18:08
In this specific case, the contrast isn't high enough, hover in the bing example (in one of the answers) the contrast is much better (yet still needs improving). – Danny Varod Jun 3 '14 at 0:03
up vote 3 down vote accepted

I believe you should be fine. The reason being the login box is subtle enough to blend with the background design but also stands out due to its color scheme . The login call to action due to its deep blue color also works well against the lighter blue of the aurora borealis since its distinctive enough.However if you are going to constantly change your background image be careful that your form elements dont get lost against the login page background.

Bing overcomes this by ensuring there is significant contrast between the background image and the front text (and logo) as shown below:

enter image description here

I recommend looking at this link 10 colour contrast checking tools to improve the accessibility of your design for some tools which can help you determine how your background text stands out against your image (You will have to use a color picker to determine the background color since none of the tools support images) since I am unable to make out if the contrast is sufficient for them.

share|improve this answer
Seconded. The contrast doesn't look sufficient to me, so worth checking – Peter Jan 12 '13 at 15:00

It's nice, but I'm not sure there's enough focus on the input form. Try increasing the opacity of the form or reducing the luminosity of the image (the bright green stream is too potent in your current design).

Increasing the opacity of the form will also improve the readability of your field placeholder text.

share|improve this answer

It is quite clear and it doesn't distract. In fact, you can use this background image for not just branding purpose but also

-- show some new updates to your websites

-- tell some good statistics about your website

-- show promotion videos or images

share|improve this answer

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