UX/UI, Web Design

A design pattern that is currently growing more popular is the fixed position bar at the top of the page. Sometimes the bar stays the same throughout, sometimes the header morphs into a slimmer bar as you scroll down, sometimes a completely new bar appears.

For example, as you scroll down on the New York Times website, the top navigation bar shifts from displaying typical site-wide navigation to article specific controls, showing the title of the article, the share link, the comments link, as well as compressed site-wide links:

At the Forbes website, as the user scrolls down the page a fixed position bar appears at the top promoting links to other articles the reader may find interesting, as well as a drop-down site navigation menu, search and user controls:

While these bars may be useful, they take up vertical space, reducing the reading space the user has chosen for themselves by picking the size of their browser window. Additionally, information displayed on these bars does not do anything to aid the reading of the actual content, making the bar more of a nuisance than help.

An interesting way to solve the issue is to hide the bar when scrolling down, and show it when scrolling up. On mobile interfaces, where space is precious, this technique is used to hide chrome, such as Web browser controls, but it’s also a good pattern to use on the Web. For example,Medium has just updated their new navigation bar. As you scroll down, the bar goes away, but it can be revealed at any time by scrolling up. Here’s what it looks like:

Less annoying than bars that just sit there as you scroll down, and makes the menu easy to access without having to scroll up to the top of the page. Scrolling up won’t necessarily mean the user wants the navigation — they may just be scanning the content — but 100% of the people wanting the navigation will be scrolling up, making it a pretty good compromise.

View Original

Advertisements
Link

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s