I've observed this pattern in practice at many places now, websites put a small contrasting bar on the top of the page. What is the rationale behind it?

Readability header:

Readability.com header

Tenderapp header:

enter image description here

up vote 22 down vote accepted

I think it's part aesthetics - as @marcintreder suggests - and part visual anchoring. The horizontal bar is a cue that the page is scrolled all the way to the top - which is especially useful in "light"/"minimal"/"uncluttered" designs without so many other cues.

Can't think of any. It's probably aesthetics. Recently I've been split-testing top-bars of large eCommerce website. The reason was changes made due to visual aesthetics

Results:

  • top of the top bar wasn't making any statistically significant difference in conversion (cpc business model, large sample - more than 0,5 mln people), no matther if it was pale or dark, with high contrast;
  • bar splitting top bar from the content (contains breadcrumbs) was making difference in conversion (small in plus) if it has high contrast;

I think as @agib said, it anchors the top of the page, but I wonder whether it is also serving to create a visual separation from the toolbars and stuff at the top of browsers - it indicates that the page stuff starts here. On the sort of minimalist pages that you link to, this might be sigificant - on SE sites, there is a top header bar in a distinctive colour that serves the same purpose, as well as being the header for the site.

Your Answer

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.

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