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:
Tenderapp header:
3 Answers
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.
answered Jan 10, 2012 at 9:57
