I have seen a couple of websites using some css properties to make the navigation menu semi-transparent. I assume this has to do with giving the user a more continuous feel to the page scroll, but it seems to me that it is more distracting then creating a better user experience. I believe there are more downsides to positives, but are there any real usability design principles behind this?
I would believe the main reasoning behind this as you pointed out was to have a continuous flow as the user scans the page and allow it to blend with the design but another reason is to ensure the primary point of focus is the content of the site itself and not the navigation. There are a lot of apps which use this design to ensure the focus is on the content and the navigation is around only when you need it.
Two examples of apps which follow this layout are Angry birds and the kindle app. To quote this article about using semi transparent menu items :
Maximize the amount of screen real estate given to immersive content. In Angry Birds and the Kindle app, there are no app bars, tab bars, nor even the space typically devoted to the iPhone device status. This keeps the customer focused on the content and immerse in the activity.
Minimize navigation. The only navigation in Angry Birds is the "Pause" button. It's a semi-transparent button located in left top corner, out of the way. In the Kindle app, the only navigation is the semi-transparent overlay menu that appears when the user taps the middle of the screen. When the user is focused on the content or immersed in the activity, any buttons and navigation tools that do not directly relate to the activity not only take up precious real estate, but are also a source constant distraction. People are forced to consciously avoid the areas of the screen devoted to controls areas such as tabs and buttons, lest they be activated by accident. Any effort thus spent avoiding accidentally activating unwanted navigation detracts from the immersiveness of the activity.
Angry Birds
Kindle
For web browsing, if the page is very long - has a long content - then this would be advisable because it saves the user some time to scroll all the way up. In mobile applications is more commonly used for apps that handle text - reading.
Additionally there are 2 important points for this to work:
Contrast. In the example that you give above it shows a white font against a white bar with transparency. If you put a white font against a dark blue/black bar, you would realize that it will be more user friendly and it will distract less as the text will be clearly identified.
Playing with the amount of alpha is important.If you use 20% or 50%, it would have a big impact on the usability of the menu. Depending on the colours, this percentage will change but make sure that if you use these menus, you play with the alpha and compare which one works best for readability.
I do not like this implementation of transparent fixed header.
If you want to keep the header fixed, it means the things in the header are important. Then you go ahead and make it semi-transparent to make it harder to read? Counter-intuitive?
Even if I am able to focus on the content better (?) when I finally want to look at the header, I need to focus more to distinguish the menu items. Other option might be on hove opacity change, which still needs me to mouse over there to bring it up.
Overall, if you want a fixed header, use a proper (visible) one. If you do not have enough space:
Make it like the media controls on mobile devices, invisible when consuming media, but a click/movement to make it appear again.
Can make it a pop-up style menu. Only show a sliver of the menu by default, and when the user approaches the menu it spring out to be usable without scrolling all the way to the top.
Well, transparency is something that plays a vital role in a website process, as it established credibility with your target audience effectively. When it comes to navigation, transparency is needed to assist audience to port from one section to other. I would prefer a transparent navigation because it would ensure that my visitors don’t lose their way in middle of a web journey!
